Gutenberg: Site Editor: placeholder blocks in template parts that can't be removed

[vindl]

Describe the bug

When block within template part is focused two placeholder paragraph blocks appear at the end of it, causing the content below it to shift.

To reproduce
Steps to reproduce the behavior:

1. Enable Site Editor in Gutenberg's experiments page.
2. Open the site editor with a block based theme that provides some default FSE templates.
3. Click on some block in the header template part.
4. Notice the two paragraph block that appear at the bottom of the template part.
5. These blocks are not rendered on the front end.
6. They disappear when you focus some block in post content for editing.

Screenshots
| Without focus | With focus |
|-|-|
| | |

[noahtallen]

I'm pretty sure this has to do with the "default block appender area thing" which appears at the end of many different inner_blocks sections. Do we need to disable this in some views? I wonder what criteria we could use to do so.

[Addison-Stavlo]

+1 on Noah's comment about the default block appender. This is probably expected behavior when selecting a block that allows inserting inner blocks.

Note that 2 inserters are not added for the template part. In seedlet that template part is wrapped by a group block. So when you select the template part, it triggers this for both the group block and the template part. Adding 1 inserter at the bottom of the template part, and 1 at the bottom of the group block. There probably shouldn't be a group block around the template part in that template, and that would mean when selecting the template part only 1 inserter would appear, which is probably the core intention for allowing a user to add blocks? 🤔

[jeyip]

Noah and Addison are spot-on. Each inner block is rendering an inserter. When they are nested, it looks as if the inserters are duplicated, but in reality, they are inserters for different sets of inner blocks.

There was some discussion as a team around how best to approach this problem:

1. One path forward is the solution I've drafted here https://github.com/WordPress/gutenberg/pull/24836. It only displays one trailing inserter at any given time.
2. Another solution might be to reintroduce the idea of an inserter with no vertical height. @noahtallen, would you mind elaborating more on this?
3. The last approach might be to leave everything as is. Although each inserter _does_ place a block in its own distinct set of inner blocks, the affordances aren't clear. Currently, this UX interaction, to me, seems confusing, but I do recognize that there have been discussions surrounding the inserter in the past. There might be reasoning behind this behavior, and I'm curious if @MichaelArestad @shaunandrews have any insight.

[MichaelArestad]

The last approach might be to leave everything as is.

Let's definitely not leave everything as is. There should be one inserter shown at a time in this scenario. #24836 looks like it's headed in the right direction. Nice work so far!

[noahtallen]

I'd love to get more feedback on this, but in the context of the site editor, is the paragraph block the most common tool? I'm not sure it is. I wonder if the "WYSIWYG" experience is the more important aspect in the site editor, so what if we placed an inserter button center aligned along the bottom border of the template part block? Possibly with some extra indication of where it would insert the block, but this could show up at the same time as the other inserter normally would, and would be a quick way to "insert at the end of the block" without inserting anything up front.

[MichaelArestad]

in the context of the site editor, is the paragraph block the most common tool?

@noahtallen I suppose that remains to be seen. It might be.

I wonder if the "WYSIWYG" experience is the more important aspect in the site editor, so what if we placed an inserter button center aligned along the bottom border of the template part block?

You mean like the inline inserter that shows up between blocks? Or maybe the group block?

[noahtallen]

Something more like that, yeah! So the "plus button" would be center aligned at the bottom of the template part without taking any extra vertical space, and inserting a block via that button would insert it at the end of the template part. Or something like that :) I personally feel like that would be a more straightforward interaction in this context