theme.json and Global Styles: Bug in generating the CSS custom properties (variables) if the slug contains numbers and letters (e.g.: h1 - h2 - h3 etc) #35708
Labels
[Status] In Progress
Tracking issues with work in progress
Description
The generation of CSS custom properties (variables) if the slug contains numbers and letters (e.g.: h1 - h2 - h3 etc)) does not work properly for
core/site-title
andcore/post-title
(I do not tested all the blocks but for now I can see the issue in theese 2). The CSS variables generated in thebody
selector are ok but those variables or css class names applyed to post title and site title are not generated correctly.Step-by-step reproduction instructions
Let's take an example of theme.json:
We have
h1
as slug and the CSS variables generated inside thebody
selector we have the variable--wp--preset--font-size--h-1
where theh
and the1
are separated by a dash, so this is the expected behavior because the regex works in this way.Let say we also have h2 h3 h4 h5 h6 registered in theme.json preset now in the editor if you apply one of those styles (e.g.
h3
) from the drop down menu in the select box for font sizes to a block[site|post]-title
you can see in the front-end of the page that instead of applying the correct class namehas-h-3-font-size
it has applyed instead the one without the dash separator:has-h3-font-size
, in the editor it works as expected, the correct class name with the dash separator is applyed correctly but not in front-endFurther I also noticed that if I add a style in the theme.json under
styles
section and I change the style inside the Global Styles Editor for example to add an h2 font size to the[site|post]-title
block the css generated is not what we can expect:This is the snippet under the styles sections in the theme.json
Screenshots, screen recording, code snippet
No response
Environment info
WP 5.8.1, Gutenberg 11.7, Custom child theme and also TT1, PHP 7.4
Firefox
Win 10
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
The text was updated successfully, but these errors were encountered: