block editor - How to display InnerBlocks in render callback

admin管理员组

文章数量:1278690

I have a block that copies the functionality of the "Columns" block. My problem is that I don't want to use the default save function, but use a callback function instead. As I'm using InnerBlocks my edit looks something like this

edit: ( props, setAttributes, className ) => {
.
.
.
<InnerBlocks
   template={ getColumnsTemplate( props.attributes.columns ) }
   templateLock="all"
   allowedBlocks={ ALLOWED_BLOCKS } />

By default, the save function outputs the content using this as return: <InnerBlocks.Content />

How should the render_callback function in php look like in order to display the InnerBlocks content?

Also if save returns null then the content I put inside block doesn't get saved.

I have a block that copies the functionality of the "Columns" block. My problem is that I don't want to use the default save function, but use a callback function instead. As I'm using InnerBlocks my edit looks something like this

edit: ( props, setAttributes, className ) => {
.
.
.
<InnerBlocks
   template={ getColumnsTemplate( props.attributes.columns ) }
   templateLock="all"
   allowedBlocks={ ALLOWED_BLOCKS } />

By default, the save function outputs the content using this as return: <InnerBlocks.Content />

How should the render_callback function in php look like in order to display the InnerBlocks content?

Also if save returns null then the content I put inside block doesn't get saved.

• block-editor

Share Improve this question edited Oct 4, 2021 at 8:47 Maguire 322 bronze badges asked Nov 5, 2019 at 22:42 Razvan CuceuRazvan Cuceu 24822 silver badges1414 bronze badges 1

• I'm not sure that server rendered blocks support nesting – Tom J Nowell ♦ Commented Oct 4, 2021 at 9:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

save (JS)

By default, the save function outputs the content using this as return: <InnerBlocks.Content />

This part is ok, you should still return <InnerBlocks.Content /> in your save function:

save: props => <InnerBlocks.Content />

Source

If you are using InnerBlocks in a dynamic block you will need to save the InnerBlocks in the save callback function using <InnerBlocks.Content/>

https://developer.wordpress/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

render_callback (PHP)

function render($attributes, $content)
{
    return $content;
}

Source

Whatever you return in save function is in $content variable of PHP render function`

https://github/WordPress/gutenberg/issues/6751#issuecomment-451550734

本文标签： block editorHow to display InnerBlocks in render callback