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

Fluid font size application is dependent on the global state #58135

Closed
costasovo opened this issue Jan 23, 2024 · 2 comments · Fixed by #58362
Closed

Fluid font size application is dependent on the global state #58135

costasovo opened this issue Jan 23, 2024 · 2 comments · Fixed by #58362
Assignees
Labels
[Feature] Typography Font and typography-related issues and PRs [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@costasovo
Copy link
Contributor

Description

I'm working with WP_Theme_JSON class. I feed it with a decode theme.json and use to generate styles I want to use in a custom editor.
The issue is that even though I specify set settings.typography.fluid to false and provide values in pixels the styles generated by WP_Theme_JSON::get_stylesheet still contain the values converted to clamp function.

This seems to happen because wp_get_typography_font_size_value checks the global settings to see if the fluid font size is enabled. So if the site is configured to use the fluid font size it is always applied no matter what value I configure in data I pass to WP_Theme_JSON.

To add more context, my use case is a custom Gutenberg email editor, and I want to disable the fluid font size because clamp is not supported in many email clients.

Step-by-step reproduction instructions

  1. I have a WP site running on v 6.4, and I use The Twenty-Three theme.
  2. I use the following code snippet
$themeJsonData = '{
      "version": 2,
      "settings": {
        "typography": {
          "fluid": false
        }
      },
      "styles": {
        "elements": {
          "h1": {
            "typography": {
              "fontSize": "48px",
              "fluid": false
            }
          }
        }
      }
    }';
    $themeJson = new \WP_Theme_JSON(json_decode($themeJsonData, true), 'default');
    $css = $themeJson->get_stylesheet();
  1. The generated CSS containsh1{font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 2.285), 48px);}
    but I would expect h1{font-size: 48px;}

Screenshots, screen recording, code snippet

No response

Environment info

  • WordPress 6.4
  • I use the Gutenberg version distributed in the WordPress
  • Twenty Twenty-Three theme

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

@costasovo costasovo added the [Type] Bug An existing feature does not function as intended label Jan 23, 2024
@annezazu annezazu added the [Feature] Typography Font and typography-related issues and PRs label Jan 24, 2024
@ramonjd
Copy link
Member

ramonjd commented Jan 25, 2024

Thanks for reporting!

@ramonjd
Copy link
Member

ramonjd commented Jan 29, 2024

I have a WIP idea going on over at:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants