Block inserter button not appearing after 6.1 update

[mburridge]

Description

The block inserter button is not appearing. Can only add a block by using the '/' shortcut or via the Block Inserter. The small + button does not appear.

Reported in this support query.

Problem is across two sites in two different browsers.

Step-by-step reproduction instructions

Please see this support query.

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[hellofromtonya]

Here is the Core Trac ticket for this issue: https://core.trac.wordpress.org/ticket/56955. Once resolved, it can be backported to this ticket.

[margaretschneider]

Just adding a data point that at least one Newspack publisher has reported this as well. I was able to reproduce the issue in Chrome on macOS on Newspack Model Home and other sites.

This is the pattern of behavior: The black + icon does appear to the right of the first empty paragraph block in a new post. After an empty second paragraph block is added (and after each subsequent one is added), the + doesn't appear next to it on the right. But you can manually click in the white space to the right of a new block on desktop to get the + to appear, though it appears a bit farther down and off to the right than normal.

The workaround for this is as discussed above: Use the / shortcut or big blue + Block Inserter menu.

[annezazu]

Thank you for reporting and for the extra details around replication. Putting in the project board under 6.1.1.

[ghost]

Hi,

The button block appender also doesn't seem to work (not just the default block appender).

It is actually visible, but you can't click it due to "pointer-events:none" being attached to it.

[ndiego]

@itsmewatermelon hmm, I am not seeing this on my end. Can you share your setup? This is what I am seeing on WP 6.1 using the Twenty Twenty-Three theme without Gutenberg active.

Columns Block Inserter UI

Markup

[ghost]

I disabled all plugins and tried different (block) themes, all resulting in the same issue.

Forgot to include that I used a template part and within that template part I added the columns block.

Could you try that at your end? @ndiego

Please note: the button block appender gets unclickable after refreshing the page after adding the columns block within a template part block (only in template editor view, not in template part editor view).

[BrookeDot]

Core Trac ticket for the issue @itsmewatermelon is experiencing is here: https://core.trac.wordpress.org/ticket/56965

[t-hamano]

I checked and it does not occur with Gutenberg 13.0, but reproduces from Gutenberg 13.1.
Furthermore, according to #40441, this change appears to be intended.

After discussing with @jasmussen this PR also removes the inserter that was being shown at the right of selected empty paragraphs.

[ndiego]

Thanks for tracking this down @t-hamano. I thought I remembered it being an intentional change, but could not find the PR.

[priard]

I'm curious to know what kind of thinking went behind this change. Today I've already had dozens of people ask me why the button disappeared and how they should now add blocks. Of course there are other ways to add them, but as you can see this one was the most convenient and popular. That is why I am surprised by the change.

[ndiego]

@priard I cannot speak to the decision for the change, and while I personally always use the slash inserter 😅, the feedback received so far from the community definitely warrants a discussion on adding this functionality back in 6.1.1. Thanks for adding your feedback. 🙏

[priard]

@ndiego, I too use slash inserter (most convenient IMHO) to add blocks, so I was surprised at first, but the number of questions about this button overwhelmed me. It's quite astonishing how strong some habits can be. Thanks for your response. 🖖

[t-hamano]

I also saw many users on social media who were surprised by this change.

For example, if I search for "lang:ja wordpress" and so on, there are at least two dozen users mentioning this change, some recognizing it as a bug.

I think we should discuss in depth the background behind this change and what direction it should ideally take in the future.

[margaretschneider]

I also prefer the / inserter method, but in my experience training hundreds of publishers to use WordPress, many folks overwhelmingly prefer the small black + block inserter. I've typically trained folks on all five or six methods of adding a new block, and they've tended to gravitate toward the small +. I think it helps folks to have a button that's right there, so they don't have to remember to type something. Many people prefer not to have to remember and type a command that's not a standard word-processing command (e.g., Cmd-C/Cmd-V). They prefer a button. And the blue + block inserter at the top of the editor is also less immediate—it can feel unclear where the block will end up once you use it to select one.

To me, the + icons next to and between blocks in the editor were always kind of confusing UX as well. You might hit enter to add a new paragraph block, but then there's also this + icon if you want to add another paragraph block or a different type of block. If you haven't put anything inside your paragraph block, then that block becomes the new block you selected. But if you have put something inside your paragraph block, then using the + to select a block adds it after the block. So the functionality of the block inserter changes slightly, depending on existing content or lack thereof, which can take some getting used to for folks. But that's still the case for the big blue + block inserter at the top as well.

At least on desktop, the other issue was that previously, you would get multiple + icons floating around, depending on where you hovered the pointer/cursor (to the right of a block, above a block in the middle, below a block, etc.). I think it was meant to make adding other blocks easy, but in practice, this hover feature was distracting and probably not great for accessibility. It could also be confusing, in cases where you had an empty paragraph block with a + after a complex set of nested inner/outer blocks with their own + block inserters—sometimes you'd end up adding a block somewhere you didn't intend by selecting an incorrect +. So simplifying this to remove the extra + icons appearing on hover on desktop seems good, but I don't think we should get rid of the one to the right of the block.

Another issue with the way this is currently handled is that, as reported above, you can manually click in the white space to the right of a new block on desktop and the + will still appear, but it appears a bit farther down and off to the right than normal. If that was deliberate, the UX needs improvement, since it essentially amounts to a hidden feature with placement that looks like something is broken to folks who were familiar with the previous version of this feature. My preference (and I think a lot of publishers' preference) would be this:

1. Always have a visible + block inserter to the right of a new empty paragraph block.
2. Have a single + block inserter available on hover to the right of the paragraph block once it has content.
3. If the hover state isn't ideal, then instead always have a + block inserter to the right of the currently selected block.

[ddryo]

Hello, I am a theme developer in Japan.

Very many users are quite confused and inconvenienced about this change.

The developers are used to using "/" and may not care, but many normal users are much more likely to use the button.

In a Japanese environment, for example, it is also necessary to switch between alphanumeric and Japanese mode in order to enter "/".
Therefore, many users are likely to click the button.
It would be inconvenient without the button, especially on smartphones and other devices.

Translated with www.DeepL.com/Translator (free version)

[jasmussen]

@youknowriad perhaps we should look at adding this back?