Make WordPress Core

Opened 11 months ago

Closed 11 months ago

Last modified 11 months ago

#58558 closed defect (bug) (fixed)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: minor Version: 6.2.2
Component: Bundled Theme Keywords: has-patch has-screenshots has-testing-info commit
Focuses: css Cc:

Description

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

Attachments (4)

58558.patch (651 bytes) - added by nidhidhandhukiya 11 months ago.
58558.2.patch (2.1 KB) - added by shailu25 11 months ago.
Patch added
before-patch.2.png (43.5 KB) - added by harshgajipara 11 months ago.
Before Patch
After-patch.png (43.8 KB) - added by harshgajipara 11 months ago.
After Patch

Download all attachments as: .zip

Change History (17)

#1 @sabernhardt
11 months ago

  • Focuses css added
  • Keywords needs-patch added
  • Severity changed from normal to minor
  • Summary changed from Twenty Nineteen Separator block is having issue with background color in editor. to Twenty Nineteen: Separator block does not support theme colors in editor

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;
	}
}
Last edited 11 months ago by sabernhardt (previous) (diff)

@shailu25
11 months ago

Patch added

@harshgajipara
11 months ago

Before Patch

@harshgajipara
11 months ago

After Patch

#2 @harshgajipara
11 months ago

  • Keywords has-patch added; needs-patch removed

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

#3 @harshgajipara
11 months ago

  • Keywords has-screenshots has-testing-info added

#5 @mukesh27
11 months ago

  • Milestone changed from Awaiting Review to 6.3

Thanks @nidhidhandhukiya for the ticket.

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

Moving to 6.3

@mukesh27 commented on PR #4690:


11 months ago
#6

@sabernhardt Could you please take a look

#7 @costdev
11 months ago

  • Keywords changes-requested added

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

#8 @costdev
11 months ago

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.

#9 @mukesh27
11 months ago

  • Keywords changes-requested removed

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

#10 @zunaid321
11 months ago

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

#11 @costdev
11 months ago

  • Keywords commit added

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

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

#12 @audrasjb
11 months ago

  • Owner set to audrasjb
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.