2

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.

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

1 Answer 1

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.org/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.com/WordPress/gutenberg/issues/6751#issuecomment-451550734

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.