Inserter browse all shows non-allowed blocks in InnerBlocks

[traed]

Description

What works:

• Create a custom block with a set of allowed blocks in its block.json
• Insert the custom block into a post
• Click on the block appender, the allowed blocks show up in the popover

What doesn't work correctly:

• Click on "Browse all" in the block appender popover. This sidebar shows all blocks available to the post. Selecting one block here inserts it into inner blocks area even though it's not allowed. Hover over one block here displays the highlight outside the parent block.
• Typing / to search for blocks in an inner blocks area also shows all shows all blocks available to the post.

Expected:

• Only allowed blocks should be visible from the context of an inner blocks area.

Step-by-step reproduction instructions

1. Create a custom block with a set of allowed blocks in its block.json
2. Insert the custom block into a post
3. Click on the block appender, then "Browse all".
4. All blocks available to the post shows up, not just the allowed blocks.

Screenshots, screen recording, code snippet

Repo with example plugin: https://github.com/traed/inner-blocks-bug

Environment info

• WordPress 6.6.1
• PHP 8.2

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[talldan]

It's definitely buggy, but I can't reproduce the exact same thing as what was reported. For me, as soon as I click 'Browse All' it seems to lose track of where the block should be inserted and instead shows blocks that can be inserted after the container instead of within the container block. It also inserts them after instead of within.

Then when I try to select an inner block with the inserter open, the inserter itself glitches. The differences I'm seeing might be because I'm testing trunk instead of 6.6.1.

Here's a screencap showing that (I changed the buttons block so that it also allows a paragraph and removed directInsert to test it):

Kapture.2024-09-03.at.11.56.13.mp4

[traed]

Hmm now that I try again it actually doesn't insert non-allowed blocks, but they still show up in the inserter. Must've been some change I made while testing that allowed that. Using the test-block from the repo I linked, it won't actually insert non-allowed blocks at all, but I see the highlight appear after the block as opposed to inside it (which is what happens when I select an allowed block).

[talldan]

Hmm now that I try again it actually doesn't insert non-allowed blocks, but they still show up in the inserter. Must've been some change I made while testing that allowed that. Using the test-block from the repo I linked, it won't actually insert non-allowed blocks at all, but I see the highlight appear after the block as opposed to inside it (which is what happens when I select an allowed block).

Yes, there was a change in 6.6 around that, I should've mentioned it.

[Mamaduka]

Inserter change was introduced in #62169.

[traed]

@Mamaduka Does that mean this will be fixed with that PR or is this a consequence of that PR? Because I see no "list of blocks that can be inserted" as the PR says.

Edit: Oh I see, it's stuff above the thin grey border that's insertable at selection. That is not clear at all. I had to look at the class names in the inspector to figure that out. Is it possible to add a headline or something to make this clearer?

[jeryj]

Does that mean this will be fixed with that PR or is this a consequence of that PR? Because I see no "list of blocks that can be inserted" as the PR says.

Edit: Oh I see, it's stuff above the thin grey border that's insertable at selection. That is not clear at all. I had to look at the class names in the inspector to figure that out. Is it possible to add a headline or something to make this clearer?

@WordPress/gutenberg-design I know we had considered an "Allowed blocks" heading or putting the title of the block in there, like "List Block" instead of repeating the design section. What do you think?

[Mamaduka]

I think this is a regression caused by #64048. The blockInsertionPoint changes when you hover on blocks, causing the inserter to re-render. The insertion point indicator is also missing from the canvas.

A group block for reproduction

<!-- wp:group {"allowedBlocks":["core/paragraph","core/image"],"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

Screencast with 64048 reverted.

CleanShot.2024-09-05.at.09.36.01.mp4

[jasmussen]

I know we had considered an "Allowed blocks" heading or putting the title of the block in there, like "List Block" instead of repeating the design section. What do you think?

There are options, always, but at the moment I'd not add any changes to the UI until we've more solidly fixed the bugs at play. There seems to be something off with trunk at the moment, to echo George above.