Make WordPress Core

#57904 closed defect (bug) (fixed)

Per-level styling of heading blocks does not work

Reported by: wongjn's profile wongjn Owned by:
Milestone: 6.2 Priority: normal
Severity: normal Version: 6.2
Component: Themes Keywords: has-testing-info has-dev-note
Focuses: Cc:

Description

As reported in the Miscellaneous Editor changes in WordPress 6.2, one should be able to style the h1-h6 elements of a core/heading block differently to the global h1-h6 elements via theme.json:

{
	"styles": {
		"elements": {
			"h1": {
				"color": {
					"background": "blue"
				}
			}
	        },
		"blocks": {
			"core/heading": {
				"elements": {
					"h1": {
						"color": {
							"background": "pink"
						}
					}
				}
			}
		}
	}
}

However, this does not work as the CSS that is generated by the WordPress style engine is as follows:

.wp-block-heading h1{background-color: pink;}

Where it should be more like:

h1.wp-block-heading{background-color: pink;}

Tested in 6.2-RC1-55503 with Twenty Twenty-Three.

Change History (15)

#1 @wongjn
15 months ago

  • Component changed from General to Themes

#2 @sabernhardt
15 months ago

  • Version set to trunk

#3 @hellofromTonya
15 months ago

  • Milestone changed from Awaiting Review to 6.2

Moving into 6.2 for investigation.

#4 @hellofromTonya
15 months ago

  • Keywords has-testing-info added

Testing Instructions

These steps define how to reproduce the issue, and indicate the expected behavior.

Steps to Reproduce

  1. Open the Twenty Twenty-Three theme's theme.json in your favorite code editor.
  2. Find `"styles" > "blocks" on about line 291.
  3. Add the following json to as the first element under "blocks" (above "core-navigation"):
    "core/heading" : {
      "elements": {
    	"h1": {
    	  "color": {
    		"background": "pink"
    	  }
    	}
      }
    },
    
  4. Save the file.
  5. Launch your test suite.
  6. On the front-end, open your browser's Dev Tools interface.
  7. In the "Inspector" search for .wp-block-heading-inline-css. 🐞 Bug occurs.

Expected Results

When testing a patch to validate it works as expected:

  • ✅ The generated CSS for the h1 should be
    h1.wp-block-heading{background-color: pink;}
    

When reproducing a bug:

  • ❌ The generated CSS for the h1 is incorrectly set as:
    .wp-block-heading h1{background-color: pink;}
    

the full style (at the time of this comment):

<style id="wp-block-heading-inline-css">
h1.has-background,h2.has-background,h3.has-background,h4.has-background,h5.has-background,h6.has-background{
  padding:1.25em 2.375em;
}
.wp-block-heading h1{background-color: pink;}
</style>

Test Report Icons:
🐞 <= Indicates where issue ("bug") occurs.
✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.

#5 @hellofromTonya
15 months ago

Reproduction Report

Yes, I can reproduce the reported issue.

Environment

  • OS: macOS
  • Web Server: wp-env (Docker)
  • WordPress: 6.2-RC1-55503
  • Browser: Firefox 110.0.1, Edge, and Chrome
  • Theme: Twenty Twenty-Three
  • Active Plugins: None

Actual Results

  • ✅ Error condition occurs (reproduced).

#6 @hellofromTonya
15 months ago

Hello @wongjn,

Welcome back to WordPress Core's Trac! Thank you for reporting this issue :)

I can reproduce the issue as noted in the Test Report above.

Pinging some folks from the Release Squad.
@mamaduka @ntsekouras @ndiego is this known issue you're tracking? Should it be reported upstream in Gutenberg?

#7 @ndiego
15 months ago

I can confirm as well. @zieladam would you be able to take a look at this? According to the Dev Note and the PR, this should work.

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.


15 months ago

#9 @mukesh27
15 months ago

This ticket was discussed in the recent bug scrub.

Do we need to report this upstream in Gutenberg? and close this issue? Is there any plan to fix this before RC2 today?

#10 @Mamaduka
15 months ago

I couldn't find any reports on the Gutenberg repo, so let's report upstream.

This ticket was mentioned in Slack in #core by costdev. View the logs.


15 months ago

#12 @costdev
15 months ago

Reported upstream: https://github.com/WordPress/gutenberg/issues/49070

Keeping this ticket open to track the issue in case it can be fixed for 6.2 RC3.

Triage Team: Leave this ticket for now.

#13 @hellofromTonya
14 months ago

  • Keywords needs-dev-note added

Update:

It was determined that the Dev Note is incorrect. The change works on any block except the core/heading block.

The Dev Note's example code will change the block to core/cover instead:

{
	"styles": {
		"elements": {
			"h1": {
				"color": {
					"background": "blue"
				}
			}
	        },
		"blocks": {
			"core/cover": {
				"elements": {
					"h1": {
						"color": {
							"background": "pink"
						}
					}
				}
			}
		}
	}
}

@bph, a 6.2 Docs co-Lead, has been notified in the Gutenberg issue. Marking as needs-dev-note to denote the change for tracking purposes.

@costdev @mukesh27 no code changes are required. Might be good to keep this ticket open until the dev note change happens.

#14 @bph
14 months ago

  • Keywords has-dev-note added; needs-dev-note removed
Last edited 14 months ago by bph (previous) (diff)

#15 @hellofromTonya
14 months ago

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

Thank you @bph.

Thank you @wongjn for reporting this issue :)

Closing this ticket as fixed.

Note: See TracTickets for help on using tickets.