• Nested blocks, inner blocks

Nested blocks is an approach in which we can create blocks that can hold other blocks inside them, this way we can create some complex UI structures.

The blocks residing under a parent block are known as inner blocks, it is super easy to add InnerBlocks in WordPress, they provide an component InnerBlocks in the package @wordpress/block-editor that can be used to add inner blocks.

import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

const Edit = () => {
	const blockProps = useBlockProps();
	return (
		<>
			<h1 {...blockProps}>Hello from here!</h1>
			<InnerBlocks allowedBlocks={['core/heading', 'core/image']} />
		</>
	);
};

export default Edit;

import { InnerBlocks } from '@wordpress/block-editor';

const Save = () => {
	return (
		<>
			<h1> Hello from here!</h1>;
			<InnerBlocks.Content />
		</>
	);
};

export default Save;

We will be updating our blocks edit and save scripts to add the inner blocks

The InnerBlocks component takes allowedBlocks as props where we can provide an array of block allowed to be inserted in our inner blocks position.

This gives a way to create flexible layouts, add optional blocks and display them on frontend!

The block.json file contains metadata about our block, it also contains values for the scripts and styles files.

We don’t have to enqueue them as when we call the wp_register_block_type() function, they are enqueued in that.

I could not find any direct reference to the functions like wp_enqueue_scripts() or wp_enqueue_styles() inside the definition of register_block_type() function but it does parse the json metadata of block and created handles for the scripts and styles

I will have to look through more to get how it is done, but I am sure the scripts and styles are getting loaded automatically.

What about i18n ? , for JS use the package wpi18n provides similar functions like __() to make the static string translatable, but the actual translation it takes from the server so for this to work we will have to load the text domain of our plugin and add the i18n in the scripts files.

As we are using JSON format, WordPress has inbuilt function wp_json_file_decode that is used to get our metadata from block.json file, then the properties are mapped with a predefined associative array, similar to like the parse args,

A loop runs that registers the scripts and styles using the functions register_block_script_handle and register_block_style_handle

Also, if our block is supposed to be dynamic then we also have to provide a callback to render the the block, that is registered in the function.

The Settings array holds all the details about our blocks.

useBlockEditingMode

Allows a block to restrict the user interface that is displayed for editing that block and its inner blocks.

useBlockProps

const blockProps = useBlockProps();
	
	return (
		<>
			<h1 {...blockProps}>Hello from here!</h1>
		</>
	);
};

This is very important, using it we can mark our element as block so that it gets similar styling, block editing experience as the other blocks

useSetting

Hook that retrieves the given setting for the block instance in use.