Section Styles: unecessary additional CSS output

[colorful-tones]

Description

While testing the Section Styles I found some oddities in the CSS output. Some additional and unnecessary CSS is output, which is not ideal and should be restricted with some further code enhancements.

Testing instructions are below.

Step-by-step reproduction instructions

I've attempted to create a reduced test case.

1. Add a new file into the parent Twenty Twenty-Four theme for section styling: twentytwentyfour/styles/mock.json with the following code: https://gist.github.com/colorful-tones/56c090ab4b458cdfc77025dd076889e5#file-twentytwentyfour-mock-json
2. Create a post or a page and add a Paragraph block, and choose the 'Mock' block style variation from the Block Styles panel. Save, and visit the front end of the site.
3. View Source and search for mock to see all the styles output.

Notice that there are multiple entries for CSS being output and I'm not totally clear as to why. For example, with only a single <p class="is-style-mock is-style-mock--e1aa201d31a4b92642d4459514f98ae8">some text</p> element on the page - I see the following CSS being output on the front end of the site (in top-down order of being output on the page)

First related mock CSS output on the page:

<style id='global-styles-inline-css'>
:root :where(p.is-style-mock){background-color: #eed8d3;color: #201819;font-family: Arial, sans-serif;font-size: clamp(48.588px, 3.037rem + ((1vw - 3.2px) * 3.704), 96px);padding: 120px;}
</style>

Second instance of mock CSS output on the page:

<style id='block-style-variation-styles-inline-css'>
:root :where(p.is-style-mock--e1aa201d31a4b92642d4459514f98ae8){background-color: #eed8d3;color: #201819;font-family: Arial, sans-serif;font-size: clamp(48.588px, 3.037rem + ((1vw - 3.2px) * 3.704), 96px);padding: 120px;}

:root :where(p.is-style-mock--1aa4a837b1ec90d53ffc7707030b43c1){background-color: #eed8d3;color: #201819;font-family: Arial, sans-serif;font-size: clamp(48.588px, 3.037rem + ((1vw - 3.2px) * 3.704), 96px);padding: 120px;}
</style>

Note: the original block id associated with the final <p> class is e1aa201d31a4b92642d4459514f98ae8, which matches the last declaration for p.is-style-mock--1aa4a837b1ec90d53ffc7707030b43c1. However, where is the p.is-style-mock--e1aa201d31a4b92642d4459514f98ae8 even coming from and being output on the page? Why are there two declarations of the same and both targeting p.is-style-mock (one just being more specific with --1aa4a837b1ec90d53ffc7707030b43c1)?

I feel like the expected outcome would be to just see the only following CSS output on the page.

<style id='block-style-variation-styles-inline-css'>
:root :where(p.is-style-mock--1aa4a837b1ec90d53ffc7707030b43c1){background-color: #eed8d3;color: #201819;font-family: Arial, sans-serif;font-size: clamp(48.588px, 3.037rem + ((1vw - 3.2px) * 3.704), 96px);padding: 120px;}
</style>

Screenshots, screen recording, code snippet

section-styles-css-output.mp4

Environment info

• WordPress 6.6-beta1 (with WordPress Beta Tester plugin)
• Gutenberg plugin active at latest stable: 18.5.0
• See theme info in testing instructions

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[colorful-tones]

@aaronrobertshaw - just wanted to get this on your radar.

[aaronrobertshaw]

Thanks for the ping and writing up the detailed issue @colorful-tones 👍

Removing the old .is-style-* styles from the default stylesheet is on the radar to fix but I needed to switch focus to address #62303. This issue should be sorted in the next couple of days.

what would happen if I had a child theme with matching section style JSON files

This might be worth a separate issue.

First related mock CSS output on the page:

This CSS is what is planned to be removed.

Second instance of mock CSS output on the page:
...
Why are there two declarations of the same and both targeting p.is-style-mock (one just being more specific with --1aa4a837b1ec90d53ffc7707030b43c1)?

These are the per-application styles for the variation. They are required to be attached to the individual block instance that they are applied to so that these block style variations can be nested in any order for example:

Group (Light styles)
    Group (Dark styles)
        Group (Light again)

However, where is the p.is-style-mock--e1aa201d31a4b92642d4459514f98ae8 even coming from and being output on the page?

I'll need to dig into this later today and will update accordingly.

[colorful-tones]

Removing the old .is-style-* styles from the default stylesheet is on the radar to fix but I needed to switch focus to address #62303. This issue should be sorted in the next couple of days.

👍

what would happen if I had a child theme with matching section style JSON files

This might be worth a separate issue.

I've updated this issue to remove that bit. I did some further testing and I believe it was a user error on my end. All is working fine for child theme behavior.

First related mock CSS output on the page:

This CSS is what is planned to be removed.

👍

These are the per-application styles for the variation.

👍

However, where is the p.is-style-mock--e1aa201d31a4b92642d4459514f98ae8 even coming from and being output on the page?

I'll need to dig into this later today and will update accordingly.

Thanks! 👍