Twenty Twenty: Block editor inserter is missing the '+'

[nrqsnchz]

Reported here ​https://wordpress.slack.com/archives/C02QB2JS7/p1583775785105900 and ​https://github.com/WordPress/gutenberg/issues/20735.

On Twenty twenty and running the lastest from Gutenberg's master, the block inserter button is not displaying the '+' unless hovered:

[Joen]

It appears TwentyTwenty restyles the appender plus in the bundled editor style.

[kjellr]

49610.patch​ Removes the conflicting style. I'm not clear what that was for in the first place... things appear to work just fine without it in my testing.

---

Before

After

[JavierCasares]

Is this needed? because I just check and the button seems to be like the last (the round one and not the square one) :S

[Joen]

@JavierCasares It is a problem not in WordPress 5.4, but in the latest version of the Gutenberg plugin.

[JavierCasares]

Replying to Joen:

@JavierCasares It is a problem not in WordPress 5.4, but in the latest version of the Gutenberg plugin.

Oh, yes... my bad :P yes, tested with Gutenberg and works fine :)

[poena]

Hi

This style is applied because of the color contrast feature.
If the background is dark, for example black, the UI elements are a light grey, or white when focused.

If you remove this style, then the UI elements will be black on black if Gutenberg is not installed.

[Joen]

Thank you for being mindful of that @poena! The gutenberg plugin has built-in support for dark backgrounds, and a theme may register that it uses a dark editor style using this function call: ​https://developer.wordpress.org/block-editor/developers/themes/theme-support/#dark-backgrounds

Doing so ensures that not just the inserter plus, but indeed all UI including borders and placeholder text remains legible in dark backgrounds.

I sense that the customizer may be involved, and that some of the discussion outlined in ​https://github.com/WordPress/gutenberg/issues/18571 is relevant here. Nevertheless, it does suggest TwentyTwenty is doing something wrong when it's re-coloring editor UI, this should not be the responsibility of themers.

Do you have any suggestions on how to best proceed?

After this comment, I'll attach a couple of screenshots of Gutenberg with the dark-editor-style function call applied.

[Joen]

Default light background

[Joen]

Dark background opted into

[aristath]

This is a twofold issue...
The 1st issue: 2020 adds the color:inherit which should be removed, so the patch from https://core.trac.wordpress.org/ticket/49610#comment:5 needs to be applied.
The 2nd issue: The theme properly adds add_theme_support( 'dark-editor-style' ); when a dark background-color is used as documented on ​https://developer.wordpress.org/block-editor/developers/themes/theme-support/#dark-backgrounds, BUT it never adds support for editor-styles, so the dark-editor-style support is not applied.

In the beginning of the twentytwenty_block_editor_settings function this line should be added:
add_theme_support( 'editor-styles' );

If both changes are applied then everything works fine both for light & dark backgrounds.

I'm sorry for not creating a patch, call it an a11y thing if you want. The cognitive load to use SVN is far greater than that of git and I just can't do it right now.

[poena]

Add theme support for editor-styles

[poena]

with and without Gutenberg

[Joen]

@poena that patch looks perfect! And thank you @aristath for the context.

This feels like it just needs a few testers and a good old merge!

[ianbelanger]

Reviewing for commit

[ianbelanger]

In 47607:

Bundled Themes: Twenty Twenty block editor inserter is missing the +.

Fixes the disappearing + in the block editor when using the latest version of the Gutenberg plugin, by adding support for the native Gutenberg editor styles and removing color: inherit; from Twenty Twenty's style.css.

Props nrqsnchz, .
Fixes #49610.

[ianbelanger]

Sorry I forgot to include props for @poena, @Joen, @JavierCasares, @kjellr and @aristath in the commit. It looks like everyone besides @aristath already has props in the 5.5 release, so if you contributed on another ticket that will be in the 5.5 release @aristath you will be credited for your contributions to this release.

My apologies.

[Joen]

Thank you Ian and everyone. This is a good one to wrap.