Skip to content

Commit

Permalink
Documenting innerBlocks in save function (#66689)
Browse files Browse the repository at this point in the history
There is an undocumented property 'innerBlocks' of props passed to save function. This change attempts to document it with example of use.

Co-authored-by: Lovor01 <[email protected]>
Co-authored-by: gziolo <[email protected]>
  • Loading branch information
3 people authored Dec 23, 2024
1 parent c979084 commit 09eb60e
Showing 1 changed file with 26 additions and 1 deletion.
27 changes: 26 additions & 1 deletion docs/reference-guides/block-api/block-edit-save.md
Original file line number Diff line number Diff line change
Expand Up @@ -183,9 +183,34 @@ save: ( { attributes } ) => {
```



When saving your block, you want to save the attributes in the same format specified by the attribute source definition. If no attribute source is specified, the attribute will be saved to the block's comment delimiter. See the [Block Attributes documentation](/docs/reference-guides/block-api/block-attributes.md) for more details.

### innerBlocks

There is a second property in the props passed to the `save` function, `innerBlocks`. This property is typically used for internal operations, and there are very few scenarios where you would need to use it.

`innerBlocks`, when initialized, is an array containing object representations of nested blocks. In those rare cases where you might use this property,
it can help you adjust how a block is rendered. For example, you could render a block differently based on the number of nested blocks or if a specific block type is present..


```jsx
save: ( { attributes, innerBlocks } ) => {
const { className, ...rest } = useBlockProps.save();

// innerBlocks could also be an object - react element during initialization
const numberOfInnerBlocks = innerBlocks?.length;
if ( numberOfInnerBlocks > 1 ) {
className = className + ( className ? ' ' : '' ) + 'more-than-one';
};
const blockProps = { ...rest, className };

return <div { ...blockProps }>{ attributes.content }</div>;
};
```
Here, an additional class is added to the block if number of inner blocks is greater than one, allowing for different styling of the block.
## Examples
Here are a couple examples of using attributes, edit, and save all together.
Expand Down

1 comment on commit 09eb60e

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 09eb60e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12464593593
📝 Reported issues:

Please sign in to comment.