InnerBlocks allows blocks to contain other blocks as children, creating nested block structures.<\/p>
import { useBlockProps, InnerBlocks } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks \/>\n <\/div>\n );\n}\n\nexport function Save() {\n return (\n <div { ...useBlockProps.save() }>\n <InnerBlocks.Content \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>InnerBlocks Props<\/h2>allowedBlocks<\/code><\/h3>Restrict which blocks can be inserted:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const ALLOWED_BLOCKS = [ 'core\/paragraph', 'core\/heading', 'core\/image' ];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In block.json:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image" ]\n}<\/code><\/pre><\/div>template<\/code><\/h3>Define default block structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/heading', { level: 2, placeholder: 'Title' } ],\n [ 'core\/paragraph', { placeholder: 'Description' } ],\n [ 'core\/image', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks template={ TEMPLATE } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>Nested templates:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
allowedBlocks<\/code><\/h3>Restrict which blocks can be inserted:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const ALLOWED_BLOCKS = [ 'core\/paragraph', 'core\/heading', 'core\/image' ];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In block.json:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image" ]\n}<\/code><\/pre><\/div>template<\/code><\/h3>Define default block structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/heading', { level: 2, placeholder: 'Title' } ],\n [ 'core\/paragraph', { placeholder: 'Description' } ],\n [ 'core\/image', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks template={ TEMPLATE } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>Nested templates:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Restrict which blocks can be inserted:<\/p>
const ALLOWED_BLOCKS = [ 'core\/paragraph', 'core\/heading', 'core\/image' ];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In block.json:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image" ]\n}<\/code><\/pre><\/div>template<\/code><\/h3>Define default block structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/heading', { level: 2, placeholder: 'Title' } ],\n [ 'core\/paragraph', { placeholder: 'Description' } ],\n [ 'core\/image', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks template={ TEMPLATE } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>Nested templates:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
In block.json:<\/p>
{\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image" ]\n}<\/code><\/pre><\/div>template<\/code><\/h3>Define default block structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/heading', { level: 2, placeholder: 'Title' } ],\n [ 'core\/paragraph', { placeholder: 'Description' } ],\n [ 'core\/image', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks template={ TEMPLATE } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>Nested templates:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
template<\/code><\/h3>Define default block structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/heading', { level: 2, placeholder: 'Title' } ],\n [ 'core\/paragraph', { placeholder: 'Description' } ],\n [ 'core\/image', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks template={ TEMPLATE } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>Nested templates:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Define default block structure:<\/p>
const TEMPLATE = [\n [ 'core\/heading', { level: 2, placeholder: 'Title' } ],\n [ 'core\/paragraph', { placeholder: 'Description' } ],\n [ 'core\/image', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks template={ TEMPLATE } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>Nested templates:<\/p>js<\/span><\/use><\/svg><\/button><\/div>const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Nested templates:<\/p>
const TEMPLATE = [\n [ 'core\/columns', {}, [\n [ 'core\/column', {}, [\n [ 'core\/image', {} ],\n ] ],\n [ 'core\/column', {}, [\n [ 'core\/heading', { level: 3 } ],\n [ 'core\/paragraph', {} ],\n ] ],\n ] ],\n];<\/code><\/pre><\/div>templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
templateLock<\/code><\/h3>Control template modifications:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Control template modifications:<\/p>
\/\/ No new blocks, can't remove\/reorder\n<InnerBlocks templateLock="all" \/>\n\n\/\/ Can reorder but can't add\/remove\n<InnerBlocks templateLock="insert" \/>\n\n\/\/ Can't reorder but can add\/remove (WordPress 6.3+)\n<InnerBlocks templateLock="contentOnly" \/>\n\n\/\/ No restrictions (default)\n<InnerBlocks templateLock={ false } \/><\/code><\/pre><\/div>Value<\/th>Add\/Remove<\/th>Reorder<\/th>Edit Content<\/th><\/tr><\/thead>false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
false<\/code><\/td>\u2713<\/td>\u2713<\/td>\u2713<\/td><\/tr>"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
"all"<\/code><\/td>\u2717<\/td>\u2717<\/td>\u2713<\/td><\/tr>"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
"insert"<\/code><\/td>\u2717<\/td>\u2713<\/td>\u2713<\/td><\/tr>"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
"contentOnly"<\/code><\/td>\u2713<\/td>\u2717<\/td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
orientation<\/code><\/h3>Set insertion orientation hint:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Set insertion orientation hint:<\/p>
\/\/ Horizontal layout (row)\n<InnerBlocks orientation="horizontal" \/>\n\n\/\/ Vertical layout (column) - default\n<InnerBlocks orientation="vertical" \/><\/code><\/pre><\/div>renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
renderAppender<\/code><\/h3>Customize the block appender:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Customize the block appender:<\/p>
import { InnerBlocks, ButtonBlockAppender } from '@wordpress\/block-editor';\n\n\/\/ Default appender button\n<InnerBlocks renderAppender={ InnerBlocks.DefaultBlockAppender } \/>\n\n\/\/ Button appender\n<InnerBlocks renderAppender={ ButtonBlockAppender } \/>\n\n\/\/ No appender\n<InnerBlocks renderAppender={ false } \/>\n\n\/\/ Custom appender\n<InnerBlocks\n renderAppender={ () => (\n <button onClick={ \/* insert logic *\/ }>\n Add Custom Block\n <\/button>\n ) }\n\/><\/code><\/pre><\/div>placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
placeholder<\/code><\/h3>Custom placeholder when empty:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Custom placeholder when empty:<\/p>
<InnerBlocks\n placeholder={\n <div className="my-placeholder">\n <p>Drag blocks here or click to add<\/p>\n <\/div>\n }\n\/><\/code><\/pre><\/div>defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
defaultBlock<\/code><\/h3>Default block type when pressing Enter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Default block type when pressing Enter:<\/p>
<InnerBlocks\n defaultBlock={ [ 'core\/paragraph', { placeholder: 'Type here...' } ] }\n\/><\/code><\/pre><\/div>directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
directInsert<\/code><\/h3>Skip inserter modal for single allowed block:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Skip inserter modal for single allowed block:<\/p>
<InnerBlocks\n allowedBlocks={ [ 'core\/paragraph' ] }\n directInsert={ true }\n\/><\/code><\/pre><\/div>prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
prioritizedInserterBlocks<\/code><\/h3>Prioritize blocks in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div><InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Prioritize blocks in inserter:<\/p>
<InnerBlocks\n prioritizedInserterBlocks={ [ 'core\/paragraph', 'core\/image' ] }\n\/><\/code><\/pre><\/div>useInnerBlocksProps Hook<\/h2>For more control over the wrapper element:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
For more control over the wrapper element:<\/p>
import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n allowedBlocks: [ 'core\/paragraph' ],\n template: [ [ 'core\/paragraph', {} ] ],\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>Separate wrapper and inner content:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Separate wrapper and inner content:<\/p>
export default function Edit() {\n const blockProps = useBlockProps();\n const { children, ...innerBlocksProps } = useInnerBlocksProps(\n { className: 'inner-content' },\n { allowedBlocks: [ 'core\/paragraph' ] }\n );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps }>\n { children }\n <\/div>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Save with separate structure:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Save with separate structure:<\/p>
export function Save() {\n const blockProps = useBlockProps.save();\n const innerBlocksProps = useInnerBlocksProps.save( {\n className: 'inner-content',\n } );\n \n return (\n <div { ...blockProps }>\n <header>Block Header<\/header>\n <div { ...innerBlocksProps } \/>\n <footer>Block Footer<\/footer>\n <\/div>\n );\n}<\/code><\/pre><\/div>Dynamic Blocks with InnerBlocks<\/h2>In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
In render.php, inner blocks content is available as $content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
$content<\/code>:<\/p>php<\/span><\/use><\/svg><\/button><\/div><?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
<?php\n\/\/ render.php\n$wrapper_attributes = get_block_wrapper_attributes();\n?>\n<div <?php echo $wrapper_attributes; ?>>\n <header class="block-header">\n <?php echo esc_html( $attributes['title'] ); ?>\n <\/header>\n <div class="inner-content">\n <?php echo $content; \/\/ Inner blocks HTML ?>\n <\/div>\n <footer class="block-footer">\n Footer content\n <\/footer>\n<\/div><\/code><\/pre><\/div>In render_callback:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
In render_callback:<\/p>
function render_my_block( $attributes, $content, $block ) {\n $wrapper_attributes = get_block_wrapper_attributes();\n \n ob_start();\n ?>\n <div <?php echo $wrapper_attributes; ?>>\n <div class="inner-content">\n <?php echo $content; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}<\/code><\/pre><\/div>Accessing Inner Blocks Data<\/h2>In JavaScript (Editor)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
import { useSelect } from '@wordpress\/data';\nimport { store as blockEditorStore } from '@wordpress\/block-editor';\n\nexport default function Edit( { clientId } ) {\n const innerBlocks = useSelect(\n ( select ) => select( blockEditorStore ).getBlocks( clientId ),\n [ clientId ]\n );\n \n const hasInnerBlocks = innerBlocks.length > 0;\n \n return (\n <div { ...useBlockProps() }>\n { ! hasInnerBlocks && <p>Add some blocks!<\/p> }\n <InnerBlocks \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>In PHP<\/h3>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
function render_my_block( $attributes, $content, $block ) {\n \/\/ Access parsed inner blocks\n $inner_blocks = $block->inner_blocks;\n \n foreach ( $inner_blocks as $inner_block ) {\n $block_name = $inner_block->name;\n $block_attrs = $inner_block->attributes;\n $block_html = render_block( $inner_block );\n }\n \n return '<div>' . $content . '<\/div>';\n}<\/code><\/pre><\/div>Conditional InnerBlocks<\/h2>Show InnerBlocks based on attributes:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Show InnerBlocks based on attributes:<\/p>
export default function Edit( { attributes } ) {\n const { showContent } = attributes;\n \n return (\n <div { ...useBlockProps() }>\n { showContent && <InnerBlocks \/> }\n <\/div>\n );\n}<\/code><\/pre><\/div>Multiple InnerBlocks Areas<\/h2>A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
A block can only have one InnerBlocks. For multiple areas, use nested blocks:<\/p>
\/\/ Parent block\nconst TEMPLATE = [\n [ 'my-plugin\/header-area', {} ],\n [ 'my-plugin\/content-area', {} ],\n [ 'my-plugin\/footer-area', {} ],\n];\n\nexport default function Edit() {\n return (\n <div { ...useBlockProps() }>\n <InnerBlocks\n template={ TEMPLATE }\n templateLock="all"\n \/>\n <\/div>\n );\n}\n\n\/\/ Each area block has its own InnerBlocks\n\/\/ my-plugin\/header-area\nexport function HeaderEdit() {\n return (\n <header { ...useBlockProps() }>\n <InnerBlocks allowedBlocks={ [ 'core\/heading', 'core\/image' ] } \/>\n <\/header>\n );\n}<\/code><\/pre><\/div>Layout Support with InnerBlocks<\/h2>Enable layout controls for inner blocks:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
Enable layout controls for inner blocks:<\/p>
{\n "supports": {\n "layout": true\n }\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
import { useBlockProps, useInnerBlocksProps } from '@wordpress\/block-editor';\n\nexport default function Edit() {\n const blockProps = useBlockProps();\n const innerBlocksProps = useInnerBlocksProps( blockProps, {\n \/\/ Layout is automatically handled via supports\n } );\n \n return <div { ...innerBlocksProps } \/>;\n}<\/code><\/pre><\/div>With default layout:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
With default layout:<\/p>
{\n "supports": {\n "layout": {\n "default": {\n "type": "flex",\n "flexWrap": "nowrap"\n }\n }\n }\n}<\/code><\/pre><\/div>Complete Example: Card Block with InnerBlocks<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "attributes": {\n "title": {\n "type": "string"\n }\n },\n "supports": {\n "color": {\n "background": true,\n "text": true\n },\n "spacing": {\n "padding": true\n }\n },\n "allowedBlocks": [ "core\/paragraph", "core\/heading", "core\/image", "core\/button" ],\n "editorScript": "file:.\/index.js",\n "style": "file:.\/style.css",\n "render": "file:.\/render.php"\n}<\/code><\/pre><\/div>js<\/span><\/use><\/svg><\/button><\/div>\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>
\/\/ edit.js\nimport { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress\/block-editor';\n\nconst TEMPLATE = [\n [ 'core\/paragraph', { placeholder: 'Card content...' } ],\n];\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { title } = attributes;\n const blockProps = useBlockProps( { className: 'card-block' } );\n const innerBlocksProps = useInnerBlocksProps(\n { className: 'card-content' },\n {\n template: TEMPLATE,\n templateLock: false,\n }\n );\n \n return (\n <div { ...blockProps }>\n <RichText\n tagName="h3"\n className="card-title"\n value={ title }\n onChange={ ( value ) => setAttributes( { title: value } ) }\n placeholder="Card Title"\n \/>\n <div { ...innerBlocksProps } \/>\n <\/div>\n );\n}<\/code><\/pre><\/div>js<\/span>