I have a few explorations. Here's the first one in GIF format:

In the above GIF I have a Columns block, with one column containing an Image and the other column containing two Paragraphs. Add buttons are only displayed based on the currently selected block. As I select the Columns block, the default canvas add button disappears. When I hover over the left column's add button the Column is outlined and a linear guide is shown to indicator where a block would be added. These add buttons are positioned to a fixed point on the container (bottom-right), and don't affect the layout of the document.

Awesome ticket, Shaun. This is something I know has frustrated both @mtias and @ellatrix for a long time — specifically the layout interruption. Whatever we can do to make the appender not take up visual space in, for example, a vertically centered Cover block, would be great.

As for your first exploration, my instinct also goes towards some absolute positioning as the primary/only solution, and showing on hover also makes sense. The primary problem there is, what if I want to click at the bottom right of a paragraph to start typing there? I wonder if there's a refinement that puts the button on the edge of the block boundary, and even makes it smaller. Notably in cases like Social Links, or Navigation, putting the plus as an overlay is tricky as there's barely any space to begin with — we might even want to limit this from showing up in such small contexts.

Another exploration focuses on drag-and-drop as a useful method of adding blocks into specific locations. Here's a quick GIF to show dragging a block from the library, and how hovering can help guide you into the placement of the block:

In the GIF I drag a Paragraph block over the bottom area of a Column block. As I hold the hover for a split second, a blue line appears to help signify where this new Paragraph block would be place. As I continue to move my pointer towards the center of the document a new guide appears letting me know that I'm about to place a Paragraph block between the Columns and existing Paragraph block.

I think this drag-and-drop interaction would make the in-between and container add buttons unnecessary.

Another exploration focuses on drag-and-drop as a useful method of adding blocks into specific locations.

I'd love to see this drag and drop interaction become a reality. This was highly requested in the Widget Screen as well.

Notably in cases like Social Links, or Navigation, putting the plus as an overlay is tricky as there's barely any space to begin with — we might even want to limit this from showing up in such small contexts.

Thinking about this a little, I wonder if for container-type blocks like Buttons, Navigation, Columns, and Column if it would make sense to surface the add button into the block's toolbar:

There's a very old issue for drag and drop from the inserter (#1511). Would you mind adding that gif as reference there?

Looking at the (what I've nicknamed) Fixed Floaties option, where container-type blocks show a fixed-positioned add button. Only one add button is shown at a time, and since it's fixed to doesn't affect the layout of the document.

When hovered for a few seconds this button would highlight the container block:

Here's a look at how the hovered highlight could work for different types of containers:

While there's something about the visuals of the bottom right aligned button I don't totally love, your approach does seem to hold an opportunity to solve some of our current headaches.

There appears to be an inconsistency in how the button appears in Group/Cover compared to Buttons. In Buttons, it's inside the container, next to the only allowed child block. In Group/Cover the button is outside the container, always at the end. Is there a system that tackles both at the same time?

In the Cover context, how would you distinguish between adding within and adding outside?

Drag and drop.

• I would love to see Drag and Drop – but there are some a11y concerns especially for keyboard users as described by @talldan in #22319 (comment) so it has to be guarenteed that there are still other usable (!) options.
• Furthermore I would like to bring in, that in my opinion while dragging, the hovered block's outline and its name should be shown immediately without any delay (see my ugly draft in #24750).

Insertering from toolbar

I like the idea of @shaunandrews #26404 (comment) to use insertes from the toolbar. To be honest: For me the only reliable source in Gutenberg to add blocks at the correct place are the options "Add block before" and "Add block after". I don't want to overcrowd the toolbar, but would like to add the following proposal, coming from @mapk's idea to show more options in select mode (being explored in #25275) and building on (in this context a bit tiny) icons I created in #25274:

In the Cover context, how would you distinguish between adding within and adding outside?

This could be handled with those options in the toolbar.

And: I would love to see an inserter instead of a new paragraph (for inner blocks with only one allowed block of course this single block should be inserted).

Had another idea: If using the toolbar for inserters, we could enhance usability by showing the inserter-line while hovering/focusing:

Test yourself:
https://www.figma.com/proto/MfookqWbLNNaJjviZjHti9/Add-Blocks-%E2%80%93-Experiments?node-id=8%3A259&viewport=-188%2C-1115%2C0.6690232157707214&scaling=min-zoom

In the Cover context, how would you distinguish between adding within and adding outside?

Part of the idea is that the + button only appear on the canvas when you select a container block, like Group, Column, or Cover.

I've created a small prototype to get a sense for how this container add button could work: https://shaunandrews.github.io/static-prototypes/canvas-add-buttons/

Otherwise, the only + button is the one in the top toolbar. With the existing method of using the block toolbar's More Menu (...) to add blocks before/after, and the proposals for incorporating drag-and-drop, we can remove the default + buttons in empty Paragraphs and at the bottom of the document.

--

@mariohamann — I have similar explorations, but abandoned the idea of adding more icons to the toolbar as it doesn't feel like a primary action related to the block. Having these options in the More Menu (...) seems like the better solution. I could see adding another option to the More Menu to "Add inside," if the block supports it.

I've mentioned this to you before, just adding it here just to note on record :D

Having the + on the bottom right of the container makes it quite uncomfortable to target with my cursor when using a Trackpad. I don't know if its just working against my muscle memory of interacting with the toolbar, or some kind of awkward contrast in that most blocks tend to be top-left heavy. This one is especially troublesome:

TLDR: I +1 the idea of exploring this action being closer – but not necessarily inside the Toolbar. Perhaps something like:

Quite possibly too radical, but sharing if for no other reason than to rule it out (or inspire something better)...

If we made the button a bit bigger (matching the toolbar) we might be able to communicate where the block will be added on the button itself, and perhaps even utilise a pattern like the parent-block-selector to enable folks to choose the position their block will be added...

Associated issues:

Up/Down arrows - move blocks independent of relation to placement inside/outside a container
#24328

and

Impossible to select Group Block (5.4 Beta 3)
#20453

Some of these mockups remind me a lot of what I'm proposing in #13571.

To make sure it doesn't get lost, I wanted to recap some of the feedback from this recent WP Tavern post:

Getting the “Add Block” icon to appear when hovering in between elements in the default content area was rough. I had to position my mouse in a perfect position for it to appear. It was an exercise in frustration where even the slightest movement caused the icon to once again disappear.

In my testing the last few weeks, this experience has grown worse particularly when using Full Site Editing. Here's just a quick video where you can see the block outlines and add buttons causing a lot of visual activity to do simple tasks:

Also having some kind of border to make clear where are the blocks that would be a good thing, because it's hard to find a block at first click, something like that:

@overclokk There are several issues which try to improve outlines e. g. #25133 #23892 #22383

You are very, very welcome to add your feedback over there. 👍🏻

I noticed today that the component variants UI in Figma employs a very similar pattern to the floating-bottom-right idea proposed in the comments above: