Twenty Twenty: Issue with primary color in the block editor

[grafruessel]

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

[grafruessel]

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 is almost the background color #f9f9f9

[nielslange]

#48723 was marked as a duplicate.

[ianbelanger]

#48723 was marked as a duplicate.

[melchoyce]

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?

[grafruessel]

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

[melchoyce]

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

[poena]

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]

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

[poena]

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

[poena]

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.

[poena]

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

[poena]

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.