From 27aa03e42f710febe850d2678b8ea868030e7a64 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 14 Oct 2022 18:00:45 +1100
Subject: [PATCH] messing around seeing how we can use the preset slug + css
 var instead of the clamp value in global styles.

---
 .../components/src/font-size-picker/index.tsx | 10 ++++++++--
 .../components/src/font-size-picker/types.ts  |  5 ++++-
 .../src/components/global-styles/hooks.js     | 20 +++++++++++++------
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 78158b33f43db..334c3a980d742 100644
--- 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
index 2c824125bb7e1..22d1b226f4085 100644
--- 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
index f6df419a46d00..f541a0b9bb5cc 100644
--- 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;
 		} );