messing around seeing how we can use the preset slug + css var instea…

…d of the clamp value in global styles.
WordPress · Oct 14, 2022 · 6ca7f1d · 6ca7f1d
1 parent 388e5d2
commit 6ca7f1d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -46,6 +46,7 @@ import {
 	ResetButton,
 } from './styles';
 import { Spacer } from '../spacer';
+import { FontSizeOption } from './types';
 
 // This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
 const MaybeVStack = ( {
@@ -230,7 +231,11 @@ const UnforwardedFontSizePicker = (
 									onChange?.(
 										hasUnits
 											? selectedItem.size
-											: Number( selectedItem.size )
+											: Number( selectedItem.size ),
+										getSelectedOption(
+											fontSizes,
+											selectedItem.size
+										)
 									);
 									if (
 										selectedItem.key === CUSTOM_FONT_SIZE
@@ -249,7 +254,8 @@ const UnforwardedFontSizePicker = (
 							value={ value }
 							onChange={ ( newValue ) => {
 								onChange?.(
-									hasUnits ? newValue : Number( newValue )
+									hasUnits ? newValue : Number( newValue ),
+									getSelectedOption( fontSizes, newValue )
 								);
 							} }
 							isBlock

diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
@@ -27,7 +27,10 @@ export type FontSizePickerProps = {
 	 * attending to what reset means in that context, e.g., set the font size to
 	 * undefined or set the font size a starting value.
 	 */
-	onChange?: ( value: number | string | undefined ) => void;
+	onChange?: (
+		value: number | string | undefined,
+		selectedItem?: FontSizeOption
+	) => void;
 	/**
 	 * The current font size value.
 	 */

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -108,19 +108,27 @@ export function useStyle( path, blockName, source = 'all' ) {
 		? `styles.${ path }`
 		: `styles.blocks.${ blockName }.${ path }`;
 
-	const setStyle = ( newValue ) => {
+	const setStyle = ( newValue, metadata ) => {
 		setUserConfig( ( currentConfig ) => {
 			// Deep clone `currentConfig` to avoid mutating it later.
 			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set(
-				newUserConfig,
-				finalPath,
-				getPresetVariableFromValue(
+			let styleValue = getPresetVariableFromValue(
 					mergedConfig.settings,
 					blockName,
 					path,
 					newValue
-				)
+				);
+			// Convert font size styles to fluid if fluid is activated.
+			if ( finalPath.indexOf( 'typography.fontSize' ) !== -1 && !! metadata?.slug ) {
+				styleValue = `var:preset|font-size|${ metadata?.slug })`;
+			}
+
+
+
+			set(
+				newUserConfig,
+				finalPath,
+				styleValue
 			);
 			return newUserConfig;
 		} );