Twenty Twenty-One: Separator block is having issue in editor site with background color for default and thick style.

[nidhidhandhukiya]

Steps to reproduce:-

1. Activate the Twenty Twenty-one theme.
2. Select separator block.
3. From styles choose default or thick and change the background colour.
4. You can see your background colour is applicable but not visible properly.

For better understanding, I have attached a video.
Video URL:- ​https://share.cleanshot.com/TuBXQrDN3D1e3mr24hUF

[nidhidhandhukiya]

After applying this solution when we run this command

npm run build:style-editor

then the changes will be reflected and issue is resolved.

[mukesh27]

Hi there!

Thanks for the ticket and patch.

Your approach works fine but I don't think it needed border-bottom-color: inherit; just remove border-color from CSS that's fine.

I have another approach to solve it. Will submit PR for it.

cc. @poena

Moving to 6.1 consideration.

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

[poena]

This approach will break theme styles for anyone who has added a custom color to the existing custom CSS property.

I honestly do not know what the best way forward is.

[nidhidhandhukiya]

Hello @mukesh27
Yes you are right we don't need

border-bottom-color: inherit;

it is working if we removed the colour from the border-bottom as per your comment I have do this change and checked in my local yes it is working with this approach.
Submitted updated patch for this solution.

[poena]

Hi

Removing var(--separator--border-color); this way will break the block for existing sites
that has added a color to this custom CSS property.

I agree that selecting a color for the block must replace the CSS custom property.
The property needs to be applied so that the default color shows correctly if someone does not select a color.

When we select a color, the editor adds the .has-text-color CSS class to the block.
-By targeting this class, the CSS property can be removed when the color is replaced, and still work when it is needed.

It looks like the class that the theme used to solve this problem has changed. The theme used
.has-background and now only .has-text-color is used on the block.
What a strange change for a background color option!

Markup in 5.3:

<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-twentytwentyone-separator-thick" style="background-color:#cb0202;color:#cb0202">

Markup in 6.0:

<hr class="block-editor-block-list__block wp-block has-text-color has-alpha-channel-opacity is-selected wp-block-separator is-style-twentytwentyone-separator-thick" id="block-fce4da68-baa3-4ba9-9245-9694975df6be" tabindex="0" role="document" aria-label="Block: Separator" data-block="fce4da68-baa3-4ba9-9245-9694975df6be" data-type="core/separator" data-title="Separator" style="color: rgb(229, 0, 103); background-color: rgb(229, 0, 103);">

Please see line 42, .has-text-color should be added to this list:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss#L42

[poena]

I have made a pull request upstreams in Gutenberg that will re-add the missing class to the block: ​https://github.com/WordPress/gutenberg/pull/42769

[poena]

@nidhidhandhukiya Hi! Pinging you to ask if you are able to test if you can reproduce the problem in WordPress 6.1 alpha or the upcoming beta. According to my own testing, it has been solved.

But do we consider it enough if this issue is fixed in WordPress 6.1, or do we need to solve it for 6.0 in the theme?

[nithins53]

@poena Tested the issue on WP 6.1 beta 2 and was not able to reproduce it.

[audrasjb]

Given the issue was fixed in 6.1 beta cycle, let's close this as fixed.
There is no strong need to also fix it for older versions.

Thanks everyone!