Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values #44761
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
andrewserong
added
[Type] Bug
andrewserong
added
the
[Feature] Typography
10 tasks
|
Size Change: +407 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
This is working well so far. Very impressed that the solution was so terse 💯 I'm still testing various blocks in theme.json and the site editor but I'm yet to break it: EditorsSite editor after editing Site Title global styles
Post editor after editing Site Title global styles
Setting font values in theme.jsonWith the following in theme.json "styles": {
"blocks": {
"core/heading": {
"typography": {
"fontSize": "100px"
}
}
}
}
|
|
Thanks for the review, Ramon! I'll go ahead and have a go at adding a couple of tests 👍 |
|
Tested in global styles and theme.json
|
tellthemachines
approved these changes
Oct 7, 2022
|
I've pushed a couple tests for the JS side of things in 40e7fb7. I'm still looking into how to write the PHP test — I was originally trying to test If anyone needs this PR to land quickly, feel free to merge it in without that PHP test, but otherwise I'll continue looking into how to add a test for this on Monday. |
|
Just confirming all is good here. When
When |
|
@andrewserong I threw up a PR based on this branch that fixes the issue #44752 It also corrects a pretty glaring bug in trunk where some font sizes (those with no names) don't appear in the select controls:
If you're happy with it we can merge into this PR, or land after this one. |
|
Size Change: +79 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
I merged #44791 before looking at @noisysocks's questions. Specifically around the return type for Changing the return type to diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index ec193f51bf..1df66bb922 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -92,6 +92,7 @@ export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
export type FontSizeToggleGroupOption = {
key: string;
+ slug: string;
value: number | string;
label: string;
name: string;
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
index 02427e0419..b59c3609a2 100644
--- a/packages/components/src/font-size-picker/utils.ts
+++ b/packages/components/src/font-size-picker/utils.ts
@@ -135,6 +135,7 @@ export function getToggleGroupOptions(
return optionsArray.map( ( { slug, size, name }, index ) => {
return {
key: slug,
+ slug,
value: size,
size,
label: labelAliases[ index ],
@@ -148,7 +149,7 @@ export function getSelectedOption(
value: FontSizePickerProps[ 'value' ],
useSelectControl: boolean,
disableCustomFontSizes: boolean = false
-): FontSizeOption {
+): FontSizeOption | FontSizeToggleGroupOption {
if ( ! value ) {
return DEFAULT_FONT_SIZE_OPTION;
}
|
Actually, I should just create a new type |
… for custom global styles values
…ted correctly (#44791) * Forked #44761 * Ensuring the font size picker select box shows the right labels * update comment. Typescript has beaten me. It's much more convenient to use getFontSizeOptions(), but I guess we'll have to refactor. * Adding comment about Typescript bug (YAY, it wasn't me being dumb with TS for once) * Added tests yo * Changeo loggo
1. Clean up type changes in #44791 2. Make TS linter be quiet
andrewserong
force-pushed
the
fix/fluid-typography-in-global-styles
branch
from
96ac1f3
to
f857c6d
Compare
…ieve it is no longer expected
|
Removed the additional |
…rdPress/gutenberg into fix/fluid-typography-in-global-styles
|
@andrewserong @ramonjd @tellthemachines how we feeling about this one? If this is ready to merge let's do so asap, I would like to get this backported ahead of RC1. |
|
Just chiming in to say I've given this a good shake with TT3 and it's working as expected. |
Thanks again @ndiego Hoping to backport today (APAC time) We'll keep you posted. |
ramonjd
added
the
[Priority] High
ockham
added
Backport to WP 6.7 Beta/RC
ramonjd
added a commit
that referenced
this pull request
Oct 11, 2022
…re not calculated for custom values (#44761) * Fluid Typography: Fix bug where fluid clamp rules were not calculated for custom global styles values * Add inline comments * Add tests for JS changes * Fluid Typography: ensure global styles preset fluid sizes are calculated correctly (#44791) * Forked #44761 * Ensuring the font size picker select box shows the right labels * update comment. Typescript has beaten me. It's much more convenient to use getFontSizeOptions(), but I guess we'll have to refactor. * Adding comment about Typescript bug (YAY, it wasn't me being dumb with TS for once) * Added tests yo * Changeo loggo * Create a new FontSizeSelectOption return type for getSelectedOption to: 1. Clean up type changes in #44791 2. Make TS linter be quiet * Revert accidental changes to emptytheme * Revert type changes and other calamities * Remove additional size value from getToggleGroupOptions test as I believe it is no longer expected Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: ramonjd <ramonjd@gmail.com>
ockham
pushed a commit
that referenced
this pull request
Oct 11, 2022
* Fluid typography: convert server-side block support values (#44762) * For serverside rendered typography block support styles, covert font size values to fluid values in the inline styles if fluid typography is activated. Added unit tests * Add fluid font size to Nav Link * Add fluid typography to Search block * Fix fluid typography for Submenu block with open on click * Fix fluid typography for Page List block * Remove unnecessary parameter * Call esc_attr only once on the whole typography string Co-authored-by: tellthemachines <isabel@tellthemachines.com> * Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values (#44761) * Fluid Typography: Fix bug where fluid clamp rules were not calculated for custom global styles values * Add inline comments * Add tests for JS changes * Fluid Typography: ensure global styles preset fluid sizes are calculated correctly (#44791) * Forked #44761 * Ensuring the font size picker select box shows the right labels * update comment. Typescript has beaten me. It's much more convenient to use getFontSizeOptions(), but I guess we'll have to refactor. * Adding comment about Typescript bug (YAY, it wasn't me being dumb with TS for once) * Added tests yo * Changeo loggo * Create a new FontSizeSelectOption return type for getSelectedOption to: 1. Clean up type changes in #44791 2. Make TS linter be quiet * Revert accidental changes to emptytheme * Revert type changes and other calamities * Remove additional size value from getToggleGroupOptions test as I believe it is no longer expected Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: ramonjd <ramonjd@gmail.com> * Fluid typography: convert font size inline style attributes to fluid values (#44764) * This commit ensures that custom font size values that appear in the style attribute of block content are converted to fluid typography (if activated) * Adding comments * Bail early if we don't find a custom font size * Adding tests yo * Updating PHP doc to describe incoming type of $raw_value (string|number) * Make custom font sizes appear fluid in the block editor when fluid typography is enabled (#44765) * Make custom font sizes appear fluid in the block editor when fluid typography is enabled * Add tests for fluid utils * update description * You shall not pass with a number, well, yes, but we'll coerce it to `px` and the tests shall pass nonetheless!!! Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: ramonjd <ramonjd@gmail.com> * Fluid typography: covert font size number values to pixels (#44807) * Converts incoming raw font size values to value + pixel to remain consistent with the fontsizepicker component. * Updating comments / docs * Fluid typography: ensure fontsizes are strings or integers (#44847) * Updating PHP doc to describe incoming type of $raw_value (string|int) This PR also harmonizes the JS checks And review comments from #44807 (review) These changes have already been backported to Core in WordPress/wordpress-develop#3428 * Update changelog Add extra test for floats Add i18n domain * Font sizes can be string|int|float Updated tests and JSDoc type * Expand tests for gutenberg_get_typography_value_and_unit Fix typo in CHANGELOG.md * Initial commit (#44852) - ensure that we convert fluid font sizes to fluid values in the editor for search block block supports - we do this by passing the getTypographyClassesAndStyles hook a flag to tell it whether to convert Updated CHANGELOG.md Added tests Co-authored-by: tellthemachines <isabel@tellthemachines.com> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Robert Anderson <robert@noisysocks.com> Co-authored-by: Ben Dwyer <ben@scruffian.com>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Oct 11, 2022
…ate 1. Merges the following: * [WordPress/gutenberg#44761 Gutenberg PR 44761] - Fluid Typography: Fix bug in global styles where fluid `clamp()` rules were not calculated for custom values * [WordPress/gutenberg#44762 Gutenberg PR 44762] - Fluid Typography: Convert server-side block support values * [WordPress/gutenberg#44764 Gutenberg PR 44764] - Fluid Typography: Convert font size inline style attributes to fluid values * [WordPress/gutenberg#44807 Gutenberg PR 44807] - Fluid Typography: Covert font size number values to pixels * [WordPress/gutenberg#44847 Gutenberg PR 44847] - Fluid Typography: ensure font sizes are strings or integers Follow-up to [54280]. Props andrewserong, isabel_brison, ramonopoly. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54497 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Oct 11, 2022
…ate 1. Merges the following: * [WordPress/gutenberg#44761 Gutenberg PR 44761] - Fluid Typography: Fix bug in global styles where fluid `clamp()` rules were not calculated for custom values * [WordPress/gutenberg#44762 Gutenberg PR 44762] - Fluid Typography: Convert server-side block support values * [WordPress/gutenberg#44764 Gutenberg PR 44764] - Fluid Typography: Convert font size inline style attributes to fluid values * [WordPress/gutenberg#44807 Gutenberg PR 44807] - Fluid Typography: Covert font size number values to pixels * [WordPress/gutenberg#44847 Gutenberg PR 44847] - Fluid Typography: ensure font sizes are strings or integers Follow-up to [54280]. Props andrewserong, isabel_brison, ramonopoly. See #56467. Built from https://develop.svn.wordpress.org/trunk@54497 git-svn-id: http://core.svn.wordpress.org/trunk@54056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Oct 11, 2022
…ate 1. Merges the following: * [WordPress/gutenberg#44761 Gutenberg PR 44761] - Fluid Typography: Fix bug in global styles where fluid `clamp()` rules were not calculated for custom values * [WordPress/gutenberg#44762 Gutenberg PR 44762] - Fluid Typography: Convert server-side block support values * [WordPress/gutenberg#44764 Gutenberg PR 44764] - Fluid Typography: Convert font size inline style attributes to fluid values * [WordPress/gutenberg#44807 Gutenberg PR 44807] - Fluid Typography: Covert font size number values to pixels * [WordPress/gutenberg#44847 Gutenberg PR 44847] - Fluid Typography: ensure font sizes are strings or integers Follow-up to [54280]. Props andrewserong, isabel_brison, ramonopoly. See #56467. Built from https://develop.svn.wordpress.org/trunk@54497 git-svn-id: https://core.svn.wordpress.org/trunk@54056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
|
Removing the "Backport to WP Beta/RC" label since this has been backported as part of #44868 (and sync'd to Core per WordPress/wordpress-develop#3437). |
ockham
removed
the
Backport to WP 6.7 Beta/RC
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
…ate 1. Merges the following: * [WordPress/gutenberg#44761 Gutenberg PR 44761] - Fluid Typography: Fix bug in global styles where fluid `clamp()` rules were not calculated for custom values * [WordPress/gutenberg#44762 Gutenberg PR 44762] - Fluid Typography: Convert server-side block support values * [WordPress/gutenberg#44764 Gutenberg PR 44764] - Fluid Typography: Convert font size inline style attributes to fluid values * [WordPress/gutenberg#44807 Gutenberg PR 44807] - Fluid Typography: Covert font size number values to pixels * [WordPress/gutenberg#44847 Gutenberg PR 44847] - Fluid Typography: ensure font sizes are strings or integers Follow-up to [54280]. Props andrewserong, isabel_brison, ramonopoly. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54497 602fd350-edb4-49c9-b593-d223f7449a82
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.
Fixes #44752
What?
Fix an issue as raised in #44758 where the fluid typography clamp-based rules are not calculated for custom font-size values set at the block level in theme.json or in global styles.
Why?
It was expected behaviour for the feature that adjusting custom font-size values at the block level in theme.json and global styles would result in the
clamp()based rules being applied.How?
font-sizerule, pass the value throughgutenberg_get_typography_font_size_value.getTypographyFontSizeValuebefore returning the output ingetStylesDeclarationsTesting Instructions
Sample
theme.jsonfile:{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fluid": true } } }settings.typography.fluidtotruein thetheme.jsonfile.settings.typography.fluidintheme.json, the the fluid rules should no longer applied in the site editor or on the site frontend.Screenshots or screencast