Passing custom props to <InnerBlocks.Content/>

[ghost]

Is it possible to pass custom props to InnerBlocks/InnerBlocks.Content ? The below does not work. I want to send some props from my parent component to my child component.

<div {...useBlockProps.save()}>
    <InnerBlocks.Content myCustomProp={myCustomPropValue}/>
</div>

[fabiankaegy]

@Jonofat Instead of using the <InnerBlocks.Content /> component you can use the useInnerBlockProps.save() hook.

You can see an example of it here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query/save.js

The useInnerBlocksProps hook allows you to pass custom attributes to your components

[ghost]

Ah, thanks for the explanation!

I have tried this but am getting an error from this line according to console.

const innerBlocksProps = useInnerBlocksProps.save({ dataColumns: columns });

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'save')

[fabiankaegy]

2 questions:

Are you setting apiVersion to 2 in the registerBlockType function or block.json file?
Are you running the Gutenberg Plugin on your site? In WordPress core the useInnerBlocksProps function is still marked as experimental and needs to be imported like so:

import { __experimentalUseInnerBlocksProps as useInnerBlocksProps } from '@wordpress/block-editor';

[ghost]

Yes, in my block.json file I have set the api version to 2. Not sure what you mean by running the Gutenberg plugin on the site? The Gutenberg Editor is just standard with the latest version of WordPress I have installed but not sure if that is the same thing you are referring to.

After changing the import as per your code the error is gone! The last thing I think though is how to access the dataColumns object. In the child component when I console.log props I don't see it there?

[fabiankaegy]

Gutenberg itself is a Feature Plugin that you can install. This repository here on GitHub contains the latest code for this plugin.
Features that get developed in the plugin first then get released in WordPress Core whenever new versions are released. At the moment the useInnerBlocksProps hook is only stable in the Gutenberg Plugin and will be released as a stable API in WordPress 5.9.

And I'm sorry I misunderstood your question slightly. I thought your goal was to add a data attribute to the wrapping element so that you could use it on the frontend etc.

If you want to pass down attributes to child blocks you can do that through Block Context. You can find the documentation for that there: https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-context.md

[ghost]

Thanks, I will take a look at this but what I ended up doing in the meantime which is probably overkill for what I am trying to do is to use useSelect and useDispatch with my own redux store. So, if I update the number of columns in the parent component I get that value in the child component from redux. Would have been a lot nicer to just pass the number of columns value down with props but perhaps the Context example will be a better alternative.