Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#49610 closed defect (bug) (fixed)

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

Reported by: nrqsnchz's profile nrqsnchz Owned by: ianbelanger's profile ianbelanger
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-testing has-patch
Focuses: css Cc:


Reported here and

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

Attachments (5)

49610.patch (1.3 KB) - added by kjellr 3 years ago.
Screenshot 2020-04-13 at 19.12.21.png (812.8 KB) - added by Joen 3 years ago.
Default light background
Screenshot 2020-04-13 at 19.12.46.png (812.1 KB) - added by Joen 3 years ago.
Dark background opted into
49610-2.patch (1.9 KB) - added by poena 3 years ago.
Add theme support for editor-styles
editor-styles.png (26.5 KB) - added by poena 3 years ago.
with and without Gutenberg

Download all attachments as: .zip

Change History (22)

This ticket was mentioned in Slack in #core-editor by nrqsnchz. View the logs.

3 years ago

#2 @Joen
3 years ago

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

#3 @SergeyBiryukov
3 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Twenty twenty: Block editor inserter is missing the '+' to Twenty Twenty: Block editor inserter is missing the '+'

#4 @ianbelanger
3 years ago

  • Focuses css added
  • Keywords needs-patch needs-testing added
  • Milestone changed from Awaiting Review to 5.5
  • Severity changed from major to normal

3 years ago

#5 @kjellr
3 years ago

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.



#6 @kjellr
3 years ago

  • Keywords has-patch added; needs-patch removed

#7 @JavierCasares
3 years ago

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

#8 follow-up: @Joen
3 years ago

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

#9 in reply to: ↑ 8 @JavierCasares
3 years ago

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 :)

#10 @poena
3 years ago


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.

#11 @Joen
3 years ago

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:

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 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.

3 years ago

Default light background

3 years ago

Dark background opted into

#12 @aristath
3 years ago

This is a twofold issue...
The 1st issue: 2020 adds the color:inherit which should be removed, so the patch from 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, 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.

3 years ago

Add theme support for editor-styles

3 years ago

with and without Gutenberg

#13 @Joen
3 years ago

@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!

#14 @ianbelanger
3 years ago

  • Owner set to ianbelanger
  • Status changed from new to reviewing

Reviewing for commit

#15 @ianbelanger
3 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#16 @ianbelanger
3 years ago

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.

#17 @Joen
3 years ago

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

Note: See TracTickets for help on using tickets.