5.9 beta - FR - Allow support for AllowedBlocks

[JiveDig]

TY so much for considering InnerBlock support Elliot! Initial testing now and first impressions are great.

Feature Request: It would be great to limit nested blocks to specific other blocks - thinking columns wrap with a column block here, but many use-cases will present themselves.

https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/#allowed-blocks

When i try versions of this <InnerBlocks allowedBlocks={ 'core/image' } /> in my callback/template I get this error:

[elliotcondon]

Hi @JiveDig

I've got good news to report on this topic 🙌. The <InnerBlocks /> component attributes such as "allowedBlocks", "template" and "templateLock" are already supported in version 5.9.0-beta1.

To pass an array via HTML attribute, please use a combination of esc_attr() + wp_json_encode( [...] ) as shown in the following working example:

acf_register_block_type( array(
	'name'		=> 'test_allowed_blocks',
	'title'		=> 'Test Allowed Blocks',
	'description'	=> 'A test block.',
	'category'	=> 'formatting',
	'mode'		=> 'preview',
	'supports'	=> array(
		'__experimental_jsx' => true
	),
	'render_callback' => function(){
		$allowed_blocks = array( 'core/image', 'core/paragraph' );
		echo '
		<div class="test-allowed-blocks">
			<InnerBlocks allowedBlocks="' . esc_attr( wp_json_encode( $allowed_blocks ) ) . '" />
		</div>';
	}
));

👨‍💻 For more info on the InnerBlocks component: https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

[elliotcondon]

And here's a working example of the "template" and "templateLock" attributes:

acf_register_block_type( array(
	'name'				=> 'test_template',
	'title'				=> 'Test Template',
	'description'		=> 'A test block.',
	'category'			=> 'formatting',
	'mode'				=> 'preview',
	'supports'			=> array(
		'__experimental_jsx' => true
	),
	'render_callback'	=> function(){
		$template = array(
			array( 'core/paragraph', array(
				'placeholder' => 'Add a root-level paragraph',
			) ),
			array( 'core/columns', array(), array(
				array( 'core/column', array(), array(
					array( 'core/image', array() ),
				) ),
				array( 'core/column', array(), array(
					array( 'core/paragraph', array(
						'placeholder' => 'Add a inner paragraph'
					) ),
				) ),
			) )
		);
		echo '
		<div class="test-allowed-blocks">
			<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '" templateLock="all" />
		</div>';
	}
));

👨‍💻 The templateLock attribute may not be working 100% as expected and more testing will need to be done with this WP component.

[CreativeDive]

@elliotcondon Thanks for your work. Is there also a way to remove specific types of blocks from the inserter?

[elliotcondon]

@CreativeDive I don't believe the InnerBlocks component provides a "denyBlocks" property, but this would be a great idea to pass onto the WP devs!

[JiveDig]

This is working really well for me. Thanks so much for the example code. I'm going to close this.

[cmbibby]

Just a note with the above example, I was having an issue where the block would be rendered fine in the editor but not the front-end.

Changing

<innerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '" templateLock="all" />

To

<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '" templateLock="all" />

(capital I on InnerBlocks) sorted it.

[elliotcondon]

@cmbibby Yes. The uppercase is very import here to distinguish the element as a JSX component.
We do have the option to allow for a case-insensitive tolerance, what do you think?

[JiveDig]

I say keep it one way, so code examples moving forward are consistent. Easy to debug if someone does case wrong.

[cmbibby]

Yeah I think keep the JSX elements pascal case to avoid confusion. Will be easier to distinguish between html and jsx that way too.

[elliotcondon]

Thanks guys 👍. I agree with this direction. PascalCase it is.