Per-level styling of heading blocks does not work

[wongjn]

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.

[hellofromTonya]

Moving into 6.2 for investigation.

[hellofromTonya]

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.

[hellofromTonya]

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

[hellofromTonya]

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?

[ndiego]

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.

[mukesh27]

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?

[Mamaduka]

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

[costdev]

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.

[hellofromTonya]

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.

[bph]

The dev note has been updated [with the new code example]​https://make.wordpress.org/core/2023/03/07/miscellaneous-editor-changes-in-wordpress-6-2/#wp-block-heading-css-class-added-to-every-heading-block

Thanks for the ping @hellofromTonya

[GitHub reference]​https://github.com/WordPress/gutenberg/pull/42122#issuecomment-1477554092

Props to @scruffian

[hellofromTonya]

Thank you @bph.

Thank you @wongjn for reporting this issue :)

Closing this ticket as fixed.