How to output child block attributes on a parent block

I have a custom Gutenberg block that contains a list of InnerBlocks (all the same known block), and I am trying to output the title attribute from each of those blocks in a list on the parent block. I'm trying to get values from the innerblocks and add them to an array attribute on the parent block, This is a simplified version of the parent block edit.js const Edit = ( props ) => { const { attributes: { childValuesArray …
Category: Web

404 in gutenberg autosave of a Custom Post Type with custom rest_namespace

I'm having some troubles with CPTs defined with custom rest_namespace at register_post_type. I keep getting an 404 error at the console. The error shows that the namespace is not being changed in autosave route. WP default namespace: wp/v2 Custom namespace defined: ek/v1 I dug into the core classes to find how Wordpress handle custom namespace. The WP_REST_Autosaves_Controler define the namespace using get_post_type_object at the __construct method: ... $post_type_object = get_post_type_object( $parent_post_type ); .... $this->namespace = ! empty( $post_type_object->rest_namespace ) ? …
Category: Web

Run the edit function of parent block when something changes in InnerBlocks

I have a Gutenberg block with a couple of inner blocks (using InnerBlocks from @wordpress/block-editor). In the edit function, I pull the attributes of all inner blocks and put them in an array. There is one case when it doesn't work. If I create a new inner block in WordPress admin, then change some settings inside this block, then not clicking anywhere else, click the "Update" button, the attributes of the last inner block will not be pulled because between …
Category: Web

Gutenberg for WooCommece Product Page in WordPress 6.0+

I wanted to enable Gutenberg for My Single Product Description so I followed this guide https://dev.to/kalimahapps/enable-gutenberg-edit function activate_gutenberg_product( $can_edit, $post_type ) { if ( $post_type == 'product' ) { $can_edit = true; } return $can_edit; } add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 ); function enable_taxonomy_rest( $args ) { $args['show_in_rest'] = true; return $args; } add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' ); add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' ); function register_catalog_meta_boxes() { global $current_screen; // Make sure gutenberg is loaded before adding the metabox if ( method_exists( $current_screen, …
Category: Web

Proxy External API request in PHP from Edit.js in Block Plugin

I'm working with a third-party API that has optional filters on their API. I'm creating a block where the user has two select elements in Edit.js that are displayed on the backend of the block. They can select filters, specialty, and location, these values are then stored in attributes. Once a user changes a select, I want to fire off a PHP request using these attributes passed to the PHP function that uses wp_remote_get() to build the proxy and dump …
Category: Web

Required (mandatory) Gutenberg block

Is there any way to force a Gutenberg block to be on every page of a post type? I tried to add a template on my page and it does almost what I need, but I can still remove my default blocks. The closest I've come is this: function ckt_mina_init_required_block() { // create a new page template (pages only) $page_type_object = get_post_type_object('page'); $page_type_object->template = [ [ 'core/group', [], [ // add a paragraph block for the page summary [ 'core/paragraph', …
Category: Web

Trigger wp-embed via JavaScript to refresh iframe preview?

I'm running WordPress 6.0 and using the Block Editor to enable content editors to paste links that generate the embed/iframe preview, as described here. I've noticed from time to time (i.e. erratically) the embed script doesn't seem to run, and the link remains as static text without converting into the iframe preview. I'm also using Swup.js to handle page transitions throughout the site, and I'm wondering if wp-embed has a method of some kind that I can hook into to …
Category: Web

Add php code to wp_print_scripts?

Is there a way to add inline php code to the editor using wp_print_scripts? I'm trying to find a way to display text from a php string into a value of input of a block. Here's my code: function shapeSpace_print_scripts() { ?> <?php $block_yt_url = 'test';?> <script> jQuery(document).ready(function ($) { let $yt_url = false; $(document).on( "click", '#yt_run .acf-button-group', function() { $(".editor-post-publish-button__button").hide(); $(".acf-block-body div div.acf-block-fields.acf-fields div.acf-field.acf-field-text.acf-field-6260f423f1666").css({'height':'inherit','padding':'16px 20px','overflow':'inherit'}); $(".acf-block-body div div.acf-block-fields.acf-fields div.acf-field.acf-field-text.acf-field-6260f423f1666").val(<?php echo $block_yt_url;?>); $('#yt_url .acf-input input').keyup(function(e) { if(e.keyCode == 13) { …
Category: Web

Remove 'type / to choose a block' placeholder

I'd like to remove the placeholder in an empty block 'type / to choose a block'. I often have empty spaces in my drafts as I'm writing and this placeholder clutters everything. I'd just like it empty. Is there a way to remove it with a filter?
Category: Web

Custom Gutenberg Block: How to return plain HTML with save(), without escaping?

I'm writing a custom Gutenberg editor block. When saving the block I can save simple HTML elements, like in the documentation: return wp.element.createElement('div', blockProps, 'Your block.'); However, I need to return some huge and complicated HTML that I cannot produce in that way. To give you an impression: <div class="wrapper"><svg class="some-svg-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 600" xml:space="preserve" aria-labelledby="catTitle catDesc" role="img">...<g>...<path>...</svg></div> When I return this as a string, it will be escaped. How can I prevent escaping …
Category: Web

Disable device preview options in the block editor

In a recent update to WordPress, the following responsive device preview system was added to the Block Editor: Easy to hide them via: .block-editor-post-preview__button-resize { display: none; } But, how can we disable this feature so when you click on the preview button, it opens up a front-end preview of the post on a new tab. Just as it used to be.
Category: Web

Gutenberg default attributes are empty when accessing in edit

I'm quite new to Gutenberg and Wordpress and facing some issues with my attribute. When I'm trying to output the attribute data it is returning an empty object. Not quite sure why the default values aren't being applied? Thanks in advance! registerBlockType("mt/product-listing", { title: "Product", icon: "edit-page", category: "design", attributes: { content: { type: 'string' } }, ..., And when trying to access in edit: edit: (props) => { // Accessing props console.log("Edit", props); return ( <div> <Products product={props.attributes} /> …
Category: Web

Gutenberg selecting child blocks directly from appender

I created a block that uses inner blocks/child blocks. The parent block is named Columns and only child blocks named Column are allowed in it. The Column child block accepts any blocks. The structure looks like this: <Columnns> <Column><Any block></Column> <Column><Any block></Column> <Column><Any block> <Another block> <One more block></Column> </Columns> In the edit function for the child Column block, I am just using an inner blocks appender that allows any blocks to be added in it. The edit function for …
Category: Web

Draggable item in custom gutenberg block

I'm developing some custom blocks in the new Gutenberg editor experience, and I'm struggle to understand how to use some build-in components, mostly the Draggable components. What I would like to achieve is a list of items (let's say many li in a ul) and I want them to be orderable with a drag & drop feature. Here is my code: import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { Draggable, Dashicon } from '@wordpress/components'; …
Category: Web

Set Button in PluginDocumentSettingPanel Content (Wordpress Gutenberg)

I'm trying to create a new panel in the edit-post sidebar (Wordpress Gutenberg), I already managed to set the panel with the title and the text in the content part but I need to add a button there and no I find a way to do it. var registerPlugin = wp.plugins.registerPlugin; var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; // var btn = wp.element.createElement( 'button' ); var el = wp.element.createElement; var __ = wp.i18n.__; /* I tried to do it with a function, but …
Category: Web

ServerSideRender not rendering in block editor, but output is in "apiFetch"

I'm building a dynamic block. All seems to be working fine, except it isn't actually rendering the block in the editor. It is doing something, because if I inspect the page source in the editor, the content that should be being rendered is on the page, but it's inside of an apiFetch: <script id="wp-api-fetch-js-after"> ... wp.apiFetch.use(..."content":{"raw":" \\my html is here ","protected":false,"block_version":1}, ... My edit code looks like this: import ServerSideRender from '@wordpress/server-side-render'; import { useBlockProps } from '@wordpress/block-editor'; export default …
Category: Web

How do I include and iframe in a Custom Block?

Given the html block tag I can include and iframe from Google My Maps in my post. I need to create a block where the client can paste the URL from the embed code and the block render the iframe. note: "embed code" does not mean using the embed tag, but that is what the iframe code is called to embed the map on a web page. I have attempted with Genesis Custom Blocks but it will not render the …
Category: Web

Gutenburg: Remove border of selected block

I am writing a plugin that creates a custom block. When the block is selected/focused in the editor, a border is created abound it (blue in the current version of WP). I would like to disable the border for the specific block type, either in JavaScript or CSS. The problem is that the block content in the editor is wider than the block border, so it looks awkward. What would be a good solution? EDIT (further explanation): The content of …
Category: Web

How to Add a Container Class to Standard Gutenberg Blocks

I am using ACF fields to create custom Gutenberg Blocks. I am running into an issue however where I need to go in and out of a container div depending on the block. So I cant just add a container div around the_content(); What I'm trying to do is add a class to each of the standard Gutenberg blocks, so I can add the container styles to each of those blocks, making it easier to go in and out of …
Category: Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.