use getComputedFluidTypographyValue to compute the size of the preview

WordPress · matiasbenedetto · Jul 11, 2024 · Jun 28, 2024 · Jun 28, 2024 · Jul 1, 2024
commit fd86a59f86777c767cfbed2096e8c9f242a6a934
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	getComputedFluidTypographyValue,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -12,11 +15,23 @@ const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function FontSizePreview( { fontSize } ) {
 	const [ font ] = useGlobalStyle( 'typography' );
+
+	const input =
+		fontSize?.fluid?.min && fontSize?.fluid?.max
+			? {
+					minimumFontSize: fontSize.fluid.min,
+					maximumFontSize: fontSize.fluid.max,
+			  }
+			: {
+					fontSize: fontSize.size,
+			  };
+
+	const computedFontSize = getComputedFluidTypographyValue( input );
 	return (
 		<div
 			className="edit-site-typography-preview"
 			style={ {
-				fontSize: fontSize.size,
+				fontSize: computedFontSize,
 				fontFamily: font?.fontFamily ?? 'serif',
 			} }
 		>