Issues with the current sibling inserter
The current sibling inserter is a lot better compared to some previous iterations, but there are still some major issues with it:
- It is attached before blocks, rather than after, which is confusing for keyboard users. To insert a block, I have to tab backwards from the block toolbar, which is very counter-intuitive. I would expect to be able to tab from the block content to an inserter.
- It covers up part of both the block above it and below it. This means that margins have to be added to all blocks to ensure the sibling inserter does not get in the way. These margins are there even when blocks are unselected. This runs counter to one of the big goals of Gutenberg: WYSIWYG editing, and is a pain to deal with in CSS. Ideally, the inserter should appear outside the currently-selected block content... just like the block toolbar which appears above the currently-selected block content.
My proposal to revise the sibling inserter
I propose that the sibling inserter be overhauled to work something like this:
- The current on-hover sibling inserter should never appear above or below the current block.
- It already doesn't appear above it, and appearing below it would be redundant and confusing due to the other suggested changes.
- When a block is selected, an always-visible sibling inserter appears below the block's bottom edge. (Or in horizontal contexts, on the right edge, of course.)
- This fits in with Gutenberg's philosophy of showing contextual controls when something is selected.
- It ensures that the inserter is only covering up a small portion of the following block (no more need for the wide div used to detect hovering within a certain area). This makes clicking the block-after-the-selected-one nearly fool-proof compared to the somewhat hacky solution currently in place.
- It ensures that the inserter is never covering any part of the block you are currently editing.
- It solves the tab order issue, since the inserter now appears below (in horizontal contexts: to-the-right-of) the selected block, which is the most likely spot where you will want to insert a block.
- It greatly improves discoverability, since it is constantly visible below the selected block.
- The block appender that automatically appears at the end of posts and
InnerBlocks areas should be removed, since you could just select the last block and use the inserter that appears after it.
- This improves the WYSIWYG-ness of the editor. The current after-last-block appender takes up space, pushing stuff around on the page as your focus moves in and out of various nested block contexts. By removing it in favor of the style of inserter I'm suggesting, there would be far less jumpiness.
- By getting rid of the appender that appears only in specific situations (and confusingly not after Paragraph blocks), the UI would be simplified and made a lot less confusing.
Additionally, the following could also be done, but is not strictly necessary for this proposal:
- The on-hover sibling inserter could be removed entirely.
- This keeps the UI clean by reducing the constant flash of appearing/disappearing controls as your mouse moves around the editor.
- This would make selecting small and cramped blocks a lot easier since there would be no sibling inserters covering over them.
- This would also reduce the number of inserter-types in the editor again, further simplifying the UI.
- The downside is that this would make inserting a block take a little bit longer for mouse users. But then again, it's only one extra click.
Mockups
Here is a mockup of what the after-selected-block sibling inserter could look like. I figure that if it is always visible, it would make sense to align it to the left to fit with the block toolbar. Inserters in horizontal contexts (e.g. Navigation, Buttons, etc.) could remain in the middle if desired.
When hovered, it could show the insertion point as a line, to make it a bit more clear where the block is being inserted (helpful for situations with columns).
Related issues and PRs
Issues with the current sibling inserter
The current sibling inserter is a lot better compared to some previous iterations, but there are still some major issues with it:
My proposal to revise the sibling inserter
I propose that the sibling inserter be overhauled to work something like this:
InnerBlocksareas should be removed, since you could just select the last block and use the inserter that appears after it.Additionally, the following could also be done, but is not strictly necessary for this proposal:
Mockups
Here is a mockup of what the after-selected-block sibling inserter could look like. I figure that if it is always visible, it would make sense to align it to the left to fit with the block toolbar. Inserters in horizontal contexts (e.g. Navigation, Buttons, etc.) could remain in the middle if desired.
When hovered, it could show the insertion point as a line, to make it a bit more clear where the block is being inserted (helpful for situations with columns).
Related issues and PRs