Twenty Nineteen is using CSS selectors that are no longer used in the editor

[poena]

Twenty Nineteen has a feature where users can change the primary color in the Customizer.

When the primary color is changed, there is a number of elements and design features that should change color.
This works on the front of the website, but it has stopped working inside the block editor.

The selectors for the editor styles starts with

.editor-block-list__layout .editor-block-list__block

See https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentynineteen/inc/color-patterns.php#L209

And this class .editor-block-list__block was removed in WordPress version 5.4. It needs to be replaced with a selector that works today and is backwards compatible.

[poena]

I have tested Twenty Nineteen version 2.7 on WordPress 5.1 and 6.4.
Replacing the start of the selectors with .editor-styles-wrapper will not work on 5.1, because it has the same specificity as the themes default CSS. But using .editor-styles-wrapper .wp-block works on both WordPress versions.

[poena]

Update CSS selectors in color-patterns.php

[poena]

I have submitted a patch, any suggestions for improvements to the selectors are of course welcome.

Testing instructions

To test that the patch solves the color issues in the block editor,
add the following blocks:

A paragraph with a link. Expected result: -The link color should be blue when the customizer option is not used, and the custom color when the option is used.
On hover, there should only be a small color change.

A paragraph with a link and a text color. Expected result: -The link color should always be the color selected in the color setting in the block sidebar, not the color from the option in the Customizer.

Two button blocks: One default (fill) and one with the outline style.
Expected result: The background and outline color should be blue when the customizer option is not used, and the custom color when the option is used.
Changing the button color in the blocks settings sidebar should override this color.

A file block. Expected result: The link and the button should be blue when the customizer option is not used, and the custom color when the option is used.
The color from the customizer option should be used even if the background color in the block settings sidebar is changed.

A quote block that does not use the large style. Note that the large style has been removed from the editor, but sites can still have blocks with this style enabled.
The border should be blue when the customizer option is not used, and the custom color when the option is used.

A pull quote block with a text that has a link.
Add the class name is-style-solid-color to the block in the Advanced panel > Additional CSS class names.
The background color should be blue when the customizer option is not used, and the custom color when the option is used.
The link color should not be the custom color.

A cover block with a link. The link color should not be the custom color.

[faisal03]

Testing Report

I tested the patch, and it is working as expected.

Settings

Paragraph block with Link

Environment

• OS: macOS
• Localhost Server: Nginx
• PHP: 8.2.1
• WordPress: 6.4.3
• Browser: Chrome
• Theme: Twenty Nineteen

Actual Results

• ✅ The patch is working fine and the new selectors are found on the page, ultimately the CSS being applied from the settings.

[faisal03]

Hi @poena could you please clarify why testing is still necessary for the ticket?

[poena]

Because I am not sure that the new selectors are the best.
Depending on how complex an issue is, testing by one person on one WordPress version is not always enough.
If there are any negative side effects with these new selectors in any other WordPress version, or for child themes, it would be best to find them sooner rather than later.

[faisal03]

Yes, that makes sense. Thanks for the clarification.

[ashikur698]

Tried recreating the issue.

It seems like the paragraph, buttons, & file options are changing as expected and mentioned in the ticket. Here's the screenshot - ​https://monosnap.com/file/WVcZ5kDJLxWBGm1TjKJRgDFFOG9K2N

Environment

• OS: macOS
• Localhost Server: Nginx
• PHP: 8.1.23
• WordPress: 6.5 Beta-1
• Browser: Chrome

Theme: Twenty Nineteen

Findings

• ✅ The mentioned issues could not be recreated. Seems like the patch is working fine.

[SergeyBiryukov]

In 57637:

Twenty Nineteen: Update selectors used to change the primary color in the Customizer.

The .editor-block-list__block class was removed in WordPress 5.4. It is now replaced with a selector that works in the current versions and is backward compatible.

Follow-up to [43842].

Props poena, faisal03, ashikur698.
Fixes #59922.

[SergeyBiryukov]

Just noticed a little inconsistency in [57637]:

.editor-styles-wrapper .wp-block .wp-block-file .wp-block-file__textlink
...
.editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__button
...
.editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__textlink:hover

Note the space between .wp-block and .wp-block-file. Should it be there in the latter two selectors as well, or maybe removed from the first one?

Same question here:

.editor-styles-wrapper .wp-block .wp-block-button
...
.editor-styles-wrapper .wp-block.wp-block-quote:not(.is-large):not(.is-style-large),
.editor-styles-wrapper .wp-block .wp-block-freeform blockquote
...
.editor-styles-wrapper .wp-block.wp-block-pullquote.is-style-solid-color:not(.has-background-color)
...
.editor-styles-wrapper .wp-block.wp-block-pullquote.is-style-solid-color a,
.editor-styles-wrapper .wp-block.wp-block-cover a

Should there always be a space after .wp-block or not?

[poena]

It is complicated by the changes to the editor in different versions.
It is tricky to find in what WP version the blocks themselves have been introduced and changed.

The space is meant for the WP versions before 5.8 where wp-block and wp-block-name classes are on different elements.
The wp-block class is used to increase the specificity enough to override the default styles.
It results in some duplication but I don't know which selectors would be better.

Should there always be a space after .wp-block or not?

So the answer is, if we are using this selector, we need both.

This is all the testing I am able to do today.

# File block
Before 5.8, the file block link is not a link element, so the general link styles are not applied.
The class name for the link was .wp-block-file__textlink, and it was removed in 5.8.
The color is decided by
.editor-styles-wrapper .wp-block .wp-block-file .wp-block-file__textlink

The :hover, which does not have a space, isn't working and should be updated.

.editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__textlink:hover

should have been:

.editor-styles-wrapper .wp-block .wp-block-file .wp-block-file__textlink:hover

The file block button background color is not working, because

.editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__button

needs to be duplicated and a space added:

.editor-styles-wrapper .wp-block .wp-block-file .wp-block-file__button

In later versions:

• The file block link color is decided by the general link colors.
• The file block button background color is decided by

.editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__button

• The wp-block and wp-block-file classes are on the same element.

# Pullquote block

The CSS only applies to the solid color block variation.
This variation was added in 5.1 and removed in Gutenberg version 11.2, which would mean 5.9.
It needs to have the selectors with and without the space,
for any sites that added the style variation when it was available.

# Classic editor quote
The border color does not work for 5.8+ because the selector without the space is missing.

Trac ticket:
https://core.trac.wordpress.org/ticket/59922

Update CSS selectors to work on multiple WordPress versions. WIP.

[poena]

Button block

The button block hover, active and focus colors are not working in the editor for the outline version, not before or after 5.8, I'm not sure that they ever worked.

The :hover etc is on the wrong element.

.editor-styles-wrapper .wp-block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color),

Should be:

.editor-styles-wrapper .wp-block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,

Even if they would work, the editor and front would not match.
I believe the intention is for the color to change to #111.

[poena]

I removed the editor styles for hover, active and focus for the buttons.
I found it too confusing that the block changed color when you clicked on it to add or edit the button text.
I kept one exception: the button block with the outline style variation, before WordPress 5.8. Because it was using the default color when it was selected.

For the front, I set the button hover and focus color to $color__background-button-hover, to match the other buttons in the theme. This also increases the color contrast so that the buttons are more accessible when the custom color option is enabled in the Customizer.

I also added editor styles for the search block, because the editor and front did not match.
I built the CSS files for this update.

[SergeyBiryukov]

In 57712:

Twenty Nineteen: Further adjust CSS selectors used to change the primary color.

This aims to make the file, button, quote, pullquote, and search block selectors work on multiple WordPress versions.

Follow-up to [57637].

Props poena, mukesh27.
Fixes #59922.

Thanks for the PR! Merged in r57712.