@wordpress/block-editor 15.15.0 → 15.16.0

package/build-style/content-rtl.css

@@ -199,7 +199,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+  box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
   z-index: 1;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
@@ -294,7 +294,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+  box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,

package/build-style/content.css

@@ -199,7 +199,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+  box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
   z-index: 1;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
@@ -294,7 +294,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+  box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,

package/build-style/style-rtl.css

@@ -124,9 +124,6 @@
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  grid-column: 1/-1;
   position: relative;
 }
 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
@@ -1622,10 +1619,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-fit-text-size-warning {
-  margin: 8px 0 0 0;
-}
-.block-editor-fit-text-size-warning .components-notice__content {
-  margin-left: 0;
+  grid-column: span 2;
 }
 
 .components-font-appearance-control [role=option] {
@@ -3410,6 +3404,40 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
+/**
+ * ItemGroup-like border styles for the background panel's ToolsPanelItems.
+ * Replicates the separated border of the `ItemGroup` component while
+ * allowing for hidden placeholder items (same approach as the color panel).
+ */
+.block-editor-background-panel__item {
+  padding: 0;
+  max-width: 100%;
+  position: relative;
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  border-top: 1px solid #ddd;
+}
+.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.block-editor-background-panel__item > div,
+.block-editor-background-panel__item > div > button {
+  border-radius: inherit;
+}
+
+.background-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+}
+.background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
+  row-gap: 0;
+}
+
 .block-editor-content-only-controls__link {
   width: 100%;
   box-shadow: inset 0 0 0 1px #ccc;

package/build-style/style.css

@@ -124,9 +124,6 @@
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  grid-column: 1/-1;
   position: relative;
 }
 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
@@ -1622,10 +1619,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-fit-text-size-warning {
-  margin: 8px 0 0 0;
-}
-.block-editor-fit-text-size-warning .components-notice__content {
-  margin-right: 0;
+  grid-column: span 2;
 }
 
 .components-font-appearance-control [role=option] {
@@ -3412,6 +3406,40 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
+/**
+ * ItemGroup-like border styles for the background panel's ToolsPanelItems.
+ * Replicates the separated border of the `ItemGroup` component while
+ * allowing for hidden placeholder items (same approach as the color panel).
+ */
+.block-editor-background-panel__item {
+  padding: 0;
+  max-width: 100%;
+  position: relative;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-top: 1px solid #ddd;
+}
+.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.block-editor-background-panel__item > div,
+.block-editor-background-panel__item > div > button {
+  border-radius: inherit;
+}
+
+.background-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+}
+.background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
+  row-gap: 0;
+}
+
 .block-editor-content-only-controls__link {
   width: 100%;
   box-shadow: inset 0 0 0 1px #ccc;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.15.0",
+	"version": "15.16.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.42.0",
-		"@wordpress/api-fetch": "^7.42.0",
-		"@wordpress/base-styles": "^6.18.0",
-		"@wordpress/blob": "^4.42.0",
-		"@wordpress/block-serialization-default-parser": "^5.42.0",
-		"@wordpress/blocks": "^15.15.0",
-		"@wordpress/commands": "^1.42.0",
-		"@wordpress/components": "^32.4.0",
-		"@wordpress/compose": "^7.42.0",
-		"@wordpress/data": "^10.42.0",
-		"@wordpress/dataviews": "^13.1.0",
-		"@wordpress/date": "^5.42.0",
-		"@wordpress/deprecated": "^4.42.0",
-		"@wordpress/dom": "^4.42.0",
-		"@wordpress/element": "^6.42.0",
-		"@wordpress/escape-html": "^3.42.0",
-		"@wordpress/global-styles-engine": "^1.9.0",
-		"@wordpress/hooks": "^4.42.0",
-		"@wordpress/html-entities": "^4.42.0",
-		"@wordpress/i18n": "^6.15.0",
-		"@wordpress/icons": "^12.0.0",
-		"@wordpress/image-cropper": "^1.6.0",
-		"@wordpress/interactivity": "^6.42.0",
-		"@wordpress/is-shallow-equal": "^5.42.0",
-		"@wordpress/keyboard-shortcuts": "^5.42.0",
-		"@wordpress/keycodes": "^4.42.0",
-		"@wordpress/notices": "^5.42.0",
-		"@wordpress/preferences": "^4.42.0",
-		"@wordpress/priority-queue": "^3.42.0",
-		"@wordpress/private-apis": "^1.42.0",
-		"@wordpress/rich-text": "^7.42.0",
-		"@wordpress/style-engine": "^2.42.0",
-		"@wordpress/token-list": "^3.42.0",
-		"@wordpress/upload-media": "^0.27.0",
-		"@wordpress/url": "^4.42.0",
-		"@wordpress/warning": "^3.42.0",
-		"@wordpress/wordcount": "^4.42.0",
+		"@wordpress/a11y": "^4.43.0",
+		"@wordpress/api-fetch": "^7.43.0",
+		"@wordpress/base-styles": "^6.19.0",
+		"@wordpress/blob": "^4.43.0",
+		"@wordpress/block-serialization-default-parser": "^5.43.0",
+		"@wordpress/blocks": "^15.16.0",
+		"@wordpress/commands": "^1.43.0",
+		"@wordpress/components": "^32.5.0",
+		"@wordpress/compose": "^7.43.0",
+		"@wordpress/data": "^10.43.0",
+		"@wordpress/dataviews": "^14.0.0",
+		"@wordpress/date": "^5.43.0",
+		"@wordpress/deprecated": "^4.43.0",
+		"@wordpress/dom": "^4.43.0",
+		"@wordpress/element": "^6.43.0",
+		"@wordpress/escape-html": "^3.43.0",
+		"@wordpress/global-styles-engine": "^1.10.0",
+		"@wordpress/hooks": "^4.43.0",
+		"@wordpress/html-entities": "^4.43.0",
+		"@wordpress/i18n": "^6.16.0",
+		"@wordpress/icons": "^12.1.0",
+		"@wordpress/image-cropper": "^1.7.0",
+		"@wordpress/interactivity": "^6.43.0",
+		"@wordpress/is-shallow-equal": "^5.43.0",
+		"@wordpress/keyboard-shortcuts": "^5.43.0",
+		"@wordpress/keycodes": "^4.43.0",
+		"@wordpress/notices": "^5.43.0",
+		"@wordpress/preferences": "^4.43.0",
+		"@wordpress/priority-queue": "^3.43.0",
+		"@wordpress/private-apis": "^1.43.0",
+		"@wordpress/rich-text": "^7.43.0",
+		"@wordpress/style-engine": "^2.43.0",
+		"@wordpress/token-list": "^3.43.0",
+		"@wordpress/upload-media": "^0.28.0",
+		"@wordpress/url": "^4.43.0",
+		"@wordpress/warning": "^3.43.0",
+		"@wordpress/wordcount": "^4.43.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

package/src/components/background-image-control/style.scss

@@ -3,10 +3,6 @@
 @use "@wordpress/base-styles/z-index" as *;
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	border: $border-width solid $gray-300;
-	border-radius: $radius-small;
-	// Full width. ToolsPanel lays out children in a grid.
-	grid-column: 1 / -1;
 	position: relative;
 
 	&.is-open {

package/src/components/block-inspector/index.js

@@ -54,6 +54,7 @@ function StyleInspectorSlots( {
 			<InspectorControls.Slot
 				group="background"
 				label={ __( 'Background image' ) }
+				className="background-block-support-panel__inner-wrapper"
 			/>
 			<InspectorControls.Slot
 				group="typography"

package/src/components/block-visibility/viewport-visibility-info.js

@@ -17,6 +17,7 @@ import { unseen } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 import useBlockVisibility from './use-block-visibility';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { deviceTypeKey } from '../../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 
@@ -56,10 +57,16 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 		[ clientId ]
 	);
 
-	// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)
+	// Get the block's DOM element to derive the canvas iframe window,
+	// so viewport detection matches the actual block rendering context.
+	const blockElement = useBlockElement( clientId );
+	const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+	const canvasView = rawCanvasView === null ? undefined : rawCanvasView;
+
 	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
 		blockVisibility: currentBlockVisibility,
 		deviceType: selectedDeviceType,
+		view: canvasView,
 	} );
 
 	/*

package/src/components/fit-text-size-warning/style.scss

@@ -1,9 +1,5 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .block-editor-fit-text-size-warning {
-	margin: $grid-unit-10 0 0 0;
-
-	.components-notice__content {
-		margin-right: 0;
-	}
+	grid-column: span 2;
 }

package/src/components/global-styles/background-panel.js

@@ -7,17 +7,33 @@ import {
 } from '@wordpress/components';
 import { useCallback, Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
+
 /**
  * Internal dependencies
  */
 import BackgroundImageControl from '../background-image-control';
+import { ColorPanelDropdown } from './color-panel';
+import { useGradientsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
+	gradient: true,
 };
 
+/**
+ * Checks site settings to see if the requested feature's control may be used.
+ *
+ * @param {Object} settings Site settings.
+ * @param {string} feature  Background feature to check.
+ * @return {boolean}        Whether site settings has activated background panel.
+ */
+export function useHasBackgroundControl( settings, feature ) {
+	return Platform.OS === 'web' && settings?.background?.[ feature ];
+}
+
 /**
  * Checks site settings to see if the background panel may be used.
  * `settings.background.backgroundSize` exists also,
@@ -27,7 +43,8 @@ const DEFAULT_CONTROLS = {
  * @return {boolean}        Whether site settings has activated background panel.
  */
 export function useHasBackgroundPanel( settings ) {
-	return Platform.OS === 'web' && settings?.background?.backgroundImage;
+	const { backgroundImage, gradient } = settings?.background || {};
+	return Platform.OS === 'web' && ( backgroundImage || gradient );
 }
 
 /**
@@ -61,6 +78,20 @@ export function hasBackgroundImageValue( style ) {
 	);
 }
 
+/**
+ * Checks if there is a current value in the background gradient block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background gradient value set.
+ */
+export function hasBackgroundGradientValue( style ) {
+	return (
+		'string' === typeof style?.background?.gradient &&
+		style?.background?.gradient !== ''
+	);
+}
+
 function BackgroundToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -80,9 +111,15 @@ function BackgroundToolsPanel( {
 			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			hasInnerWrapper
+			className="background-block-support-panel"
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 			dropdownMenuProps={ dropdownMenuProps }
 		>
-			{ children }
+			<div className="background-block-support-panel__inner-wrapper">
+				{ children }
+			</div>
 		</ToolsPanel>
 	);
 }
@@ -98,15 +135,97 @@ export default function BackgroundImagePanel( {
 	defaultValues = {},
 	headerLabel = __( 'Background' ),
 } ) {
-	const showBackgroundImageControl = useHasBackgroundPanel( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const areCustomGradientsEnabled = settings?.color?.customGradient;
+	const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+
+	const hasBackgroundGradientControl = useHasBackgroundControl(
+		settings,
+		'gradient'
+	);
+	const showBackgroundGradientControl =
+		hasGradientColors && hasBackgroundGradientControl;
+	const showBackgroundImageControl = useHasBackgroundControl(
+		settings,
+		'backgroundImage'
+	);
+
+	const resetAllFilter = useCallback(
+		( previousValue ) => {
+			return {
+				...previousValue,
+				background: {},
+				color: hasBackgroundGradientControl
+					? {
+							...previousValue?.color,
+							gradient: undefined,
+					  }
+					: previousValue?.color,
+			};
+		},
+		[ hasBackgroundGradientControl ]
+	);
+
+	if ( ! showBackgroundGradientControl && ! showBackgroundImageControl ) {
+		return null;
+	}
+
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeGradientValue = ( gradientValue ) => {
+		const allGradients = gradients.flatMap(
+			( { gradients: originGradients } ) => originGradients
+		);
+		const gradientObject = allGradients.find(
+			( { gradient } ) => gradient === gradientValue
+		);
+		return gradientObject
+			? 'var:preset|gradient|' + gradientObject.slug
+			: gradientValue;
+	};
+
 	const resetBackground = () =>
-		onChange( setImmutably( value, [ 'background' ], {} ) );
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			background: {},
-		};
-	}, [] );
+		onChange(
+			setImmutably(
+				value,
+				[ 'background', 'backgroundImage' ],
+				undefined
+			)
+		);
+
+	const resetGradient = () => {
+		let newValue = setImmutably(
+			value,
+			[ 'background', 'gradient' ],
+			undefined
+		);
+		newValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );
+		onChange( newValue );
+	};
+
+	// Get current gradient value, decoding preset slug references.
+	// Fall back to color.gradient for legacy blocks that haven't migrated
+	// to background.gradient yet (mirrors block inspector fallback in
+	// packages/block-editor/src/hooks/background.js).
+	const currentGradient = decodeValue(
+		value?.background?.gradient ?? value?.color?.gradient
+	);
+	const inheritedGradient = decodeValue(
+		inheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient
+	);
+
+	// Set gradient value, encoding preset matches as slug references.
+	// Also clear color.gradient to migrate from the legacy location,
+	// matching the block inspector behavior in hooks/background.js.
+	const setGradient = ( newGradient ) => {
+		let newValue = setImmutably(
+			value,
+			[ 'background', 'gradient' ],
+			encodeGradientValue( newGradient )
+		);
+		newValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );
+		onChange( newValue );
+	};
 
 	return (
 		<Wrapper
@@ -118,7 +237,8 @@ export default function BackgroundImagePanel( {
 		>
 			{ showBackgroundImageControl && (
 				<ToolsPanelItem
-					hasValue={ () => !! value?.background }
+					className="block-editor-background-panel__item"
+					hasValue={ () => hasBackgroundImageValue( value ) }
 					label={ __( 'Image' ) }
 					onDeselect={ resetBackground }
 					isShownByDefault={ defaultControls.backgroundImage }
@@ -134,6 +254,32 @@ export default function BackgroundImagePanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showBackgroundGradientControl && (
+				<ColorPanelDropdown
+					className="block-editor-background-panel__item"
+					label={ __( 'Gradient' ) }
+					hasValue={ () => hasBackgroundGradientValue( value ) }
+					resetValue={ resetGradient }
+					isShownByDefault={ defaultControls.gradient }
+					indicators={ [ currentGradient ] }
+					tabs={ [
+						{
+							key: 'gradient',
+							label: __( 'Gradient' ),
+							inheritedValue:
+								currentGradient ?? inheritedGradient,
+							setValue: setGradient,
+							userValue: currentGradient,
+							isGradient: true,
+						},
+					] }
+					colorGradientControlSettings={ {
+						gradients,
+						disableCustomGradients: ! areCustomGradientsEnabled,
+					} }
+					panelId={ panelId }
+				/>
+			) }
 		</Wrapper>
 	);
 }

package/src/components/global-styles/color-panel.js

@@ -201,7 +201,7 @@ function ColorPanelTab( {
 	);
 }
 
-function ColorPanelDropdown( {
+export function ColorPanelDropdown( {
 	label,
 	hasValue,
 	resetValue,
@@ -210,13 +210,14 @@ function ColorPanelDropdown( {
 	tabs,
 	colorGradientControlSettings,
 	panelId,
+	className = 'block-editor-tools-panel-color-gradient-settings__item',
 } ) {
 	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
 	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
 	const colorGradientDropdownButtonRef = useRef( undefined );
 	return (
 		<ToolsPanelItem
-			className="block-editor-tools-panel-color-gradient-settings__item"
+			className={ className }
 			hasValue={ hasValue }
 			label={ label }
 			onDeselect={ resetValue }
@@ -336,6 +337,12 @@ export default function ColorPanel( {
 	const areCustomGradientsEnabled = settings?.color?.customGradient;
 	const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
 	const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+	// When a block opts into background.gradient support, the gradient
+	// picker moves to the Background panel. Hide it here to avoid
+	// showing duplicate gradient controls.
+	const hasBackgroundGradientSupport = !! settings?.background?.gradient;
+	const showGradientColors =
+		hasGradientColors && ! hasBackgroundGradientSupport;
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
 	const encodeColorValue = ( colorValue ) => {
@@ -367,14 +374,18 @@ export default function ColorPanel( {
 	const userBackgroundColor = decodeValue( value?.color?.background );
 	const gradient = decodeValue( inheritedValue?.color?.gradient );
 	const userGradient = decodeValue( value?.color?.gradient );
-	const hasBackground = () => !! userBackgroundColor || !! userGradient;
+	const hasBackground = () =>
+		!! userBackgroundColor ||
+		( ! hasBackgroundGradientSupport && !! userGradient );
 	const setBackgroundColor = ( newColor ) => {
 		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			encodeColorValue( newColor )
 		);
-		newValue.color.gradient = undefined;
+		if ( ! hasBackgroundGradientSupport ) {
+			newValue.color.gradient = undefined;
+		}
 		onChange( newValue );
 	};
 	const setGradient = ( newGradient ) => {
@@ -392,7 +403,9 @@ export default function ColorPanel( {
 			[ 'color', 'background' ],
 			undefined
 		);
-		newValue.color.gradient = undefined;
+		if ( ! hasBackgroundGradientSupport ) {
+			newValue.color.gradient = undefined;
+		}
 		onChange( newValue );
 	};
 
@@ -566,7 +579,10 @@ export default function ColorPanel( {
 			hasValue: hasBackground,
 			resetValue: resetBackground,
 			isShownByDefault: defaultControls.background,
-			indicators: [ gradient ?? backgroundColor ],
+			indicators: [
+				( showGradientColors ? gradient : undefined ) ??
+					backgroundColor,
+			],
 			tabs: [
 				hasSolidColors && {
 					key: 'background',
@@ -575,7 +591,7 @@ export default function ColorPanel( {
 					setValue: setBackgroundColor,
 					userValue: userBackgroundColor,
 				},
-				hasGradientColors && {
+				showGradientColors && {
 					key: 'gradient',
 					label: __( 'Gradient' ),
 					inheritedValue: gradient,

package/src/components/global-styles/hooks.js

@@ -81,7 +81,11 @@ export function useSettingsForBlockElement(
 		};
 
 		// Some blocks can enable background colors but disable gradients.
-		if ( ! supportedStyles.includes( 'background' ) ) {
+		// Preserve gradient settings when background.gradient is supported.
+		if (
+			! supportedStyles.includes( 'background' ) &&
+			! supportedStyles.includes( 'backgroundGradient' )
+		) {
 			updatedSettings.color.gradients = [];
 			updatedSettings.color.customGradient = false;
 		}
@@ -184,11 +188,15 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		[ 'backgroundImage', 'backgroundSize' ].forEach( ( key ) => {
-			if ( ! supportedStyles.includes( key ) ) {
+		[
+			[ 'backgroundImage', 'backgroundImage' ],
+			[ 'backgroundSize', 'backgroundSize' ],
+			[ 'backgroundGradient', 'gradient' ],
+		].forEach( ( [ styleKey, settingKey ] ) => {
+			if ( ! supportedStyles.includes( styleKey ) ) {
 				updatedSettings.background = {
 					...updatedSettings.background,
-					[ key ]: false,
+					[ settingKey ]: false,
 				};
 			}
 		} );