Twenty Twenty: Incorrect Colour in editor for Separator Block

[bhaveshdesai13]

The colour selection in the Separator Block settings shows incorrectly. The colour shown in the block setting is different from the one the separator has in the editor and the front end.
Please refer to the video link for a better understanding: ​https://share.cleanshot.com/8PpMy6fxLxRJ2KbrY8Gm
Bug Screenshot: ​https://share.cleanshot.com/pgGnkPC03PYbzZNtS9ml

Also, the sepeator behaves weirdly on clicking it: ​https://share.cleanshot.com/BpSRGJX7f8MYVw80rcGD

[aniketpatel]

Thanks, @bhaveshdesai13 for the ticket!
Good catch.
It seems it is not working properly in WP 6.1.1 with the Gutenberg editor.

[miguelaxcar]

Thanks @bhaveshdesai13 , I managed to reproduce the issue on WP 6.1.1.

I tried fixing locally but it looks like lift heavier than expected, as the CSS has a different format on twenty-twenty theme compared to twenty-twenty-one theme, for instance.

On twenty-twenty-one theme the CSS uses variables for colors, what would be good adding to twenty-twenty theme IMHO, and also, the selectors are different for applying the proper properties to .has-COLORNAME-color and .has-COLORNAME-background-color.

I'm not the most experienced frontend WP engineers, so let's wait for more seasoned fellows chiming in.

[bhaveshdesai13]

Thank you for the patch @nidhidhandhukiya.

The colour shown in the block settings for the Separator Block is now the same as the one the separator has in the editor and the front end.

Separator Block in Editor and front end after the patch: ​https://share.cleanshot.com/CqNdz9qTnVllCQ0N5YzH

[poena]

Hi!

The patch changes the color for root; kindly update it to only apply the palette colors to the separator block.

[pavanpatil1]

Test Report

Test report for - https://core.trac.wordpress.org/attachment/ticket/57544/57544.patch

Environment
WordPress - V6.2.2
Theme - Twenty Twenty
Os - Windows
Browser - Chrome

Screenshot

Before: ​https://prnt.sc/seimRXQAVCMm

After: ​https://prnt.sc/218c3hwk0C4W

The patch is working as expected, However, as suggested in above comment it is changing the color for .root. Need to update it accordingly.

[sabernhardt]

keeping custom colors together with extra-high specificity for Separator block (:root .wp-block-separator.has-accent-color)

[sabernhardt]

repeating custom color classes in the Separator block section for lower specificity (.wp-block-separator.has-accent-color)

[sabernhardt]

I tried grouping the Separator block selectors in the Custom Colors section, but that required a higher specificity than putting them all further down in the Separator block section. 57544.2.patch​ is probably the better option.

Also, the separator behaves weirdly on clicking it

The focus style is another issue, which could be easier to fix in the editor (GB41543).

[bhaveshdesai13]

Thank You for the Patch @sabernhardt

Test Report
Test report for - https://core.trac.wordpress.org/attachment/ticket/57544/57544.2.patch

Environment
WordPress - v6.2.2
Theme - Twenty Twenty
OS - macOS Ventura 13.4.1
Browser - Chrome v114.0.5735.133

Screen Record Before and After the Patch
Before: ​https://share.cleanshot.com/1k0zXz00k8cXV3zjp9D3
After: ​https://share.cleanshot.com/lhYF9yTlh2QmD9cJXjyD

The Separator Blocks colors are now the same in the block settings, editor, and frontend.