Ensuring the font size picker select box shows the right labels

WordPress · Oct 8, 2022 · 4d4b550 · 4d4b550
1 parent 394d74c
commit 4d4b550
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 124 deletions.
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -111,20 +111,17 @@ const UnforwardedFontSizePicker = (
 			),
 		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
 	);
-	const [ selectedOptionSlug, setSelectedOptionSlug ] = useState();
 	const selectedOption = getSelectedOption(
 		fontSizes,
 		value,
 		shouldUseSelectControl,
-		disableCustomFontSizes,
-		selectedOptionSlug
+		disableCustomFontSizes
 	);
-	console.log( 'selectedOption', selectedOption );
+
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
 		! disableCustomFontSizes && isCustomValue
 	);
-
 	const headerHint = useMemo( () => {
 		if ( showCustomValueControl ) {
 			return `(${ __( 'Custom' ) })`;
@@ -236,26 +233,16 @@ const UnforwardedFontSizePicker = (
 								}: {
 									selectedItem: FontSizeSelectOption;
 								} ) => {
-									const selectedSelectControlOption =
-										getSelectedOption(
-											fontSizes,
-											selectedItem.size,
-											shouldUseSelectControl,
-											disableCustomFontSizes,
-											selectedItem?.slug
-										);
 									onChange?.(
 										hasUnits
 											? selectedItem.size
-											: Number( selectedItem.size ),
-										selectedSelectControlOption
+											: Number( selectedItem.size )
 									);
 									if (
 										selectedItem.key === CUSTOM_FONT_SIZE
 									) {
 										setShowCustomValueControl( true );
 									}
-									setSelectedOptionSlug( selectedItem?.slug );
 								} }
 								size={ size }
 							/>
@@ -266,17 +253,9 @@ const UnforwardedFontSizePicker = (
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
 							value={ value }
-							onChange={ ( newValue, optionSlug ) => {
-								const groupSelectedOption = getSelectedOption(
-									fontSizes,
-									newValue,
-									shouldUseSelectControl,
-									disableCustomFontSizes,
-									optionSlug
-								);
+							onChange={ ( newValue ) => {
 								onChange?.(
-									hasUnits ? newValue : Number( newValue ),
-									groupSelectedOption
+									hasUnits ? newValue : Number( newValue )
 								);
 							} }
 							isBlock
@@ -287,7 +266,6 @@ const UnforwardedFontSizePicker = (
 									<ToggleGroupControlOption
 										key={ option.key }
 										value={ option.value }
-										slug={ option.slug }
 										label={ option.label }
 										aria-label={ option.name }
 										showTooltip={ true }

diff --git a/packages/components/src/font-size-picker/test/utils.ts b/packages/components/src/font-size-picker/test/utils.ts
@@ -120,33 +120,38 @@ describe( 'getToggleGroupOptions', () => {
 		).toEqual( [
 			{
 				key: '1',
-				value: '1',
 				label: 'S',
 				name: '1',
+				size: '1',
+				value: '1',
 			},
 			{
 				key: '2',
-				value: '2',
 				label: 'M',
 				name: '2',
+				size: '2',
+				value: '2',
 			},
 			{
 				key: '3',
-				value: '3',
 				label: 'L',
 				name: '3',
+				size: '3',
+				value: '3',
 			},
 			{
 				key: '4',
-				value: '4',
 				label: 'XL',
 				name: '4',
+				size: '4',
+				value: '4',
 			},
 			{
 				key: '5',
-				value: '5',
 				label: 'XXL',
 				name: 'XXL',
+				value: '5',
+				size: '5',
 			},
 		] );
 	} );

diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
@@ -22,15 +22,12 @@ export type FontSizePickerProps = {
 	 */
 	fontSizes?: FontSize[];
 	/**
-	 * A function that receives the new font size value and an optional selectedOption object,
+	 * A function that receives the new font size value.
 	 * If onChange is called without any parameter, it should reset the value,
 	 * 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,
-		selectedOption?: FontSizeSelectOption | FontSizeOption
-	) => void;
+	onChange?: ( value: number | string | undefined ) => void;
 	/**
 	 * The current font size value.
 	 */
@@ -84,26 +81,19 @@ export type FontSize = {
 	slug: string;
 };
 
-export type FontSizeFluidOptions = {
-	max?: string;
-	min?: string;
-};
-
 export type FontSizeOption = Omit< FontSize, 'size' > &
-	Partial< Pick< FontSize, 'size' > > & {
-		fluid?: FontSizeFluidOptions;
-	};
+	Partial< Pick< FontSize, 'size' > >;
 
 export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
 	key: string;
 	name?: string;
-	slug?: string;
-	__experimentalHint?: ReactNode;
+	__experimentalHint: ReactNode;
 };
 
-export type FontSizeToggleGroupOption = FontSize & {
+export type FontSizeToggleGroupOption = {
 	key: string;
 	value: number | string;
 	label: string;
 	name: string;
+	size?: number | string;
 };
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
@@ -136,10 +136,9 @@ export function getToggleGroupOptions(
 		return {
 			key: slug,
 			value: size,
+			size,
 			label: labelAliases[ index ],
 			name: name || labelAliases[ index ],
-			size,
-			slug,
 		};
 	} );
 }
@@ -148,8 +147,7 @@ export function getSelectedOption(
 	fontSizes: FontSize[],
 	value: FontSizePickerProps[ 'value' ],
 	useSelectControl: boolean,
-	disableCustomFontSizes: boolean = false,
-	slug: string | undefined
+	disableCustomFontSizes: boolean = false
 ): FontSizeOption {
 	if ( ! value ) {
 		return DEFAULT_FONT_SIZE_OPTION;
@@ -160,13 +158,12 @@ export function getSelectedOption(
 		fontSizes,
 		disableCustomFontSizes
 	);
-console.log( 'fontSizeOptions', fontSizeOptions, value, slug );
+
 	// @TODO fix types for fontSizeOptions.
 	const selectedOption = fontSizeOptions
 		? // @ts-ignore
 		  fontSizeOptions.find(
-				( option: FontSizeSelectOption ) =>
-					slug === option.slug || option.size === value
+				( option: FontSizeSelectOption ) => option.size === value
 		  ) // @ts-ignore
 		: null;
 

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -19,7 +19,6 @@ import {
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
-import { getTypographyFontSizeValue } from './typography-utils';
 
 const EMPTY_CONFIG = { settings: {}, styles: {} };
 
@@ -109,19 +108,10 @@ export function useStyle( path, blockName, source = 'all' ) {
 		? `styles.${ path }`
 		: `styles.blocks.${ blockName }.${ path }`;
 
-	const setStyle = ( newValue, presetSettings = null ) => {
+	const setStyle = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
 			// Deep clone `currentConfig` to avoid mutating it later.
 			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-
-			// Convert font size styles to fluid if fluid is activated.
-			if ( finalPath.indexOf( 'typography.fontSize' ) !== -1 && presetSettings ) {
-				newValue = getTypographyFontSizeValue(
-			{ ...presetSettings, size: newValue },
-					mergedConfig?.settings?.typography
-				);
-			}
-
 			set(
 				newUserConfig,
 				finalPath,

diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -155,6 +155,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	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, {

diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json
@@ -2,63 +2,10 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,
-		"typography": {
-			"fluid": true,
-			"fontSizes": [
-				{
-					"fluid": {
-						"min": "0.875rem",
-						"max": "1rem"
-					},
-					"size": "1rem",
-					"slug": "small"
-				},
-				{
-					"fluid": {
-						"min": "1rem",
-						"max": "1.125rem"
-					},
-					"size": "1.125rem",
-					"slug": "medium"
-				},
-				{
-					"size": "1.9rem",
-					"slug": "not-so-large",
-					"fluid": {
-						"min": "1.9rem",
-						"max": "2rem"
-					}
-				},
-				{
-					"size": "3.5rem",
-					"slug": "large",
-					"fluid": {
-						"min": "3rem",
-						"max": "5rem"
-					}
-				},
-				{
-					"size": "2.25rem",
-					"slug": "x-large",
-					"fluid": false
-				},
-				{
-					"size": "10rem",
-					"slug": "xx-large",
-					"fluid": {
-						"min": "4rem",
-						"max": "20rem"
-					}
-				},
-				{
-					"size": "14rem",
-					"slug": "Colossal",
-					"fluid": {
-						"min": "8rem",
-						"max": "30rem"
-					}
-				}
-			]
+		"layout": {
+			"contentSize": "840px",
+			"wideSize": "1100px"
 		}
-	}
+	},
+	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
 }