Skip to content

Fix selection of font size presets if presets have the same size value #71703

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.

Sign up for GitHub

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

Merged
merged 17 commits into from
Oct 24, 2025
Merged

Fix selection of font size presets if presets have the same size value #71703

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0360861
Fixes font size preset picker to select individual preset without fal…
luminuu Sep 16, 2025
f796a94
Adds small fix to select font size preset if they're presented as S -…
luminuu Sep 16, 2025
d38a583
Move hint text code outside of the component
luminuu Sep 17, 2025
99a2c3b
Merge branch 'trunk' into fix/font-size-preset-custom-values-select-a…
luminuu Oct 13, 2025
3e72042
Reduce custom styles to move hint to next line
luminuu Oct 13, 2025
23a2999
Merge branch 'trunk' into fix/font-size-preset-custom-values-select-a…
luminuu Oct 13, 2025
1b3ee6d
Update components changelog
luminuu Oct 13, 2025
e0ee7a6
Fix circular dependency in CustomSelectControl-v2
luminuu Oct 16, 2025
e26567a
Move styled component to styles.ts
luminuu Oct 16, 2025
c7c41fe
Keep value single source of truth for font size preset selection, int…
luminuu Oct 16, 2025
00d7adb
Fix remaining `selectedSlug` instances
luminuu Oct 17, 2025
d51729d
Make FontSizePicker component generic again
luminuu Oct 17, 2025
13bc996
Fix global styles font size preset selection
aaronrobertshaw Oct 20, 2025
da2c097
Use useMemo for selectedOption constant
luminuu Oct 20, 2025
d85704e
Add unit tests for font size picker changes
luminuu Oct 20, 2025
0af5b89
Fix issue with switching to custom font size and not having the size …
luminuu Oct 20, 2025
19baf18
Document 'valueMode' prop in README
ramonjd Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Make FontSizePicker component generic again
  • Loading branch information
@luminuu
luminuu committed Oct 17, 2025
commit d51729df48527fbc8f329d1ab1f31a8dcd393445
9 changes: 1 addition & 8 deletions packages/components/src/font-size-picker/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,17 +104,10 @@ export type FontSize = {
* size. Used for the class generation process.
*/
slug: string;
/**
* The `fluid` property is an optional object specifying min and max values for
* fluid font sizes.
*/
fluid?: {
min?: string | number;
max?: string | number;
};
/**
* The `hint` property is an optional string that provides additional information
* about the font size, such as fluid typography ranges or custom descriptions.
* Consumers can use this to provide their own preferred hints.
*/
hint?: string;
};
Expand Down
40 changes: 4 additions & 36 deletions packages/components/src/font-size-picker/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
Expand All @@ -24,46 +19,19 @@ export function isSimpleCssValue(
}

/**
* Generates hint text for a font size based on its fluid typography properties.
* This function can be used by consumers to generate hint text for font sizes
* that have fluid typography properties.
* Generates hint text for a font size.
* This function returns the hint provided by the consumer, if any.
* If no hint is provided, it falls back to showing the size value for simple CSS values.
*
* @param fontSize The font size object to generate hint text for.
* @return The generated hint text, or undefined if no hint should be shown.
* @return The hint text provided by the consumer, or the size value for simple CSS values, or undefined.
*/
export function generateFontSizeHint( fontSize: FontSize ): string | undefined {
// If the font size already has a hint, use it
if ( fontSize.hint ) {
return fontSize.hint;
}

// Generate hint from fluid typography properties
if ( fontSize.fluid ) {
const hasMin = isSimpleCssValue( fontSize.fluid.min ?? '' );
const hasMax = isSimpleCssValue( fontSize.fluid.max ?? '' );

if ( hasMin && hasMax ) {
return sprintf(
// translators: 1: the minimum fluid font size value, 2: the maximum fluid font size value.
__( '%1$s - %2$s' ),
String( fontSize.fluid.min! ),
String( fontSize.fluid.max! )
);
} else if ( hasMin ) {
return sprintf(
// translators: %s: the minimum fluid font size value.
__( '>= %s' ),
String( fontSize.fluid.min! )
);
} else if ( hasMax ) {
return sprintf(
// translators: %s: the maximum fluid font size value.
__( '<= %s' ),
String( fontSize.fluid.max! )
);
}
}

// Fallback to showing the size value if it's a simple CSS value
if ( isSimpleCssValue( fontSize.size ) ) {
return String( fontSize.size );
Expand Down
Loading