@wordpress/block-editor 15.18.1-next.v.202604201441.0 → 15.19.0

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/block-patterns-tab/pattern-category-previews.js

@@ -14,7 +14,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	FlexBlock,
 } from '@wordpress/components';
 
@@ -162,23 +162,23 @@ export function PatternCategoryPreviews( {
 					/>
 				</HStack>
 				{ ! currentCategoryPatterns.length && (
-					<Text
+					<WCText
 						variant="muted"
 						className="block-editor-inserter__patterns-category-no-results"
 					>
 						{ __( 'No results found' ) }
-					</Text>
+					</WCText>
 				) }
 			</VStack>
 			{ currentCategoryPatterns.length > 0 && (
 				<>
-					<Text
+					<WCText
 						size="12"
 						as="p"
 						className="block-editor-inserter__help-text"
 					>
 						{ __( 'Drag and drop patterns into the canvas.' ) }
-					</Text>
+					</WCText>
 					<BlockPatternsList
 						ref={ scrollContainerRef }
 						blockPatterns={ pagingProps.categoryPatterns }

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,11 +10,13 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
 	useLayoutEffect,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
+import { SearchControl, Popover } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -168,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;
@@ -176,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 );
@@ -219,6 +247,7 @@ function InserterMenu(
 		rootClientId,
 		__experimentalInsertionIndex,
 		isAppender,
+		isScrolled,
 	] );
 
 	const blocksTab = useMemo( () => {
@@ -235,7 +264,7 @@ function InserterMenu(
 				</div>
 				{ showInserterHelpPanel && (
 					<div className="block-editor-inserter__tips">
-						<VisuallyHidden as="h2">
+						<VisuallyHidden render={ <h2 /> }>
 							{ __( 'A tip for using the block editor' ) }
 						</VisuallyHidden>
 						<Tips />
@@ -343,6 +372,7 @@ function InserterMenu(
 						{
 							name: 'blocks',
 							title: __( 'Blocks' ),
+							panelRef: blocksPanelRef,
 							panel: (
 								<>
 									{ inserterSearch }
@@ -355,6 +385,7 @@ function InserterMenu(
 						{
 							name: 'patterns',
 							title: __( 'Patterns' ),
+							panelRef: patternsPanelRef,
 							panel: (
 								<>
 									{ inserterSearch }
@@ -367,6 +398,7 @@ function InserterMenu(
 						{
 							name: 'media',
 							title: __( 'Media' ),
+							panelRef: mediaPanelRef,
 							panel: (
 								<>
 									{ inserterSearch }

package/src/components/inserter/search-results.js

@@ -3,7 +3,7 @@
  */
 import { useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';

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/inspector-popover-header/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalSpacer as Spacer,
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { closeSmall } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -52,7 +52,7 @@ export default function InspectorPopoverHeader( {
 					/>
 				) }
 			</HStack>
-			{ help && <Text>{ help }</Text> }
+			{ help && <WCText>{ help }</WCText> }
 		</VStack>
 	);
 }

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

@@ -36,7 +36,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { ViewerSlot } from './viewer-slot';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 import useRichUrlData from './use-rich-url-data';
 
@@ -164,12 +164,12 @@ export default function LinkPreview( {
 									>
 										{ value.badges.map(
 											( badge, index ) => (
-												<Badge
+												<WCBadge
 													key={ `${ badge.label }|${ badge.intent }|${ index }` }
 													intent={ badge.intent }
 												>
 													{ badge.label }
-												</Badge>
+												</WCBadge>
 											)
 										) }
 									</HStack>

package/src/components/link-control/settings.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 const noop = () => {};
 
@@ -58,7 +59,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
+			<VisuallyHidden render={ <legend /> }>
 				{ __( 'Currently selected link settings' ) }
 			</VisuallyHidden>
 			{ theSettings }

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

@@ -5,9 +5,9 @@ import {
 	BaseControl,
 	Button,
 	Popover,
-	VisuallyHidden,
 	useBaseControlProps,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useState, useId, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

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

@@ -16,7 +16,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
  */
 import { unlock } from '../../lock-unlock';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 /**
  * Link preview component that displays the current link information.
@@ -67,12 +67,12 @@ export function LinkPreview( { title, url, image, badges } ) {
 								alignment="left"
 							>
 								{ badges.map( ( badge ) => (
-									<Badge
+									<WCBadge
 										key={ `${ badge.label }|${ badge.intent }` }
 										intent={ badge.intent }
 									>
 										{ badge.label }
-									</Badge>
+									</WCBadge>
 								) ) }
 							</HStack>
 						) }

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

@@ -36,7 +36,7 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { getBlockVisibilityLabel } from '../block-visibility';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
 	{
@@ -136,9 +136,9 @@ function ListViewBlockSelectButton(
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<Badge className="block-editor-list-view-block-select-button__anchor">
+						<WCBadge className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
-						</Badge>
+						</WCBadge>
 					</span>
 				) }
 				{ isSticky && (

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

@@ -11,10 +11,8 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import {
-	__experimentalTreeGrid as TreeGrid,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {