diff --git a/docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md b/docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md index 27d6087cabfb2..2a3137782fb07 100644 --- a/docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md +++ b/docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md @@ -7,6 +7,31 @@ Note: A single block can only contain one `InnerBlock` component. Here is the basic InnerBlocks usage. {% codetabs %} +{% ESNext %} +```js +import { registerBlockType } from '@wordpress/blocks'; +import { InnerBlocks } from '@wordpress/block-editor'; + +registerBlockType( 'gutenberg-examples/example-06', { + // ... + + edit: ( { className } ) => { + return ( +
+ +
+ ); + }, + + save: ( { className } ) => { + return ( +
+ +
+ ); + }, +} ); +``` {% ES5 %} ```js ( function( blocks, element, blockEditor ) { @@ -39,36 +64,11 @@ Here is the basic InnerBlocks usage. window.wp.blockEditor, ) ); ``` -{% ESNext %} -```js -import { registerBlockType } from '@wordpress/blocks'; -import { InnerBlocks } from '@wordpress/block-editor'; - -registerBlockType( 'gutenberg-examples/example-06', { - // ... - - edit: ( { className } ) => { - return ( -
- -
- ); - }, - - save: ( { className } ) => { - return ( -
- -
- ); - }, -} ); -``` {% end %} ## Allowed Blocks -Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the that can be included only to those listed, all other blocks will not show in the inserter. +Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the that can be included only to those listed, all other blocks will not show in the inserter. ```js const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ]; @@ -84,7 +84,7 @@ const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ]; Use the template property to define a set of blocks that prefill the InnerBlocks component when inserted. You can set attributes on the blocks to define their use. The example below shows a book review template using InnerBlocks component and setting placeholders values to show the block usage. {% codetabs %} -{% ES5 %} +{% ESNext %} ```js const MY_TEMPLATE = [ [ 'core/image', {} ], @@ -94,17 +94,16 @@ const MY_TEMPLATE = [ //... - edit: function( props ) { - return el( - InnerBlocks, - { - template: MY_TEMPLATE, - templateLock: "all", - } + edit: () => { + return ( + ); }, ``` -{% ESNext %} +{% ES5 %} ```js const MY_TEMPLATE = [ [ 'core/image', {} ], @@ -114,12 +113,13 @@ const MY_TEMPLATE = [ //... - edit: () => { - return ( - + edit: function( props ) { + return el( + InnerBlocks, + { + template: MY_TEMPLATE, + templateLock: "all", + } ); }, ``` @@ -129,7 +129,7 @@ Use the `templateLock` property to lock down the template. Using `all` locks the ### Post Template -Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks. +Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks. The `InnerBlocks` template is for the component in the single block that you created, the rest of the post can include any blocks the user likes. Using a post template, can lock the entire post to just the template you define.