From 253e8c459b0c971089a2e74fe0ec783ac81f49c0 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Tue, 24 Jun 2025 13:08:18 +0800 Subject: [PATCH 1/4] merge theme and wp default presets if defaultSizesEnabled is true --- src/hooks/use-preset-controls.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/hooks/use-preset-controls.js b/src/hooks/use-preset-controls.js index 02883663ad..dd69b38c87 100644 --- a/src/hooks/use-preset-controls.js +++ b/src/hooks/use-preset-controls.js @@ -7,18 +7,22 @@ import { __ } from '@wordpress/i18n' const PRESET_MAPPING = { fontSizes: { settings: [ 'typography', 'fontSizes' ], + defaultEnabled: [ 'typography', 'defaultFontSizes' ], prefix: 'font-size', }, spacingSizes: { settings: [ 'spacing', 'spacingSizes' ], + defaultEnabled: [ 'typography', 'defaultSpacingSizes' ], prefix: 'spacing', }, blockHeights: { settings: [ 'blockHeights' ], + defaultEnabled: [], prefix: 'block-height', }, borderRadius: { settings: [ 'borderRadius' ], + defaultEnabled: [], prefix: 'border-radius', }, } @@ -31,7 +35,26 @@ const nonePreset = { export const usePresetControls = property => { // Get the theme presets for the property - const [ themePresets ] = useSettings( PRESET_MAPPING[ property ].settings.join( '.' ) ) + const [ + themePresets, + + /** + * Dev note: + * Starting from theme.json version 3, settings such as `typography.defaultFontSizes` and `spacing.defaultSpacingSizes` + * must be set to `false` to override the default presets. If these settings are not found in the theme.json, they default to `true`. + * Otherwise, themes that use the same slugs as the defaults will continue to use the default presets. + * Therefore, we also need to get the default presets if the `defaultSizesEnabled` is `true` and merge it with the theme presets. + * + * https://make.wordpress.org/core/2024/06/19/theme-json-version-3/#:~:text=Breaking%20changes%20in%20version%203 + * */ + wpDefaultPresets, + defaultSizesEnabled, + ] = useSettings( + PRESET_MAPPING[ property ].settings.join( '.' ), + [ ...PRESET_MAPPING[ property ].settings, 'default' ].join( '.' ), + PRESET_MAPPING[ property ].defaultEnabled.join( '.' ) + ) + // Get all custom presets const { allCustomPresets } = useSelect( select => { const _customPresetControls = select( 'stackable/global-preset-controls.custom' )?.getCustomPresetControls() @@ -42,7 +65,10 @@ export const usePresetControls = property => { // Get the theme/default presets if the user have one, else return the stackable presets const basePresets = hasThemePresets - ? themePresets + ? ( wpDefaultPresets && defaultSizesEnabled !== false + ? [ ...themePresets, ...wpDefaultPresets ] // merge theme and default preset sizes + : themePresets + ) : PRESET_MAPPING[ property ].settings.reduce( ( acc, key ) => acc?.[ key ], DEFAULT_PRESETS.settings ) // Returns the base presets overriden by the custom presets From 14822b00ef04a33415fe031fc34dc8862ee03155 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Tue, 24 Jun 2025 13:20:13 +0800 Subject: [PATCH 2/4] update dev note --- src/hooks/use-preset-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/use-preset-controls.js b/src/hooks/use-preset-controls.js index dd69b38c87..1bd28879f9 100644 --- a/src/hooks/use-preset-controls.js +++ b/src/hooks/use-preset-controls.js @@ -42,7 +42,7 @@ export const usePresetControls = property => { * Dev note: * Starting from theme.json version 3, settings such as `typography.defaultFontSizes` and `spacing.defaultSpacingSizes` * must be set to `false` to override the default presets. If these settings are not found in the theme.json, they default to `true`. - * Otherwise, themes that use the same slugs as the defaults will continue to use the default presets. + * Themes that use the same slugs as the defaults will continue to use the default presets. * Therefore, we also need to get the default presets if the `defaultSizesEnabled` is `true` and merge it with the theme presets. * * https://make.wordpress.org/core/2024/06/19/theme-json-version-3/#:~:text=Breaking%20changes%20in%20version%203 From 2cd3450243d6d37753ff9fa304a9255acc9b23e4 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Tue, 24 Jun 2025 13:25:05 +0800 Subject: [PATCH 3/4] rephrased dev note --- src/hooks/use-preset-controls.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/use-preset-controls.js b/src/hooks/use-preset-controls.js index 1bd28879f9..ac4a05a5b3 100644 --- a/src/hooks/use-preset-controls.js +++ b/src/hooks/use-preset-controls.js @@ -40,9 +40,9 @@ export const usePresetControls = property => { /** * Dev note: - * Starting from theme.json version 3, settings such as `typography.defaultFontSizes` and `spacing.defaultSpacingSizes` - * must be set to `false` to override the default presets. If these settings are not found in the theme.json, they default to `true`. - * Themes that use the same slugs as the defaults will continue to use the default presets. + * In theme.json version 3, `typography.defaultFontSizes` and `spacing.defaultSpacingSizes` default to `true`. + * These settings must be explicitly set to `false` to override default presets. When enabled, themes with matching slugs + * will use default presets, and theme presets with the same slugs will be ignored. * Therefore, we also need to get the default presets if the `defaultSizesEnabled` is `true` and merge it with the theme presets. * * https://make.wordpress.org/core/2024/06/19/theme-json-version-3/#:~:text=Breaking%20changes%20in%20version%203 From 9a393477bbc8263a781f424f9d91538c96f58d6e Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Wed, 25 Jun 2025 12:11:09 +0800 Subject: [PATCH 4/4] improve code readability --- src/hooks/use-preset-controls.js | 33 ++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/hooks/use-preset-controls.js b/src/hooks/use-preset-controls.js index ac4a05a5b3..8c35b4b9c1 100644 --- a/src/hooks/use-preset-controls.js +++ b/src/hooks/use-preset-controls.js @@ -7,22 +7,26 @@ import { __ } from '@wordpress/i18n' const PRESET_MAPPING = { fontSizes: { settings: [ 'typography', 'fontSizes' ], - defaultEnabled: [ 'typography', 'defaultFontSizes' ], + defaultSizes: 'typography.fontSizes.default', + defaultEnabled: 'typography.defaultFontSizes', prefix: 'font-size', }, spacingSizes: { settings: [ 'spacing', 'spacingSizes' ], - defaultEnabled: [ 'typography', 'defaultSpacingSizes' ], + defaultSizes: 'spacing.spacingSizes.default', + defaultEnabled: 'spacing.defaultSpacingSizes', prefix: 'spacing', }, blockHeights: { settings: [ 'blockHeights' ], - defaultEnabled: [], + defaultSizes: '', + defaultEnabled: '', prefix: 'block-height', }, borderRadius: { settings: [ 'borderRadius' ], - defaultEnabled: [], + defaultSizes: '', + defaultEnabled: '', prefix: 'border-radius', }, } @@ -36,7 +40,7 @@ const nonePreset = { export const usePresetControls = property => { // Get the theme presets for the property const [ - themePresets, + _themePresets, /** * Dev note: @@ -45,14 +49,14 @@ export const usePresetControls = property => { * will use default presets, and theme presets with the same slugs will be ignored. * Therefore, we also need to get the default presets if the `defaultSizesEnabled` is `true` and merge it with the theme presets. * - * https://make.wordpress.org/core/2024/06/19/theme-json-version-3/#:~:text=Breaking%20changes%20in%20version%203 + * See: https://make.wordpress.org/core/2024/06/19/theme-json-version-3/#:~:text=Breaking%20changes%20in%20version%203 * */ wpDefaultPresets, defaultSizesEnabled, ] = useSettings( PRESET_MAPPING[ property ].settings.join( '.' ), - [ ...PRESET_MAPPING[ property ].settings, 'default' ].join( '.' ), - PRESET_MAPPING[ property ].defaultEnabled.join( '.' ) + PRESET_MAPPING[ property ].defaultSizes, + PRESET_MAPPING[ property ].defaultEnabled ) // Get all custom presets @@ -61,14 +65,19 @@ export const usePresetControls = property => { return { allCustomPresets: { ..._customPresetControls } } }, [] ) + let themePresets = _themePresets const hasThemePresets = Array.isArray( themePresets ) && themePresets.length > 0 + // Merge theme presets with default presets when default sizes are enabled. + // This happens when settings like `typography.defaultFontSizes` or `spacing.defaultSpacingSizes` + // are not explicitly set to `false` in theme.json v3. + if ( hasThemePresets && wpDefaultPresets && defaultSizesEnabled !== false ) { + themePresets = [ ..._themePresets, ...wpDefaultPresets ] + } + // Get the theme/default presets if the user have one, else return the stackable presets const basePresets = hasThemePresets - ? ( wpDefaultPresets && defaultSizesEnabled !== false - ? [ ...themePresets, ...wpDefaultPresets ] // merge theme and default preset sizes - : themePresets - ) + ? themePresets : PRESET_MAPPING[ property ].settings.reduce( ( acc, key ) => acc?.[ key ], DEFAULT_PRESETS.settings ) // Returns the base presets overriden by the custom presets