Option 1: InnerBlocks component
index.js:
import { InnerBlocks } from '@wordpress/block-editor';
registerBlockType( metadata.name, {
edit: Edit,
save: props => { return <InnerBlocks.Content /> }
):render.php:
<?php echo $content; ?>
in edit.js:
return ( <InnerBlocks { ...blockProps } /> )Option 2: useInnerBlocksProps hook
This allow more control on the editor site. In edit.js:
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
export default function Edit( { attributes, setAttributes } ) {
const MC_TEMPLATE = [
[ 'core/image', {} ],
[ 'core/paragraph', { content: 'Text content' } ]
];
const blockProps = useBlockProps( { className: 'sim-slide sim-slide-single-editor' } );
const innerBlocksProps = useInnerBlocksProps(
blockProps,
{ template: MC_TEMPLATE },
);
return (
<div { ...innerBlocksProps } />
);
}Source: