merge theme and wp default presets if defaultSizesEnabled is true

Author: kaeizen

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