Twenty Nineteen: Separator block does not support theme colors in editor

[nidhidhandhukiya]

Steps to reproduce the issue.

1. Activate Twenty Nineteen theme.
2. Choose Separator block.
3. Apply background color any from the default except white or light gray.

You can able to see the change in the color front side but it is not same as the chosen color in editor side.
I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/Y0J1n5yLjKtvZqLb3Pzm

[sabernhardt]

The colors work on the front end, so the patch would need to edit the style-editor.scss file (and be compiled to style-editor.css) instead of style.css.

.wp-block-separator {
	/* add these after existing Separator block styles */

	&.has-primary-background-color {
		color: $color__link;
		background-color: $color__link;
	}

	&.has-secondary-background-color {
		color: $color__border-link-hover;
		background-color: $color__border-link-hover;
	}

	&.has-dark-gray-background-color {
		color: $color__text-main;
		background-color: $color__text-main;
	}

	&.has-light-gray-background-color {
		color: $color__text-light;
		background-color: $color__text-light;
	}

	&.has-white-background-color {
		color: #FFF;
		background-color: #FFF;
	}
}

[shailu25]

Patch added

[harshgajipara]

Before Patch

[harshgajipara]

After Patch

[harshgajipara]

Tested with https://core.trac.wordpress.org/attachment/ticket/58558/58558.2.patch. The patch looks good to me and this solved the issue.

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

[mukesh27]

Thanks @nidhidhandhukiya for the ticket.

@sabernhardt i raise PR with the your suggestion could you take a look it.

Moving to 6.3

@sabernhardt Could you please take a look

[costdev]

Reviewing the patches:

• 58558.patch makes changes to style.css rather than style-editor.scss and building to style-editor.css.
• 58558.2.patch makes changes to the correct files but has some spacing issues with the curly braces that don't appear for me locally after using the theme's build script.
• ​PR 4690 makes changes to style-editor.scss, but not style-editor.css. It needs a run of npm i && npm run build in the local theme directory to build style-editor.css, commit the changes and push to the PR. I've left a similar note on the PR.

Adding changes-requested.

As ​PR 4690 is the latest patch, I'll submit a test report for it below (assuming the npm i && npm run build commands were run on it and it was updated).

[costdev]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/4690.diff

Environment

• WordPress: 6.3-alpha-55505
• PHP: 7.4.33
• Server: Apache/2.4.56 (Ubuntu)
• Database: mysqli (Server: 5.7.41-0ubuntu0.18.04.1 / Client: mysqlnd 7.4.33)
• Browser: Chrome 114.0.0.0 (Windows 10/11)
• Theme: Twenty Nineteen 2.5
• MU-Plugins: None activated
• Plugins: None activated

Actual Results

• ✅ Before applying the patch: In the Editor, the Separator block doesn't respect background colour selections other than white and light gray. Issue reproduced.
• ✅ After applying the patch (and building the theme as the PR is currently missing this): In the Editor, the Separator block respects all background colour selections. Issue resolved with the patch (after the requested changes are made).

Additional

• Once the requested changes are made to the PR, it should be ready for commit consideration.

[mukesh27]

Thanks @costdev, The changes was addressed and ready for review.

[zunaid321]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4690.diff

Environment

• OS: Windows 11 (22H2)
• Web Server: nginx/1.23.4
• PHP: 7.4.33
• WordPress: 6.3-alpha-55505-src
• Browser: Chrome Version 114.0.5735.110 (Official Build) (64-bit)
• Theme: Twenty Nineteen

Before Applying The Patch

• Followed the instructions of @costdev
• The colors for separartor blocks did not show up.

After Applying The Patch

• Followed the same instructions
• ✅ The colors of separator blocks showed as expected.

Screenshots

• Before Patch: ​https://prnt.sc/a4Vcb5FX87so
• After Patch: ​https://prnt.sc/SzqzOHUpdp7G

[costdev]

Thanks for the update @mukesh27 and for the test report @zunaid321!

This one looks good to go. Adding for commit consideration.

[audrasjb]

In 56036:

Twenty Nineteen: Ensure Separator block supports theme colors in editor.

This fixes a bug in the Editor, where the Separator block did not support background color selections other than white and light gray.

Props nidhidhandhukiya, sabernhardt, shailu25, harshgajipara, mukesh27, costdev, zunaid321.
Fixes #58558.

committed in https://core.trac.wordpress.org/changeset/56036