Gutenberg InnerBlocks predefined block supports

Your template for InnerBlocks has a small typo in supports: { classname: false } (it’s case-sensitive) and should be className: const MY_TEMPLATE = [ [ ‘my-block/icon’, { supports: { className: false } } ], … ]; The supports definition is correct in your my-block/icon block registration. Assuming your save() function handles <InnerBlocks.Content>correctly, with the className typo fixed, it should work. When in the Editor view … Read more

How to Add Container Div to Every Gutenberg-Block in WordPress

If someone also need this nowadays WordPress already has another filter that is easier to implement called render_block render_block Here is an example [php]function wporg_block_wrapper( $block_content, $block ) { if ( $block[‘blockName’] === ‘core/paragraph’ ) { $content = ‘<div class="wp-block-paragraph">’; $content .= $block_content; $content .= ‘</div>’; return $content; } elseif ( $block[‘blockName’] === ‘core/heading’ ) { … Read more

How do I use a Font Awesome icon for a custom Gutenberg block?

Success! I had to pass the viewBox attribute from the Font Awesome SVG file. The code below worked for me: [php]const iconEl = el(‘svg’, { width: 20, height: 20, viewBox: ‘0 0 512 512’ }, el(‘path’, { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 … Read more