@wordpress/block-editor 15.15.0 → 15.16.1-next.v.202604091042.0

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,
 				};
 			}
 		} );

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/iframe/get-compatibility-styles.js

@@ -21,7 +21,7 @@ export function getCompatibilityStyles() {
 				// May fail for external styles.
 				// eslint-disable-next-line no-unused-expressions
 				styleSheet.cssRules;
-			} catch ( e ) {
+			} catch {
 				return accumulator;
 			}
 

package/src/components/inserter/media-tab/hooks.js

@@ -100,7 +100,7 @@ export function useMediaCategories( rootClientId ) {
 							results = await category.fetch( {
 								per_page: 1,
 							} );
-						} catch ( e ) {
+						} catch {
 							// If the request fails, we shallow the error and just don't show
 							// the category, in order to not break the media tab.
 						}

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/components/link-control/README.md

@@ -275,14 +275,14 @@ If passed, children are rendered after the input.
 
 ```jsx
 <LinkControlSearchInput>
-	<HStack justify="right">
+	<Stack justify="flex-end">
 		<Button
 			type="submit"
 			label={ __( 'Submit' ) }
 			icon={ keyboardReturn }
 			className="block-editor-link-control__search-submit"
 		/>
-	</HStack>
+	</Stack>
 </LinkControlSearchInput>
 ```
 

package/src/components/link-control/search-input.js

@@ -99,7 +99,7 @@ const LinkControlSearchInput = forwardRef(
 					if ( suggestion?.url ) {
 						onSelect( suggestion );
 					}
-				} catch ( e ) {}
+				} catch {}
 				return;
 			}
 

package/src/components/link-picker/link-preview.js

@@ -9,6 +9,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { Icon, chevronDown } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -50,7 +51,7 @@ export function LinkPreview( { title, url, image, badges } ) {
 							numberOfLines={ 1 }
 							className="link-preview-button__title"
 						>
-							{ title }
+							{ stripHTML( title ) }
 						</Truncate>
 						{ url && (
 							<Truncate

package/src/components/rich-text/index.js

@@ -555,4 +555,4 @@ PublicForwardedRichTextContainer.isEmpty = ( value ) => {
 export default PublicForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
-export { __unstableRichTextInputEvent } from './input-event';
+export { RichTextInputEvent as __unstableRichTextInputEvent } from './input-event';

package/src/components/rich-text/index.native.js

@@ -698,4 +698,4 @@ PrivateRichText.Raw = forwardRef( ( props, ref ) => (
 export default PrivateRichText;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
-export { __unstableRichTextInputEvent } from './input-event';
+export { RichTextInputEvent as __unstableRichTextInputEvent } from './input-event';

package/src/components/rich-text/input-event.js

@@ -8,7 +8,7 @@ import { useEffect, useContext, useRef } from '@wordpress/element';
  */
 import { inputEventContext } from './';
 
-export function __unstableRichTextInputEvent( { inputType, onInput } ) {
+export function RichTextInputEvent( { inputType, onInput } ) {
 	const callbacks = useContext( inputEventContext );
 	const onInputRef = useRef();
 	onInputRef.current = onInput;

package/src/components/rich-text/input-event.native.js

@@ -3,7 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 
-export class __unstableRichTextInputEvent extends Component {
+export class RichTextInputEvent extends Component {
 	render() {
 		return null;
 	}

package/src/components/rich-text/native/index.native.js

@@ -15,7 +15,6 @@ import {
 	showUserSuggestions,
 	showXpostSuggestions,
 } from '@wordpress/react-native-bridge';
-import { BlockFormatControls } from '@wordpress/block-editor';
 import { getPxFromCssUnit } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import {
@@ -42,6 +41,7 @@ import {
 	isCollapsed,
 	remove,
 } from '@wordpress/rich-text';
+import { BlockFormatControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -1342,22 +1342,23 @@ RichText.defaultProps = {
 	tagName: 'div',
 };
 
-const withFormatTypes = ( WrappedComponent ) => ( props ) => {
-	const {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats,
-	} = props;
-	const { formatTypes } = useFormatTypes( {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats,
-	} );
-
-	return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
-};
+const withFormatTypes = ( WrappedComponent ) =>
+	function WithFormatTypes( props ) {
+		const {
+			clientId,
+			identifier,
+			withoutInteractiveFormatting,
+			allowedFormats,
+		} = props;
+		const { formatTypes } = useFormatTypes( {
+			clientId,
+			identifier,
+			withoutInteractiveFormatting,
+			allowedFormats,
+		} );
+
+		return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
+	};
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {

package/src/components/use-on-block-drop/index.js

@@ -46,7 +46,7 @@ export function parseDropEvent( event ) {
 			result,
 			JSON.parse( event.dataTransfer.getData( 'wp-blocks' ) )
 		);
-	} catch ( err ) {
+	} catch {
 		return result;
 	}
 

package/src/components/use-paste-styles/index.js

@@ -44,7 +44,7 @@ function hasSerializedBlocks( text ) {
 			return false;
 		}
 		return true;
-	} catch ( err ) {
+	} catch {
 		// Parsing error, the text is not serialized blocks.
 		// (Even though that it technically won't happen)
 		return false;
@@ -153,7 +153,7 @@ export default function usePasteStyles() {
 				}
 
 				html = await window.navigator.clipboard.readText();
-			} catch ( error ) {
+			} catch {
 				// Possibly the permission is denied.
 				createErrorNotice(
 					__(