WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 2 days ago

#49610 new defect (bug)

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

Reported by: nrqsnchz Owned by:
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 (3)

49610.patch​ (1.3 KB) - added by kjellr 4 weeks ago.
Screenshot 2020-04-13 at 19.12.21.png​ (812.8 KB) - added by Joen 2 days ago.
Default light background
Screenshot 2020-04-13 at 19.12.46.png​ (812.1 KB) - added by Joen 2 days ago.
Dark background opted into

Download all attachments as: .zip

Change History (14)

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

#2 @Joen
5 weeks ago

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

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

#5 @kjellr
4 weeks 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
4 weeks ago

  • Keywords has-patch added; needs-patch removed

#7 @JavierCasares
3 days 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
3 days 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 days 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
2 days 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
2 days 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
2 days ago

Default light background

@Joen
2 days ago

Dark background opted into

Note: See TracTickets for help on using tickets.