Closed mayuge3 closed 1 year ago
Verifying that I can also see a non-fluid size on the front end when I set the XXL, large or medium sizes via Styles > Typography > Heading, with Gutenberg deactivated. These all have fluid min and max values defined in theme.json.
I believe https://github.com/WordPress/gutenberg/pull/44761 may fix this issue. I've just tested the above with this PR and I'm seeing fluid sizes.
Actually, I don't think the above PR does fix this issue 100%. I'm seeing fluid font sizes, but they're not the ones set in theme.json.
@andrewserong @ramonjd, pinging you in case you haven't seen this issue.
I can confirm that https://github.com/WordPress/gutenberg/pull/44761 partially fixes this.
@mikachan is right: the values are not the same.
The reason there's a discrepancy between the clamp value added in global styles, and the one generated for the preset --wp--preset--font-size--xx-large is that the preset defined extra parameters, such as the max and min fluid sizes.
Incoming from preset:
{ ["size"]=> "10rem" ["slug"]=> "xx-large" ["fluid"]=> { ["min"]=> "4rem" ["max"]=> "20rem" } }
Output:
"clamp(4rem, 4rem + ((1vw - 0.48rem) * 30.769), 20rem)"
https://github.com/WordPress/gutenberg/pull/44761/files#diff-f28aa79997745a4a51f917012b45a809c9b45d55134b55379a718f5c751dddf4R1052 as it stands does not do this yet, so the clamp value is estimated:
Incoming from font size picker:
{ ["size"]=> "10rem" }
Output:
"clamp(7.5rem, 7.5rem + ((1vw - 0.48rem) * 14.423), 15rem)"
There is an unrelated UI bug as well. See "UNDEFINED"
So, we could check the incoming custom value against the fontSizes
presets to grab any fluid parameters, e.g.,
if ( 'font-size' === $css_property ) {
$font_size_properties = array( 'size' => $value );
// Checks for an existing preset value.
$font_size_presets = _wp_array_get( $settings, array( 'typography', 'fontSizes', 'theme' ), null );
if ( ! empty( $font_size_presets ) ) {
$selected_font_size_preset_index = array_search( $value, array_column( $font_size_presets, 'size' ), true );
$font_size_properties = false !== $selected_font_size_preset_index ? $font_size_presets[ $selected_font_size_preset_index ] : $font_size_properties;
}
$value = gutenberg_get_typography_font_size_value( $font_size_properties );
}
This works insofar that it ensures that the clamp values are the same.
The caveat is that if the value is a custom font size (not a preset) and there's a matching preset size, the custom value will be converted to a clamp value using the preset's min and max values.
There's no way, at least for me, to know whether an incoming value is a custom value or a preset value.
This seems to me to be inconsistent, but perhaps an acceptable compromise?
Unless we want to be strict about this and dictate that all custom font size values should be treated differently, even custom font sizes that match possible preset font size values. If that's the case, I'm beginning to believe that it might be best to convert global font-size values before we save them, or, maybe save presets as var(--wp--preset--font-size--xx-large)
🤷
What do you reckon @andrewserong / @noisysocks ?
I think I have a fix for all this over at https://github.com/WordPress/gutenberg/pull/44791
~Still testing...~
I think it works!
The fluid font size now works in 6.1-RC1-54506. Thank you!
The output is h1 {font-size: clamp(4rem, 4rem + ((1vw - 0.48rem) * 30.769), 20rem);}
I hope this value will be var() in the future.
I hope this value will be var() in the future.
This is a good point, thanks! I'll add it as a follow up in:
Resolved by: https://github.com/WordPress/gutenberg/pull/44761
Description
When I use TT3 and set H1 to XXL at Styles > Typography > Heading, the output is not a fluid font size.
Expected global style output: h1 {font-size: var(--wp--preset--font-size--xx-large);} or h1 {font-size: clamp(4rem,4rem + ((1vw - 0.48rem) * 30.769);}
Happens instead: h1 {font-size: 10rem}
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
TT3 theme.json XXL font-size setting:
Styles > Typography > Heading setting:
Global style output:
Environment info
WP 6.1-beta3-54396, instawp install TT3 included in WP 6.1 nightly. Gutenberg plugin deactivated
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