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

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