Make WordPress Core

Opened 5 years ago

Last modified 6 months ago

#48684 new defect (bug)

Twenty Twenty: Issue with primary color in the block editor

Reported by: grafruessel's profile grafruessel Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-screenshots needs-patch
Focuses: css Cc:

Description (last modified by SergeyBiryukov)

Hi there,

I found an error in css , when working with gutenberg editor in backend.

When I select the primary color as background color the row editable functions dont work due to css error.

This class should be fixed:

.has-background.has-accent-background-color *:not(.has-text-color) {
    color: #f9f9f9;
}

We can just delete this class or where else is it needed?

Thanks Niko

Attachments (5)

de_twentytwenty_linkcolor.png (881.2 KB) - added by grafruessel 5 years ago.
wpbeta5.4-gutenberg-error.png (713.2 KB) - added by grafruessel 5 years ago.
twenty-twenty-64-block-editor-colors.png (206.9 KB) - added by poena 6 months ago.
WP 6.4: The text color of the buttons are incorrect in the block editor
twenty-twenty-64-nested-colors.png (205.1 KB) - added by poena 6 months ago.
WP 6.4: Text colors inside nested groups, working as expected with the current CSS
twenty-twenty-64-nested-colors-with-propsed-changes.png (210.1 KB) - added by poena 6 months ago.
WP 6.4: Text colors inside nested groups, not working as expected with the proposed CSS changes

Change History (20)

#1 @nielslange
5 years ago

  • Keywords needs-patch added; has-patch removed
  • Summary changed from twenty twenty theme - primary color & gutenberg error to Twenty Twenty: Issue with primary color when using Gutenberg

#2 @grafruessel
5 years ago

  • Keywords needs-patch removed
  • Summary changed from Twenty Twenty: Issue with primary color when using Gutenberg to twenty twenty theme - primary color & gutenberg error

Steps to reproduce:

  1. edit a page
  2. select gutenberg block "Media & Text"
  3. on the text side use a background color in dark
  4. the editable sections becomes light (photo attached)

Expected behaviour:
the buttons should stay visible

Current behaviour:
the text color (#f9f9f9) is almost the background color (#ffffff)

Last edited 5 years ago by grafruessel (previous) (diff)

#3 @grafruessel
5 years ago

  • Summary changed from twenty twenty theme - primary color & gutenberg error to Twenty Twenty: Issue with primary color when using Gutenberg

#4 @SergeyBiryukov
5 years ago

  • Description modified (diff)

#5 @nielslange
5 years ago

#48723 was marked as a duplicate.

#6 @ianbelanger
5 years ago

#48723 was marked as a duplicate.

#7 @ianbelanger
5 years ago

  • Milestone changed from Awaiting Review to 5.3.1

#8 @ianbelanger
5 years ago

  • Keywords needs-testing added
  • Milestone changed from 5.3.1 to Awaiting Review

#9 @melchoyce
5 years ago

Able to reproduce running WordPress 5.3, Twenty Twenty 1.0, and Gutenberg 7.0.0.

@karmatosed is unable to reproduce on WordPress 5.4-alpha-46812, Twenty Twenty 1.0, and Gutenberg master — so it might be fixed in Gutenberg master?

#10 @grafruessel
5 years ago

@karmatosed, @melchoyce nope the error still exists.

Just tested with development version (5.4-alpha-46829) and with development version (5.4-alpha-46885)
Both versions you don't see the right color.
Twenty TwentyVersion: 1.0

I don't where I can check the Gutenberg Version.

If anyone want a login to the backend, just write me in slack. (same name)

#11 @melchoyce
5 years ago

Thanks @grafruessel. You'd only be running the Gutenberg Master branch if you have it installed via the GitHub repo (vs. the latest plugin release, or the version in core).

#12 @poena
6 months ago

  • Keywords needs-patch added; needs-testing removed

I am not able to reproduce the problem with the toolbars in WordPress 6.4, with or without Gutenberg active. The block toolbars are fully visible and fully functional for me, no matter what background color is used.

If I change the body background color in the customizer settings to black, there are some other contrast issues.

-In the customizer, open the color option and set the background to the first color swatch, the black.

  • Open the block editor and add a media & text block. Set the background colot to primary.
  • Notice that the media upload button has an incorrect text color, changed by:
    .has-background.has-primary-background-color *:not(.has-text-color),
    
  • Change the background color of the media & text block to accent.
  • Notice that the media upload button has an incorrect text color, changed by:
     .has-background.has-accent-background-color *:not(.has-text-color)
    
  • Insert a group block (or row or stack). Set the background color to primary.
  • Try to insert a new block inside the group. Notice that the + in the inserter button has the wrong color, changed by:
    .has-background.has-primary-background-color *:not(.has-text-color)
    


@poena
6 months ago

WP 6.4: The text color of the buttons are incorrect in the block editor

@poena
6 months ago

WP 6.4: Text colors inside nested groups, working as expected with the current CSS

#13 @poena
6 months ago

If we remove

.has-background.has-primary-background-color *:not(.has-text-color)
.has-background.has-accent-background-color *:not(.has-text-color)

Then the text color contrast in the nested blocks stops working.

Last edited 6 months ago by poena (previous) (diff)

@poena
6 months ago

WP 6.4: Text colors inside nested groups, not working as expected with the proposed CSS changes

#14 @poena
6 months ago

  • Summary changed from Twenty Twenty: Issue with primary color when using Gutenberg to Twenty Twenty: Issue with primary color in the block editor

#15 @poena
6 months ago

I tried adding :not([class^="components"]) to the mentioned lines of CSS; this solves the problem with the text color on the media upload button, but not the +, the svg, in the block inserter.

Note: See TracTickets for help on using tickets.