WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 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:

Description

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:

https://cldup.com/CX2HvrsRTK.gif

https://cldup.com/pX17_gmhqf.png

https://cldup.com/Rs4UzcIEjk.png

Attachments (5)

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


5 months ago

#2 @Joen
5 months ago

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

#3 @SergeyBiryukov
5 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
5 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

@kjellr
5 months ago

#5 @kjellr
5 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.


Before

http://cldup.com/fzwKaD0pAy.png

After

http://cldup.com/u4S3Jr71l6.png

#6 @kjellr
5 months ago

  • Keywords has-patch added; needs-patch removed

#7 @JavierCasares
4 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

https://i.ibb.co/PYc3M47/Screenshot-174.png

#8 follow-up: @Joen
4 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
4 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
4 months ago

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.

#11 @Joen
4 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.

@Joen
4 months ago

Default light background

@Joen
4 months ago

Dark background opted into

#12 @aristath
4 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.

@poena
4 months ago

Add theme support for editor-styles

@poena
4 months ago

with and without Gutenberg

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

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

Reviewing for commit

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

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

Note: See TracTickets for help on using tickets.