@wordpress/block-editor 15.18.0 → 15.19.1-next.v.202605131006.0

package/src/components/global-styles/state-control.js

@@ -1,75 +1,178 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { check, chevronDown } from '@wordpress/icons';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 
 /**
- * State control for managing block state styles (hover, focus, etc.).
- * Displays a dropdown menu to select between different states.
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
+
+/**
+ * State control for managing viewport and pseudo-state styles.
+ * Displays a dropdown menu with separate groups for each selector.
  *
- * @param {Object}   props          Component props.
- * @param {Array}    props.states   Array of available states with value and label.
- * @param {string}   props.value    Currently selected state value.
- * @param {Function} props.onChange Callback when selection changes.
+ * @param {Object}   props                     Component props.
+ * @param {Array}    props.viewportStates      Array of available viewport states.
+ * @param {Array}    props.pseudoStates        Array of available pseudo states.
+ * @param {string}   props.viewportValue       Currently selected viewport value.
+ * @param {string}   props.pseudoStateValue    Currently selected pseudo state value.
+ * @param {Function} props.onChangeViewport    Callback when viewport selection changes.
+ * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.
  * @return {Element|null} State control component.
  */
 export default function StateControl( {
-	states = [],
-	value = 'default',
-	onChange,
+	viewportStates = [],
+	pseudoStates = [],
+	viewportValue = 'default',
+	pseudoStateValue = 'default',
+	onChangeViewport,
+	onChangePseudoState,
 } ) {
-	if ( ! states || states.length === 0 ) {
+	if ( ! viewportStates.length && ! pseudoStates.length ) {
 		return null;
 	}
 
-	const stateOptions = [
+	const viewportOptions = [
+		{ label: __( 'Default' ), value: 'default' },
+		...viewportStates.map( ( state ) => ( {
+			label: state.label,
+			value: state.value,
+		} ) ),
+	];
+	const pseudoStateOptions = [
 		{ label: __( 'Default' ), value: 'default' },
-		...states.map( ( state ) => ( {
+		...pseudoStates.map( ( state ) => ( {
 			label: state.label,
 			value: state.value,
 		} ) ),
 	];
 
-	const getCurrentStateLabel = () => {
-		const currentOption = stateOptions.find(
-			( option ) => option.value === value
+	const hasViewportOptions = viewportStates.length > 0;
+	const hasPseudoStateOptions = pseudoStates.length > 0;
+	const triggerLabel = __( 'States' );
+	const activeStates = [];
+
+	if ( hasViewportOptions && viewportValue !== 'default' ) {
+		const selectedViewport = viewportOptions.find(
+			( option ) => option.value === viewportValue
+		);
+
+		if ( selectedViewport ) {
+			activeStates.push( {
+				key: `viewport-${ selectedViewport.value }`,
+				label: selectedViewport.label,
+			} );
+		}
+	}
+
+	if ( hasPseudoStateOptions && pseudoStateValue !== 'default' ) {
+		const selectedPseudoState = pseudoStateOptions.find(
+			( option ) => option.value === pseudoStateValue
 		);
-		return currentOption?.label || __( 'Default' );
-	};
+
+		if ( selectedPseudoState ) {
+			activeStates.push( {
+				key: `pseudo-${ selectedPseudoState.value }`,
+				label: selectedPseudoState.label,
+			} );
+		}
+	}
 
 	return (
-		<DropdownMenu
-			icon={ chevronDown }
-			label={ sprintf(
-				/* translators: %s: Current state (e.g. "Hover", "Focus") */
-				__( 'State: %s' ),
-				getCurrentStateLabel()
-			) }
-			text={ getCurrentStateLabel() }
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				iconPosition: 'right',
-			} }
+		<Stack
+			direction="column"
+			gap="sm"
+			align="flex-end"
+			className="block-editor-global-styles-state-control"
 		>
-			{ ( { onClose } ) => (
-				<MenuGroup label={ __( 'State' ) }>
-					{ stateOptions.map( ( option ) => (
-						<MenuItem
-							key={ option.value }
-							onClick={ () => {
-								onChange( option.value );
-								onClose();
-							} }
-							icon={ value === option.value ? check : null }
-						>
-							{ option.label }
-						</MenuItem>
-					) ) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
+			<DropdownMenu
+				icon={ chevronDown }
+				label={ triggerLabel }
+				popoverProps={ {
+					placement: 'right-start',
+				} }
+				text={ triggerLabel }
+				toggleProps={ {
+					size: 'compact',
+					variant: 'tertiary',
+					iconPosition: 'right',
+				} }
+			>
+				{ ( { onClose } ) => (
+					<>
+						{ hasViewportOptions && (
+							<MenuGroup label={ __( 'Viewport' ) }>
+								{ viewportOptions.map( ( option ) => (
+									<MenuItem
+										key={ `viewport-${ option.value }` }
+										onClick={ () => {
+											onChangeViewport?.( option.value );
+											if ( ! hasPseudoStateOptions ) {
+												onClose();
+											}
+										} }
+										icon={
+											viewportValue === option.value
+												? check
+												: null
+										}
+									>
+										{ option.label }
+									</MenuItem>
+								) ) }
+							</MenuGroup>
+						) }
+						{ hasPseudoStateOptions && (
+							<MenuGroup label={ __( 'Pseudo state' ) }>
+								{ pseudoStateOptions.map( ( option ) => (
+									<MenuItem
+										key={ `pseudo-${ option.value }` }
+										onClick={ () => {
+											onChangePseudoState?.(
+												option.value
+											);
+											if ( ! hasViewportOptions ) {
+												onClose();
+											}
+										} }
+										icon={
+											pseudoStateValue === option.value
+												? check
+												: null
+										}
+									>
+										{ option.label }
+									</MenuItem>
+								) ) }
+							</MenuGroup>
+						) }
+					</>
+				) }
+			</DropdownMenu>
+			<Stack
+				className="block-editor-global-styles-state-control__badges"
+				direction="row"
+				justify="flex-start"
+				gap="xs"
+				wrap="wrap"
+			>
+				{ activeStates.map( ( activeState ) => (
+					<WCBadge key={ activeState.key } intent="info">
+						{ activeState.label }
+					</WCBadge>
+				) ) }
+			</Stack>
+		</Stack>
 	);
 }

package/src/components/global-styles/style.scss

@@ -23,6 +23,15 @@
 	text-align: right;
 }
 
+.block-editor-global-styles-state-control {
+	// Ensure alignment with block heading.
+	margin-top: -$grid-unit-05;
+}
+
+.block-editor-global-styles-state-control__badges {
+	min-height: $grid-unit-30;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;

package/src/components/gradients/use-gradient.js

@@ -54,7 +54,7 @@ export function getGradientSlugByValue( gradients, value ) {
 	return gradient && gradient.slug;
 }
 
-export function __experimentalUseGradient( {
+function useGradient( {
 	gradientAttribute = 'gradient',
 	customGradientAttribute = 'customGradient',
 } = {} ) {
@@ -120,3 +120,5 @@ export function __experimentalUseGradient( {
 	}
 	return { gradientClass, gradientValue, setGradient };
 }
+
+export { useGradient as __experimentalUseGradient };

package/src/components/iframe/use-scale-canvas.js

@@ -286,10 +286,6 @@ export function useScaleCanvas( {
 
 		iframeDocument.documentElement.classList.remove( 'zoom-out-animation' );
 
-		// Set the final scroll position that was just animated to.
-		// Disable reason: Eslint isn't smart enough to know that this is a
-		// DOM element. https://github.com/facebook/react/issues/31483
-		// eslint-disable-next-line react-compiler/react-compiler
 		iframeDocument.documentElement.scrollTop =
 			transitionToRef.current.scrollTop;
 

package/src/components/inner-blocks/README.md

@@ -205,4 +205,8 @@ const DEFAULT_BLOCK = { name: 'core/paragraph', attributes: { content: 'Lorem ip
 ### `directInsert`
 
 - **Type:** `Boolean`
-- **Default:** - `undefined`. Determines whether the default block should be inserted directly into the InnerBlocks area by the block appender.
+- **Default:** `undefined`.
+
+When `true`, the appender inserts `defaultBlock` directly and skips the inserter dropdown, **including any registered inserter variations** of that block type. Use this to opt out of the variation picker; otherwise leave unset.
+
+Note: redundant when `allowedBlocks` resolves to a single block type with no variations, the appender already inserts directly.

package/src/components/inner-blocks/index.native.js

@@ -35,7 +35,7 @@ import { MAX_NESTING_DEPTH } from './constants';
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
- * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/inner-blocks/README.md
  *
  * @param {Object} props   Optional. Props to pass to the element. Must contain
  *                         the ref if one is defined.

package/src/components/inserter/index.js

@@ -144,7 +144,6 @@ class Inserter extends Component {
 			clientId,
 			isAppender,
 			showInserterHelpPanel,
-
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
@@ -194,13 +193,13 @@ class Inserter extends Component {
 		const {
 			position,
 			hasSingleBlockType,
-			directInsertBlock,
+			blockToInsert,
 			insertOnlyAllowedBlock,
 			__experimentalIsQuick: isQuick,
 			onSelectOrClose,
 		} = this.props;
 
-		if ( hasSingleBlockType || directInsertBlock ) {
+		if ( hasSingleBlockType || blockToInsert ) {
 			return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
 		}
 
@@ -230,26 +229,35 @@ export default compose( [
 				hasInserterItems,
 				getAllowedBlocks,
 				getDirectInsertBlock,
+				getBlockListSettings,
 			} = select( blockEditorStore );
-
 			const { getBlockVariations, getBlockType } = select( blocksStore );
 
 			rootClientId =
 				rootClientId || getBlockRootClientId( clientId ) || undefined;
 
 			const allowedBlocks = getAllowedBlocks( rootClientId );
-
 			const directInsertBlock =
 				shouldDirectInsert && getDirectInsertBlock( rootClientId );
+			const { defaultBlock } = getBlockListSettings( rootClientId ) ?? {};
 
 			const hasSingleBlockType =
 				allowedBlocks?.length === 1 &&
 				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
 					?.length === 0;
+			const allowedBlockType = hasSingleBlockType
+				? allowedBlocks[ 0 ]
+				: null;
 
-			let allowedBlockType = false;
-			if ( hasSingleBlockType ) {
-				allowedBlockType = allowedBlocks[ 0 ];
+			// Single-block-type parents get adjacent-attribute copying
+			// without needing to set `directInsert: true`.
+			let blockToInsert = directInsertBlock || null;
+			if (
+				! blockToInsert &&
+				hasSingleBlockType &&
+				defaultBlock?.name === allowedBlockType.name
+			) {
+				blockToInsert = defaultBlock;
 			}
 
 			const defaultBlockType = directInsertBlock
@@ -265,7 +273,7 @@ export default compose( [
 				hasSingleBlockType,
 				blockTitle: allowedBlockType ? allowedBlockType.title : '',
 				allowedBlockType,
-				directInsertBlock,
+				blockToInsert,
 				appenderLabel,
 				rootClientId,
 			};
@@ -280,70 +288,57 @@ export default compose( [
 					isAppender,
 					hasSingleBlockType,
 					allowedBlockType,
-					directInsertBlock,
+					blockToInsert,
 					onSelectOrClose,
 					selectBlockOnInsert,
 				} = ownProps;
 
-				if ( ! hasSingleBlockType && ! directInsertBlock ) {
+				if ( ! hasSingleBlockType && ! blockToInsert ) {
 					return;
 				}
 
-				function getAdjacentBlockAttributes( attributesToCopy ) {
-					const { getBlock, getPreviousBlockClientId } =
-						select( blockEditorStore );
+				const blockName = blockToInsert?.name ?? allowedBlockType.name;
 
-					if (
-						! attributesToCopy ||
-						( ! clientId && ! rootClientId )
-					) {
+				function getAdjacentBlockAttributes( attributesToCopy ) {
+					if ( ! attributesToCopy?.length ) {
 						return {};
 					}
 
-					const result = {};
-					let adjacentAttributes = {};
-
-					// If there is no clientId, then attempt to get attributes
-					// from the last block within innerBlocks of the root block.
-					if ( ! clientId ) {
-						const parentBlock = getBlock( rootClientId );
-
-						if ( parentBlock?.innerBlocks?.length ) {
-							const lastInnerBlock =
-								parentBlock.innerBlocks[
-									parentBlock.innerBlocks.length - 1
-								];
-
-							if (
-								directInsertBlock &&
-								directInsertBlock?.name === lastInnerBlock.name
-							) {
-								adjacentAttributes = lastInnerBlock.attributes;
-							}
-						}
-					} else {
-						// Otherwise, attempt to get attributes from the
-						// previous block relative to the current clientId.
+					const { getBlock, getPreviousBlockClientId } =
+						select( blockEditorStore );
+
+					// Find the adjacent block of the same type whose attributes
+					// should be copied: previous sibling when inserting next to
+					// an existing block, otherwise the last child of the root.
+					let adjacentAttributes;
+					if ( clientId ) {
 						const currentBlock = getBlock( clientId );
 						const previousBlock = getBlock(
 							getPreviousBlockClientId( clientId )
 						);
-
 						if ( currentBlock?.name === previousBlock?.name ) {
-							adjacentAttributes =
-								previousBlock?.attributes || {};
+							adjacentAttributes = previousBlock?.attributes;
+						}
+					} else if ( rootClientId ) {
+						const lastInnerBlock =
+							getBlock( rootClientId )?.innerBlocks?.at( -1 );
+						if ( lastInnerBlock?.name === blockName ) {
+							adjacentAttributes = lastInnerBlock.attributes;
 						}
 					}
 
-					// Copy over only those attributes flagged to be copied.
-					attributesToCopy.forEach( ( attribute ) => {
-						if ( adjacentAttributes.hasOwnProperty( attribute ) ) {
-							result[ attribute ] =
-								adjacentAttributes[ attribute ];
-						}
-					} );
+					if ( ! adjacentAttributes ) {
+						return {};
+					}
 
-					return result;
+					return Object.fromEntries(
+						attributesToCopy
+							.filter( ( attr ) => attr in adjacentAttributes )
+							.map( ( attr ) => [
+								attr,
+								adjacentAttributes[ attr ],
+							] )
+					);
 				}
 
 				function getInsertionIndex() {
@@ -375,33 +370,27 @@ export default compose( [
 
 				const { insertBlock } = dispatch( blockEditorStore );
 
-				let blockToInsert;
-
-				// Attempt to augment the directInsertBlock with attributes from an adjacent block.
+				// Attempt to augment the inserted block with attributes from an adjacent block.
 				// This ensures styling from nearby blocks is preserved in the newly inserted block.
 				// See: https://github.com/WordPress/gutenberg/issues/37904
-				if ( directInsertBlock ) {
-					const newAttributes = getAdjacentBlockAttributes(
-						directInsertBlock.attributesToCopy
-					);
+				const newAttributes = getAdjacentBlockAttributes(
+					blockToInsert?.attributesToCopy
+				);
 
-					blockToInsert = createBlock( directInsertBlock.name, {
-						...( directInsertBlock.attributes || {} ),
-						...newAttributes,
-					} );
-				} else {
-					blockToInsert = createBlock( allowedBlockType.name );
-				}
+				const newBlock = createBlock( blockName, {
+					...( blockToInsert?.attributes || {} ),
+					...newAttributes,
+				} );
 
 				insertBlock(
-					blockToInsert,
+					newBlock,
 					getInsertionIndex(),
 					rootClientId,
 					selectBlockOnInsert
 				);
 
 				if ( onSelectOrClose ) {
-					onSelectOrClose( blockToInsert );
+					onSelectOrClose( newBlock );
 				}
 
 				const message = sprintf(

package/src/components/inserter/menu.js

@@ -10,6 +10,7 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
 	useLayoutEffect,
@@ -169,6 +170,30 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
+	const [ isScrolled, setIsScrolled ] = useState( false );
+	const blocksPanelRef = useRef( null );
+	const patternsPanelRef = useRef( null );
+	const mediaPanelRef = useRef( null );
+	useEffect( () => {
+		const handleScroll = ( event ) => {
+			setIsScrolled( event.currentTarget.scrollTop > 0 );
+		};
+		const panels = [
+			blocksPanelRef.current,
+			patternsPanelRef.current,
+			mediaPanelRef.current,
+		].filter( Boolean );
+		panels.forEach( ( panel ) =>
+			panel.addEventListener( 'scroll', handleScroll )
+		);
+
+		return () => {
+			panels.forEach( ( panel ) =>
+				panel.removeEventListener( 'scroll', handleScroll )
+			);
+		};
+	}, [] );
+
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -177,7 +202,9 @@ function InserterMenu(
 		return (
 			<>
 				<SearchControl
-					className="block-editor-inserter__search"
+					className={ clsx( 'block-editor-inserter__search', {
+						'is-scrolled': isScrolled,
+					} ) }
 					onChange={ ( value ) => {
 						if ( hoveredItem ) {
 							setHoveredItem( null );
@@ -220,6 +247,7 @@ function InserterMenu(
 		rootClientId,
 		__experimentalInsertionIndex,
 		isAppender,
+		isScrolled,
 	] );
 
 	const blocksTab = useMemo( () => {
@@ -344,6 +372,7 @@ function InserterMenu(
 						{
 							name: 'blocks',
 							title: __( 'Blocks' ),
+							panelRef: blocksPanelRef,
 							panel: (
 								<>
 									{ inserterSearch }
@@ -356,6 +385,7 @@ function InserterMenu(
 						{
 							name: 'patterns',
 							title: __( 'Patterns' ),
+							panelRef: patternsPanelRef,
 							panel: (
 								<>
 									{ inserterSearch }
@@ -368,6 +398,7 @@ function InserterMenu(
 						{
 							name: 'media',
 							title: __( 'Media' ),
+							panelRef: mediaPanelRef,
 							panel: (
 								<>
 									{ inserterSearch }

package/src/components/inserter/style.scss

@@ -119,7 +119,18 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__search {
-	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
+	padding: $grid-unit-20;
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background-color: $white;
+	border-bottom: 1px solid transparent;
+	@media not ( prefers-reduced-motion ) {
+		transition: border-bottom-color 0.1s linear;
+	}
+	&.is-scrolled {
+		border-bottom-color: $gray-200;
+	}
 }
 
 .block-editor-inserter__no-tab-container {
@@ -138,7 +149,7 @@ $block-inserter-tabs-height: 44px;
 
 	display: inline-flex;
 	align-items: center;
-	padding: $grid-unit-20 $grid-unit-20 0;
+	padding: 0 $grid-unit-20;
 }
 
 .block-editor-inserter__panel-content {
@@ -224,12 +235,16 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	flex-grow: 1;
-	padding: $grid-unit-20;
+	padding: 0 $grid-unit-20 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 }
 
+.block-editor-inserter__media-tabs-container {
+	padding-top: $grid-unit-20;
+}
+
 .block-editor-inserter__category-tablist {
 	margin-bottom: $grid-unit-10;
 }

package/src/components/inserter/tips.js

@@ -29,7 +29,7 @@ const globalTips = [
 ];
 
 function Tips() {
-	const [ randomIndex ] = useState(
+	const [ randomIndex ] = useState( () =>
 		Math.floor( Math.random() * globalTips.length )
 	);
 

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

@@ -36,7 +36,6 @@ const allEventListeners = [
 export function useEventListeners( props ) {
 	const propsRef = useRef( props );
 	useInsertionEffect( () => {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		propsRef.current = props;
 	} );
 	const refEffects = useMemo(