search

mapsteps / page-builder-framework

52 stars 17 forks source link

WordPress 5.9 overrides theme font sizes #40

Closed luminuu closed 2 years ago

luminuu commented 2 years ago

Hi, I'm not sure if you noticed this already: in WP 5.9, changes to the default variables for e. g. defined font sizes were made. This happens if a theme does not provide a theme.json file.

grafik

In my example I use the font size "Large" which is set by the theme to 20px. However with 5.9, these pre-defined classes get overwritten by the new default styles, which sets the font size to 36px. The other paragraphs in the screenshot are set to 21px.

Here's the corresponding issue at the Gutenberg repo: https://github.com/WordPress/gutenberg/issues/38252

And the mentioned changes in the dev note: https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/#changes-to-the-global-stylesheet

mapsteps commented 2 years ago

Hey @luminuu,

I noticed the font-size selection is gone entirely. Instead I can choose a size between 1-4 where none of them indicate a size. That's a bit strange. So adding additional CSS to fix this would be for backwards-compatibility only if I understand this correctly?

Thanks for reporting! :)

grafik

luminuu commented 2 years ago

🤔 Now I'm a bit confused. The 1, 2, 3, 4 font size selection is something I see in Twenty Twenty-Two, but when I activate Page Builder Framework, it looks like this on a paragraph block:

grafik

Which are defined here in PBF: https://github.com/MapSteps/Page-Builder-Framework/blob/2327e25502f3b592efb7b682d91c5041ba7e1856/inc/integration/gutenberg/gutenberg.php#L33

Tested on a fresh 5.9 install with PBF activated, no child theme. Screenshot in my first comment was from a project with a child theme but it's the same there. Also no Gutenberg plugin active too on both sites.

mapsteps commented 2 years ago

My bad, I had 2022 installed, lol. I'm on it & will report back asap :)

mapsteps commented 2 years ago

I wonder what the proper way would be to tackle this. Sure, I could add some custom CSS to just override what's happening here. I tried prefixing the CSS with the p but that obviously won't override the default added by WordPress since it's using !important for some reason. Geez.

I'm wondering if overriding the CSS variables is a good idea or not.

grafik

mapsteps commented 2 years ago

Also https://github.com/WordPress/gutenberg/issues/38252#issuecomment-1023034548

mapsteps commented 2 years ago

Okay so I could just add a theme.json file like this:

{
    "settings": {
        "typography": {
            "fontSizes": [{
                "name": "Tiny",
                "size": "12px",
                "slug": "tiny"
            }, {
                "name": "Small",
                "size": "14px",
                "slug": "small"
            }, {
                "name": "Regular",
                "size": "1rem",
                "slug": "regular"
            }, {
                "name": "Large",
                "size": "20px",
                "slug": "large"
            }, {
                "name": "Larger",
                "size": "32px",
                "slug": "larger"
            }, {
                "name": "Extra Large",
                "size": "44px",
                "slug": "extra"
            }]
        }
    }
}

The only downside would be that we're losing the following logic that was quite handy because it inherited the font size defined in the customizer setting:

grafik

mapsteps commented 2 years ago

Fixed it by simply adopting & configuring the theme.json for typography :)

https://github.com/MapSteps/Page-Builder-Framework/commit/a026b9b02953451097e5539190aa305bf0ac494a