-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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 typography: custom font-sizes should use max viewport width #51516
Fluid typography: custom font-sizes should use max viewport width #51516
Conversation
- ensures that custom font size calculations take into account any layout.wideSize values - guards against unsupported units for min and max viewport widths in the backend - adds tests to cover changes
…ill cause PHP warnings and invalid clamp values. WordPress/gutenberg#51516
Added to backport WordPress/wordpress-develop#4604 |
Size Change: -81 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
Flaky tests detected in d5f6321. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5274567262
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice fix! Just left a couple of very tiny nits, but this LGTM:
✅ Custom fluid typography is consistent between the editor and site frontend
✅ Any clamp()
values in layout.wideSize
causes the fluid rules to no longer apply
Thanks for all the fluid typography follow-ups! ✨
packages/block-editor/src/components/font-sizes/test/fluid-utils.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/font-sizes/test/fluid-utils.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/global-styles/typography-utils.js
Outdated
Show resolved
Hide resolved
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Reinstate return break
…rdPress#51516) * This commit: - ensures that custom font size calculations take into account any layout.wideSize values - guards against unsupported units for min and max viewport widths in the backend - adds tests to cover changes * Apply suggestions from code review Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> * Update typography-utils.js Reinstate return break --------- Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
What?
This PR:
layout.wideSize
valuesKudos (again) to @WraithKenny for finding this
Why?
#51146 introduced the base behaviour but missed custom font size values
How?
Switching custom font size calculations in the editor to use
getTypographyFontSizeValue
, which performs a check for global fluid font size support, andgetFluidTypographyOptionsFromSettings
which ensures we're passing the right values, including the value oflayout.wideSize
.Testing Instructions
In 2023, apply a custom font size to a text block in the editor (post or site).
Save the page. Check that the clamped value is the same in the frontend and backend.
Now update your theme.json with an invalid
layout.wideSize
value. This value is used to calculate the clamp function's max width.Check that the clamped font size is not calculated. Changing
layout.wideSize
to a supported value + unit, e.g.,100rem
or1300px
should enabled clamped values.