From 6fce0f3f2ad41cf1d954940b2524ec3e7e3961c8 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 14 Oct 2022 18:00:45 +1100 Subject: [PATCH 01/11] 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 | 6 ++++-- .../components/src/font-size-picker/types.ts | 5 ++++- .../src/components/global-styles/hooks.js | 20 +++++++++++++------ 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 7aa5d31b1e9e94..6cece5ac2f1b89 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -173,7 +173,8 @@ const UnforwardedFontSizePicker = ( onChange?.( undefined ); } else { onChange?.( - hasUnits ? newValue : Number( newValue ) + hasUnits ? newValue : Number( newValue ), + selectedFontSize ); } } } @@ -193,7 +194,8 @@ const UnforwardedFontSizePicker = ( onChange?.( undefined ); } else { onChange?.( - hasUnits ? newValue : Number( newValue ) + hasUnits ? newValue : Number( newValue ), + selectedFontSize ); } } } diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index c410ac172d63dc..e5de79776a243e 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -22,7 +22,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 f6df419a46d008..f541a0b9bb5cc1 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; } ); From 45c96f7885b1584e8e95046706633ff2e1bf5cd9 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 20 Oct 2022 15:49:20 +1100 Subject: [PATCH 02/11] Fixed import and formatting --- .../src/components/global-styles/hooks.js | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index f541a0b9bb5cc1..f16d3c57f35a17 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -113,23 +113,20 @@ export function useStyle( path, blockName, source = 'all' ) { // Deep clone `currentConfig` to avoid mutating it later. const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) ); let styleValue = getPresetVariableFromValue( - mergedConfig.settings, - blockName, - path, - newValue - ); + mergedConfig.settings, + blockName, + path, + newValue + ); // Convert font size styles to fluid if fluid is activated. - if ( finalPath.indexOf( 'typography.fontSize' ) !== -1 && !! metadata?.slug ) { + if ( + finalPath.indexOf( 'typography.fontSize' ) !== -1 && + !! metadata?.slug + ) { styleValue = `var:preset|font-size|${ metadata?.slug })`; } - - - set( - newUserConfig, - finalPath, - styleValue - ); + set( newUserConfig, finalPath, styleValue ); return newUserConfig; } ); }; From 3795bfc50c3bf9534eb8471d43019935188d6540 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 21 Oct 2022 15:37:21 +1100 Subject: [PATCH 03/11] Create a new hook specifically for font size. --- .../src/components/global-styles/hooks.js | 25 ++++++++----------- .../global-styles/typography-panel.js | 25 ++++++++++++++++++- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index f16d3c57f35a17..f6df419a46d008 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -108,25 +108,20 @@ export function useStyle( path, blockName, source = 'all' ) { ? `styles.${ path }` : `styles.blocks.${ blockName }.${ path }`; - const setStyle = ( newValue, metadata ) => { + const setStyle = ( newValue ) => { setUserConfig( ( currentConfig ) => { // Deep clone `currentConfig` to avoid mutating it later. const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) ); - let styleValue = getPresetVariableFromValue( - mergedConfig.settings, - blockName, - path, - newValue + set( + newUserConfig, + finalPath, + 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; } ); }; 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 a1ef517560d42b..a3dc75e9294f36 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -110,6 +110,25 @@ function useStyleWithReset( path, blockName ) { return [ style, setStyle, hasStyle, resetStyle ]; } +function useFontSizeStyleWithReset( + path, + blockName, + isFluidTypographyEnabled +) { + const [ style, setStyleCallback ] = useStyle( path, blockName ); + const [ userStyle ] = useStyle( path, blockName, 'user' ); + const hasStyle = () => !! userStyle; + const resetStyle = () => setStyleCallback( undefined ); + const setStyle = ( newValue, metadata ) => { + // Convert font size styles to fluid if fluid is activated. + if ( isFluidTypographyEnabled && !! metadata?.slug ) { + newValue = `var:preset|font-size|${ metadata?.slug }`; + } + setStyleCallback( newValue ); + }; + return [ style, setStyle, hasStyle, resetStyle ]; +} + function useFontAppearance( prefix, name ) { const [ fontStyle, setFontStyle ] = useStyle( prefix + 'typography.fontStyle', @@ -192,7 +211,11 @@ export default function TypographyPanel( { name, element, headingLevel } ) { const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] = useStyleWithReset( prefix + 'typography.fontFamily', name ); const [ fontSize, setFontSize, hasFontSize, resetFontSize ] = - useStyleWithReset( prefix + 'typography.fontSize', name ); + useFontSizeStyleWithReset( + prefix + 'typography.fontSize', + name, + fluidTypography + ); const { fontStyle, setFontStyle, From 7d73c3aca3660453dc9807da13398a93e2040806 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 1 Nov 2022 11:10:08 +1100 Subject: [PATCH 04/11] Refactor useFontSizeStyleWithReset so that it exports named methods and values. Ensure that we allow presets for all font size preset, not only while fluid typography is activated --- .../global-styles/typography-panel.js | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) 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 a3dc75e9294f36..57d0fa5d00b35a 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -110,23 +110,25 @@ function useStyleWithReset( path, blockName ) { return [ style, setStyle, hasStyle, resetStyle ]; } -function useFontSizeStyleWithReset( - path, - blockName, - isFluidTypographyEnabled -) { - const [ style, setStyleCallback ] = useStyle( path, blockName ); +function useFontSizeStyleWithReset( path, blockName ) { + const [ fontSize, setStyleCallback ] = useStyle( path, blockName ); const [ userStyle ] = useStyle( path, blockName, 'user' ); - const hasStyle = () => !! userStyle; - const resetStyle = () => setStyleCallback( undefined ); - const setStyle = ( newValue, metadata ) => { + const hasFontSize = () => !! userStyle; + const resetFontSize = () => setStyleCallback( undefined ); + const setFontSize = ( newValue, metadata ) => { // Convert font size styles to fluid if fluid is activated. - if ( isFluidTypographyEnabled && !! metadata?.slug ) { + if ( !! metadata?.slug ) { newValue = `var:preset|font-size|${ metadata?.slug }`; } setStyleCallback( newValue ); }; - return [ style, setStyle, hasStyle, resetStyle ]; + + return { + fontSize, + setFontSize, + hasFontSize, + resetFontSize, + }; } function useFontAppearance( prefix, name ) { @@ -210,12 +212,8 @@ export default function TypographyPanel( { name, element, headingLevel } ) { const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] = useStyleWithReset( prefix + 'typography.fontFamily', name ); - const [ fontSize, setFontSize, hasFontSize, resetFontSize ] = - useFontSizeStyleWithReset( - prefix + 'typography.fontSize', - name, - fluidTypography - ); + const { fontSize, setFontSize, hasFontSize, resetFontSize } = + useFontSizeStyleWithReset( prefix + 'typography.fontSize', name ); const { fontStyle, setFontStyle, From 6bcefe723e841c2c39c74fc2d202f957926394c6 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 1 Nov 2022 11:16:18 +1100 Subject: [PATCH 05/11] CHANGELOG.md update --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5bb9a27bc6ab68..c2a7ad2a17a04d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -40,6 +40,7 @@ ### Enhancements +- `FontSizePicker`: Pass the preset object to the onChange callback to allow conversion from preset slugs to CSS vars ([#44967](https://github.com/WordPress/gutenberg/pull/44967)). - `FontSizePicker`: Improved slider design when `withSlider` is set ([#44598](https://github.com/WordPress/gutenberg/pull/44598)). - `ToggleControl`: Improved types for the `help` prop, covering the dynamic render function option, and enabled the dynamic `help` behavior only for a controlled component ([#45279](https://github.com/WordPress/gutenberg/pull/45279)). - `BorderControl` & `BorderBoxControl`: Replace `__next36pxDefaultSize` with "default" and "large" size variants ([#41860](https://github.com/WordPress/gutenberg/pull/41860)). From cb0b84baabcb0e5524bcc99b974cd44e02140bfd Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 2 Nov 2022 15:41:50 +1100 Subject: [PATCH 06/11] Updated onChange mock arg expectations to include the second arg: fontSize object argument. --- .../src/font-size-picker/test/index.tsx | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index 74e0eef2f94dcd..e1f23f51f45293 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -147,11 +147,19 @@ describe( 'FontSizePicker', () => { ); test.each( [ - { option: 'Default', value: '8px', expectedValue: undefined }, - { option: 'Tiny 8', value: undefined, expectedValue: '8px' }, + { + option: 'Default', + value: '8px', + expectedArguments: [ undefined ], + }, + { + option: 'Tiny 8', + value: undefined, + expectedArguments: [ '8px', fontSizes[ 0 ] ], + }, ] )( - 'calls onChange( $expectedValue ) when $option is selected', - async ( { option, value, expectedValue } ) => { + 'calls onChange( $expectedArguments ) when $option is selected', + async ( { option, value, expectedArguments } ) => { const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime, } ); @@ -171,7 +179,7 @@ describe( 'FontSizePicker', () => { screen.getByRole( 'option', { name: option } ) ); expect( onChange ).toHaveBeenCalledTimes( 1 ); - expect( onChange ).toHaveBeenCalledWith( expectedValue ); + expect( onChange ).toHaveBeenCalledWith( ...expectedArguments ); } ); @@ -405,7 +413,7 @@ describe( 'FontSizePicker', () => { ); await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) ); expect( onChange ).toHaveBeenCalledTimes( 1 ); - expect( onChange ).toHaveBeenCalledWith( '16px' ); + expect( onChange ).toHaveBeenCalledWith( '16px', fontSizes[ 1 ] ); } ); commonToggleGroupTests( fontSizes ); @@ -481,16 +489,16 @@ describe( 'FontSizePicker', () => { ); test.each( [ - { radio: 'Small', expectedValue: '12px' }, - { radio: 'Medium', expectedValue: '1em' }, - { radio: 'Large', expectedValue: '2rem' }, + { radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] }, + { radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] }, + { radio: 'Large', expectedArguments: [ '2em', fontSizes[ 2 ] ] }, { radio: 'Extra Large', expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)', }, ] )( - 'calls onChange( $expectedValue ) when $radio is selected', - async ( { radio, expectedValue } ) => { + 'calls onChange( $expectedArguments ) when $radio is selected', + async ( { radio, expectedArguments } ) => { const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime, } ); @@ -506,7 +514,7 @@ describe( 'FontSizePicker', () => { screen.getByRole( 'radio', { name: radio } ) ); expect( onChange ).toHaveBeenCalledTimes( 1 ); - expect( onChange ).toHaveBeenCalledWith( expectedValue ); + expect( onChange ).toHaveBeenCalledWith( ...expectedArguments ); } ); From 7d469f2e7c71aedfc78ab9edfa8e0cf8eef13576 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 2 Nov 2022 17:40:18 +1100 Subject: [PATCH 07/11] Updating tests to include explicit args for mock onChange expectations --- packages/components/src/font-size-picker/test/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index e1f23f51f45293..ff4c9a5481a2f9 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -494,7 +494,10 @@ describe( 'FontSizePicker', () => { { radio: 'Large', expectedArguments: [ '2em', fontSizes[ 2 ] ] }, { radio: 'Extra Large', - expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)', + expectedArguments: [ + 'clamp(1.75rem, 3vw, 2.25rem)', + fontSizes[ 3 ], + ], }, ] )( 'calls onChange( $expectedArguments ) when $radio is selected', From 891dca479d77730dda893eff0e0dc99c0bc0a345 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 3 Nov 2022 12:24:52 +1100 Subject: [PATCH 08/11] Use find as an alternative to the deleted `getSelectedFontSize` method to pass the immediate, currently-selected font size object containing preset slug information to the consuming parent component. Updated tests. General post-rebase chicanery --- .../components/src/font-size-picker/index.tsx | 14 ++++++-- .../src/font-size-picker/test/index.tsx | 35 ++++++++++++++----- .../components/src/font-size-picker/types.ts | 2 +- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 6cece5ac2f1b89..06a0b7fcf112f3 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -173,8 +173,13 @@ const UnforwardedFontSizePicker = ( onChange?.( undefined ); } else { onChange?.( - hasUnits ? newValue : Number( newValue ), - selectedFontSize + hasUnits + ? newValue + : Number( newValue ), + fontSizes.find( + ( fontSize ) => + fontSize.size === newValue + ) ); } } } @@ -195,7 +200,10 @@ const UnforwardedFontSizePicker = ( } else { onChange?.( hasUnits ? newValue : Number( newValue ), - selectedFontSize + fontSizes.find( + ( fontSize ) => + fontSize.size === newValue + ) ); } } } diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index ff4c9a5481a2f9..3ac59bc2df1cb1 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -290,18 +290,37 @@ describe( 'FontSizePicker', () => { ); test.each( [ - { option: 'Default', value: '8px', expectedValue: undefined }, - { option: 'Tiny 8px', value: undefined, expectedValue: '8px' }, - { option: 'Small 1em', value: '8px', expectedValue: '1em' }, - { option: 'Medium 2rem', value: '8px', expectedValue: '2rem' }, + { + option: 'Default', + value: '8px', + expectedArguments: [ undefined ], + }, + { + option: 'Tiny 8px', + value: undefined, + expectedArguments: [ '8px', fontSizes[ 0 ] ], + }, + { + option: 'Small 1em', + value: '8px', + expectedArguments: [ '1em', fontSizes[ 1 ] ], + }, + { + option: 'Medium 2rem', + value: '8px', + expectedArguments: [ '2rem', fontSizes[ 2 ] ], + }, { option: 'Large', value: '8px', - expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)', + expectedArguments: [ + 'clamp(1.75rem, 3vw, 2.25rem)', + fontSizes[ 3 ], + ], }, ] )( 'calls onChange( $expectedValue ) when $option is selected', - async ( { option, value, expectedValue } ) => { + async ( { option, value, expectedArguments } ) => { const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime, } ); @@ -321,7 +340,7 @@ describe( 'FontSizePicker', () => { screen.getByRole( 'option', { name: option } ) ); expect( onChange ).toHaveBeenCalledTimes( 1 ); - expect( onChange ).toHaveBeenCalledWith( expectedValue ); + expect( onChange ).toHaveBeenCalledWith( ...expectedArguments ); } ); @@ -491,7 +510,7 @@ describe( 'FontSizePicker', () => { test.each( [ { radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] }, { radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] }, - { radio: 'Large', expectedArguments: [ '2em', fontSizes[ 2 ] ] }, + { radio: 'Large', expectedArguments: [ '2rem', fontSizes[ 2 ] ] }, { radio: 'Extra Large', expectedArguments: [ diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index e5de79776a243e..24c66efe1bee28 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -24,7 +24,7 @@ export type FontSizePickerProps = { */ onChange?: ( value: number | string | undefined, - selectedItem?: FontSizeOption + selectedItem?: FontSize ) => void; /** * The current font size value. From 09692b7be1d271fdec2d20f134ff77f1947fb786 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 3 Nov 2022 12:42:04 +1100 Subject: [PATCH 09/11] Now that we're setting font sizes using their presets we don't have to clampify incoming values for the site editor font size picker --- .../components/global-styles/typography-panel.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) 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 57d0fa5d00b35a..18b73e709154fd 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks'; -import { getTypographyFontSizeValue } from './typography-utils'; export function useHasTypographyPanel( name ) { const hasFontFamily = useHasFontFamilyControl( name ); @@ -173,19 +172,8 @@ export default function TypographyPanel( { name, element, headingLevel } ) { } else if ( element && element !== 'text' ) { prefix = `elements.${ element }.`; } - 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, { - fluid: fluidTypography, - } ); - } - return font; - } ); - const disableCustomFontSizes = ! useSetting( 'typography.customFontSize', name @@ -274,7 +262,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) { Date: Wed, 9 Nov 2022 08:47:35 +1100 Subject: [PATCH 10/11] Remove confusing comment, because it had nothing to do with the code changes. --- .../edit-site/src/components/global-styles/typography-panel.js | 1 - 1 file changed, 1 deletion(-) 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 18b73e709154fd..ff8483dd3c6b0d 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -115,7 +115,6 @@ function useFontSizeStyleWithReset( path, blockName ) { const hasFontSize = () => !! userStyle; const resetFontSize = () => setStyleCallback( undefined ); const setFontSize = ( newValue, metadata ) => { - // Convert font size styles to fluid if fluid is activated. if ( !! metadata?.slug ) { newValue = `var:preset|font-size|${ metadata?.slug }`; } From 999701295ff8e3035f004ded09c6222bcf1a88e7 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 9 Nov 2022 10:42:09 +1100 Subject: [PATCH 11/11] Updating method name for clarity. --- .../src/components/global-styles/typography-panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 ff8483dd3c6b0d..3e53486af2121c 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -109,7 +109,7 @@ function useStyleWithReset( path, blockName ) { return [ style, setStyle, hasStyle, resetStyle ]; } -function useFontSizeStyleWithReset( path, blockName ) { +function useFontSizeWithReset( path, blockName ) { const [ fontSize, setStyleCallback ] = useStyle( path, blockName ); const [ userStyle ] = useStyle( path, blockName, 'user' ); const hasFontSize = () => !! userStyle; @@ -200,7 +200,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) { const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] = useStyleWithReset( prefix + 'typography.fontFamily', name ); const { fontSize, setFontSize, hasFontSize, resetFontSize } = - useFontSizeStyleWithReset( prefix + 'typography.fontSize', name ); + useFontSizeWithReset( prefix + 'typography.fontSize', name ); const { fontStyle, setFontStyle,