@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.21.0

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -41,6 +41,7 @@ export default function useInspectorControlsTabs(
 		color: colorGroup,
 		content: contentGroup,
 		default: defaultGroup,
+		layout: layoutGroup,
 		dimensions: dimensionsGroup,
 		list: listGroup,
 		position: positionGroup,
@@ -62,6 +63,8 @@ export default function useInspectorControlsTabs(
 	const styleFills = [
 		...( useSlotFills( borderGroup.name ) || [] ),
 		...( useSlotFills( colorGroup.name ) || [] ),
+		...( useSlotFills( layoutGroup.name ) || [] ),
+		...( useSlotFills( positionGroup.name ) || [] ),
 		...( useSlotFills( dimensionsGroup.name ) || [] ),
 		...( useSlotFills( stylesGroup.name ) || [] ),
 		...( useSlotFills( typographyGroup.name ) || [] ),
@@ -70,7 +73,7 @@ export default function useInspectorControlsTabs(
 	const hasStyleFills = styleFills.length;
 
 	// Settings Tab: If we don't have multiple tabs to display
-	// (i.e. both list view and styles), check only the default and position
+	// (i.e. both list view and styles), check only the default
 	// InspectorControls slots. If we have multiple tabs, we'll need to check
 	// the advanced controls slot as well to ensure they are rendered.
 	const advancedFills = [
@@ -80,7 +83,6 @@ export default function useInspectorControlsTabs(
 
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.name ) || [] ),
-		...( useSlotFills( positionGroup.name ) || [] ),
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
@@ -111,14 +113,18 @@ export default function useInspectorControlsTabs(
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if ( hasBlockStyles || hasStyleFills ) {
+	const { tabSettings, isPreviewMode } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			tabSettings: settings.blockInspectorTabs,
+			isPreviewMode: settings.isPreviewMode,
+		};
+	}, [] );
+
+	if ( ! isPreviewMode && ( hasBlockStyles || hasStyleFills ) ) {
 		tabs.push( TAB_STYLES );
 	}
 
-	const tabSettings = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().blockInspectorTabs;
-	}, [] );
-
 	const showTabs = getShowTabs( blockName, tabSettings );
 	return showTabs ? tabs : EMPTY_ARRAY;
 }

package/src/components/list-view/block-select-button.js

@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
-	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
@@ -23,6 +22,9 @@ import {
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
+
 /**
  * Internal dependencies
  */
@@ -164,14 +166,22 @@ function ListViewBlockSelectButton(
 					</span>
 				) : null }
 				{ !! visibilityLabel && (
-					<Tooltip text={ visibilityLabel }>
-						<span
-							className="block-editor-list-view-block-select-button__block-visibility"
-							aria-hidden="true"
-						>
-							<Icon icon={ unseen } />
-						</span>
-					</Tooltip>
+					// TODO: `visibilityLabel` is not exposed to
+					// assistive technology — the trigger is
+					// `aria-hidden`, so the label is sighted-hover-only.
+					<Tooltip.Root>
+						<Tooltip.Trigger
+							render={
+								<span
+									className="block-editor-list-view-block-select-button__block-visibility"
+									aria-hidden="true"
+								>
+									<Icon icon={ unseen } />
+								</span>
+							}
+						/>
+						<Tooltip.Popup>{ visibilityLabel }</Tooltip.Popup>
+					</Tooltip.Root>
 				) }
 				{ shouldShowLockIcon && (
 					<span className="block-editor-list-view-block-select-button__lock">

package/src/components/list-view/block.js

@@ -415,7 +415,12 @@ function ListViewBlock( {
 
 	const selectEditorBlock = useCallback(
 		( event ) => {
-			selectBlock( event, clientId );
+			// For keyboard activation (Enter/Space on a link), transfer focus
+			// to the canvas with the caret at the end of the block.
+			// For mouse clicks, keep focus in the list view so that subsequent
+			// keyboard operations (arrow navigation, copy/paste) still work.
+			const isKeyboardActivation = event?.detail === 0;
+			selectBlock( event, clientId, isKeyboardActivation ? -1 : null );
 			event.preventDefault();
 		},
 		[ clientId, selectBlock ]

package/src/components/media-replace-flow/style.scss

@@ -65,21 +65,3 @@
 		}
 	}
 }
-
-.block-editor-media-flow__error {
-	padding: 0 20px 20px 20px;
-	max-width: 255px;
-
-	.components-with-notices-ui {
-		max-width: 255px;
-
-		.components-notice__content {
-			overflow: hidden;
-			word-wrap: break-word;
-		}
-		.components-notice__dismiss {
-			position: absolute;
-			right: 10px;
-		}
-	}
-}

package/src/components/preset-input-control/custom-value-controls.js

@@ -3,10 +3,12 @@
  */
 import {
 	RangeControl,
-	Tooltip,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
+
 /**
  * CustomValueControls component for handling custom value input.
  *
@@ -93,11 +95,16 @@ export default function CustomValueControls( {
 	);
 
 	const wrappedUnitControl = showTooltip ? (
-		<Tooltip text={ ariaLabel } placement="top">
-			<div className="preset-input-control__tooltip-wrapper">
-				{ unitControl }
-			</div>
-		</Tooltip>
+		<Tooltip.Root>
+			<Tooltip.Trigger
+				render={
+					<div className="preset-input-control__tooltip-wrapper">
+						{ unitControl }
+					</div>
+				}
+			/>
+			<Tooltip.Popup>{ ariaLabel }</Tooltip.Popup>
+		</Tooltip.Root>
 	) : (
 		unitControl
 	);

package/src/components/preset-input-control/index.js

@@ -4,7 +4,7 @@
 import {
 	Button,
 	CustomSelectControl,
-	Icon,
+	Icon as WCIcon,
 	RangeControl,
 	__experimentalHStack as HStack,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -208,7 +208,7 @@ export default function PresetInputControl( {
 			className={ `preset-input-control__wrapper ${ className }__wrapper` }
 		>
 			{ icon && (
-				<Icon
+				<WCIcon
 					className="preset-input-control__icon"
 					icon={ icon }
 					size={ ICON_SIZE }

package/src/components/provider/use-media-upload-settings.js

@@ -16,6 +16,7 @@ function useMediaUploadSettings( settings = {} ) {
 			mediaUpload: settings.mediaUpload,
 			mediaSideload: settings.mediaSideload,
 			mediaFinalize: settings.mediaFinalize,
+			mediaDelete: settings.mediaDelete,
 			maxUploadFileSize: settings.maxUploadFileSize,
 			allowedMimeTypes: settings.allowedMimeTypes,
 			allImageSizes: settings.allImageSizes,

package/src/components/rich-text/event-listeners/enter.js

@@ -3,6 +3,14 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { insert, remove } from '@wordpress/rich-text';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDownDeprecated( event ) {
@@ -75,10 +83,14 @@ export default ( props ) => ( element ) => {
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	defaultView.addEventListener( 'keydown', onKeyDown );
+	const unsubscribeKeyDown = subscribeDelegatedListener(
+		defaultView,
+		'keydown',
+		onKeyDown
+	);
 	element.addEventListener( 'keydown', onKeyDownDeprecated );
 	return () => {
-		defaultView.removeEventListener( 'keydown', onKeyDown );
+		unsubscribeKeyDown();
 		element.removeEventListener( 'keydown', onKeyDownDeprecated );
 	};
 };

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -4,6 +4,7 @@
 import { pasteHandler } from '@wordpress/blocks';
 import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -11,6 +12,9 @@ import { isURL } from '@wordpress/url';
 import { store as blockEditorStore } from '../../../store';
 import { addActiveFormats } from '../utils';
 import { getPasteEventData } from '../../../utils/pasting';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -141,8 +145,5 @@ export default ( props ) => ( element ) => {
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	defaultView.addEventListener( 'paste', _onPaste );
-	return () => {
-		defaultView.removeEventListener( 'paste', _onPaste );
-	};
+	return subscribeDelegatedListener( defaultView, 'paste', _onPaste );
 };

package/src/components/unsupported-block-details/index.native.js

@@ -6,7 +6,11 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import {
+	BottomSheet,
+	Icon as WCIcon,
+	TextControl,
+} from '@wordpress/components';
 import {
 	requestUnsupportedBlockFallback,
 	sendActionButtonPressedAction,
@@ -148,7 +152,7 @@ const UnsupportedBlockDetails = ( {
 			} }
 		>
 			<View style={ styles[ 'unsupported-block-details__container' ] }>
-				<Icon
+				<WCIcon
 					icon={ icon || help }
 					color={ iconStyle.color }
 					size={ iconStyle.size }

package/src/components/video-player/index.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -118,7 +118,7 @@ class Video extends Component {
 						style={ [ style, styles.overlayContainer ] }
 					>
 						<View style={ styles.blackOverlay } />
-						<Icon
+						<WCIcon
 							icon={ PlayIcon }
 							style={ styles.playIcon }
 							size={ styles.playIcon.size }

package/src/components/warning/index.native.js

@@ -6,7 +6,7 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { normalizeIconObject } from '@wordpress/blocks';
 
@@ -48,7 +48,7 @@ function Warning( {
 		<View style={ containerStyle } { ...viewProps }>
 			{ icon && (
 				<View style={ styles.icon }>
-					<Icon
+					<WCIcon
 						className={ iconClass || internalIconClass }
 						icon={ icon && icon.src ? icon.src : icon }
 					/>

package/src/hooks/background.js

@@ -23,6 +23,12 @@ import {
 	hasBackgroundGradientValue,
 } from '../components/global-styles/background-panel';
 import { globalStylesDataKey } from '../store/private-keys';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+	useBlockStyleState,
+} from './block-style-state';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -164,6 +170,7 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
+	const selectedState = useBlockStyleState();
 	const { style, className, inheritedValue } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getSettings } =
@@ -213,44 +220,55 @@ export function BackgroundImagePanel( {
 		return null;
 	}
 
-	const onChange = ( newStyle ) => {
-		const isMigrating =
-			backgroundGradientSupported && !! style?.color?.gradient;
-		const newAttributes = {
-			style: cleanEmptyObject(
-				backgroundGradientSupported
-					? {
-							...newStyle,
-							color: {
-								...newStyle?.color,
-								gradient: undefined,
-							},
-					  }
-					: newStyle
-			),
-		};
+	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
-		// 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;
-		}
+	const onChange = isStateSelected
+		? ( newStyle ) => {
+				setAttributes( {
+					style: setStyleForState( style, selectedState, newStyle ),
+				} );
+		  }
+		: ( newStyle ) => {
+				const isMigrating =
+					backgroundGradientSupported && !! style?.color?.gradient;
+				const newAttributes = {
+					style: cleanEmptyObject(
+						backgroundGradientSupported
+							? {
+									...newStyle,
+									color: {
+										...newStyle?.color,
+										gradient: undefined,
+									},
+							  }
+							: newStyle
+					),
+				};
 
-		setAttributes( newAttributes );
-	};
+				// 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
@@ -292,7 +310,11 @@ export function BackgroundImagePanel( {
 			settings={ updatedSettings }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
-			value={ styleValue }
+			value={
+				isStateSelected
+					? getStyleForState( style, selectedState )
+					: styleValue
+			}
 		/>
 	);
 }

package/src/hooks/block-fields/link/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	Button,
-	Icon,
+	Icon as WCIcon,
 	__experimentalGrid as Grid,
 	Popover,
 } from '@wordpress/components';
@@ -104,7 +104,7 @@ export default function Link( { data, field, onChange } ) {
 				>
 					{ url && (
 						<>
-							<Icon icon={ link } size={ 24 } />
+							<WCIcon icon={ link } size={ 24 } />
 							<span className="block-editor-content-only-controls__link-title">
 								{ url }
 							</span>
@@ -112,7 +112,7 @@ export default function Link( { data, field, onChange } ) {
 					) }
 					{ ! url && (
 						<>
-							<Icon
+							<WCIcon
 								icon={ link }
 								size={ 24 }
 								style={ { opacity: 0.3 } }

package/src/hooks/block-fields/media/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	Button,
-	Icon,
+	Icon as WCIcon,
 	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -92,11 +92,11 @@ function MediaThumbnail( { data, field, attachment, config } ) {
 		}
 
 		if ( icon ) {
-			return <Icon icon={ icon } size={ 20 } />;
+			return <WCIcon icon={ icon } size={ 20 } />;
 		}
 	}
 
-	return <Icon icon={ mediaIcon } size={ 20 } />;
+	return <WCIcon icon={ mediaIcon } size={ 20 } />;
 }
 
 export default function Media( { data, field, onChange, config = {} } ) {

package/src/hooks/block-style-state.js

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+import { getValueFromObjectPath, setImmutably } from '../utils/object';
+
+const DEFAULT_STATE_VALUE = 'default';
+
+export const DEFAULT_BLOCK_STYLE_STATE = {
+	viewport: DEFAULT_STATE_VALUE,
+	pseudo: DEFAULT_STATE_VALUE,
+};
+
+const BlockStyleStateContext = createContext( DEFAULT_BLOCK_STYLE_STATE );
+
+export const BlockStyleStateProvider = BlockStyleStateContext.Provider;
+
+export function useBlockStyleState() {
+	return useContext( BlockStyleStateContext );
+}
+
+/**
+ * Returns true when a viewport style state is selected.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {boolean} Whether a viewport state is selected.
+ */
+export function hasViewportBlockStyleState( selectedState ) {
+	return (
+		!! selectedState?.viewport &&
+		selectedState.viewport !== DEFAULT_STATE_VALUE
+	);
+}
+
+/**
+ * Returns true when a pseudo style state is selected.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {boolean} Whether a pseudo state is selected.
+ */
+export function hasPseudoBlockStyleState( selectedState ) {
+	return (
+		!! selectedState?.pseudo && selectedState.pseudo !== DEFAULT_STATE_VALUE
+	);
+}
+
+/**
+ * Returns true when the default style state is selected.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {boolean} Whether the default style state is selected.
+ */
+export function isDefaultBlockStyleState( selectedState ) {
+	return (
+		! hasViewportBlockStyleState( selectedState ) &&
+		! hasPseudoBlockStyleState( selectedState )
+	);
+}
+
+/**
+ * Returns the style object path for the selected block style state.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {string[]} Object path for the selected state styles.
+ */
+function getStyleStatePath( selectedState ) {
+	if ( isDefaultBlockStyleState( selectedState ) ) {
+		return [];
+	}
+
+	return [ selectedState.viewport, selectedState.pseudo ].filter(
+		( state ) => state && state !== DEFAULT_STATE_VALUE
+	);
+}
+
+export function getStyleForState( style, selectedState ) {
+	const path = getStyleStatePath( selectedState );
+	if ( ! path.length ) {
+		return style;
+	}
+	return getValueFromObjectPath( style, path );
+}
+
+export function setStyleForState( style, selectedState, newStyle ) {
+	const path = getStyleStatePath( selectedState );
+	if ( ! path.length ) {
+		return cleanEmptyObject( newStyle );
+	}
+	return cleanEmptyObject( setImmutably( style, path, newStyle ) );
+}
+
+export function scopeResetAllFilterToState( selectedState, resetAllFilter ) {
+	if ( ! resetAllFilter || isDefaultBlockStyleState( selectedState ) ) {
+		return resetAllFilter;
+	}
+
+	return ( attributes ) => {
+		const existingStateStyle =
+			getStyleForState( attributes?.style, selectedState ) || {};
+		const updatedStateAttributes = resetAllFilter( {
+			style: existingStateStyle,
+		} );
+		const updatedStateStyle =
+			updatedStateAttributes &&
+			typeof updatedStateAttributes === 'object' &&
+			! Array.isArray( updatedStateAttributes ) &&
+			Object.prototype.hasOwnProperty.call(
+				updatedStateAttributes,
+				'style'
+			)
+				? updatedStateAttributes.style
+				: updatedStateAttributes;
+
+		return {
+			style: setStyleForState(
+				attributes?.style,
+				selectedState,
+				updatedStateStyle
+			),
+		};
+	};
+}