Add Block (+) is inconsistently used, possibly confusing

[mintplugins]

I believe the "Add Block (+)" text and icons are inconsistently used, and this experience could be improved to prevent user frustration and confusion.

Places this is used:

1. At the top, clicking it will add a new block to the page. All is well here.

2. Between blocks, clicking it will add a new block to the page. All is well here as well.

3. However, once you have added a new block, you see the Add Block (+) on the left, but clicking it does not add a new block to the page. Instead, clicking it allows you to choose the block type.

Proposal:
For the Add Block (+) on the left side, the wording should change from "Add Block" to "Select Block Type", and the icon should be the default block type's icon. I believe the default block type is a paragraph, so perhaps it should use that as the icon. If not that, perhaps a new icon should be introduced which is consistently used when prompting the user to choose a block type.

[ZebulanStanphill]

I think this is a duplicate of either #5054 or #7271. Or maybe both, and those two are duplicates of each other.

[mintplugins]

@SuperGeniusZeb Thanks for the link. I would say that while similar, this issue is unique in that it focuses on the fact that the text/icon is incorrect, which is possibly a smaller/simpler scope.

[designsimply]

I think of it as there is an unassigned space for a block and the (+) in that context adds a block. In terms of design, consistency for this label feels helpful to me. I think changing the wording could introduce more confusion for others. There are also translation implications to changing the wording to something longer. It's very possible there could be split opinions about this where some people prefer it one way while others prefer it as is. It is also worth noting that the current design is the result of a lot of user testing and lots of different variations were tried.

[mintplugins]

@designsimply I don't want to seem disrespectful, but I completely disagree.

As I outlined in my screenshot, this button doesn't add a block, the block is already there. Therefore, it is incorrectly labelled.

Would you be able to elaborate on why you think labelling it accurately, based on what it does, would cause confusion for others?

There definitely will be split opinions about what to call it, but that's not a good reason to label it incorrectly, nor to use the wrong icon.

I think the number of issues relating to this exact thing show that it is confusing, and I believe all could be solved by calling it what it is.

As a new user to Gutenberg, this is probably the most confusing part of it for me.

Again, please don't take any of my disagreement personally or as disrespect. I just feel strongly that this is extremely poor/confusing UX, and I don't think it's something that should be glossed-over.

[designsimply]

Would you be able to elaborate on why you think labelling it accurately, based on what it does, would cause confusion for others?

Sure! First, I think labeling it accurately is a good idea. Where we differ in opinion (and that's okay!) is that I think the UI you are referring to is not a block until a block type is added.

Thanks for talking out the issue with me. It's certainly not being glossed over and I'm sorry if you felt that impression earlier.

[ZebulanStanphill]

@designsimply

Where we differ in opinion (and that's okay!) is that I think the UI you are referring to is not a block until a block type is added.

From a technical standpoint, it is a block. An empty Paragraph, to be specific. It says Paragraph in the block inspector, and the ellipsis menu even appears for it.

[mintplugins]

@designsimply Thanks for engaging with us on this!

As @SuperGeniusZeb mentioned, it is a block, and it is actually there already. If you update the editor, that empty block actually shows on the frontend. It outputs empty <p> tags, and it remains in the gutenberg editor as well when refreshing.

That block is there. I can understand that from your point of view, clicking the (+) on the left is adding a block, but that's not what is actually happening. The block is actually already there, and even creates a badly laid out DOM on the frontend, with empty <p> tags not being used for anything.

If this were properly labelled, it would make it obvious that the block actually is there, and people could remove it to make sure their layouts aren't wonky. I believe it would also completely alleviate the confusion many people are having about the inconsistency of it showing up sometimes, and sometimes not.

If we let people know that the block is actually there (because it actually is), they will have a more complete understanding of what is happening, and we'll be equipping them to build better layouts with less confusion.

[mintplugins]

To help demonstrate that the blocks are indeed actually there, I added 9 empty blocks to the editor.
Sure enough, it output 9 empty <p> tags on the frontend.

See screenshots:

Gutenberg:

Frontend:

The blocks are not just placeholders. They are actually on the page, and it creates poor/unneccesary output.

[nerrad]

There have been some changes since this issue was first created but I think it's still a valid issue. For consistency with elsewhere in the ui, I wonder if the left button being referenced here could be switched to the same ui indicator as the "Transform To" icon button:

If behaviour was similar to the transform button (i.e. shows what block type is set currently for that block and on hover changes to the "Transform To:" action) that would be consistent.

[mtias]

There's been several iteration to all the inserters and some further improvements tracked in #21080. Closing this for now but feel free to open new issues if there's further feedback.