From f3bd6afbce7b4fa52792bb52256b99ccd08acff2 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 4 Dec 2023 16:02:27 -0600 Subject: [PATCH 1/9] Add defaultFontSizes option for theme.json --- .../theme-json-reference/theme-json-living.md | 1 + lib/class-wp-theme-json-gutenberg.php | 29 +++++---- lib/theme.json | 1 + .../src/components/global-styles/hooks.js | 2 + .../global-styles/typography-panel.js | 65 +++++++++++++------ packages/block-editor/src/hooks/utils.js | 20 ++++-- packages/block-editor/src/utils/object.js | 16 +++++ schemas/json/theme.json | 5 ++ 8 files changed, 100 insertions(+), 39 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 4baa5a6009ded..ee88f779ace1c 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -176,6 +176,7 @@ Settings related to typography. | Property | Type | Default | Props | | --- | --- | --- |--- | +| defaultFontSizes | boolean | true | | | customFontSize | boolean | true | | | fontStyle | boolean | true | | | fontWeight | boolean | true | | diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index af750fa059979..a917dcf108c62 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -155,7 +155,7 @@ class WP_Theme_JSON_Gutenberg { ), array( 'path' => array( 'typography', 'fontSizes' ), - 'prevent_override' => false, + 'prevent_override' => array( 'typography', 'defaultFontSizes' ), 'use_default_names' => true, 'value_func' => 'gutenberg_get_typography_font_size_value', 'css_vars' => '--wp--preset--font-size--$slug', @@ -411,19 +411,20 @@ class WP_Theme_JSON_Gutenberg { 'defaultPresets' => null, ), 'typography' => array( - 'fluid' => null, - 'customFontSize' => null, - 'dropCap' => null, - 'fontFamilies' => null, - 'fontSizes' => null, - 'fontStyle' => null, - 'fontWeight' => null, - 'letterSpacing' => null, - 'lineHeight' => null, - 'textColumns' => null, - 'textDecoration' => null, - 'textTransform' => null, - 'writingMode' => null, + 'fluid' => null, + 'customFontSize' => null, + 'defaultFontSizes' => null, + 'dropCap' => null, + 'fontFamilies' => null, + 'fontSizes' => null, + 'fontStyle' => null, + 'fontWeight' => null, + 'letterSpacing' => null, + 'lineHeight' => null, + 'textColumns' => null, + 'textDecoration' => null, + 'textTransform' => null, + 'writingMode' => null, ), ); diff --git a/lib/theme.json b/lib/theme.json index c2ed7fdca39ed..b7bc3cb89e60f 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -236,6 +236,7 @@ }, "typography": { "customFontSize": true, + "defaultFontSizes": true, "dropCap": true, "fontSizes": [ { diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 1fed98cfd229b..2652732807cfd 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -66,6 +66,7 @@ const VALID_SETTINGS = [ 'spacing.units', 'typography.fluid', 'typography.customFontSize', + 'typography.defaultFontSizes', 'typography.dropCap', 'typography.fontFamilies', 'typography.fontSizes', @@ -238,6 +239,7 @@ export function useSettingsForBlockElement( ...updatedSettings.typography, fontSizes: {}, customFontSize: false, + defaultFontSizes: false, }; } diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 8e6755a6e4c2c..cf8c4c412ce70 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -8,7 +8,7 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -22,7 +22,7 @@ import TextTransformControl from '../text-transform-control'; import TextDecorationControl from '../text-decoration-control'; import WritingModeControl from '../writing-mode-control'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; -import { setImmutably } from '../../utils/object'; +import { setImmutably, uniqByProperty } from '../../utils/object'; const MIN_TEXT_COLUMNS = 1; const MAX_TEXT_COLUMNS = 6; @@ -51,10 +51,10 @@ export function useHasTypographyPanel( settings ) { ); } -function useHasFontSizeControl( settings ) { +function useHasFontSizeControl( mergedSettings ) { return ( - hasMergedOrigins( settings?.typography?.fontSizes ) || - settings?.typography?.customFontSize + mergedSettings?.typography?.fontSizes?.length || + mergedSettings?.typography?.customFontSize ); } @@ -100,18 +100,6 @@ function useHasTextColumnsControl( settings ) { return settings?.typography?.textColumns; } -function getUniqueFontSizesBySlug( settings ) { - const fontSizes = settings?.typography?.fontSizes; - const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : []; - const uniqueSizes = []; - for ( const currentSize of mergedFontSizes ) { - if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) { - uniqueSizes.push( currentSize ); - } - } - return uniqueSizes; -} - function TypographyToolsPanel( { resetAllFilter, onChange, @@ -148,6 +136,39 @@ const DEFAULT_CONTROLS = { textColumns: true, }; +function useMergedSettings( parentSettings ) { + return useMemo( () => { + const updatedSettings = { ...parentSettings }; + + // Remove default font sizes if disabled. + if ( + updatedSettings?.typography?.defaultFontSizes === false && + updatedSettings?.typography?.fontSizes?.default + ) { + updatedSettings.typography = { + ...updatedSettings.typography, + fontSizes: { + custom: updatedSettings.typography.fontSizes.custom, + theme: updatedSettings.typography.fontSizes.theme, + }, + }; + } + + // Merge origins and remove duplicates. + if ( updatedSettings?.typography?.fontSizes ) { + updatedSettings.typography.fontSizes = mergeOrigins( + updatedSettings.typography.fontSizes + ); + updatedSettings.typography.fontSizes = uniqByProperty( + updatedSettings.typography.fontSizes, + 'slug' + ); + } + + return updatedSettings; + }, [ parentSettings ] ); +} + export default function TypographyPanel( { as: Wrapper = TypographyToolsPanel, value, @@ -160,6 +181,8 @@ export default function TypographyPanel( { const decodeValue = ( rawValue ) => getValueFromVariable( { settings }, '', rawValue ); + const mergedSettings = useMergedSettings( settings ); + // Font Family const hasFontFamilyEnabled = useHasFontFamilyControl( settings ); const fontFamilies = settings?.typography?.fontFamilies; @@ -183,9 +206,9 @@ export default function TypographyPanel( { const resetFontFamily = () => setFontFamily( undefined ); // Font Size - const hasFontSizeEnabled = useHasFontSizeControl( settings ); - const disableCustomFontSizes = ! settings?.typography?.customFontSize; - const mergedFontSizes = getUniqueFontSizesBySlug( settings ); + const hasFontSizeEnabled = useHasFontSizeControl( mergedSettings ); + const disableCustomFontSizes = ! mergedSettings?.typography?.customFontSize; + const fontSizes = mergedSettings?.typography?.fontSizes; const fontSize = decodeValue( inheritedValue?.typography?.fontSize ); const setFontSize = ( newValue, metadata ) => { @@ -368,7 +391,7 @@ export default function TypographyPanel( { { } ); return value ?? defaultValue; }; + +/** + * Helper util to filter out objects with duplicate values for a given property. + * + * @param {Object[]} array Array of objects to filter. + * @param {string} property Property to filter unique values by. + * + * @return {Object[]} Array of objects with unique values for the specified property. + */ +export function uniqByProperty( array, property ) { + const seen = new Set(); + return array.filter( ( item ) => { + const value = item[ property ]; + return seen.has( value ) ? false : seen.add( value ); + } ); +} diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 10695f493c40d..9f633fc77ec75 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -484,6 +484,11 @@ "description": "Settings related to typography.", "type": "object", "properties": { + "defaultFontSizes": { + "description": "Allow users to choose font sizes from the default font size presets.", + "type": "boolean", + "default": true + }, "customFontSize": { "description": "Allow users to set custom font sizes.", "type": "boolean", From 6f4e3764ea195fe870b6baaae49868ab3724f2d5 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 7 Dec 2023 14:38:54 -0600 Subject: [PATCH 2/9] Fix defaultFontSizes causing errors when missing --- .../global-styles/typography-panel.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index cf8c4c412ce70..bd80655a174e4 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -138,20 +138,25 @@ const DEFAULT_CONTROLS = { function useMergedSettings( parentSettings ) { return useMemo( () => { - const updatedSettings = { ...parentSettings }; + // Deep clone relevant parts of parent settings. + const updatedSettings = { + ...parentSettings, + typography: { + ...parentSettings?.typography, + fontSizes: { + default: parentSettings?.typography?.fontSizes?.default, + theme: parentSettings?.typography?.fontSizes?.theme, + custom: parentSettings?.typography?.fontSizes?.custom, + }, + }, + }; // Remove default font sizes if disabled. if ( updatedSettings?.typography?.defaultFontSizes === false && updatedSettings?.typography?.fontSizes?.default ) { - updatedSettings.typography = { - ...updatedSettings.typography, - fontSizes: { - custom: updatedSettings.typography.fontSizes.custom, - theme: updatedSettings.typography.fontSizes.theme, - }, - }; + delete updatedSettings.typography.fontSizes.default; } // Merge origins and remove duplicates. From ce0ac34ed11ce8661fb8f1a0d4984ce5bf45d65c Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 7 Dec 2023 14:52:49 -0600 Subject: [PATCH 3/9] Simplify useMergedSettings --- .../global-styles/typography-panel.js | 42 +++++++------------ 1 file changed, 14 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index bd80655a174e4..b1bc1206513c8 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -138,39 +138,25 @@ const DEFAULT_CONTROLS = { function useMergedSettings( parentSettings ) { return useMemo( () => { - // Deep clone relevant parts of parent settings. - const updatedSettings = { + const newFontSizes = uniqByProperty( + mergeOrigins( { + default: + parentSettings?.typography?.defaultFontSizes !== false + ? parentSettings?.typography?.fontSizes?.default + : undefined, + theme: parentSettings?.typography?.fontSizes?.theme, + custom: parentSettings?.typography?.fontSizes?.custom, + } ), + 'slug' + ); + + return { ...parentSettings, typography: { ...parentSettings?.typography, - fontSizes: { - default: parentSettings?.typography?.fontSizes?.default, - theme: parentSettings?.typography?.fontSizes?.theme, - custom: parentSettings?.typography?.fontSizes?.custom, - }, + fontSizes: newFontSizes, }, }; - - // Remove default font sizes if disabled. - if ( - updatedSettings?.typography?.defaultFontSizes === false && - updatedSettings?.typography?.fontSizes?.default - ) { - delete updatedSettings.typography.fontSizes.default; - } - - // Merge origins and remove duplicates. - if ( updatedSettings?.typography?.fontSizes ) { - updatedSettings.typography.fontSizes = mergeOrigins( - updatedSettings.typography.fontSizes - ); - updatedSettings.typography.fontSizes = uniqByProperty( - updatedSettings.typography.fontSizes, - 'slug' - ); - } - - return updatedSettings; }, [ parentSettings ] ); } From 4a406a8a19fdcd93f34c8ed51e7969da7c7ccd15 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 7 Dec 2023 15:01:35 -0600 Subject: [PATCH 4/9] Simplify more --- .../global-styles/typography-panel.js | 40 ++++++++----------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index b1bc1206513c8..a6693fe372195 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -23,6 +23,7 @@ import TextDecorationControl from '../text-decoration-control'; import WritingModeControl from '../writing-mode-control'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; import { setImmutably, uniqByProperty } from '../../utils/object'; +import { use } from '@wordpress/data'; const MIN_TEXT_COLUMNS = 1; const MAX_TEXT_COLUMNS = 6; @@ -51,10 +52,13 @@ export function useHasTypographyPanel( settings ) { ); } -function useHasFontSizeControl( mergedSettings ) { +function useHasFontSizeControl( settings ) { return ( - mergedSettings?.typography?.fontSizes?.length || - mergedSettings?.typography?.customFontSize + ( settings?.typography?.defaultFontSizes !== false && + settings?.typography?.fontSizes?.default?.length ) || + settings?.typography?.fontSizes?.theme?.length || + settings?.typography?.fontSizes?.custom?.length || + settings?.typography?.customFontSize ); } @@ -136,28 +140,20 @@ const DEFAULT_CONTROLS = { textColumns: true, }; -function useMergedSettings( parentSettings ) { +function useMergedFontSizes( settings ) { return useMemo( () => { - const newFontSizes = uniqByProperty( + return uniqByProperty( mergeOrigins( { default: - parentSettings?.typography?.defaultFontSizes !== false - ? parentSettings?.typography?.fontSizes?.default + settings?.typography?.defaultFontSizes !== false + ? settings?.typography?.fontSizes?.default : undefined, - theme: parentSettings?.typography?.fontSizes?.theme, - custom: parentSettings?.typography?.fontSizes?.custom, + theme: settings?.typography?.fontSizes?.theme, + custom: settings?.typography?.fontSizes?.custom, } ), 'slug' ); - - return { - ...parentSettings, - typography: { - ...parentSettings?.typography, - fontSizes: newFontSizes, - }, - }; - }, [ parentSettings ] ); + }, [ settings ] ); } export default function TypographyPanel( { @@ -172,8 +168,6 @@ export default function TypographyPanel( { const decodeValue = ( rawValue ) => getValueFromVariable( { settings }, '', rawValue ); - const mergedSettings = useMergedSettings( settings ); - // Font Family const hasFontFamilyEnabled = useHasFontFamilyControl( settings ); const fontFamilies = settings?.typography?.fontFamilies; @@ -197,9 +191,9 @@ export default function TypographyPanel( { const resetFontFamily = () => setFontFamily( undefined ); // Font Size - const hasFontSizeEnabled = useHasFontSizeControl( mergedSettings ); - const disableCustomFontSizes = ! mergedSettings?.typography?.customFontSize; - const fontSizes = mergedSettings?.typography?.fontSizes; + const hasFontSizeEnabled = useHasFontSizeControl( settings ); + const disableCustomFontSizes = ! settings?.typography?.customFontSize; + const fontSizes = useMergedFontSizes( settings ); const fontSize = decodeValue( inheritedValue?.typography?.fontSize ); const setFontSize = ( newValue, metadata ) => { From f64a4d902c5361cd7e68988b6c79d08fe9c27f79 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 7 Dec 2023 15:04:45 -0600 Subject: [PATCH 5/9] Remove the memo because it's probably fine --- .../global-styles/typography-panel.js | 34 +++++++------------ 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index a6693fe372195..cde39e647ce9d 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -8,7 +8,7 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies @@ -23,7 +23,6 @@ import TextDecorationControl from '../text-decoration-control'; import WritingModeControl from '../writing-mode-control'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; import { setImmutably, uniqByProperty } from '../../utils/object'; -import { use } from '@wordpress/data'; const MIN_TEXT_COLUMNS = 1; const MAX_TEXT_COLUMNS = 6; @@ -140,22 +139,6 @@ const DEFAULT_CONTROLS = { textColumns: true, }; -function useMergedFontSizes( settings ) { - return useMemo( () => { - return uniqByProperty( - mergeOrigins( { - default: - settings?.typography?.defaultFontSizes !== false - ? settings?.typography?.fontSizes?.default - : undefined, - theme: settings?.typography?.fontSizes?.theme, - custom: settings?.typography?.fontSizes?.custom, - } ), - 'slug' - ); - }, [ settings ] ); -} - export default function TypographyPanel( { as: Wrapper = TypographyToolsPanel, value, @@ -193,8 +176,17 @@ export default function TypographyPanel( { // Font Size const hasFontSizeEnabled = useHasFontSizeControl( settings ); const disableCustomFontSizes = ! settings?.typography?.customFontSize; - const fontSizes = useMergedFontSizes( settings ); - + const mergedFontSizes = uniqByProperty( + mergeOrigins( { + default: + settings?.typography?.defaultFontSizes !== false + ? settings?.typography?.fontSizes?.default + : undefined, + theme: settings?.typography?.fontSizes?.theme, + custom: settings?.typography?.fontSizes?.custom, + } ), + 'slug' + ); const fontSize = decodeValue( inheritedValue?.typography?.fontSize ); const setFontSize = ( newValue, metadata ) => { const actualValue = !! metadata?.slug @@ -376,7 +368,7 @@ export default function TypographyPanel( { Date: Thu, 7 Dec 2023 17:20:32 -0600 Subject: [PATCH 6/9] Try ignoring how overrides are handled in the dropdown --- .../global-styles/typography-panel.js | 45 ++++++++++++++----- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index cde39e647ce9d..a60588bbfba64 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -176,17 +176,42 @@ export default function TypographyPanel( { // Font Size const hasFontSizeEnabled = useHasFontSizeControl( settings ); const disableCustomFontSizes = ! settings?.typography?.customFontSize; - const mergedFontSizes = uniqByProperty( - mergeOrigins( { - default: - settings?.typography?.defaultFontSizes !== false - ? settings?.typography?.fontSizes?.default - : undefined, - theme: settings?.typography?.fontSizes?.theme, - custom: settings?.typography?.fontSizes?.custom, - } ), + + /** + * TODO: Doing some hacky things here so the global styles CSS matches what + * is shown in the dropdown. + * + * Global styles PRESETS_METADATA includes a `prevent_override` option + * that's supposed to handle this. But it isn't working as expected. + * + * Ideally, global styles would be fixed to handle overrides and duplicates + * better. But at least with these hacks, the thing you select matches the + * styles that get applied. + */ + + // The font size presets are merged in reverse order so that the duplicates + // that may defined later in the array have higher priority to match the CSS. + const mergedFontSizesAll = uniqByProperty( + [ + settings?.typography?.fontSizes?.custom, + settings?.typography?.fontSizes?.theme, + settings?.typography?.fontSizes?.default, + ].flatMap( ( presets ) => presets?.toReversed() ?? [] ), 'slug' - ); + ).toReversed(); + + // Default presets exist in the global styles CSS no matter the setting, so + // filtering them out in the UI has to be done after merging. + const mergedFontSizes = + settings?.typography?.defaultFontSizes === false + ? mergedFontSizesAll.filter( + ( { slug } ) => + ! [ 'small', 'medium', 'large', 'x-large' ].includes( + slug + ) + ) + : mergedFontSizesAll; + const fontSize = decodeValue( inheritedValue?.typography?.fontSize ); const setFontSize = ( newValue, metadata ) => { const actualValue = !! metadata?.slug From 67cab81b70b5077ee6418b35cc12dceb91368fa1 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 10 Jan 2024 12:02:13 -0600 Subject: [PATCH 7/9] Minor performance improvement using reverse instead of toReversed --- .../src/components/global-styles/typography-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index a60588bbfba64..ccaad11621061 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -198,7 +198,7 @@ export default function TypographyPanel( { settings?.typography?.fontSizes?.default, ].flatMap( ( presets ) => presets?.toReversed() ?? [] ), 'slug' - ).toReversed(); + ).reverse(); // Default presets exist in the global styles CSS no matter the setting, so // filtering them out in the UI has to be done after merging. From f22f66521c40550bb018646ac85175f8e2b4aacf Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 10 Jan 2024 12:02:56 -0600 Subject: [PATCH 8/9] Link to a new issue with a more complete description --- .../components/global-styles/typography-panel.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index ccaad11621061..99cc495f5c512 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -178,15 +178,14 @@ export default function TypographyPanel( { const disableCustomFontSizes = ! settings?.typography?.customFontSize; /** - * TODO: Doing some hacky things here so the global styles CSS matches what - * is shown in the dropdown. + * TODO: The reversing and filtering of default font sizes is a hack so the + * dropdown UI matches what is generated in the global styles CSS stylesheet. * - * Global styles PRESETS_METADATA includes a `prevent_override` option - * that's supposed to handle this. But it isn't working as expected. + * This is a temporary solution until #57733 is resolved. At which point, + * the mergedFontSizes would just need to be the concatenated array of all + * presets or a custom dropdown with sections for each. * - * Ideally, global styles would be fixed to handle overrides and duplicates - * better. But at least with these hacks, the thing you select matches the - * styles that get applied. + * @see {@link https://github.com/WordPress/gutenberg/issues/57733} */ // The font size presets are merged in reverse order so that the duplicates From 3863ee6052f84899e0b96aa71fb1ab243ebf9558 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 10 Jan 2024 14:14:38 -0600 Subject: [PATCH 9/9] Refactor hack into its own funtion --- .../global-styles/typography-panel.js | 76 ++++++++++--------- 1 file changed, 42 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 99cc495f5c512..668e8b101be92 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -103,6 +103,47 @@ function useHasTextColumnsControl( settings ) { return settings?.typography?.textColumns; } +/** + * TODO: The reversing and filtering of default font sizes is a hack so the + * dropdown UI matches what is generated in the global styles CSS stylesheet. + * + * This is a temporary solution until #57733 is resolved. At which point, + * the mergedFontSizes would just need to be the concatenated array of all + * presets or a custom dropdown with sections for each. + * + * @see {@link https://github.com/WordPress/gutenberg/issues/57733} + * + * @param {Object} settings The global styles settings. + * + * @return {Array} The merged font sizes. + */ +function getMergedFontSizes( settings ) { + // The font size presets are merged in reverse order so that the duplicates + // that may defined later in the array have higher priority to match the CSS. + const mergedFontSizesAll = uniqByProperty( + [ + settings?.typography?.fontSizes?.custom, + settings?.typography?.fontSizes?.theme, + settings?.typography?.fontSizes?.default, + ].flatMap( ( presets ) => presets?.toReversed() ?? [] ), + 'slug' + ).reverse(); + + // Default presets exist in the global styles CSS no matter the setting, so + // filtering them out in the UI has to be done after merging. + const mergedFontSizes = + settings?.typography?.defaultFontSizes === false + ? mergedFontSizesAll.filter( + ( { slug } ) => + ! [ 'small', 'medium', 'large', 'x-large' ].includes( + slug + ) + ) + : mergedFontSizesAll; + + return mergedFontSizes; +} + function TypographyToolsPanel( { resetAllFilter, onChange, @@ -176,40 +217,7 @@ export default function TypographyPanel( { // Font Size const hasFontSizeEnabled = useHasFontSizeControl( settings ); const disableCustomFontSizes = ! settings?.typography?.customFontSize; - - /** - * TODO: The reversing and filtering of default font sizes is a hack so the - * dropdown UI matches what is generated in the global styles CSS stylesheet. - * - * This is a temporary solution until #57733 is resolved. At which point, - * the mergedFontSizes would just need to be the concatenated array of all - * presets or a custom dropdown with sections for each. - * - * @see {@link https://github.com/WordPress/gutenberg/issues/57733} - */ - - // The font size presets are merged in reverse order so that the duplicates - // that may defined later in the array have higher priority to match the CSS. - const mergedFontSizesAll = uniqByProperty( - [ - settings?.typography?.fontSizes?.custom, - settings?.typography?.fontSizes?.theme, - settings?.typography?.fontSizes?.default, - ].flatMap( ( presets ) => presets?.toReversed() ?? [] ), - 'slug' - ).reverse(); - - // Default presets exist in the global styles CSS no matter the setting, so - // filtering them out in the UI has to be done after merging. - const mergedFontSizes = - settings?.typography?.defaultFontSizes === false - ? mergedFontSizesAll.filter( - ( { slug } ) => - ! [ 'small', 'medium', 'large', 'x-large' ].includes( - slug - ) - ) - : mergedFontSizesAll; + const mergedFontSizes = getMergedFontSizes( settings ); const fontSize = decodeValue( inheritedValue?.typography?.fontSize ); const setFontSize = ( newValue, metadata ) => {