From 4d4b550032112d13696a4686ff2054992356fb89 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Sat, 8 Oct 2022 17:18:14 +1100 Subject: [PATCH] Ensuring the font size picker select box shows the right labels --- .../components/src/font-size-picker/index.tsx | 32 ++-------- .../src/font-size-picker/test/utils.ts | 15 +++-- .../components/src/font-size-picker/types.ts | 22 ++----- .../components/src/font-size-picker/utils.ts | 11 ++-- .../src/components/global-styles/hooks.js | 12 +--- .../global-styles/typography-panel.js | 1 + test/emptytheme/theme.json | 63 ++----------------- 7 files changed, 32 insertions(+), 124 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 9059a7c39461b..3a1f792c04139 100644 --- 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 = ( { ).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 index 688354d9f0862..ec193f51bf675 100644 --- 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 index 9b68e3ce46f64..b1779eeb1d25e 100644 --- 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 index 888deac219f67..f6df419a46d00 100644 --- 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 index 59d7049da619c..82df0a57f2059 100644 --- 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 index ce9258489f619..ed2d7b8d0946a 100644 --- 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" ] }