block-editor - Read For Learn

serverSideRender does not render “preview” html inside Gutenberg block

Ok, after spending the whole day searching and reading I found the solution. It seems that ServerSideRender should be de-structured from wp.components and NOT from wp.serverSideRender After replacing const { serverSiderRender: ServerSideRender } = wp.serverSideRender; with const { ServerSideRender } = wp.components; And // <serverSideRender <ServerSideRender block=”gutenberg-examples/example-dynamic” attributes={ props.attributes } /> All works fine now … Read more

How to view all currently registered block patterns?

This looks like quite new functionality, the docs say ‘experimental’ and the first commit of this code to the WP repo was 6 days ago from date of this writing, so wouldn’t be surprised if you’ll have issues with what you’re doing related to it being in development. The class that manages block patterns is … Read more

Building a Featured Gallery component for Gutenberg

In your GalleryImage const { withSelect } = wp.data; const { compose } = wp.compose; // You should define __ const { __ } = wp.i18n; In your FeaturedGallery You need to return the element, and set a key for the element (which is a list item): ( I also removed the index because it’s … Read more

Why is wordpress suddenly stripping away all newline characters and how to disable this?

I found the following snippet which we can add to functions.php . I’m adding these via a plugin. function clear_br($content) { return str_replace(“<br>”,”<br clear=”none”>”, $content); } add_filter(‘the_content’,’clear_br’); Note that I’ve put “<br>” tag which is what wordpress creates when you enter newline characters.

How Do I Prevent An Image From Automatically Adjusting In Guttenberg Block Gallery?

Gutenberg is applying a flex-grow: 1; to the items, which allow it to fill the space. You override this by pasting the following into your css. .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { flex-grow: 0; } Ideally, you do this in your theme, but if you urgently need this up, or if you … Read more

How to save post meta as an array in Gutenberg?

The problem in your code is that in the updateMeta() function, the value is a string (which is whatever you typed or entered into the text field), so you can’t do the value.one or value.two. So try this instead which uses a new parameter for the function, namely prop which is the current property in … Read more

React error #231with Custom Blocks after upgrade to WP 5.5

So I finally figured out the issue. It was a combo of needing to update the NPM packages and replace a few of the packages. Also removing the inspector component did the trick.

How to use __experimentalCaptureChildToolbar

https://github.com/WordPress/gutenberg/blob/2d7e6904cee90a92bf1fc60467d1c6bb03654656/packages/block-editor/src/components/inner-blocks/README.md#__experimentalcapturetoolbars Determines whether the toolbars of all child Blocks (applied deeply, recursive) should have their toolbars “captured” and shown on the Block which is consuming InnerBlocks. For example, a button block, deeply nested in several levels of block X that utilises this property will see the button block’s toolbar displayed on block X’s toolbar area. … Read more

Gutenberg : how can I get the title of the current block within its ‘edit’ function?

You can use wp.blocks.getBlockType() to get the block type’s settings. So if you’ve registered a block type with the name my-guten/foo-block, just run getBlockType( ‘my-guten/foo-block’ ) to get the block type’s title, icon, etc. const { registerBlockType, getBlockType } = wp.blocks; // Register a block type. registerBlockType( ‘my-guten/foo-block’, { … } ); // Get the … Read more

how to make has_block() see inside blocks too

It should, because has_block( ‘gallery’ ) uses source strpos() to determine if the post content has the <!– wp:gallery string.

+ More