Restricting core block nested blocks

admin管理员组

文章数量:1122832

I've been trying to figure out if it's possible to restrict the innerblocks available in some of the core block. Right now I'm looking to restrict what can be used inside core/media-text and core/column. I have yet found a way to do this.

Before I plan on building out custom version of my own I thought I would ask and see if anyone knows of a way to do this that I haven't come across yet. I'd prefer to use the core block if possible.

I've been trying to figure out if it's possible to restrict the innerblocks available in some of the core block. Right now I'm looking to restrict what can be used inside core/media-text and core/column. I have yet found a way to do this.

Before I plan on building out custom version of my own I thought I would ask and see if anyone knows of a way to do this that I haven't come across yet. I'd prefer to use the core block if possible.

• block-editor

Share Improve this question edited Mar 20, 2023 at 17:02 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Mar 20, 2023 at 15:45 TidusInAtlantisTidusInAtlantis 3111 bronze badge 7

• You can filter Core blocks, but since allowed blocks are controlled inside the JS itself, you would basically have to take over each block's entire edit function. Since that is likely to be some pretty extensive code, it's probably preferable to create your own parent blocks and completely unregister the Core blocks. – WebElaine Commented Mar 20, 2023 at 16:51
• Thanks @WebElaine, that was sorta what I was expecting at this point. If I have to heavily modify the edit part of the block i'll just do it myself and not worry about future updates. It would be nice if core blocks made it easier to create an individual allowed list. – TidusInAtlantis Commented Mar 20, 2023 at 17:21
• you don't have to take over the blocks edit component, it's enough to filter the definition of the block on registration. Note that what you're asking for will cripple any block theme, as well as most block patterns in the inserter. @TidusInAtlantis it would be super helpful to know why you want to do this and what you plan to achieve by doing it, normally when people run into problems like this it's because they've misunderstood something or they're unaware of a feature/system that fixes the original problem by other means – Tom J Nowell ♦ Commented Mar 20, 2023 at 17:43
• @TomJNowell I'm just looking to determine whether or not I can restrict innerblocks on specific core blocks without having to rewrite the edit function. Take the media-text block as an example. Love the block, love the functionality, but have no interest in letting our user insert a 3 column block inside the text portion of the media text block. I think a column block inside a narrow area in the media text block is just bad design, I am trying to determine if I can do anything around restrictions before I make the decision for our team to just build versions of our own and have full control – TidusInAtlantis Commented Mar 20, 2023 at 17:49
• true but that's solvable with plain CSS, and as I said, you don't have to touch the edit component at all, blocks can declare what children they support and even what parent they support entirely in JSON/settings, not just the props of the innerblocks component. Note that the scenario you envisaged can be reproduced entirely using columns, and theme.json goes a long way towards remedying these kinds of problems by defining the various layout options. Overriding something as fundamental as columns is likely to have big consequences if you don't update it on every release – Tom J Nowell ♦ Commented Mar 20, 2023 at 18:34

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 2

Like TidusInAtlantis pointed out with the GitHub PR reference, it is possible to use block filters. Here is an example of how to restict the blocks allowed in core/columns.

import { addFilter } from '@wordpress/hooks';
        
addFilter('blocks.registerBlockType', 'your/namespace', function (settings, name) {
                if (name !== 'core/column') {
                    return settings;
                }
            
                return {
                    ...settings,
                    attributes: {
                        ...settings.attributes,
                        allowedBlocks: {
                            type: 'array',
                            default: [
                                'core/paragraph',
                                'core/image',
                                'core/heading',
                                'core/separator',
                                'core/buttons',
                            ],
                        },
                    },
                };
            });

For anyone looking for something similar I came across this in a PR - https://github.com/WordPress/gutenberg/pull/31326#pullrequestreview-781388981

This filter setup has worked for any block that I've tried that has allowedBlocks set as an array in the block.json file.

本文标签： Restricting core block nested blocks