Impossible to insert multiple blocks into Column Block using mouse

[maddisondesigns]

Describe the bug
The Columns block is incredibly unintuitive and difficult to use. There isn't any Block Inserter so it's near impossible to insert multiple blocks into a single column. The only way I (finally) worked out how to do it is by hitting Return on an existing Paragraph block. After hitting Return it inserts another Paragraph Block which you then need to convert to the actual block that you want.

To compound the issues even further, if there happens to be another block in the column to the right, you can't click the + icon on the Paragraph Block (to convert it) because every time your cursor goes near it, the arrow icons for the block next to it, covers up the icon. Even when using just Paragraph blocks, your text overlaps all the other columns.

This block is totally unusable in its current form.

To Reproduce
Steps to reproduce the behavior:

1. Insert Columns Block
2. Add content to the first row of paragraph blocks
3. Try to insert a block below one of your paragraph blocks, using your mouse

Expected behavior
It needs to be usable

Screenshots

macOS Sierra 10.12.1 (16B2659)
Firefox Quantum 60.0 (64-bit)
WordPress 4.9.6
Gutenberg 2.9.0

[ZebulanStanphill]

I think the best way to fix this would be to allow the sibling inserter to appear after the last block in a context. Alternatively you could just make the placeholder blocks appear automatically under Paragraph blocks like they do for everything else, but I would prefer having the automatic placeholder blocks removed entirely and replaced with the sibling inserter opening the inserter menu directly. (Of course, pressing Enter would still create a new placeholder/Paragraph like you would expect.)

See also: #6834, #7006, #7168, #7763, and #7950.

[maddisondesigns]

The Block Inserter button (+) should be on the bottom of every block! I can't understand the reasoning for having it at the top of the block. It makes no sense and is completely opposite of the a regaular workflow.

After adding content, you typically want to add more content BELOW the content you just added, not above. It makes zero sense for this Block Inserter button to showing at the top of the block instead of at the bottom of the block.

[ZebulanStanphill]

@maddisondesigns The sibling inserter was made available above blocks (except the currently selected one due to conflicts with the positioning of the block toolbar) because that would make it also available at the bottom of every block below the one with the inserter above it, effectively putting it below every block except the last one. It is absent from below the last block in a context because it was assumed that the automatically added placeholder blocks would serve the same purpose, therefore making the sibling inserter redundant.

Separately, the placeholders were changed at some point to not be automatically added for Paragraph blocks because it felt weird to people writing posts that there seemed to be an empty Paragraph at the bottom of the post all the time. What they ended up doing did sort of fix the issue, but introduced an inconsistency along the way.

Combined, these two design decisions create the issue described by this ticket. As posted elsewhere, I think the solution is to get rid of automatically added placeholder blocks, show the sibling inserter below the last block in a context, and have the sibling inserter open the inserter menu directly. (Enter would work as it does now.) This does several nice things, including:

• allows insertion of blocks after the current one in all contexts regardless of whether it is the first or last or some other block and regardless of whether it is in a nested context or at the root level
• allows the sibling inserter to be used in nested contexts that do not allow Paragraph blocks, solving another consistency and usability issue
• reduces the number of clicks/taps to insert a block for mouse/touch users
• makes the sibling inserter act the same way as the inserter in the top bar of the editor, improving consistency
• does not feel weird for keyboard users or people just trying to write, properly solving the issue that the removal of automatic placeholders below Paragraph blocks was trying to fix
• makes the editor slightly more WYSIWYG by getting rid of a source of whitespace that did not exist on the front-end

As far as I can tell, there are no real downsides to this suggestion.

On another note, I notice in the main post the GIF shows you struggling to use the inserter button in columns due to the side controls of the nearby blocks. If the controls are moved below the block as suggested in #6224, that would no longer be an issue.

[skorasaurus]

While examining/testing Gutenberg for our site; I'm able to reproduce this.
When I create a 2 column block; I was able to create subsequent blocks in the first (left-hand side column) only using the mouse but after I created a pargraph block in the second (right column), I haven't been able to figure out how to create a subsequent block in that same column without hitting the return button.

out-11.ogv.zip (it's a zipped OGV; I had to zip this because github doesn't support OGV natively in the upload).

(written as a CPL employee)

[ZebulanStanphill]

I made an issue suggesting an overhaul to the sibling inserter that would make inserting blocks in Column blocks a lot easier: #13571.

See also: #10519.

[paaljoachim]

Hey @shaunandrews

I know you have been working on the sibling inserter.
One example would be: #22801

[shaunandrews]

I think most of the issue's outlined here have actually been resolved. Much of the UI has changed since this issue was created, which reduces some of the overlapping UI. Also, you can use the "..." more menu in the block toolbar to insert before or after any block.

There's, of course, a lot of work to be done on the Columns block, especially around its placeholder state and the interaction with the in-between inserter.

[ZebulanStanphill]

To quote @youknowriad from a comment on a related issue:

I think this PR #28418 mostly addresses this. At the moment the in-between "hover" inserter doesn't necessarily appear before or after a block but it shown at a given position. In #28418 we allow after the last block in a container as well. That said, sometimes it's hard to trigger because there's no difference between "after the last block in a container" and "after the container" unless there's a padding in the container (some space after the last block but before the end of the container).

There is also still the issue of inconsistency between Paragraph blocks and every other block. An appender (that takes up space in the editor) will appear after every block except a Paragraph, which (in combination with the lack of space between the end of a Column and a Columns in most themes) means that inserting blocks after a Paragraph at the end of a Column is still difficult.

So while a lot of progress has been made and a lot of similar cases are now solved, the original problem described in this ticket is still not truly fixed.

One solution would be to make the appender behavior with Paragraph blocks consistent with every other block. I was going to create that PR myself, but I haven't been able to find the part of the code that controls this behavior. So if anyone wants to go ahead and make that PR, be my guest.

[talldan]

This issue is quite old, and it's possible to insert blocks before/after using the option in the block more menu if you really pressing enter is not what you want to do.

I'm going to close it. I'd suggest any general discussion about where inserter buttons appear is moved to a more general issue like #22801. The title of this issue is very specific, and unlikely to be where people go to look for that conversation.