@wordpress/block-editor 15.15.0 → 15.16.0

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

@@ -2,7 +2,10 @@
  * Internal dependencies
  */
 
-import { hasBackgroundImageValue } from '../background-panel';
+import {
+	hasBackgroundImageValue,
+	hasBackgroundGradientValue,
+} from '../background-panel';
 
 describe( 'hasBackgroundImageValue', () => {
 	it( 'should return `true` when id and url exist', () => {
@@ -37,3 +40,43 @@ describe( 'hasBackgroundImageValue', () => {
 		).toBe( false );
 	} );
 } );
+
+describe( 'hasBackgroundGradientValue', () => {
+	it( 'should return `true` when a gradient string is set', () => {
+		expect(
+			hasBackgroundGradientValue( {
+				background: {
+					gradient: 'linear-gradient(135deg, red 0%, blue 100%)',
+				},
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `true` for a preset slug reference', () => {
+		expect(
+			hasBackgroundGradientValue( {
+				background: { gradient: 'var:preset|gradient|vivid-cyan-blue' },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `false` when gradient is undefined', () => {
+		expect( hasBackgroundGradientValue( { background: {} } ) ).toBe(
+			false
+		);
+	} );
+
+	it( 'should return `false` when gradient is an empty string', () => {
+		expect(
+			hasBackgroundGradientValue( { background: { gradient: '' } } )
+		).toBe( false );
+	} );
+
+	it( 'should return `false` when background is undefined', () => {
+		expect( hasBackgroundGradientValue( {} ) ).toBe( false );
+	} );
+
+	it( 'should return `false` when style is undefined', () => {
+		expect( hasBackgroundGradientValue( undefined ) ).toBe( false );
+	} );
+} );

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -88,6 +88,7 @@ const StylesTab = ( {
 					<InspectorControls.Slot
 						group="background"
 						label={ __( 'Background image' ) }
+						className="background-block-support-panel__inner-wrapper"
 					/>
 					<InspectorControls.Slot group="filter" />
 					<InspectorControls.Slot

package/src/hooks/background.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,7 @@ import {
 	default as StylesBackgroundPanel,
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
+	hasBackgroundGradientValue,
 } from '../components/global-styles/background-panel';
 import { globalStylesDataKey } from '../store/private-keys';
 
@@ -45,7 +51,8 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 		return (
 			!! support?.backgroundImage ||
 			!! support?.backgroundSize ||
-			!! support?.backgroundRepeat
+			!! support?.backgroundRepeat ||
+			!! support?.gradient
 		);
 	}
 
@@ -107,19 +114,43 @@ function useBlockProps( { name, style } ) {
  * @return {string} CSS class name.
  */
 export function getBackgroundImageClasses( style ) {
-	return hasBackgroundImageValue( style ) ? 'has-background' : '';
+	return hasBackgroundImageValue( style ) ||
+		hasBackgroundGradientValue( style )
+		? 'has-background'
+		: '';
 }
 
-function BackgroundInspectorControl( { children } ) {
-	const resetAllFilter = useCallback( ( attributes ) => {
-		return {
-			...attributes,
-			style: {
-				...attributes.style,
-				background: undefined,
-			},
-		};
-	}, [] );
+function BackgroundInspectorControl( {
+	children,
+	backgroundGradientSupported = false,
+} ) {
+	const resetAllFilter = useCallback(
+		( attributes ) => {
+			const updatedClassName = attributes.className?.includes(
+				'has-background'
+			)
+				? attributes.className
+						.split( ' ' )
+						.filter( ( c ) => c !== 'has-background' )
+						.join( ' ' ) || undefined
+				: attributes.className;
+			return {
+				...attributes,
+				className: updatedClassName,
+				style: cleanEmptyObject( {
+					...attributes.style,
+					background: undefined,
+					color: backgroundGradientSupported
+						? {
+								...attributes.style?.color,
+								gradient: undefined,
+						  }
+						: attributes.style?.color,
+				} ),
+			};
+		},
+		[ backgroundGradientSupported ]
+	);
 	return (
 		<InspectorControls group="background" resetAllFilter={ resetAllFilter }>
 			{ children }
@@ -133,13 +164,15 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const { style, inheritedValue } = useSelect(
+	const { style, className, inheritedValue } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getSettings } =
 				select( blockEditorStore );
 			const _settings = getSettings();
+			const blockAttributes = getBlockAttributes( clientId );
 			return {
-				style: getBlockAttributes( clientId )?.style,
+				style: blockAttributes?.style,
+				className: blockAttributes?.className,
 				/*
 				 * To ensure we pass down the right inherited values:
 				 * @TODO 1. Pass inherited value down to all block style controls,
@@ -154,19 +187,87 @@ export function BackgroundImagePanel( {
 		[ clientId, name ]
 	);
 
+	const backgroundGradientSupported = hasBackgroundSupport(
+		name,
+		'gradient'
+	);
+
+	// Must be declared before the early return to follow Rules of Hooks.
+	// Passes backgroundGradientSupported so that "Reset All" also clears
+	// the legacy color.gradient value when background.gradient is supported.
+	const as = useCallback(
+		( { children } ) => (
+			<BackgroundInspectorControl
+				backgroundGradientSupported={ backgroundGradientSupported }
+			>
+				{ children }
+			</BackgroundInspectorControl>
+		),
+		[ backgroundGradientSupported ]
+	);
+
 	if (
 		! useHasBackgroundPanel( settings ) ||
-		! hasBackgroundSupport( name, 'backgroundImage' )
+		! hasBackgroundSupport( name )
 	) {
 		return null;
 	}
 
 	const onChange = ( newStyle ) => {
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
+		const isMigrating =
+			backgroundGradientSupported && !! style?.color?.gradient;
+		const newAttributes = {
+			style: cleanEmptyObject(
+				backgroundGradientSupported
+					? {
+							...newStyle,
+							color: {
+								...newStyle?.color,
+								gradient: undefined,
+							},
+					  }
+					: newStyle
+			),
+		};
+
+		// When migrating from color.gradient to background.gradient, preserve
+		// the has-background class so existing styles relying on it (e.g.
+		// theme padding) are not silently broken. Only add the class when a
+		// gradient value is being set — not when it is being cleared/reset.
+		// Conversely, if the gradient is cleared and has-background was added
+		// during a previous migration, remove it so it does not linger.
+		if ( isMigrating && !! newStyle?.background?.gradient ) {
+			newAttributes.className = clsx( className, 'has-background' );
+		} else if (
+			! newStyle?.background?.gradient &&
+			className?.includes( 'has-background' )
+		) {
+			newAttributes.className =
+				className
+					.split( ' ' )
+					.filter( ( c ) => c !== 'has-background' )
+					.join( ' ' ) || undefined;
+		}
+
+		setAttributes( newAttributes );
 	};
 
+	// When background.gradient is supported but not yet explicitly set, fall
+	// back to color.gradient for display. Any write from this panel migrates
+	// the value to background.gradient and clears color.gradient atomically.
+	const styleValue =
+		backgroundGradientSupported &&
+		! style?.background?.gradient &&
+		style?.color?.gradient
+			? {
+					...style,
+					background: {
+						...style?.background,
+						gradient: style?.color?.gradient,
+					},
+			  }
+			: style;
+
 	const updatedSettings = {
 		...settings,
 		background: {
@@ -179,19 +280,19 @@ export function BackgroundImagePanel( {
 
 	const defaultControls = getBlockSupport( name, [
 		BACKGROUND_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedValue }
-			as={ BackgroundInspectorControl }
+			as={ as }
 			panelId={ clientId }
 			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
-			value={ style }
+			value={ styleValue }
 		/>
 	);
 }

package/src/hooks/background.scss

@@ -0,0 +1,45 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+/**
+ * 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 styles.
+	border-left: 1px solid $gray-300;
+	border-right: 1px solid $gray-300;
+	border-bottom: 1px solid $gray-300;
+
+	// Identify the first visible instance as placeholder items will not have this class.
+	&:nth-child(1 of &) {
+		border-top-left-radius: $radius-small;
+		border-top-right-radius: $radius-small;
+		border-top: 1px solid $gray-300;
+	}
+
+	// Identify the last visible instance as placeholder items will not have this class.
+	&:nth-last-child(1 of &) {
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
+	}
+
+	> div,
+	> div > button {
+		border-radius: inherit;
+	}
+}
+
+.background-block-support-panel {
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.background-block-support-panel__inner-wrapper {
+			row-gap: 0;
+		}
+	}
+}

package/src/hooks/cross-origin-isolation.js

@@ -27,14 +27,14 @@ if ( window.crossOriginIsolated ) {
 						return;
 					}
 
-					el.querySelectorAll(
-						'img,source,script,video,link'
-					).forEach( ( v ) => {
-						addCrossOriginAttribute( v );
-					} );
+					el.querySelectorAll( 'source,script,video,link' ).forEach(
+						( v ) => {
+							addCrossOriginAttribute( v );
+						}
+					);
 
 					if (
-						[ 'IMG', 'SOURCE', 'SCRIPT', 'VIDEO', 'LINK' ].includes(
+						[ 'SOURCE', 'SCRIPT', 'VIDEO', 'LINK' ].includes(
 							el.nodeName
 						)
 					) {

package/src/hooks/custom-css.js

@@ -7,6 +7,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import { processCSSNesting } from '@wordpress/global-styles-engine';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Internal dependencies
@@ -33,6 +34,11 @@ const EMPTY_STYLE = {};
  * @param {Object}   props.style         Block style attribute.
  */
 function CustomCSSControl( { blockName, setAttributes, style } ) {
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 	const blockType = getBlockType( blockName );
 
 	function onChange( newStyle ) {

package/src/hooks/fit-text.js

@@ -232,14 +232,13 @@ function useFitText( { fitText, name, clientId } ) {
 /**
  * Fit text control component for the typography panel.
  *
- * @param {Object}            props               Component props.
- * @param {string}            props.clientId      Block client ID.
- * @param {Function}          props.setAttributes Function to set block attributes.
- * @param {string}            props.name          Block name.
- * @param {boolean}           props.fitText       Whether fit text is enabled.
- * @param {string}            props.fontSize      Font size slug.
- * @param {Object}            props.style         Block style object.
- * @param {React.JSX.Element} props.warning       Warning component to display.
+ * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      Block client ID.
+ * @param {Function} props.setAttributes Function to set block attributes.
+ * @param {string}   props.name          Block name.
+ * @param {boolean}  props.fitText       Whether fit text is enabled.
+ * @param {string}   props.fontSize      Font size slug.
+ * @param {Object}   props.style         Block style object.
  */
 export function FitTextControl( {
 	clientId,
@@ -248,56 +247,52 @@ export function FitTextControl( {
 	name,
 	fontSize,
 	style,
-	warning,
 } ) {
 	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
 		return null;
 	}
 	return (
-		<InspectorControls group="typography">
-			<ToolsPanelItem
-				hasValue={ () => fitText }
+		<ToolsPanelItem
+			hasValue={ () => fitText }
+			label={ __( 'Fit text' ) }
+			onDeselect={ () => setAttributes( { fitText: undefined } ) }
+			resetAllFilter={ () => ( { fitText: undefined } ) }
+			panelId={ clientId }
+		>
+			<ToggleControl
 				label={ __( 'Fit text' ) }
-				onDeselect={ () => setAttributes( { fitText: undefined } ) }
-				resetAllFilter={ () => ( { fitText: undefined } ) }
-				panelId={ clientId }
-			>
-				<ToggleControl
-					label={ __( 'Fit text' ) }
-					checked={ fitText }
-					onChange={ () => {
-						const newFitText = ! fitText || undefined;
-						const updates = { fitText: newFitText };
-
-						// When enabling fit text, clear font size if it has a value
-						if ( newFitText ) {
-							if ( fontSize ) {
-								updates.fontSize = undefined;
-							}
-							if ( style?.typography?.fontSize ) {
-								updates.style = {
-									...style,
-									typography: {
-										...style?.typography,
-										fontSize: undefined,
-									},
-								};
-							}
+				checked={ fitText }
+				onChange={ () => {
+					const newFitText = ! fitText || undefined;
+					const updates = { fitText: newFitText };
+
+					// When enabling fit text, clear font size if it has a value
+					if ( newFitText ) {
+						if ( fontSize ) {
+							updates.fontSize = undefined;
+						}
+						if ( style?.typography?.fontSize ) {
+							updates.style = {
+								...style,
+								typography: {
+									...style?.typography,
+									fontSize: undefined,
+								},
+							};
 						}
-
-						setAttributes( updates );
-					} }
-					help={
-						fitText
-							? __( 'Text will resize to fit its container.' )
-							: __(
-									'The text will resize to fit its container, resetting other font size settings.'
-							  )
 					}
-				/>
-				{ warning }
-			</ToolsPanelItem>
-		</InspectorControls>
+
+					setAttributes( updates );
+				} }
+				help={
+					fitText
+						? __( 'Text will resize to fit its container.' )
+						: __(
+								'The text will resize to fit its container, resetting other font size settings.'
+						  )
+				}
+			/>
+		</ToolsPanelItem>
 	);
 }
 
@@ -358,14 +353,27 @@ const hasFitTextSupport = ( blockNameOrType ) => {
 	return hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );
 };
 
-/*
- * Helper to encapsulate calls to the relatively expensive `useFitText` hook.
- * Used in `addFitTextControl` so that the hook is only called when a block's
- * `fitText` attribute is set.
+/**
+ * Component that handles the fit text font size and displays a warning
+ * if the fit text font size is below a minimum threshold.
+ *
+ * @param {Object}  props            Component props.
+ * @param {boolean} props.fitText    Whether fit text is enabled.
+ * @param {string}  props.name       Block name.
+ * @param {string}  props.clientId   Block client ID.
+ * @param {boolean} props.isSelected Whether the block is selected.
+ * @return {Element|null} Warning component or null.
  */
-function WithFitTextFontSize( { fitText, name, clientId, children } ) {
+function FitTextFontSize( { fitText, name, clientId, isSelected } ) {
 	const { fontSize } = useFitText( { fitText, name, clientId } );
-	return children( fontSize );
+	if ( isSelected && fontSize && fontSize < MIN_FONT_SIZE_FOR_WARNING ) {
+		return (
+			<InspectorControls group="typography">
+				<FitTextSizeWarning />
+			</InspectorControls>
+		);
+	}
+	return null;
 }
 
 /*
@@ -385,33 +393,7 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ fitText && (
-					<WithFitTextFontSize
-						fitText={ fitText }
-						name={ name }
-						clientId={ clientId }
-					>
-						{ ( fontSize ) =>
-							isSelected && (
-								<FitTextControl
-									clientId={ clientId }
-									fitText={ fitText }
-									setAttributes={ setAttributes }
-									name={ name }
-									fontSize={ attributes.fontSize }
-									style={ attributes.style }
-									warning={
-										fontSize <
-											MIN_FONT_SIZE_FOR_WARNING && (
-											<FitTextSizeWarning />
-										)
-									}
-								/>
-							)
-						}
-					</WithFitTextFontSize>
-				) }
-				{ ! fitText && isSelected && (
+				<InspectorControls group="typography">
 					<FitTextControl
 						clientId={ clientId }
 						fitText={ fitText }
@@ -420,6 +402,14 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
 						fontSize={ attributes.fontSize }
 						style={ attributes.style }
 					/>
+				</InspectorControls>
+				{ fitText && (
+					<FitTextFontSize
+						fitText={ fitText }
+						name={ name }
+						clientId={ clientId }
+						isSelected={ isSelected }
+					/>
 				) }
 			</>
 		);

package/src/hooks/test/cross-origin-isolation.js

@@ -152,7 +152,7 @@ describe( 'cross-origin-isolation', () => {
 		expect( observeSpy ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should add crossorigin="anonymous" to images', async () => {
+	it( 'should not add crossorigin="anonymous" to images', async () => {
 		Object.defineProperty( window, 'crossOriginIsolated', {
 			value: true,
 			writable: true,
@@ -172,8 +172,12 @@ describe( 'cross-origin-isolation', () => {
 		// Wait for MutationObserver callback to fire (async microtask).
 		await new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
 
-		// The image should get the crossorigin attribute
-		expect( img ).toHaveAttribute( 'crossorigin', 'anonymous' );
+		// Images should NOT get the crossorigin attribute.
+		// Under Document-Isolation-Policy: isolate-and-credentialless,
+		// the credentialless mode handles image loading without CORS headers.
+		// Adding crossorigin="anonymous" would override this and break
+		// external images that don't serve CORS headers.
+		expect( img ).not.toHaveAttribute( 'crossorigin' );
 
 		document.body.removeChild( img );
 	} );

package/src/hooks/utils.js

@@ -238,6 +238,7 @@ export function useBlockSettings( name, parentLayout ) {
 	const [
 		backgroundImage,
 		backgroundSize,
+		gradient,
 		customFontFamilies,
 		defaultFontFamilies,
 		themeFontFamilies,
@@ -300,6 +301,7 @@ export function useBlockSettings( name, parentLayout ) {
 	] = useSettings(
 		'background.backgroundImage',
 		'background.backgroundSize',
+		'background.gradient',
 		'typography.fontFamilies.custom',
 		'typography.fontFamilies.default',
 		'typography.fontFamilies.theme',
@@ -366,6 +368,7 @@ export function useBlockSettings( name, parentLayout ) {
 			background: {
 				backgroundImage,
 				backgroundSize,
+				gradient,
 			},
 			color: {
 				palette: {
@@ -453,6 +456,7 @@ export function useBlockSettings( name, parentLayout ) {
 	}, [
 		backgroundImage,
 		backgroundSize,
+		gradient,
 		customFontFamilies,
 		defaultFontFamilies,
 		themeFontFamilies,

package/src/store/actions.js

@@ -1616,16 +1616,17 @@ export function updateSettings( settings ) {
  * Action that signals that a temporary reusable block has been saved
  * in order to switch its temporary id with the real id.
  *
- * @param {string} id        Reusable block's id.
- * @param {string} updatedId Updated block's id.
- *
- * @return {Object} Action object.
+ * @deprecated
  */
-export function __unstableSaveReusableBlock( id, updatedId ) {
+export function __unstableSaveReusableBlock() {
+	deprecated(
+		'wp.data.dispatch( "core/block-editor" ).__unstableSaveReusableBlock',
+		{
+			since: '7.1',
+		}
+	);
 	return {
-		type: 'SAVE_REUSABLE_BLOCK_SUCCESS',
-		id,
-		updatedId,
+		type: 'DO_NOTHING',
 	};
 }
 

package/src/store/private-selectors.js

@@ -147,7 +147,7 @@ export const getEnabledClientIdsTree = createRegistrySelector( () =>
 	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
 		state.blocks.order,
 		state.derivedBlockEditingModes,
-		state.blockEditingModes,
+		state.blocks.blockEditingModes,
 	] )
 );
 
@@ -170,7 +170,7 @@ export const getEnabledBlockParents = createSelector(
 	},
 	( state ) => [
 		state.blocks.parents,
-		state.blockEditingModes,
+		state.blocks.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
 	]