Fluid typography: use layout.wideSize as max viewport width #49815
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ramonjd
added
the
[Feature] Typography
This was referenced Apr 14, 2023
|
Size Change: +2.86 kB (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in ad7e599. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4696069775
|
ramonjd
force-pushed
the
update/fluid-typography-calculate-min-font-size
branch
from
8c5b1be
to
f5630e1
Compare
Base automatically changed from
update/fluid-typography-calculate-min-font-size
to
trunk
April 20, 2023 23:34
…mum font scale that tapers out as the font size increases. The calculation is only performed where there no min font size is passed to the fluid font size methods. The min font scale factor is constrained by min and max values. Tests are updated to reflect the new clamp values. Docs are updated to reflect API change in JS function (removing minimumFontSizeFactor arg)
ramonjd
force-pushed
the
update/fluid-typography-use-layout-as-viewport-values
branch
from
ad7e599
to
3f23a05
Compare
ramonjd
added
[Type] Enhancement
ramonjd
requested review from
spacedmonkey,
ellatrix and
ajitbohra
as code owners
|
UX-wise, the font size fluidity is much more expected. I like this. |
- elaborates on the purpose of layout.wideSize in the theme.json schema
|
For folks like me who disabled the wide alignment by passing |
Hi @mateuswetah Good question! Yes I can confirm that |
ramonjd
added a commit
that referenced
this pull request
Jun 1, 2023
…maximum viewport size in relation to calculating fluid fontsize values. Unfortunately this maxViewPortWidth value was not being passed to `getTypographyFontSizeValue()` This commit correct this omission and adds extra unit tests to both the JS and PHP versions.
ramonjd
added a commit
that referenced
this pull request
Jun 1, 2023
…1146) * #49815 added `settings.layout.wideSize` as the default value for the maximum viewport size in relation to calculating fluid fontsize values. Unfortunately this maxViewPortWidth value was not being passed to `getTypographyFontSizeValue()` This commit correct this omission and adds extra unit tests to both the JS and PHP versions. * To avoid backwards compat problems I'm trying to keep the function signature the same, hence the gymnastics here. Because we support fluid: true and fluid: {...values}, we have to ensure the param object is correctly set so that we can know if fluid typography is enabled or not. The alternative could be a third argument to the `getTypographyFontSizeValue()` function, e.g., `isFluidEnabled` * My blod is typo * Why chain? Break the chains!
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…rdPress#51146) * WordPress#49815 added `settings.layout.wideSize` as the default value for the maximum viewport size in relation to calculating fluid fontsize values. Unfortunately this maxViewPortWidth value was not being passed to `getTypographyFontSizeValue()` This commit correct this omission and adds extra unit tests to both the JS and PHP versions. * To avoid backwards compat problems I'm trying to keep the function signature the same, hence the gymnastics here. Because we support fluid: true and fluid: {...values}, we have to ensure the param object is correctly set so that we can know if fluid typography is enabled or not. The alternative could be a third argument to the `getTypographyFontSizeValue()` function, e.g., `isFluidEnabled` * My blod is typo * Why chain? Break the chains!
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Tracking issue:
About
A pull request that uses the value of
settings.layout.wideSize, if set, as the maximum viewport width for fluid font size calculations.The default value is
1600px.See #49707 (review) for context
What's the point?
To give finer control to editor users and theme builders.
When constraining the maximum viewport width to
settings.layout.wideSize, fluid font sizes will cease to increase when the viewport reaches a maximum width.This is a good thing! Why? Because it allows folks to more accurately set maximum custom font sizes for their layouts. By "custom font size", I'm talking about single-value font-sizes set in the editor or theme.json that have no other instructions on how their fluid values are calculated. Contrast this with font size preset items, which permit min and max font size values.
So when calculating clamp values for fluid font sizes, Gutenberg uses the custom font size value as the maximum. The user will then know that this will be the maximum font size within the maximum "wide" layout size.
Does that make sense? 🤷
How?
Grabbing the value of
settings.layout.wideSize.Testing Instructions
layout.wideSize2023-04-14.13.29.09.mp4