Inner blocks: edit/save symmetry + stabilise API #26031
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ellatrix
added
the
[Feature] Block API
ellatrix
requested review from
ajitbohra,
mkaz,
Soean and
talldan
as code owners
|
Size Change: +107 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
ellatrix
added
the
[Type] New API
ZebulanStanphill
added
[Feature] Nested / Inner Blocks
|
@ellatrix I think we should also update the documentation of the Component itself here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/inner-blocks/README.md as part of this PR. I can take care of that once you rebased this pr if that works for you (y) |
ellatrix
force-pushed
the
try/inner-blocks-symmetry
branch
from
f3ce3f2
to
81a8c9e
Compare
ellatrix
requested review from
adamziel,
draganescu,
kevin940726,
mkevins,
noisysocks and
tellthemachines
as code owners
ellatrix
force-pushed
the
try/inner-blocks-symmetry
branch
from
efd7b73
to
69d544a
Compare
mkevins
reviewed
Sep 28, 2021
ellatrix
force-pushed
the
try/inner-blocks-symmetry
branch
from
69d544a
to
dfa5b25
Compare
ellatrix
force-pushed
the
try/inner-blocks-symmetry
branch
from
72e7db6
to
9b4c461
Compare
|
Thank you @ellatrix for all your work on this :) I really appreciate your work here and just want you to know that it is very much appreciated! Excited for this to be I. 5.9 :) |
anomiex
added a commit
to Automattic/jetpack
that referenced
this pull request
Nov 10, 2021
It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after.
anomiex
added a commit
to Automattic/jetpack
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>
matticbot
pushed a commit
to Automattic/jetpack-base-styles
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
matticbot
pushed a commit
to Automattic/jetpack-storybook
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
matticbot
pushed a commit
to Automattic/jetpack-identity-crisis
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
matticbot
pushed a commit
to Automattic/jetpack-boost-production
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
matticbot
pushed a commit
to Automattic/jetpack-connection-ui
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
matticbot
pushed a commit
to Automattic/jetpack-backup-plugin
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
matticbot
pushed a commit
to Automattic/jetpack-production
that referenced
this pull request
Nov 10, 2021
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
Dev Note Draft:Take more control over Inner Block Areas (as a block developer)Prior to WordPress 5.9 the only way to work with inner block was to use the With WordPress 5.9 we're introducing a new react hook called To use the hook, take the object returned from calling the hook and spread it onto the host element you want to render the inner blocks into. For example: function BlockEdit(props) {
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps();
return (
<section {...blockProps}>
<div {...innerBlocksProps} />
</section>
);
}The above code will render to the following markup in the editor: <section>
<div>
<!-- Inner Blocks get inserted here -->
</div>
</section>The hook also accepts two arguments:
useInnerBlocksProps( additionalWrapperProps, innerBlocksProps );Saving the inner blocksTo save inner blocks content there is a special variant of the hook, this is similar to the component-based approach that uses function BlockSave( props ) {
const innerBlocksProps = useInnerBlocksProps.save( { className: 'my-class' } );
return (
<section {...innerBlocksProps} ) />
);
}When you use the Why use hooks?The hooks allow for new options and nice enhancements. For example, you can take the object returned from the function BlockEdit(props) {
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps );
return (
<section {...innerBlocksProps} />
);
}<section>
<!-- Inner Blocks get inserted here -->
</section>Another benefit to using the hook approach is using the returned value, which is just an object, and deconstruct to get the react function BlockEdit(props) {
const blockProps = useBlockProps();
const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps );
return (
<section {...innerBlocksProps}>
{ children }
<!-- Insert any arbitrary html here at the same level as the children -->
</section>
);
}<section>
<!-- Inner Blocks get inserted here -→
<!-- The custom html gets rendered on the same level -->
</section>Example:
{
"apiVersion": 2,
"name": "example/block",
"title": "Example",
"category": "text",
"editorScript": "file:./index.js"
}
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import metadata from './block.json';
function BlockEdit(props) {
const blockProps = useBlockProps( { className: 'my-class' } );
const innerBlocksProps = useInnerBlocksProps(
blockProps,
{ allowedBlocks: [ 'core/heading', 'core/paragraph', 'core/image' ] }
);
return (
<section {...innerBlocksProps} />
);
}
function BlockSave(props) {
const blockProps = useBlockProps.save( { className: 'my-class' } );
const innerBlocksProps = useInnerBlocksProps.save( blockProps );
return <section {...innerBlocksProps} />
}
registerBlockType( metadata, {
edit: BlockEdit,
save: BlockSave,
} ) |
|
@fabiankaegy, great working putting this dev note together. It is nicely structured as each section builds on top of each other and includes nicely crafted examples. I don't know the new API fully but I find this explanation very informative 💯 One thing that would be worth explaining explicitly is that similar to how |
|
@gziolo Updated the comment with a new section called |
|
@fabiankaegy This looks good, thanks for taking the time to put it together. I edited the note above for clarity and wording in a couple spots (you can see a diff of the edits using the dropdown). It is good to publish to make/core, use the |
|
Thank you for the dev note @fabiankaegy! It looks great. |
loisthompson068
added a commit
to loisthompson068/jetpack-base-styles-wordpress-plugin
that referenced
this pull request
Sep 14, 2022
* Fix tweetstorm test for good It keeps flopping between 1 and 2, so accept either * Fix use of InnerBlocks.Content It looks like we were using it wrong, in a way that worked before WordPress/gutenberg#26031 but breaks after. Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: matticbot <matticbot@users.noreply.github.com> Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/1446415445
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Previously #25644 and #25633.
Fixes #35071.
This Replaces the
InnerBlocks.Contentcomponent with a functionuseInnerBlocksProps.savefor thesavecomponent so it's similar in use asuseInnerBlocksPropsin theeditcomponent. There's no need for an API version bump since both can be used, but the goal would be to eventually deprecateInnerBlocks.Content.The only instances that I didn't convert were dynamic blocks that have save functions that return only
<innerBlocks.Content />. I'm not sure what the reason is to return the inner blocks without a wrapper. I see some dynamic blocks that don't have a save function at all or that do have a wrapper div.How has this been tested?
Screenshots
Types of changes
Checklist: