Define Nav block allowed inner blocks via block supports mechanism #32426
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
getdave
added
[Block] Navigation
|
Size Change: +781 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
|
This was designed to define which items should show in the inserter. |
draganescu
reviewed
Jun 3, 2021
getdave
force-pushed
the
try/define-allowed-blocks-via-block-supports
branch
from
316062f
to
20e0a7b
Compare
talldan
reviewed
Jun 10, 2021
| @@ -72,7 +72,15 @@ | |||
| "__experimentalFontFamily": true, | |||
| "__experimentalTextDecoration": true | |||
| }, | |||
| "color": true | |||
| "color": true, | |||
| "__experimentalAllowedBlocks": [ | |||
There was a problem hiding this comment.
I wonder if it should be part of supports or just a normal block property. 🤔
| @@ -84,7 +77,7 @@ function Navigation( { | |||
| className: 'wp-block-navigation__container', | |||
| }, | |||
| { | |||
| allowedBlocks: ALLOWED_BLOCKS, | |||
| allowedBlocks, | |||
There was a problem hiding this comment.
If it's specified in the block.json, my feeling is a block developer shouldn't have to add some logic to the block edit function. Is there a way to make it work without it having to pass it through as a prop?
There was a problem hiding this comment.
Yeh I mean this implementation is pretty naive and rough. More a POC really.
That said, if we wanted to pursue this API we could intercept the allowedBlocks here in InnerBlock and get the block support to determine the value.
gutenberg/packages/block-editor/src/components/inner-blocks/index.js
Lines 37 to 41 in f3ad70f
I'm unsure how we'd determine priority between
allowedBlockspassed toInnerBlockdirectly as a prop.- the
allowedBlockssetting inblock.json.
I guess always honour #1 and expect block developers not to use both?
There was a problem hiding this comment.
I imagine block.json could override the prop, with the prop deprecated.
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
In #30007 we are discussing how best to enable/remove features of the Nav block to make it easier for the Nav Editor screen to configure the block (via some unknown mechanic).
This PR is a PoC to explore if/how it's possible to customise the blocks that are allowed as child blocks of the Nav block using the block supports mechanic.
This area is largely unknown to me at this stage so the PR will evolve as my understanding grows.
Currently, it uses a new field called
__experimentalAllowedBlocksinblock.jsonto define which blocks are allowed as child blocks. This is then used in the block'sedit.jsto define which blocks are passed asallowedBlocksto<InnerBlocks>.Problems
parentinblock.jsoncauses theallowedBlocksprop of<InnerBlocks>to be ignored. Seecore/navigation-linkandcore/home-linkwhich both specifycore/navigationasparentand are therefore always shown in the inspector.How has this been tested?
packages/block-library/src/navigation/block.json.__experimentalAllowedBlocksfield and note the available blocks.block.jsonremove a block from the list (which does not haveparentdefined in its ownblock.json. Why? Because currently defining aparentwill overide theallowedBlocksAPI ofInnerBlockswhich will mean it will always appear no matter what blocks we list here). I'd recommend removingcore/social-linksas this does not define aparentfield in itsblock.json.Note if you try removing other blocks you will find they remain in the inserter. To make this work you'll need to find the block in question (eg:
core/navigation-link) and find itsblock.jsonfile and remove theparentfield entry. Once you reload you'll find the__experimentalAllowedBlocksAPI is now working as expected.Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).