Enhance sibling inserter (hover between blocks)

[jasmussen]

The "sibling inserter" is the so-far name for the interface we show when you hover between two blocks. This interface is there to add an affordance to insert content between two blocks. It is also an "escape hatch", because even though you could simply select the preceeding block and press "enter" to create a space for insertion, block authors might create a block that captured enter keypresses, trapping you.

The sibling inserter is not used on mobile.

A recent change to the sibling inserter meant you had to click a plus in the middle in order to insert a provisional linebreak where you can insert new content. This was meant to make inserting between blocks less error prone, compared to previously where clicking anywhere on the line between blocks would insert a provisional block. The latter would invoke constantly even when you didn't want it to. But the plus at the center is also not ideal, as it is often covered by the block toolbar:

Let's rethink how this could work.

One idea is to show the plus to the left of the side UI:

You can still hover between blocks, but you can only click on the left. This concept would need some work for responsive breakpoints, but could probably be made to work.

What other ideas are there for creating an intuitive interface to insert between blocks?

GIF of the current behavior:

[jasmussen]

Right now we show the sibling inserter when you hover between any block. Another option could be to not do that at all, and instead have an interface for inserting blocks after the selected block. Like hover the bottom edge of a selected block to show the inserter interface.

[folletto]

Interesting challenge.

If I understand what you mean with the comment above... and extending it... I think you mean to not have a siblings selector anymore but just show it below (or maybe also above) the currently selected block, right?

Raw mock:

Aside: have we done a test to see what people will do if there's no inserter at all? What were the results? I'm curious as the "+" in the toolbar might be already enough (as it adds automatically below) — as long as it's discoverable and clear that's the inserter, of course (which makes the test tricky because I'd try to test only after the people understand the "+" inserter in the toolbar).

---

Back to the mock above, I feel having it on the side would be an improvement.
tyling wise, to emphasize that only the "+" can be clicked, have we considered a dashed/dotted line instead of a full line?

[hedgefield]

Love the ideas here so far. The plus on the side makes sense to me, solves a lot of overlapping problems and precise clicking. I also love the inserters on the side, makes it easy to discover and insert above and below quickly. I'll see if I can think of any more.

[noisysocks]

I’m really fond of the current interface. I wonder if we could tweak it so that the + icon moves out of the way when it would otherwise be covered by the formatting toolbar?

(I have no idea how one would implement this technically.)

[hedgefield]

At request: a gif of the Meistertask inserter. It works pretty similar, but has nothing that can block it.

[jasmussen]

That idea from Meistertask is interesting, thanks for sharing @hedgefield! In that situation, the sibling inserter always appears to be "below" the block itself. How does it look if you select the block first? I presume you can also hover/click above the selected task? That's our primary challenge — the block toolbar covering.

[jasmussen]

CC: @SuperGeniusZeb because I recall you having thoughts about this.

[jasmussen]

One of the things that already work is that you can select the block you want to insert after, then click the "Add" button, and use that to insert after:

Given that works, would it be an option to remove the sibling inserter and perhaps make that button more visible?

☝️ that label would need to be translated to a plethora of languages which means we can only really show it at the desktop breakpoint. "Hinzufügen" in German, for example.

It should be noted though, that we did try to remove the sibling inserter entirely, and this was not well received.

[hedgefield]

Clicking on a card in Meistertask or Trello opens the modal with the card info, so there's no selected state in the list view to compare ours with. Only a focus state (after you enter a new card in the list or drag one around).

[chrisvanpatten]

Another concept:

Then another when you're hovering the lower part of the block:

[folletto]

Given that works, would it be an option to remove the sibling inserter and perhaps make that button more visible?

This might be valuable to explore.... but I reckon...

It should be noted though, that we did try to remove the sibling inserter entirely, and this was not well received.

Let's ignore for a moment it was at an earlier stage of development: what were the issues emerged at the time?

[ZebulanStanphill]

One important thing to consider is the use of the sibling inserter in nested contexts. Currently, you can press Enter to create a new Paragraph block in any <InnerBlocks/>, regardless of whether the parent block allows Paragraph blocks to be inserted, and of course there is the placeholder block at the bottom of column of nested blocks. The problem with this is that it makes Gutenberg look less like the front-end, and can add a lot of unwanted space when you have multiple levels of nesting. (Like a Paragraph nested in Layout/Columns nested in Section/Container, for example.)

I think the placeholders should be removed from <InnerBlocks/>, and the sibling inserters should be made available at the bottom of the last block in a column of nested blocks (currently it does not show up after the last block in a column). The sibling inserters should also open up the inserter pop-up directly, instead of inserting a placeholder block. This will allow block authors to prevent Paragraph blocks from being inserted into their blocks that use nesting. See #6834.

@jasmussen If it can be made to work in nested contexts and in mobile, putting the icon off to the side may end up being the best way to go, though I still think that having the icon in the middle looks nicer. Would it be a bad idea to just disable the sibling inserter for the top of the currently-selected block? Additionally, to make the inserter a bit lighter, what if the line was only shown when hovering over the plus icon? (Similar to the Meistertask inserter that @hedgefield showed, but with an added hint of where the block will be inserted on hover.)

@folletto That looks interesting, and it might be an improvement over the current inserter, though it still would be covered by the block toolbar at mobile widths and in deeply nested blocks. Changing the solid line to a dotted one sounds like a good idea.

@chrisvanpatten One issue with your mockup would be that it does not work with short blocks (like a one-sentence Paragraph). It is also notable that the plus icon looks different from all the other ones, which could be a problem.

[chrisvanpatten]

I think the main problem with removing the sibling inserter is that it takes away the ability to quickly insert a block above your current block.

In many cases, that's okay; just move up a block and hit "enter" or use the Add button in the top right.

But you won't be able to insert above the first block in a post, or above the first block in an InnerBlocks area. You would need to insert below the current block, and then use drag-and-drop or the arrows to reposition your new block.

[jasmussen]

Really solid ideas here. Super duper appreciate all the thoughts, this is stellar.

I think the placeholders should be removed from , and the sibling inserters should be made available at the bottom of the last block in a column of nested blocks (currently it does not show up after the last block in a column). The sibling inserters should also open up the inserter pop-up directly, instead of inserting a placeholder block. This will allow block authors to prevent Paragraph blocks from being inserted into their blocks that use nesting. See #6834.

I think this makes sense. CC @mtias

Would it be a bad idea to just disable the sibling inserter for the top of the currently-selected block?
Additionally, to make the inserter a bit lighter, what if the line was only shown when hovering over the plus icon?

This seems like it could be an easy thing to test. I might try that in a PR.

But you won't be able to insert above the first block in a post, or above the first block in an InnerBlocks area. You would need to insert below the current block, and then use drag-and-drop or the arrows to reposition your new block.

This is a good point.

I'm also concerned about adding more side UI and buttons. What if either in addition to or as a replacement for the sibling inserter, we added two menu items to the Block More menu — "Insert block before" and "Insert block after". Something like this:

[chrisvanpatten]

@jasmussen LOVE the idea of putting those items in the side menu. Seems like a great approach to keep the ability to insert before without adding additional UI.

[jasmussen]

Wanted to note that I took a stab at some of the suggestions in #7220, I'm already liking it a lot over what's in master.

[karmatosed]

I think the placeholders should be removed from , and the sibling inserters should be made available at the bottom of the last block in a column of nested blocks (currently it does not show up after the last block in a column). The sibling inserters should also open up the inserter pop-up directly, instead of inserting a placeholder block. This will allow block authors to prevent Paragraph blocks from being inserted into their blocks that use nesting. See #6834.

I have to say I am cautious about us removing placeholders as they are incredibly useful. Do we have to do this?

I'm also concerned about adding more side UI and buttons. What if either in addition to or as a replacement for the sibling inserter, we added two menu items to the Block More menu — "Insert block before" and "Insert block after". Something like this:

I would caution against this I think we should get the sibling adding of blocks correct over fill up that menu. Right now that menu has very specific actions and adding this throws that a little off.

[ZebulanStanphill]

@karmatosed

I have to say I am cautious about us removing placeholders as they are incredibly useful. Do we have to do this?
Do you have any other suggestions for solving the issue of parent blocks that do not allow Paragraph blocks? Because the placeholders are just Paragraph blocks, there is no way to stop Paragraph blocks from being inserted anywhere. This problem is particularly noticeable in #7234 right now.

In nested contexts where Paragraph blocks are allowed, placeholders could still be created using the Enter key, but in contexts where Paragraph blocks are not allowed, this would have to be disabled. you could still the use the keyboard to insert blocks similar to the slash command since the inserter pop-up has a search bar, and maybe pressing Enter in a context that disallows Paragraph blocks would bring up that pop-up directly.

[karmatosed]

@SuperGeniusZeb whilst I get that the issue of how discoverable that action is still stands. We need on this to consider outside of our experience where we understand Gutenberg.

[chrisvanpatten]

@karmatosed @SuperGeniusZeb This should probably be discussed in #6569 or #6834, but perhaps there's a world where a Placeholder becomes a private block type, that is immediately transformed to a paragraph if anything other than a / is entered, or if it's in a context where a paragraph is disallowed it automatically prepends a slash and acts as if the slash command was being typed.

That's outside the scope of the issue, and introduces other UX challenges, and likely other code challenges, I just wanted to suggest that there are ways the problem could be solved without removing placeholders in nested blocks, which I agree have a lot of value.

That said, I would also love to see the in-between inserter available after the last block in a block list; even if placeholders are visible. But that's another issue entirely :)

[ZebulanStanphill]

@chrisvanpatten That sounds like it could work.

One improvement I would like to see is for placeholders to not be added automatically at the bottom of the post or <InnerBlocks/>. They are one of the biggest obstacles right now to making Gutenberg look like the front-end because they add a significant amount of extra empty space which gets compounded in multiple levels of nesting. They could still be inserted via Enter and the sibling inserter, but they would no longer appear automatically at the bottom of every group of blocks.

An alternative solution would be to make the auto-added placeholders only appear inside parent blocks when the parent block or one of its children is selected, and have them be auto-removed when the parent block and its children is unselected. This would be similar to how the Gallery block works with the add image placeholder or how the caption text box works in the Image block.

[ZebulanStanphill]

Quoting myself from #7763:

The best way to solve this, in my opinion, is to change the sibling inserter to open the inserter menu directly.

Pros of changing the sibling inserter to open the inserter menu directly include:

• One less click to insert a block.
• More intuitive. You would think that the sibling inserter would just open the inserter menu directly, so why does it make you go through the step of clicking another inserter icon in the placeholder it inserts instead?
• Improves consistency by making the sibling inserter open the same menu as the button in the top bar and the button in placeholders, rather than having the sibling inserter just insert a placeholder.
• Does not interfere with normal post writing and keyboard users. Pressing Enter still inserts a new placeholder/Paragraph as always.
• Allows sibling inserter to be used in nested contexts again while still preventing Paragraph blocks from being inserted in contexts where they are not allowed.

I can not think of any cons; can you?

Also, it should be noted that having inserters with buttons on the left (similar to Squarespace) would become a lot more viable if the side controls were moved below blocks as proposed in #6224.

[hedgefield]

@SuperGeniusZeb That sounds like a good idea, and #6224 is a great idea too. I'm still confused by how that placeholder block works that gets added after using the sibling inserter, your suggestion would make it a lot easier to interpret in my opinion.

[designsimply]

Closing due to the changes made in #7220 and noting current behavior is that sibling inserters appear above unselected blocks when hovered and do not appear for selected blocks.

Note: we can consider reopening this if needed, but please search first as there are several other inserter issues and we need to work to make these kinds of issues clear and concise. If we consolidate them it will make them easier to follow and more actionable. 🙂