Make WordPress Core

Opened 19 months ago

Closed 17 months ago

Last modified 17 months ago

#49610 closed defect (bug) (fixed)

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

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


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:




Attachments (5)

49610.patch (1.3 KB) - added by kjellr 19 months ago.
Screenshot 2020-04-13 at 19.12.21.png (812.8 KB) - added by Joen 18 months ago.
Default light background
Screenshot 2020-04-13 at 19.12.46.png (812.1 KB) - added by Joen 18 months ago.
Dark background opted into
49610-2.patch (1.9 KB) - added by poena 18 months ago.
Add theme support for editor-styles
editor-styles.png (26.5 KB) - added by poena 18 months 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.

19 months ago

#2 @Joen
19 months ago

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

#3 @SergeyBiryukov
19 months 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
19 months ago

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

19 months ago

#5 @kjellr
19 months 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
19 months ago

  • Keywords has-patch added; needs-patch removed

#7 @JavierCasares
18 months 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
18 months 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
18 months 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
18 months 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
18 months 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: 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.

18 months ago

Default light background

18 months ago

Dark background opted into

#12 @aristath
18 months ago

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.

18 months ago

Add theme support for editor-styles

18 months ago

with and without Gutenberg

#13 @Joen
17 months 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
17 months ago

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

Reviewing for commit

#15 @ianbelanger
17 months 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
17 months 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
17 months ago

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

Note: See TracTickets for help on using tickets.