Introduce a UI for setting allowedBlocks in blocks that support it

[mtias]

Container blocks already support an allowedBlocks attribute in the markup to express what blocks can be inserted. This is a very cool feature that can allow site creators to provide highly usable flows without needing to create entirely custom blocks. It can be tedious to write by hand, though, so we could explore exposing UI for it in the Advanced panel. The interface should be similar to the block manager design.

Here's a prototype outlining an interface for managing allowed blocks. Essentially, we can use a secondary button with the label 'Manage':

And it opens up this modal providing the ability to search through the list and select with checkboxes.

• Searching (list filtration) works the same as in the preferences modal from the block manager.
• Order of blocks in the list is also the same.

✨ Mockup:

This can be way easier for users to recognize and easily scan the blocks they want to allow, and they're already used to this pattern (from the preference modal) so it's quite familiar.

Note: See also the discussion for an important added aspect of needing a way to differentiate between the state when all blocks are allowed, and when only a subset is. One suggestion is to add a subheading in the quick inserter, when only a subset is allowed.

✒️ And here's the figma file.

Props @seifeldinio for the design work.

[jasmussen]

Nice work, that looks good! I'll let others chime in with feedback if they have any, otherwise this sounds close to migrating to "Needs dev" territory. Thanks for contributing 👌

[jasmussen]

Following up on this one, given no pushback on the proposed approach, I've updated the original issue and added the "Needs Dev" label. Thank you and kudos to @seifeldinio for the work!

[mtias]

@jasmussen I think we need a way to communicate the status once certain blocks are allowed. From the mockup it seems the normal state (all blocks allowed) displays the same as a managed state (a few blocks allowed).

[jasmussen]

I think we need a way to communicate the status once certain blocks are allowed. From the mockup it seems the normal state (all blocks allowed) displays the same as a managed state (a few blocks allowed).

Here's a quick differentiation:

Essentially, when only a subset is allowed, we show a subheading—"Allowed blocks"—in the quick inserter.

[mtias]

@jasmussen this is not what I had in mind—the thing that is not clear is this element:

Once blocks are set I expect to see which ones are set without having to click "manage".

[jasmussen]

Ah thanks for chiming in. Something like this perhaps?