block-editor - Read For Learn

Reset data when the field is cleared

That’s not how that component works. onRemove is called when the link is unlinked, via a button that only appears when certain conditions are met: { onRemove && value && ! isEditingLink && ! isCreatingPage && ( <Button className=”block-editor-link-control__unlink” isDestructive variant=”link” onClick={ onRemove } > { __( ‘Unlink’ ) } </Button> ) } https://github.com/WordPress/gutenberg/blob/6eac4a26f143c7378c3b39b5a83271538f36dfa9/packages/block-editor/src/components/link-control/index.js#L270 When … Read more

What’s the Right Way to get and save remote data for a Gutenberg block?

creating elements/innerblocks via rangecontrol

The code from core/columns and core/column blocks are a good example of how to achieve this behaviour. Basically we register 2 block types: Carousel and Slide. Slide block type does not appear in the inserter. Carousel block type is the root block which appears in the inserter. Instead of keeping the count of slides in … Read more

create blocks programmtically on theme activation

You can’t use block templates this way. They are used only by Gutenberg on client side (JavaScript) when new post content is created. In your case you are creating page on server side (PHP). However you can create pages with initial block structure. Create new page manually and save it without adding any content (there … Read more

How to link Gutenberg Gallery images To Media file automatically?

Finally by luck i found the answer by @Tomas function gallery_template_to_posts() { $post_type_object = get_post_type_object( ‘post’ ); $post_type_object->template = array( array( ‘core/gallery’, array( ‘linkTo’ => ‘media’, ) ), ); } add_action( ‘init’, ‘gallery_template_to_posts’ );

How to save a shortcode in a Gutenberg custom block?

What you are looking for is RawHTML to render on the front end. To use a player shortcode in the post you can use the code below remember that the edit function needs to mirror the markup for the save function for Gutenberg to validate the block. Include RawHTML: const { RawHTML } = wp.element; … Read more

What do the args for Gutenberg subpackage “hooks” function “doAction” mean?

I suggest to take a look at the tests file to see different ways of using hooks. They work similarly to PHP hooks, you can set several addAction and then one doAction with the name of the hook and other arguments. The first argument of doAction has to be the action name. Then you can … Read more

Why does the custom HTML block not preserve the HTML characters?

This is caused by wptexturize and the use of a standard <div> to contain your code. See https://developer.wordpress.org/reference/functions/wptexturize/ Instead, markup code as code: Text enclosed in the tags <pre>, <code>, <kbd>, <style>, <script>, and <tt> will be skipped. This list of tags can be changed with the no_texturize_tags filter. Note that the HTML block just … Read more

Align a custom block button by wrapping it in div

If you turned on script debugging or the SCRIPT_DEBUG constant in WordPress, then you would’ve noticed that your block type causes React to throw this warning: “Warning: React does not recognize the tagName prop on a DOM element.“, so when developing block types, you should enable script debugging — at least, you’ll know your code … Read more

WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback

+ More