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

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -16,6 +16,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const {
 		getBlockAttributes,
+		getBlockName,
 		getMultiSelectedBlockClientIds,
 		getSelectedBlockClientId,
 		hasMultiSelection,
@@ -31,13 +32,19 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 				: [ panelId ];
 
 			clientIds.forEach( ( clientId ) => {
-				const { style } = getBlockAttributes( clientId );
+				const blockAttributes = getBlockAttributes( clientId ) || {};
+				const { style } = blockAttributes;
 				let newBlockAttributes = { style };
+				const resetContext = {
+					attributes: blockAttributes,
+					clientId,
+					name: getBlockName( clientId ),
+				};
 
 				resetFilters.forEach( ( resetFilter ) => {
 					newBlockAttributes = {
 						...newBlockAttributes,
-						...resetFilter( newBlockAttributes ),
+						...resetFilter( newBlockAttributes, resetContext ),
 					};
 				} );
 
@@ -54,6 +61,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 		},
 		[
 			getBlockAttributes,
+			getBlockName,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
 			panelId,

package/src/components/inspector-controls/fill.js

@@ -7,7 +7,7 @@ import {
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
-import { useEffect, useContext } from '@wordpress/element';
+import { useEffect, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +19,10 @@ import {
 	isInListViewBlockSupportTreeKey,
 } from '../block-edit/context';
 import groups from './groups';
+import {
+	scopeResetAllFilterToState,
+	useBlockStyleState,
+} from '../../hooks/block-style-state';
 import { ListViewContentFill } from './list-view-content-popover';
 
 const PATTERN_EDITING_GROUPS = [ 'content', 'list' ];
@@ -117,18 +121,27 @@ export default function InspectorControlsFill( {
 function RegisterResetAll( { resetAllFilter, children } ) {
 	const { registerResetAllFilter, deregisterResetAllFilter } =
 		useContext( ToolsPanelContext );
+	const selectedState = useBlockStyleState();
+	const scopedResetAllFilter = useMemo(
+		() => scopeResetAllFilterToState( selectedState, resetAllFilter ),
+		[ resetAllFilter, selectedState ]
+	);
 	useEffect( () => {
 		if (
-			resetAllFilter &&
+			scopedResetAllFilter &&
 			registerResetAllFilter &&
 			deregisterResetAllFilter
 		) {
-			registerResetAllFilter( resetAllFilter );
+			registerResetAllFilter( scopedResetAllFilter );
 			return () => {
-				deregisterResetAllFilter( resetAllFilter );
+				deregisterResetAllFilter( scopedResetAllFilter );
 			};
 		}
-	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+	}, [
+		scopedResetAllFilter,
+		registerResetAllFilter,
+		deregisterResetAllFilter,
+	] );
 	return children;
 }
 

package/src/components/inspector-controls/groups.js

@@ -15,6 +15,7 @@ const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsLayout = createSlotFill( 'InspectorControlsLayout' );
 const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
@@ -35,6 +36,7 @@ const groups = {
 	dimensions: InspectorControlsDimensions,
 	effects: InspectorControlsEffects,
 	filter: InspectorControlsFilter,
+	layout: InspectorControlsLayout,
 	list: InspectorControlsListView,
 	position: InspectorControlsPosition,
 	settings: InspectorControlsDefault, // Alias for default.

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

@@ -2,14 +2,16 @@
  * WordPress dependencies
  */
 import {
-	Icon,
-	Tooltip,
+	Icon as WCIcon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect, useDispatch } 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
  */
@@ -175,14 +177,16 @@ export default function InspectorControlsTabs( {
 								{ tab.title }
 							</Tabs.Tab>
 						) : (
-							<Tooltip text={ tab.title } key={ tab.name }>
+							<Tooltip.Root key={ tab.name }>
 								<Tabs.Tab
 									tabId={ tab.name }
 									aria-label={ tab.title }
+									render={ <Tooltip.Trigger /> }
 								>
-									<Icon icon={ tab.icon } />
+									<WCIcon icon={ tab.icon } />
 								</Tabs.Tab>
-							</Tooltip>
+								<Tooltip.Popup>{ tab.title }</Tooltip.Popup>
+							</Tooltip.Root>
 						)
 					) }
 				</Tabs.TabList>

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

@@ -7,26 +7,20 @@ import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/component
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
-import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 import groups from '../inspector-controls/groups';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => {
 	const defaultFills = useSlotFills( groups.default.name );
-	const positionFills = useSlotFills( groups.position.name );
 	const bindingsFills = useSlotFills( groups.bindings.name );
 
 	// Expand the advanced panel when there are no other fills
 	// in the settings tab.
-	const hasOtherFills =
-		!! defaultFills?.length ||
-		!! positionFills?.length ||
-		!! bindingsFills?.length;
+	const hasOtherFills = !! defaultFills?.length || !! bindingsFills?.length;
 
 	return (
 		<>
 			<InspectorControls.Slot />
-			<PositionControls />
 			<InspectorControls.Slot group="bindings" />
 			{ showAdvancedControls && (
 				<div>

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

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
+import PositionControls from './position-controls-panel';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { useBlockSettings } from '../../hooks/utils';
 import { store as blockEditorStore } from '../../store';
@@ -95,6 +96,10 @@ const StylesTab = ( {
 						group="typography"
 						label={ __( 'Typography' ) }
 					/>
+					<InspectorControls.Slot
+						group="layout"
+						label={ __( 'Layout' ) }
+					/>
 					<InspectorControls.Slot
 						group="dimensions"
 						label={ __( 'Dimensions' ) }
@@ -103,6 +108,7 @@ const StylesTab = ( {
 						group="border"
 						label={ borderPanelLabel }
 					/>
+					<PositionControls />
 					<InspectorControls.Slot group="styles" />
 				</>
 			) }

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
+			}
 		/>
 	);
 }