From 45959e4eb4395e68e0fbf724906b4d0e9bd2056f Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 28 Jun 2024 13:30:08 +0400 Subject: [PATCH 01/32] adding ui for size presets --- .../confirm-delete-font-size-dialog.js | 49 ++++ .../font-sizes/font-size-preview.js | 28 ++ .../global-styles/font-sizes/font-size.js | 241 ++++++++++++++++++ .../global-styles/font-sizes/font-sizes.js | 113 ++++++++ .../font-sizes/rename-font-size-dialog.js | 64 +++++ .../global-styles/screen-typography.js | 2 + .../global-styles/size-control/index.js | 86 +++++++ .../src/components/global-styles/style.scss | 11 + .../src/components/global-styles/ui.js | 14 +- 9 files changed, 606 insertions(+), 2 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js create mode 100644 packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js create mode 100644 packages/edit-site/src/components/global-styles/font-sizes/font-size.js create mode 100644 packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js create mode 100644 packages/edit-site/src/components/global-styles/font-sizes/rename-font-size-dialog.js create mode 100644 packages/edit-site/src/components/global-styles/size-control/index.js diff --git a/packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js b/packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js new file mode 100644 index 00000000000000..a73727385b0c51 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js @@ -0,0 +1,49 @@ +/** + * WordPress dependencies + */ +import { + __experimentalConfirmDialog as ConfirmDialog, + __experimentalUseNavigator as useNavigator, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; + +function ConfirmDeleteFontSizeDialog( { + fontSize, + isOpen, + toggleOpen, + handleRemoveFontSize, +} ) { + const navigator = useNavigator(); + + const handleConfirm = async () => { + toggleOpen(); + handleRemoveFontSize( fontSize ); + navigator.goTo( '/typography/' ); + }; + + const handleCancel = () => { + toggleOpen(); + }; + + return ( + + { fontSize && + sprintf( + /* translators: %s: Name of the font size preset. */ + __( + 'Are you sure you want to delete "%s" font size preset?' + ), + fontSize.name + ) } + + ); +} + +export default ConfirmDeleteFontSizeDialog; diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js new file mode 100644 index 00000000000000..b11e96393ab014 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../../lock-unlock'; +const { useGlobalStyle } = unlock( blockEditorPrivateApis ); + +function FontSizePreview( { fontSize } ) { + const [ font ] = useGlobalStyle( 'typography' ); + return ( +
+ { __( 'Aa' ) } +
+ ); +} + +export default FontSizePreview; diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js new file mode 100644 index 00000000000000..ffd3757461521c --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js @@ -0,0 +1,241 @@ +/** + * WordPress dependencies + */ +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { __, sprintf } from '@wordpress/i18n'; +import { + __experimentalSpacer as Spacer, + __experimentalUseNavigator as useNavigator, + __experimentalView as View, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + privateApis as componentsPrivateApis, + Button, + FlexItem, + ToggleControl, +} from '@wordpress/components'; +import { moreVertical } from '@wordpress/icons'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../../lock-unlock'; +const { + DropdownMenuV2: DropdownMenu, + DropdownMenuItemV2: DropdownMenuItem, + DropdownMenuItemLabelV2: DropdownMenuItemLabel, +} = unlock( componentsPrivateApis ); +const { useGlobalSetting } = unlock( blockEditorPrivateApis ); +import ScreenHeader from '../header'; +import FontSizePreview from './font-size-preview'; +import ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog'; +import RenameFontSizeDialog from './rename-font-size-dialog'; +import SizeControl from '../size-control'; + +function FontSize() { + const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false ); + const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false ); + + const { + params: { slug }, + goBack, + } = useNavigator(); + const [ fontSizes, setFontSizes ] = useGlobalSetting( + 'typography.fontSizes' + ); + // Get the font sizes from the theme or use the default ones. + const sizes = fontSizes.theme ?? fontSizes.default ?? []; + + // Get the font size by slug. + const fontSize = sizes.find( ( size ) => size.slug === slug ); + + // Whether fluid is true or an object, set it to true, otherwise false. + const isFluid = !! fontSize.fluid ?? false; + + // Whether custom fluid values are used. + const isCustomFluid = typeof fontSize.fluid === 'object'; + + const handleNameChange = ( value ) => { + updateFontSize( 'name', value ); + }; + + const handleFontSizeChange = ( value ) => { + updateFontSize( 'size', value ); + }; + + const handleFluidChange = ( value ) => { + updateFontSize( 'fluid', value ); + }; + + const handleCustomFluidValues = ( value ) => { + if ( value ) { + // If custom values are used, init the values with the current ones. + updateFontSize( 'fluid', { + min: fontSize.size, + max: fontSize.size, + } ); + } else { + // If custom fluid values are disabled, set fluid to true. + updateFontSize( 'fluid', true ); + } + }; + + const handleMinChange = ( value ) => { + updateFontSize( 'fluid', { ...fontSize.fluid, min: value } ); + }; + + const handleMaxChange = ( value ) => { + updateFontSize( 'fluid', { ...fontSize.fluid, max: value } ); + }; + + const updateFontSize = ( key, value ) => { + const newFontSizes = sizes.map( ( size ) => { + if ( size.slug === slug ) { + return { ...size, [ key ]: value }; // Create a new object with updated key + } + return size; + } ); + + setFontSizes( { + ...fontSizes, + theme: newFontSizes, + } ); + }; + + const handleRemoveFontSize = () => { + // Navigate to the font sizes list. + goBack(); + + const newFontSizes = sizes.filter( ( size ) => size.slug !== slug ); + setFontSizes( { + ...fontSizes, + theme: newFontSizes, + } ); + }; + + const toggleDeleteConfirm = () => { + setIsDeleteConfirmOpen( ! isDeleteConfirmOpen ); + }; + + const toggleRenameDialog = () => { + setIsRenameDialogOpen( ! isRenameDialogOpen ); + }; + + return ( + <> + + + { isRenameDialogOpen && ( + + ) } + + + + + + + + } + > + + + { __( 'Rename' ) } + + + + + { __( 'Delete' ) } + + + + + + + + + + + + + + + + + + + { isFluid && ( + + ) } + + { isCustomFluid && ( + <> + + + + ) } + + + + + + ); +} + +export default FontSize; diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js new file mode 100644 index 00000000000000..8c55d2871bad43 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js @@ -0,0 +1,113 @@ +/** + * WordPress dependencies + */ +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { __, sprintf } from '@wordpress/i18n'; +import { + __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, + __experimentalItemGroup as ItemGroup, + __experimentalVStack as VStack, + __experimentalHStack as HStack, + FlexItem, + Button, +} from '@wordpress/components'; +import { plus } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import { unlock } from '../../../lock-unlock'; +const { useGlobalSetting } = unlock( blockEditorPrivateApis ); +import Subtitle from '../subtitle'; +import { NavigationButtonAsItem } from '../navigation-button'; +import { getNewIndexFromPresets } from '../utils'; + +/** + * Coefficients to normalize font sizes to pixels. + * + * em/rm on units are bases the default font size of 16px. + * Viewport units are based on a 1920x1080 screen. + */ +const NORMALIZED_FONT_SIZE_COEFFICIENT = { + px: 1, + em: 16, + rem: 16, + vw: 19.2, + vh: 10.8, +}; + +/* + * Normalize a font size value to a specific unit. + * + * @param {string} size The font size value to normalize. + * @return {string} The normalized font size value. + */ +function normalizeFontSize( size ) { + const [ quantity, unit ] = parseQuantityAndUnitFromRawValue( size ); + const normalizedSize = + quantity * ( NORMALIZED_FONT_SIZE_COEFFICIENT[ unit ] ?? 1 ); + if ( isNaN( normalizedSize ) || isNaN( quantity ) ) { + return 1; + } + return normalizedSize; +} + +function FontSizes() { + const [ fontSizes, setFontSizes ] = useGlobalSetting( + 'typography.fontSizes' + ); + + // Get the font sizes from the theme or use the default ones. + const sizes = fontSizes.theme ?? fontSizes.default ?? []; + const normalizedSizes = sizes + .map( ( fontSize ) => ( { + ...fontSize, + normalizedSize: normalizeFontSize( fontSize.size ), + } ) ) + .sort( ( a, b ) => a.normalizedSize - b.normalizedSize ); + + const handleAddFontSize = () => { + const index = getNewIndexFromPresets( sizes, 'custom-' ); + const newFontSize = { + /* translators: %d: font size index */ + name: sprintf( __( 'New Font Size %d' ), index ), + size: '16px', + slug: `custom-${ index }`, + }; + + setFontSizes( { ...fontSizes, theme: [ ...sizes, newFontSize ] } ); + }; + + return ( + + + { __( 'Font Sizes' ) } + + + + + + + + + ); +} + +export default RenameFontSizeDialog; diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 08472325ebc1f8..fac9aa2ccc873f 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -13,6 +13,7 @@ import TypographyElements from './typography-elements'; import TypographyVariations from './variations/variations-typography'; import FontFamilies from './font-families'; import ScreenHeader from './header'; +import FontSizes from './font-sizes/font-sizes'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -35,6 +36,7 @@ function ScreenTypography() { fontLibraryEnabled && } + diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js new file mode 100644 index 00000000000000..cebae57a8f4e48 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/size-control/index.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { + BaseControl, + RangeControl, + Flex, + FlexItem, + useBaseControlProps, + __experimentalUseCustomUnits as useCustomUnits, + __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, + __experimentalUnitControl as UnitControl, + __experimentalSpacer as Spacer, +} from '@wordpress/components'; + +const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; + +function SizeControl( props ) { + const { baseControlProps } = useBaseControlProps( props ); + const { value, onChange, fallbackValue } = props; + + const units = useCustomUnits( { + availableUnits: DEFAULT_UNITS, + } ); + + const [ valueQuantity, valueUnit = 'px' ] = + parseQuantityAndUnitFromRawValue( value, units ); + + const isValueUnitRelative = + !! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit ); + + // Receives the new value from the UnitControl component as a string containing the value and unit. + const handleUnitControlChange = ( newValue ) => { + onChange?.( newValue ); + }; + + // Receives the new value from the RangeControl component as a number. + const handleRangeControlChange = ( newValue ) => { + onChange?.( newValue + valueUnit ); + }; + + return ( + + + + + + + + + + + + + ); +} + +export default SizeControl; diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 51e83f33c03eee..a3018e210484d9 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -23,6 +23,17 @@ overflow: hidden; } +.edit-site-font-size__item { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-break: anywhere; +} + +.edit-site-font-size__item-value { + max-width: 50% !important; +} + .edit-site-global-styles-screen { margin: $grid-unit-15 $grid-unit-20 $grid-unit-20; } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 08cd20e9aac6a8..77e9b2b3fd524e 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -33,6 +33,7 @@ import { import ScreenBlock from './screen-block'; import ScreenTypography from './screen-typography'; import ScreenTypographyElement from './screen-typography-element'; +import FontSize from './font-sizes/font-size'; import ScreenColors from './screen-colors'; import ScreenColorPalette from './screen-color-palette'; import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows'; @@ -231,7 +232,12 @@ function GlobalStylesBlockLink() { if ( newPath !== currentPath ) { navigator.goTo( newPath, { skipFocus: true } ); } - }, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] ); + }, [ + selectedBlockClientId, + selectedBlockName, + blockHasGlobalStyles, + navigator, + ] ); } function GlobalStylesEditorCanvasContainerLink() { @@ -282,7 +288,7 @@ function GlobalStylesEditorCanvasContainerLink() { goTo( '/' ); break; } - }, [ editorCanvasContainerView, isRevisionsOpen, goTo ] ); + }, [ editorCanvasContainerView, isRevisionsOpen, goTo, path ] ); } function GlobalStylesUI() { @@ -313,6 +319,10 @@ function GlobalStylesUI() { + + + + From 923bc76a10160b9f25c7bc8df9ffab7fa4f5647c Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 28 Jun 2024 14:42:32 +0400 Subject: [PATCH 02/32] add disable prop --- .../src/components/global-styles/size-control/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js index cebae57a8f4e48..81b08e273d3875 100644 --- a/packages/edit-site/src/components/global-styles/size-control/index.js +++ b/packages/edit-site/src/components/global-styles/size-control/index.js @@ -22,7 +22,7 @@ const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; function SizeControl( props ) { const { baseControlProps } = useBaseControlProps( props ); - const { value, onChange, fallbackValue } = props; + const { value, onChange, fallbackValue, disabled } = props; const units = useCustomUnits( { availableUnits: DEFAULT_UNITS, @@ -58,6 +58,7 @@ function SizeControl( props ) { onChange={ handleUnitControlChange } units={ units } min={ 0 } + disabled={ disabled } /> @@ -75,6 +76,7 @@ function SizeControl( props ) { min={ 0 } max={ isValueUnitRelative ? 10 : 100 } step={ isValueUnitRelative ? 0.1 : 1 } + disabled={ disabled } /> From a8cc36b0f54ba58c3a11fb6bdff25f640117d9d9 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 1 Jul 2024 23:33:15 +0400 Subject: [PATCH 03/32] removes font size custom ordering --- .../global-styles/font-sizes/font-sizes.js | 39 +------------------ 1 file changed, 1 insertion(+), 38 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js index 8c55d2871bad43..968f123fcede22 100644 --- a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js @@ -4,7 +4,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { - __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, __experimentalHStack as HStack, @@ -22,36 +21,6 @@ import Subtitle from '../subtitle'; import { NavigationButtonAsItem } from '../navigation-button'; import { getNewIndexFromPresets } from '../utils'; -/** - * Coefficients to normalize font sizes to pixels. - * - * em/rm on units are bases the default font size of 16px. - * Viewport units are based on a 1920x1080 screen. - */ -const NORMALIZED_FONT_SIZE_COEFFICIENT = { - px: 1, - em: 16, - rem: 16, - vw: 19.2, - vh: 10.8, -}; - -/* - * Normalize a font size value to a specific unit. - * - * @param {string} size The font size value to normalize. - * @return {string} The normalized font size value. - */ -function normalizeFontSize( size ) { - const [ quantity, unit ] = parseQuantityAndUnitFromRawValue( size ); - const normalizedSize = - quantity * ( NORMALIZED_FONT_SIZE_COEFFICIENT[ unit ] ?? 1 ); - if ( isNaN( normalizedSize ) || isNaN( quantity ) ) { - return 1; - } - return normalizedSize; -} - function FontSizes() { const [ fontSizes, setFontSizes ] = useGlobalSetting( 'typography.fontSizes' @@ -59,12 +28,6 @@ function FontSizes() { // Get the font sizes from the theme or use the default ones. const sizes = fontSizes.theme ?? fontSizes.default ?? []; - const normalizedSizes = sizes - .map( ( fontSize ) => ( { - ...fontSize, - normalizedSize: normalizeFontSize( fontSize.size ), - } ) ) - .sort( ( a, b ) => a.normalizedSize - b.normalizedSize ); const handleAddFontSize = () => { const index = getNewIndexFromPresets( sizes, 'custom-' ); @@ -90,7 +53,7 @@ function FontSizes() { /> - { normalizedSizes.map( ( size ) => ( + { sizes.map( ( size ) => ( Date: Tue, 2 Jul 2024 17:25:32 +0400 Subject: [PATCH 04/32] use origins --- .../global-styles/font-sizes/font-size.js | 17 +- .../font-sizes/font-sizes-count.js | 68 ++++++ .../global-styles/font-sizes/font-sizes.js | 193 +++++++++++++++--- .../global-styles/screen-typography.js | 4 +- .../src/components/global-styles/ui.js | 7 +- 5 files changed, 248 insertions(+), 41 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js index ffd3757461521c..5a1cd2e4dd5856 100644 --- a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js @@ -38,14 +38,17 @@ function FontSize() { const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false ); const { - params: { slug }, + params: { origin, slug }, goBack, + goTo, } = useNavigator(); + const [ fontSizes, setFontSizes ] = useGlobalSetting( 'typography.fontSizes' ); - // Get the font sizes from the theme or use the default ones. - const sizes = fontSizes.theme ?? fontSizes.default ?? []; + + // Get the font sizes from the origin, default to empty array. + const sizes = fontSizes[ origin ] ?? []; // Get the font size by slug. const fontSize = sizes.find( ( size ) => size.slug === slug ); @@ -99,7 +102,7 @@ function FontSize() { setFontSizes( { ...fontSizes, - theme: newFontSizes, + [ origin ]: newFontSizes, } ); }; @@ -110,7 +113,7 @@ function FontSize() { const newFontSizes = sizes.filter( ( size ) => size.slug !== slug ); setFontSizes( { ...fontSizes, - theme: newFontSizes, + [ origin ]: newFontSizes, } ); }; @@ -149,6 +152,7 @@ function FontSize() { __( 'Manage the font size %s.' ), fontSize.name ) } + onBack={ () => goTo( '/typography/font-sizes/' ) } /> + + { __( 'Font Sizes' ) } + + + + + + { sprintf( + /* translators: %d: number of font sizes */ + _n( + '%d Font size preset', + '%d Font sizes presets', + fontSizesCount + ), + fontSizesCount + ) } + + + + + + + + + ); +} + +export default FontSizes; diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js index 968f123fcede22..40dc93f14211c9 100644 --- a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js @@ -4,33 +4,128 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { + privateApis as componentsPrivateApis, + __experimentalSpacer as Spacer, + __experimentalView as View, __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, __experimentalHStack as HStack, FlexItem, Button, } from '@wordpress/components'; -import { plus } from '@wordpress/icons'; +import { plus, moreVertical } from '@wordpress/icons'; /** * Internal dependencies */ import { unlock } from '../../../lock-unlock'; +const { + DropdownMenuV2: DropdownMenu, + DropdownMenuItemV2: DropdownMenuItem, + DropdownMenuItemLabelV2: DropdownMenuItemLabel, +} = unlock( componentsPrivateApis ); const { useGlobalSetting } = unlock( blockEditorPrivateApis ); import Subtitle from '../subtitle'; import { NavigationButtonAsItem } from '../navigation-button'; import { getNewIndexFromPresets } from '../utils'; +import ScreenHeader from '../header'; + +function FontSizeGroup( { + label, + origin, + sizes, + handleAddFontSize, + handleResetFontSizes, +} ) { + return ( + + + { label } + + { origin === 'custom' && ( + - - - - - + + ); From 46b0dd20b9b388f23c043904bedb984fd31a2d41 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Wed, 10 Jul 2024 14:56:06 +0400 Subject: [PATCH 19/32] update label Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../src/components/global-styles/font-sizes/font-sizes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js index 26bc924cadede2..f0f9f7307b6b68 100644 --- a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js +++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js @@ -89,7 +89,7 @@ function FontSizeGroup( {