Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
overclokk opened this issue Oct 17, 2021 · 4 comments · Fixed by #35751
Assignees
Labels
[Status] In Progress Tracking issues with work in progress

Comments

@overclokk
Copy link

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 and core/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 the body 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:

{
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "slug": "h1",
                    "size": "32px",
                    "name": "Used in H1 titles"
                }
            ]
        }
    }
}

We have h1 as slug and the CSS variables generated inside the body selector we have the variable --wp--preset--font-size--h-1 where the h and the 1 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 name has-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-end

Further 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:

// CSS generated by GS
.wp-block-post-title {
	color: var(--wp--preset--color--body-color);
	font-size: var(--wp--preset--font-size--h2); // without the dash separator
}
// CSS from the theme.json
.wp-block-post-title {
	color: var(--wp--preset--color--body-color);
	font-size: var(--wp--preset--font-size--h-1); // with the dash separator
}

This is the snippet under the styles sections in the theme.json

{
    "styles": {
        "blocks": {
            "core/post-title": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-1)"
                }
            }
        }
    }
}

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

@oandregal
Copy link
Member

Hey, I've got a fix for this at #35751 It turns dynamic blocks that use the typography.fontSize block supports have this issue (the class attached to them is not kebabCased properly).

Would you mind clarifying the second thing you mention? This is what I've done:

  • Register the font size in the theme.json as you suggested.
  • Added this bit to the styles section:
{
    "styles": {
        "blocks": {
            "core/post-title": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-1)"
                }
            }
        }
    }
}
  • Checked that the styles in the global-styles-inline-css stylesheet are proper:
.wp-block-post-title {
  font-size: var(--wp--preset--font-size--h-1);
}

Am I missing something?

@overclokk
Copy link
Author

@oandregal sorry, I miss this issue, the second thing you have only to verify that when you add the style into the theme.json and change that value from the Gloal Styles Interface in admin (in the example above is the font size of the post-title) the value generated and saved by the Global Styles Interface is correct.
Let me know if you need more info.
Thank you.

@oandregal
Copy link
Member

👍 so unless I'm missing something, it's working as intended.

@overclokk
Copy link
Author

Perfect 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress
Projects
None yet
2 participants