diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index c4b6935142dc3..6d63556cb1e29 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -967,6 +967,18 @@ protected static function compute_style_properties( $styles, $settings = array()
continue;
}
+ // Calculates fluid typography rules where available.
+ if ( 'font-size' === $css_property ) {
+ /*
+ * gutenberg_get_typography_font_size_value() will check
+ * if fluid typography has been activated and also
+ * whether the incoming value can be converted to a fluid value.
+ * Values that already have a "clamp()" function will not pass the test,
+ * and therefore the original $value will be returned.
+ */
+ $value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
+ }
+
$declarations[] = array(
'name' => $css_property,
'value' => $value,
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7cece0b1abf53..31ad5b0457d7e 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
### Bug Fix
+- `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791))
- The `LinkedButton` to unlink sides in `BoxControl`, `BorderBoxControl` and `BorderRadiusControl` have changed from a rectangular primary button to an icon-only button, with a sentence case tooltip, and default-size icon for better legibility. The `Button` component has been fixed so when `isSmall` and `icon` props are set, and no text is present, the button shape is square rather than rectangular.
- `Popover`: fix limitShift logic by adding iframe offset correctly [#42950](https://github.com/WordPress/gutenberg/pull/42950)).
diff --git a/packages/components/src/font-size-picker/test/utils.js b/packages/components/src/font-size-picker/test/utils.js
index fc074514925cc..a640aed862387 100644
--- a/packages/components/src/font-size-picker/test/utils.js
+++ b/packages/components/src/font-size-picker/test/utils.js
@@ -116,33 +116,33 @@ describe( 'getToggleGroupOptions', () => {
).toEqual( [
{
key: '1',
- value: '1',
label: 'S',
name: '1',
+ value: '1',
},
{
key: '2',
- value: '2',
label: 'M',
name: '2',
+ value: '2',
},
{
key: '3',
- value: '3',
label: 'L',
name: '3',
+ value: '3',
},
{
key: '4',
- value: '4',
label: 'XL',
name: '4',
+ value: '4',
},
{
key: '5',
- value: '5',
label: 'XXL',
name: 'XXL',
+ value: '5',
},
] );
} );
diff --git a/packages/components/src/font-size-picker/utils.js b/packages/components/src/font-size-picker/utils.js
index fff3d087cf3e6..dbb7882183fab 100644
--- a/packages/components/src/font-size-picker/utils.js
+++ b/packages/components/src/font-size-picker/utils.js
@@ -91,7 +91,7 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
];
return options.map( ( { slug, name, size } ) => ( {
key: slug,
- name,
+ name: name || slug,
size,
__experimentalHint:
size && isSimpleCssValue( size ) && parseFloat( size ),
diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js
index cbc0fe53a3390..2ab86fb7c8292 100644
--- a/packages/edit-site/src/components/global-styles/test/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js
@@ -15,6 +15,14 @@ describe( 'typography utils', () => {
typographySettings: undefined,
expected: '28px',
},
+ // Default return non-fluid value where `size` is undefined.
+ {
+ preset: {
+ size: undefined,
+ },
+ typographySettings: undefined,
+ expected: undefined,
+ },
// Should return non-fluid value when fluid is `false`.
{
preset: {
@@ -26,6 +34,41 @@ describe( 'typography utils', () => {
},
expected: '28px',
},
+ // Should coerce number to `px` and return fluid value.
+ {
+ preset: {
+ size: 33,
+ fluid: true,
+ },
+ typographySettings: {
+ fluid: true,
+ },
+ expected:
+ 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
+ },
+ // Should return incoming value when already clamped.
+ {
+ preset: {
+ size: 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+ fluid: false,
+ },
+ typographySettings: {
+ fluid: true,
+ },
+ expected:
+ 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+ },
+ // Should return incoming value with unsupported unit.
+ {
+ preset: {
+ size: '1000%',
+ fluid: false,
+ },
+ typographySettings: {
+ fluid: true,
+ },
+ expected: '1000%',
+ },
// Should return fluid value.
{
preset: {
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index 8e8686ca4eed8..48f21603ad78e 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -711,10 +711,11 @@ describe( 'global styles renderer', () => {
},
typography: {
fontFamily: 'sans-serif',
+ fontSize: '14px',
},
};
- it( 'Should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
+ it( 'should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
expect(
getStylesDeclarations( blockStyles, 'body', true )
).toEqual( [
@@ -724,10 +725,11 @@ describe( 'global styles renderer', () => {
'--wp--style--root--padding-left: 33px',
'background-color: var(--wp--preset--color--light-green-cyan)',
'font-family: sans-serif',
+ 'font-size: 14px',
] );
} );
- it( 'Should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
+ it( 'should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
expect(
getStylesDeclarations( blockStyles, 'body', false )
).toEqual( [
@@ -737,10 +739,11 @@ describe( 'global styles renderer', () => {
'padding-bottom: 33px',
'padding-left: 33px',
'font-family: sans-serif',
+ 'font-size: 14px',
] );
} );
- it( 'Should not output padding variables if selector is not root', () => {
+ it( 'should not output padding variables if selector is not root', () => {
expect(
getStylesDeclarations(
blockStyles,
@@ -754,6 +757,57 @@ describe( 'global styles renderer', () => {
'padding-bottom: 33px',
'padding-left: 33px',
'font-family: sans-serif',
+ 'font-size: 14px',
+ ] );
+ } );
+
+ it( 'should output clamp values for font-size when fluid typography is enabled', () => {
+ expect(
+ getStylesDeclarations(
+ blockStyles,
+ '.wp-block-site-title',
+ true,
+ {
+ settings: {
+ typography: {
+ fluid: true,
+ },
+ },
+ }
+ )
+ ).toEqual( [
+ 'background-color: var(--wp--preset--color--light-green-cyan)',
+ 'padding-top: 33px',
+ 'padding-right: 33px',
+ 'padding-bottom: 33px',
+ 'padding-left: 33px',
+ 'font-family: sans-serif',
+ 'font-size: clamp(10.5px, 0.65625rem + ((1vw - 7.68px) * 1.262), 21px)',
+ ] );
+ } );
+
+ it( 'should output direct values for font-size when fluid typography is disabled', () => {
+ expect(
+ getStylesDeclarations(
+ blockStyles,
+ '.wp-block-site-title',
+ true,
+ {
+ settings: {
+ typography: {
+ fluid: false,
+ },
+ },
+ }
+ )
+ ).toEqual( [
+ 'background-color: var(--wp--preset--color--light-green-cyan)',
+ 'padding-top: 33px',
+ 'padding-right: 33px',
+ 'padding-bottom: 33px',
+ 'padding-left: 33px',
+ 'font-family: sans-serif',
+ 'font-size: 14px',
] );
} );
} );
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index f4c77abf0fd71..86a929fe4998b 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -21,6 +21,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getTypographyFontSizeValue } from './typography-utils';
export function useHasTypographyPanel( name ) {
const hasLineHeight = useHasLineHeightControl( name );
@@ -87,7 +88,19 @@ export default function TypographyPanel( { name, element } ) {
} else if ( element && element !== 'text' ) {
prefix = `elements.${ element }.`;
}
+ const [ fluidTypography ] = useSetting( 'typography.fluid', name );
const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
+
+ // Convert static font size values to fluid font sizes if fluidTypography is activated.
+ const fontSizesWithFluidValues = fontSizes.map( ( font ) => {
+ if ( !! fluidTypography ) {
+ font.size = getTypographyFontSizeValue( font, {
+ fluid: fluidTypography,
+ } );
+ }
+ return font;
+ } );
+
const disableCustomFontSizes = ! useSetting(
'typography.customFontSize',
name
@@ -180,7 +193,7 @@ export default function TypographyPanel( { name, element } ) {
>
@@ -227,7 +240,7 @@ export default function TypographyPanel( { name, element } ) {