@wordpress/block-editor 12.11.1 → 12.12.2-next.f8d8eceb.0

package/src/hooks/background.js

@@ -29,7 +29,7 @@ import { getFilename } from '@wordpress/url';
  */
 import InspectorControls from '../components/inspector-controls';
 import MediaReplaceFlow from '../components/media-replace-flow';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 
@@ -281,19 +281,17 @@ function BackgroundImagePanelItem( props ) {
 }
 
 export function BackgroundImagePanel( props ) {
-	const isBackgroundImageSupported =
-		useSetting( 'background.backgroundImage' ) &&
-		hasBackgroundSupport( props.name, 'backgroundImage' );
-
-	if ( ! isBackgroundImageSupported ) {
+	const [ backgroundImage ] = useSettings( 'background.backgroundImage' );
+	if (
+		! backgroundImage ||
+		! hasBackgroundSupport( props.name, 'backgroundImage' )
+	) {
 		return null;
 	}
 
 	return (
 		<InspectorControls group="background">
-			{ isBackgroundImageSupported && (
-				<BackgroundImagePanelItem { ...props } />
-			) }
+			<BackgroundImagePanelItem { ...props } />
 		</InspectorControls>
 	);
 }

package/src/hooks/block-rename-ui.js

@@ -4,7 +4,7 @@
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { __, sprintf } from '@wordpress/i18n';
-import { getBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	MenuItem,
 	__experimentalHStack as HStack,
@@ -189,21 +189,13 @@ function BlockRenameControl( props ) {
 
 export const withBlockRenameControl = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { clientId, name, attributes, setAttributes } = props;
+		const { clientId, name, attributes, setAttributes, isSelected } = props;
 
-		const metaDataSupport = getBlockSupport(
-			name,
-			'__experimentalMetadata',
-			false
-		);
-
-		const supportsBlockNaming = !! (
-			true === metaDataSupport || metaDataSupport?.name
-		);
+		const supportsBlockNaming = hasBlockSupport( name, 'renaming', true );
 
 		return (
 			<>
-				{ supportsBlockNaming && (
+				{ isSelected && supportsBlockNaming && (
 					<>
 						<BlockRenameControl
 							clientId={ clientId }
@@ -211,8 +203,7 @@ export const withBlockRenameControl = createHigherOrderComponent(
 							onChange={ ( newName ) => {
 								setAttributes( {
 									metadata: {
-										...( attributes?.metadata &&
-											attributes?.metadata ),
+										...attributes?.metadata,
 										name: newName,
 									},
 								} );

package/src/hooks/{metadata-name.js → block-renaming.js}

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import { hasBlockMetadataSupport } from './metadata';
+import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -20,10 +17,10 @@ export function addLabelCallback( settings ) {
 		return settings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
+	const supportsBlockNaming = hasBlockSupport(
 		settings,
-		'name',
-		false // default value
+		'renaming',
+		true // default value
 	);
 
 	// Check whether block metadata is supported before using it.

package/src/hooks/color.js

@@ -25,7 +25,7 @@ import {
 	shouldSkipSerialization,
 	useBlockSettings,
 } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import {
 	useHasColorPanel,
@@ -368,9 +368,12 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const userPalette = useSetting( 'color.palette.custom' );
-		const themePalette = useSetting( 'color.palette.theme' );
-		const defaultPalette = useSetting( 'color.palette.default' );
+		const [ userPalette, themePalette, defaultPalette ] = useSettings(
+			'color.palette.custom',
+			'color.palette.theme',
+			'color.palette.default'
+		);
+
 		const colors = useMemo(
 			() => [
 				...( userPalette || [] ),

package/src/hooks/custom-class-name.js

@@ -39,6 +39,30 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function CustomClassNameControls( { attributes, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				autoComplete="off"
+				label={ __( 'Additional CSS class(es)' ) }
+				value={ attributes.className || '' }
+				onChange={ ( nextValue ) => {
+					setAttributes( {
+						className: nextValue !== '' ? nextValue : undefined,
+					} );
+				} }
+				help={ __( 'Separate multiple classes with spaces.' ) }
+			/>
+		</InspectorControls>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the custom class name, if block supports custom class name.
@@ -51,42 +75,23 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
-			const blockEditingMode = useBlockEditingMode();
 			const hasCustomClassName = hasBlockSupport(
 				props.name,
 				'customClassName',
 				true
 			);
-			if ( hasCustomClassName && props.isSelected ) {
-				return (
-					<>
-						<BlockEdit { ...props } />
-						{ blockEditingMode === 'default' && (
-							<InspectorControls group="advanced">
-								<TextControl
-									__nextHasNoMarginBottom
-									autoComplete="off"
-									label={ __( 'Additional CSS class(es)' ) }
-									value={ props.attributes.className || '' }
-									onChange={ ( nextValue ) => {
-										props.setAttributes( {
-											className:
-												nextValue !== ''
-													? nextValue
-													: undefined,
-										} );
-									} }
-									help={ __(
-										'Separate multiple classes with spaces.'
-									) }
-								/>
-							</InspectorControls>
-						) }
-					</>
-				);
-			}
-
-			return <BlockEdit { ...props } />;
+
+			return (
+				<>
+					<BlockEdit { ...props } />
+					{ hasCustomClassName && props.isSelected && (
+						<CustomClassNameControls
+							attributes={ props.attributes }
+							setAttributes={ props.setAttributes }
+						/>
+					) }
+				</>
+			);
 		};
 	},
 	'withInspectorControl'

package/src/hooks/duotone.js

@@ -25,7 +25,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
-	useSetting,
+	useSettings,
 } from '../components';
 import {
 	getDuotoneFilter,
@@ -37,28 +37,39 @@ import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockSettings } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
+// Safari does not always update the duotone filter when the duotone colors
+// are changed. This browser check is later used to force a re-render of the block
+// element to ensure the duotone filter is updated. The check is included at the
+// root of this file as it only needs to be run once per page load.
+const isSafari =
+	window?.navigator.userAgent &&
+	window.navigator.userAgent.includes( 'Safari' ) &&
+	! window.navigator.userAgent.includes( 'Chrome' ) &&
+	! window.navigator.userAgent.includes( 'Chromium' );
+
 extend( [ namesPlugin ] );
 
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
-	const disableDefault = ! useSetting( defaultSetting );
-	const userPresets =
-		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
-	const themePresets =
-		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
-	const defaultPresets =
-		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+	const [ enableDefault, userPresets, themePresets, defaultPresets ] =
+		useSettings(
+			defaultSetting,
+			`${ presetSetting }.custom`,
+			`${ presetSetting }.theme`,
+			`${ presetSetting }.default`
+		);
 	return useMemo(
 		() => [
-			...userPresets,
-			...themePresets,
-			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+			...( userPresets || EMPTY_ARRAY ),
+			...( themePresets || EMPTY_ARRAY ),
+			...( ( enableDefault && defaultPresets ) || EMPTY_ARRAY ),
 		],
-		[ disableDefault, userPresets, themePresets, defaultPresets ]
+		[ enableDefault, userPresets, themePresets, defaultPresets ]
 	);
 }
 
@@ -100,9 +111,13 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 		presetSetting: 'color.palette',
 		defaultSetting: 'color.defaultPalette',
 	} );
-	const disableCustomColors = ! useSetting( 'color.custom' );
+	const [ enableCustomColors, enableCustomDuotone ] = useSettings(
+		'color.custom',
+		'color.customDuotone'
+	);
+	const disableCustomColors = ! enableCustomColors;
 	const disableCustomDuotone =
-		! useSetting( 'color.customDuotone' ) ||
+		! enableCustomDuotone ||
 		( colorPalette?.length === 0 && disableCustomColors );
 
 	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
@@ -223,6 +238,7 @@ const withDuotoneControls = createHigherOrderComponent(
 );
 
 function DuotoneStyles( {
+	clientId,
 	id: filterId,
 	selector: duotoneSelector,
 	attribute: duotoneAttr,
@@ -278,6 +294,8 @@ function DuotoneStyles( {
 		useDispatch( blockEditorStore )
 	);
 
+	const blockElement = useBlockElement( clientId );
+
 	useEffect( () => {
 		if ( ! isValidFilter ) return;
 
@@ -294,12 +312,30 @@ function DuotoneStyles( {
 			__unstableType: 'svgs',
 		} );
 
+		// Safari does not always update the duotone filter when the duotone colors
+		// are changed. When using Safari, force the block element to be repainted by
+		// the browser to ensure any changes are reflected visually. This logic matches
+		// that used on the site frontend in `block-supports/duotone.php`.
+		if ( blockElement && isSafari ) {
+			const display = blockElement.style.display;
+			// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
+			// is used instead of `none` to ensure that scroll position is not affected,
+			// as `none` results in the editor scrolling to the top of the block.
+			blockElement.style.display = 'inline-block';
+			// Simply accessing el.offsetHeight flushes layout and style
+			// changes in WebKit without having to wait for setTimeout.
+			// eslint-disable-next-line no-unused-expressions
+			blockElement.offsetHeight;
+			blockElement.style.display = display;
+		}
+
 		return () => {
 			deleteStyleOverride( filterId );
 			deleteStyleOverride( `duotone-${ filterId }` );
 		};
 	}, [
 		isValidFilter,
+		blockElement,
 		colors,
 		selector,
 		filterId,
@@ -378,6 +414,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			<>
 				{ shouldRender && (
 					<DuotoneStyles
+						clientId={ props.clientId }
 						id={ filterClass }
 						selector={ selector }
 						attribute={ attribute }

package/src/hooks/font-size.js

@@ -22,7 +22,7 @@ import {
 	transformStyles,
 	shouldSkipSerialization,
 } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { store as blockEditorStore } from '../store';
 import {
 	getTypographyFontSizeValue,
@@ -122,7 +122,7 @@ export function FontSizeEdit( props ) {
 		attributes: { fontSize, style },
 		setAttributes,
 	} = props;
-	const fontSizes = useSetting( 'typography.fontSizes' );
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const onChange = ( value ) => {
 		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
@@ -167,7 +167,7 @@ export function FontSizeEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsFontSizeDisabled( { name: blockName } = {} ) {
-	const fontSizes = useSetting( 'typography.fontSizes' );
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 	const hasFontSizes = !! fontSizes?.length;
 
 	return (
@@ -186,7 +186,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
  */
 const withFontSizeInlineStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const fontSizes = useSetting( 'typography.fontSizes' );
+		const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 		const {
 			name: blockName,
 			attributes: { fontSize, style },

package/src/hooks/index.js

@@ -19,9 +19,9 @@ import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';
-import './metadata-name';
 import './custom-fields';
 import './block-hooks';
+import './block-renaming';
 import './block-rename-ui';
 
 export { useCustomSides } from './dimensions';

package/src/hooks/layout.js

@@ -24,7 +24,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
@@ -123,7 +123,7 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 			? { ...layout, type: 'constrained' }
 			: layout || {};
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
-	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 	const css = fullLayoutType?.getLayoutStyle?.( {
 		blockName,
@@ -142,7 +142,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	} = settings;
 
 	const { layout } = attributes;
-	const defaultThemeLayout = useSetting( 'layout' );
+	const [ defaultThemeLayout ] = useSettings( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
@@ -151,6 +151,10 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	}, [] );
 	const blockEditingMode = useBlockEditingMode();
 
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
 		layoutBlockSupportKey,
@@ -270,7 +274,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ ! inherit && blockEditingMode === 'default' && layoutType && (
+			{ ! inherit && layoutType && (
 				<layoutType.toolBarControls
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
@@ -331,14 +335,10 @@ export function addAttribute( settings ) {
  */
 export const withInspectorControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		const supportLayout = hasLayoutBlockSupport( blockName );
+		const supportLayout = hasLayoutBlockSupport( props.name );
 
-		const blockEditingMode = useBlockEditingMode();
 		return [
-			supportLayout && blockEditingMode === 'default' && (
-				<LayoutPanel key="layout" { ...props } />
-			),
+			supportLayout && <LayoutPanel key="layout" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},
@@ -375,7 +375,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			: null;
 		// Higher specificity to override defaults from theme.json.
 		const selector = `.wp-container-${ id }.wp-container-${ id }`;
-		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 		const hasBlockGapSupport = blockGapSupport !== null;
 
 		// Get CSS string for the current layout type.
@@ -408,11 +408,11 @@ export const withLayoutStyles = createHigherOrderComponent(
 
 		useEffect( () => {
 			if ( ! css ) return;
-			setStyleOverride( id, { css } );
+			setStyleOverride( selector, { css } );
 			return () => {
-				deleteStyleOverride( id );
+				deleteStyleOverride( selector );
 			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
 
 		return (
 			<BlockListBlock
@@ -472,11 +472,11 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 
 		useEffect( () => {
 			if ( ! css ) return;
-			setStyleOverride( id, { css } );
+			setStyleOverride( selector, { css } );
 			return () => {
-				deleteStyleOverride( id );
+				deleteStyleOverride( selector );
 			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
 
 		return <BlockListBlock { ...props } className={ className } />;
 	},

package/src/hooks/line-height.js

@@ -8,7 +8,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
  */
 import LineHeightControl from '../components/line-height-control';
 import { cleanEmptyObject } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 
 export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 
@@ -54,9 +54,9 @@ export function LineHeightEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsLineHeightDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'typography.lineHeight' );
+	const [ isEnabled ] = useSettings( 'typography.lineHeight' );
 
 	return (
-		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
+		! isEnabled || ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY )
 	);
 }

package/src/hooks/metadata.js

@@ -2,19 +2,8 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport } from '@wordpress/blocks';
-
 const META_ATTRIBUTE_NAME = 'metadata';
 
-export function hasBlockMetadataSupport( blockType, feature = '' ) {
-	// Only core blocks are allowed to use __experimentalMetadata until the fetaure is stablised.
-	if ( ! blockType.name.startsWith( 'core/' ) ) {
-		return false;
-	}
-	const support = getBlockSupport( blockType, '__experimentalMetadata' );
-	return !! ( true === support || support?.[ feature ] );
-}
-
 /**
  * Filters registered block settings, extending attributes to include `metadata`.
  *
@@ -29,39 +18,18 @@ export function addMetaAttribute( blockTypeSettings ) {
 		return blockTypeSettings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
-		blockTypeSettings,
-		'name'
-	);
-
-	if ( supportsBlockNaming ) {
-		blockTypeSettings.attributes = {
-			...blockTypeSettings.attributes,
-			[ META_ATTRIBUTE_NAME ]: {
-				type: 'object',
-			},
-		};
-	}
+	blockTypeSettings.attributes = {
+		...blockTypeSettings.attributes,
+		[ META_ATTRIBUTE_NAME ]: {
+			type: 'object',
+		},
+	};
 
 	return blockTypeSettings;
 }
 
-export function addSaveProps( extraProps, blockType, attributes ) {
-	if ( hasBlockMetadataSupport( blockType ) ) {
-		extraProps[ META_ATTRIBUTE_NAME ] = attributes[ META_ATTRIBUTE_NAME ];
-	}
-
-	return extraProps;
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addMetaAttribute',
 	addMetaAttribute
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/metadata/save-props',
-	addSaveProps
-);

package/src/hooks/position.js

@@ -26,7 +26,7 @@ import { addFilter } from '@wordpress/hooks';
  * Internal dependencies
  */
 import BlockList from '../components/block-list';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
 import { cleanEmptyObject } from './utils';
@@ -197,8 +197,10 @@ export function resetPosition( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether padding setting is disabled.
  */
 export function useIsPositionDisabled( { name: blockName } = {} ) {
-	const allowFixed = useSetting( 'position.fixed' );
-	const allowSticky = useSetting( 'position.sticky' );
+	const [ allowFixed, allowSticky ] = useSettings(
+		'position.fixed',
+		'position.sticky'
+	);
 	const isDisabled = ! allowFixed && ! allowSticky;
 
 	return ! hasPositionSupport( blockName ) || isDisabled;

package/src/hooks/use-color-props.js

@@ -20,7 +20,7 @@ import {
 	__experimentalGetGradientClass,
 	getGradientValueBySlug,
 } from '../components/gradients';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 
 // The code in this file has largely been lifted from the color block support
 // hook.
@@ -73,8 +73,6 @@ export function getColorClassesAndStyles( attributes ) {
 	};
 }
 
-const EMPTY_OBJECT = {};
-
 /**
  * Determines the color related props for a block derived from its color block
  * support attributes.
@@ -89,13 +87,22 @@ const EMPTY_OBJECT = {};
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	// Some color settings have a special handling for deprecated flags in `useSetting`,
-	// so we can't unwrap them by doing const { ... } = useSetting('color')
-	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' );
-	const themePalette = useSetting( 'color.palette.theme' );
-	const defaultPalette = useSetting( 'color.palette.default' );
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const [
+		userPalette,
+		themePalette,
+		defaultPalette,
+		userGradients,
+		themeGradients,
+		defaultGradients,
+	] = useSettings(
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default'
+	);
+
 	const colors = useMemo(
 		() => [
 			...( userPalette || [] ),
@@ -106,11 +113,11 @@ export function useColorProps( attributes ) {
 	);
 	const gradients = useMemo(
 		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
+			...( userGradients || [] ),
+			...( themeGradients || [] ),
+			...( defaultGradients || [] ),
 		],
-		[ gradientsPerOrigin ]
+		[ userGradients, themeGradients, defaultGradients ]
 	);
 
 	const colorProps = getColorClassesAndStyles( attributes );