Inserter: Inner blocks not inserted at correct location

[sirreal]

Blocks may not be inserted in the correct location when using the following steps:

• Use a layout type block that uses inner blocks and appenders, e.g. Columns block.
• The active or selected block should be in a different location.
• Access the quick inserter (click the + block appender in an inner block).
• Click "Browse all" button at the bottom of the quick inserter.
• The main inserter is opened, click a block to insert it.
• The block is inserted at the top level, not where the + appender was clicked.

Visual flow

Setup

Click appender to access quick inserter

Click "Browse all" to access the main inserter

Pick a block from the main inserter

The block is not inserted where the appender was clicked

Context

I believe this is the same issue as described in #24262. #24285 closed that issue, but it appears to have addressed an insertion bug in top level blocks, not in inner blocks.

---

Editor version:

• WordPress version: 5.4
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 8.7

Related: #24402

[talldan]

Also reported in #24501. This seems like something important to fix for WordPress 5.5.1.

[chvillanuevap]

Is there a filter to show more than 6 blocks (like in block variations, which show all variations available)? This could be a quick fix for now.

[torounit]

The destinationRootClientId in useInsertionPoint is undefined .

Is this related?

[chvillanuevap]

Is this making it to 5.5.1?

[torounit]

https://github.com/WordPress/gutenberg/blob/try/issue-24403/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js#L52-L58

If Prop is cached, it seems to be inserted at correct location.

please try https://github.com/WordPress/gutenberg/tree/try/issue-24403

[chvillanuevap]

Any updates on this? I have a set of custom blocks for an email template builder I developed. I have an inner block (email content) with templateLock set to true. Inside this inner block I have other inner blocks where the user can insert blocks (email preheader, header, body, footer). When the user clicks on the appender button, the Browser Directory shows nothing because of the template lock of the outermost inner block. It's super confusing, and I have gotten a lot of complaints from my clients.

[barryceelen]

Seeing the same issue that @chvillanuevap mentions above, but wanted to mention that I'm seeing this behaviour:

1. Use inserter on empty InnerBlocks element: clicking "Browse All" results in empty main inserter
2. Use inserter if there is already a block present in the InnerBlocks element: clicking "Browse all" results in a correctly populated main inserter, and selecting a block inserts it in its correct position in the InnerBlocks element.

It seems adding a min-height to the InnerBlocks element makes this work consistently (broken) for me.

[chvillanuevap]

I just wanted to add that this behavior not only applies to blocks, but also block patterns.

[talldan]

#26281 reported the same issue for patterns.

[PHuhn]

Hey:

I wrote the following on the forum on WordPress.org.

The Gutenberg editor looses location of add (+) clicked in the content area, if ‘Browse all’ clicked.

I use Group block a lot. It seem to happen a lot when I click within the Group block. The problem is not limited to Group block.

Example:
Add new page…
Add Group block
Clicked the + within the Group block.
I clicked ‘Browse All’ on the block selection, => clicked Columns block and it placed the Columns block as the last element.

Thanks for a great editor. Phil

[noisysocks]

I've had to step away from this. Feel free to pick up #26443 and finish it or to use it as inspiration for a different approach.

[eliawk]

Same error con WP 5.7.2