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

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

@@ -8,8 +8,12 @@ import {
 	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import {
+	ToggleControl,
+	__experimentalSpacer as Spacer,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 
 /**
@@ -25,6 +29,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockStyles from '../block-styles';
 import { ListViewContentPopover } from '../inspector-controls/list-view-content-popover';
 import InspectorControls from '../inspector-controls';
+import { BlockInspectorPreTabsSlot } from './inspector-pre-tabs-slot-fill';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import InspectorControlsLastItem from '../inspector-controls/last-item';
@@ -32,9 +37,16 @@ import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import { useBorderPanelLabel } from '../../hooks/border';
+import { BlockStateBadges, BlockStatesControl } from '../../hooks/states';
 import ContentTab from '../inspector-controls-tabs/content-tab';
 import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
 import { unlock } from '../../lock-unlock';
+import {
+	hasPseudoBlockStyleState,
+	hasViewportBlockStyleState,
+	isDefaultBlockStyleState,
+} from '../../hooks/block-style-state';
+import { onViewportStateChangeKey } from '../../store/private-keys';
 
 function StyleInspectorSlots( {
 	blockName,
@@ -60,13 +72,14 @@ function StyleInspectorSlots( {
 				group="typography"
 				label={ __( 'Typography' ) }
 			/>
+			<InspectorControls.Slot group="layout" label={ __( 'Layout' ) } />
 			<InspectorControls.Slot
 				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
 			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
-			<InspectorControls.Slot group="styles" />
 			{ showPositionControls && <PositionControls /> }
+			<InspectorControls.Slot group="styles" />
 			{ showBindingsControls && (
 				<InspectorControls.Slot group="bindings" />
 			) }
@@ -79,6 +92,42 @@ function StyleInspectorSlots( {
 	);
 }
 
+function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	const showLayoutControls =
+		hasViewportBlockStyleState( selectedBlockStyleState ) &&
+		! hasPseudoBlockStyleState( selectedBlockStyleState );
+	return (
+		<>
+			<InspectorControls.Slot
+				group="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
+			<InspectorControls.Slot
+				group="background"
+				label={ __( 'Background image' ) }
+				className="background-block-support-panel__inner-wrapper"
+			/>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
+			{ showLayoutControls && (
+				<InspectorControls.Slot
+					group="layout"
+					label={ __( 'Layout' ) }
+				/>
+			) }
+			<InspectorControls.Slot
+				group="dimensions"
+				label={ __( 'Dimensions' ) }
+			/>
+			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+		</>
+	);
+}
+
 function BlockInspector() {
 	const {
 		selectedBlockCount,
@@ -89,6 +138,10 @@ function BlockInspector() {
 		isSectionBlockInSelection,
 		hasBlockStyles,
 		editedContentOnlySection,
+		blockEditingMode,
+		selectedBlockStyleState,
+		showStateOnCanvas,
+		onViewportStateChange,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -99,7 +152,11 @@ function BlockInspector() {
 			isSectionBlock: _isSectionBlock,
 			getEditedContentOnlySection,
 			isWithinEditedContentOnlySection,
+			getBlockEditingMode,
+			getSelectedBlockStyleState,
+			isSelectedBlockStyleStateShownOnCanvas,
 		} = unlock( select( blockEditorStore ) );
+		const blockEditorSettings = select( blockEditorStore ).getSettings();
 		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const isWithinEditedSection = isWithinEditedContentOnlySection(
@@ -130,6 +187,15 @@ function BlockInspector() {
 			isSectionBlock: _isSectionBlock( _renderedBlockClientId ),
 			hasBlockStyles: _hasBlockStyles,
 			editedContentOnlySection: getEditedContentOnlySection(),
+			blockEditingMode: getBlockEditingMode( _renderedBlockClientId ),
+			selectedBlockStyleState: getSelectedBlockStyleState(
+				_renderedBlockClientId
+			),
+			showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(
+				_renderedBlockClientId
+			),
+			onViewportStateChange:
+				blockEditorSettings?.[ onViewportStateChangeKey ],
 		};
 	}, [] );
 
@@ -198,6 +264,9 @@ function BlockInspector() {
 		useBlockInspectorAnimationSettings( blockType );
 
 	const hasSelectedBlocks = selectedBlockCount > 1;
+	const isBlockStyleStateSelected = ! isDefaultBlockStyleState(
+		selectedBlockStyleState
+	);
 
 	if ( hasSelectedBlocks && ! isSectionBlockInSelection ) {
 		return (
@@ -265,6 +334,11 @@ function BlockInspector() {
 				contentClientIds={ contentClientIds }
 				hasBlockStyles={ hasBlockStyles }
 				editedContentOnlySection={ editedContentOnlySection }
+				blockEditingMode={ blockEditingMode }
+				selectedBlockStyleState={ selectedBlockStyleState }
+				showStateOnCanvas={ showStateOnCanvas }
+				onViewportStateChange={ onViewportStateChange }
+				isBlockStyleStateSelected={ isBlockStyleStateSelected }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -316,6 +390,11 @@ const BlockInspectorSingleBlock = ( {
 	contentClientIds,
 	hasBlockStyles,
 	editedContentOnlySection,
+	blockEditingMode,
+	selectedBlockStyleState,
+	showStateOnCanvas,
+	onViewportStateChange,
+	isBlockStyleStateSelected,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
@@ -329,6 +408,38 @@ const BlockInspectorSingleBlock = ( {
 		renderedBlockClientId
 	);
 	const isBlockSynced = blockInformation.isSynced;
+	const {
+		setSelectedBlockStyleState,
+		setSelectedBlockStyleStateCanvasPreview,
+	} = unlock( useDispatch( blockEditorStore ) );
+	const onBlockStyleStateChange = ( value ) => {
+		const nextSelectedBlockStyleState = {
+			...selectedBlockStyleState,
+			...value,
+		};
+
+		setSelectedBlockStyleState(
+			renderedBlockClientId,
+			nextSelectedBlockStyleState
+		);
+
+		if ( value.viewport ) {
+			onViewportStateChange?.( {
+				viewport: nextSelectedBlockStyleState.viewport,
+				showStateOnCanvas,
+			} );
+		}
+	};
+	const onShowStateOnCanvasChange = ( value ) => {
+		setSelectedBlockStyleStateCanvasPreview( renderedBlockClientId, value );
+
+		if ( value ) {
+			onViewportStateChange?.( {
+				viewport: selectedBlockStyleState.viewport,
+				showStateOnCanvas: value,
+			} );
+		}
+	};
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -347,11 +458,44 @@ const BlockInspectorSingleBlock = ( {
 				className={ isBlockSynced && 'is-synced' }
 				isChild={ hasParentChildBlockCards }
 				clientId={ renderedBlockClientId }
+				controls={
+					blockEditingMode === 'default' && (
+						<BlockStatesControl
+							name={ blockName }
+							value={ selectedBlockStyleState }
+							onChange={ onBlockStyleStateChange }
+						/>
+					)
+				}
 			/>
+			{ blockEditingMode === 'default' && isBlockStyleStateSelected && (
+				<Spacer paddingX={ 4 } paddingY={ 2 }>
+					<ToggleControl
+						label={ __( 'Show state on canvas' ) }
+						checked={ showStateOnCanvas }
+						onChange={ onShowStateOnCanvasChange }
+					/>
+					<BlockStateBadges
+						name={ blockName }
+						value={ selectedBlockStyleState }
+					/>
+				</Spacer>
+			) }
 			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			<EditContents clientId={ renderedBlockClientId } />
-			<BlockVariationTransforms blockClientId={ renderedBlockClientId } />
-			{ hasMultipleTabs && (
+			{ ! isBlockStyleStateSelected && (
+				<BlockVariationTransforms
+					blockClientId={ renderedBlockClientId }
+				/>
+			) }
+			<BlockInspectorPreTabsSlot />
+			{ isBlockStyleStateSelected && ! isSectionBlock && (
+				<StyleStateInspectorSlots
+					blockName={ blockName }
+					selectedBlockStyleState={ selectedBlockStyleState }
+				/>
+			) }
+			{ ! isBlockStyleStateSelected && hasMultipleTabs && (
 				<>
 					<InspectorControlsTabs
 						hasBlockStyles={ hasBlockStyles }
@@ -363,7 +507,7 @@ const BlockInspectorSingleBlock = ( {
 					/>
 				</>
 			) }
-			{ ! hasMultipleTabs && (
+			{ ! isBlockStyleStateSelected && ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -377,7 +521,9 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
-			<InspectorControlsLastItem.Slot />
+			{ ! isBlockStyleStateSelected && (
+				<InspectorControlsLastItem.Slot />
+			) }
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

package/src/components/block-inspector/inspector-pre-tabs-slot-fill.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const BlockInspectorPreTabsKey = Symbol( 'BlockInspectorPreTabs' );
+
+export const {
+	Fill: BlockInspectorPreTabsFill,
+	Slot: BlockInspectorPreTabsSlot,
+} = createSlotFill( BlockInspectorPreTabsKey );

package/src/components/block-list/block-selection-button.native.js

@@ -1,16 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { getBlockType } from '@wordpress/blocks';
+import { View, Text, TouchableOpacity } from 'react-native';
 import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * External dependencies
  */
-import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ const BlockSelectionButton = ( {
 			>
 				{ rootClientId &&
 					rootBlockIcon && [
-						<Icon
+						<WCIcon
 							key="parent-icon"
 							size={ 24 }
 							icon={ rootBlockIcon.src }

package/src/components/block-list/content.scss

@@ -163,12 +163,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	.components-with-notices-ui {
 		margin: 0 0 12px 0;
 		width: 100%;
-
-		.components-notice {
-			.components-notice__content {
-				font-size: $default-font-size;
-			}
-		}
 	}
 
 	// Warnings

package/src/components/block-list/use-block-props/use-focus-handler.js

@@ -2,13 +2,19 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * Selects the block if it receives focus.
@@ -57,11 +63,7 @@ export function useFocusHandler( clientId ) {
 				selectBlock( clientId );
 			}
 
-			node.addEventListener( 'focusin', onFocus );
-
-			return () => {
-				node.removeEventListener( 'focusin', onFocus );
-			};
+			return subscribeDelegatedListener( node, 'focusin', onFocus );
 		},
 		[ isBlockSelected, selectBlock ]
 	);

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -1,19 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 
-function listener( event ) {
-	if ( event.defaultPrevented ) {
-		return;
-	}
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
 
-	event.preventDefault();
-	event.currentTarget.classList.toggle(
-		'is-hovered',
-		event.type === 'mouseover'
-	);
-}
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * Adds `is-hovered` class when the block is hovered and in navigation or
@@ -31,12 +29,31 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				return;
 			}
 
-			node.addEventListener( 'mouseout', listener );
-			node.addEventListener( 'mouseover', listener );
+			function listener( event ) {
+				if ( event.defaultPrevented ) {
+					return;
+				}
+				event.preventDefault();
+				node.classList.toggle(
+					'is-hovered',
+					event.type === 'mouseover'
+				);
+			}
+
+			const unsubscribeOut = subscribeDelegatedListener(
+				node,
+				'mouseout',
+				listener
+			);
+			const unsubscribeOver = subscribeDelegatedListener(
+				node,
+				'mouseover',
+				listener
+			);
 
 			return () => {
-				node.removeEventListener( 'mouseout', listener );
-				node.removeEventListener( 'mouseover', listener );
+				unsubscribeOut();
+				unsubscribeOver();
 
 				// Remove class in case it lingers.
 				node.classList.remove( 'is-hovered' );

package/src/components/block-lock/modal.js

@@ -8,7 +8,7 @@ import {
 	CheckboxControl,
 	Flex,
 	FlexItem,
-	Icon,
+	Icon as WCIcon,
 	Modal,
 	ToggleControl,
 } from '@wordpress/components';
@@ -153,7 +153,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 												} ) )
 											}
 										/>
-										<Icon
+										<WCIcon
 											className="block-editor-block-lock-modal__lock-icon"
 											icon={
 												lock.edit
@@ -174,7 +174,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 											} ) )
 										}
 									/>
-									<Icon
+									<WCIcon
 										className="block-editor-block-lock-modal__lock-icon"
 										icon={
 											lock.move ? lockIcon : unlockIcon
@@ -192,7 +192,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 											} ) )
 										}
 									/>
-									<Icon
+									<WCIcon
 										className="block-editor-block-lock-modal__lock-icon"
 										icon={
 											lock.remove ? lockIcon : unlockIcon

package/src/components/block-patterns-list/index.js

@@ -10,10 +10,10 @@ import { cloneBlock } from '@wordpress/blocks';
 import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	Composite,
-	Tooltip,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { VisuallyHidden } from '@wordpress/ui';
+// 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 { VisuallyHidden, Text, Tooltip } from '@wordpress/ui';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, symbol } from '@wordpress/icons';
@@ -28,7 +28,12 @@ import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
-		return <Tooltip text={ title }>{ children }</Tooltip>;
+		return (
+			<Tooltip.Root>
+				<Tooltip.Trigger render={ children } />
+				<Tooltip.Popup>{ title }</Tooltip.Popup>
+			</Tooltip.Root>
+		);
 	}
 	return <>{ children }</>;
 };
@@ -154,9 +159,13 @@ function BlockPattern( {
 											/>
 										</div>
 									) }
-									<div className="block-editor-block-patterns-list__item-title">
+									<Text
+										render={ <div /> }
+										className="block-editor-block-patterns-list__item-title"
+										variant="body-sm"
+									>
 										{ pattern.title }
-									</div>
+									</Text>
 								</HStack>
 							) }
 

package/src/components/block-patterns-list/stories/index.story.jsx

@@ -9,6 +9,8 @@ import { fn } from 'storybook/test';
 import BlockPatternsList from '../';
 import { ExperimentalBlockEditorProvider } from '../../provider';
 import patterns from './fixtures';
+// Reason: Styles are contained in ExperimentalBlockEditorProvider iframe.
+// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
 import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';
 
 const blockEditorSettings = {

package/src/components/block-patterns-list/style.scss

@@ -33,7 +33,6 @@
 
 	.block-editor-block-patterns-list__item-title {
 		flex-grow: 1;
-		font-size: $helptext-font-size;
 		text-align: left;
 	}
 

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

@@ -52,25 +52,35 @@ function BlockPopover(
 		0
 	);
 
-	// When blocks are moved up/down, they are animated to their new position by
-	// updating the `transform` property manually (i.e. without using CSS
-	// transitions or animations). The animation, which can also scroll the block
-	// editor, can sometimes cause the position of the Popover to get out of sync.
-	// A MutationObserver is therefore used to make sure that changes to the
-	// selectedElement's attribute (i.e. `transform`) can be tracked and used to
-	// trigger the Popover to rerender.
+	// `useMovingAnimation` writes the block's `transform` on every spring tick.
+	// Reacting synchronously to each mutation would race with Floating UI's own
+	// autoUpdate frame loop and cause the toolbar to visibly jump. Coalescing
+	// to one recompute per animation frame avoids that. The observer can't
+	// simply be removed: with autoUpdate's animationFrame mode alone, the
+	// toolbar trails the block by ~1 frame because the spring's rAF and
+	// autoUpdate's rAF are independently scheduled.
 	useLayoutEffect( () => {
 		if ( ! selectedElement ) {
 			return;
 		}
 
-		const observer = new window.MutationObserver(
-			forceRecomputePopoverDimensions
-		);
+		let rafId;
+		const observer = new window.MutationObserver( () => {
+			if ( rafId ) {
+				return;
+			}
+			rafId = window.requestAnimationFrame( () => {
+				rafId = null;
+				forceRecomputePopoverDimensions();
+			} );
+		} );
 		observer.observe( selectedElement, { attributes: true } );
 
 		return () => {
 			observer.disconnect();
+			if ( rafId ) {
+				window.cancelAnimationFrame( rafId );
+			}
 		};
 	}, [ selectedElement ] );
 

package/src/components/block-toolbar/switch-section-style.js

@@ -4,7 +4,7 @@
 import {
 	ToolbarButton,
 	ToolbarGroup,
-	Icon,
+	Icon as WCIcon,
 	Path,
 	SVG,
 } from '@wordpress/components';
@@ -98,7 +98,7 @@ function SwitchSectionStyle( { clientId } ) {
 				onClick={ handleStyleSwitch }
 				label={ __( 'Shuffle styles' ) }
 			>
-				<Icon
+				<WCIcon
 					icon={ styleIcon }
 					style={ {
 						fill: activeStyleBackground || 'transparent',

package/src/components/block-visibility/modal.js

@@ -18,7 +18,7 @@ import {
 	CheckboxControl,
 	Flex,
 	FlexItem,
-	Icon,
+	Icon as WCIcon,
 	Modal,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -287,7 +287,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 														)
 													}
 												/>
-												<Icon
+												<WCIcon
 													icon={ icon }
 													className={ clsx( {
 														'block-editor-block-visibility-modal__options-icon--checked':

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	Icon,
+	Icon as WCIcon,
 	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
@@ -130,7 +130,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 	return (
 		<WCBadge className="block-editor-block-visibility-info">
 			<HStack spacing={ 2 } justify="start">
-				<Icon icon={ unseen } />
+				<WCIcon icon={ unseen } />
 				<WCText>{ label }</WCText>
 			</HStack>
 		</WCBadge>