@wordpress/block-editor 16.1.0 → 17.0.0

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -1,19 +1,11 @@
-/**
- * WordPress dependencies
- */
 import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
-import { _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce } from '@wordpress/compose';
-import { __experimentalHeading as Heading } from '@wordpress/components';
+import { Text } from '@wordpress/ui';
 import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
 import BlockPatternsList from '../../block-patterns-list';
 import useInsertionPoint from '../hooks/use-insertion-point';
 import usePatternsState from '../hooks/use-patterns-state';
-import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
@@ -24,30 +16,6 @@ import {
 	starterPatternsCategory,
 } from '../block-patterns-tab/utils';
 
-function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
-	if ( ! filterValue ) {
-		return null;
-	}
-
-	return (
-		<Heading
-			level={ 2 }
-			lineHeight="48px"
-			className="block-editor-block-patterns-explorer__search-results-count"
-		>
-			{ sprintf(
-				/* translators: %d: number of patterns. */
-				_n(
-					'%d pattern found',
-					'%d patterns found',
-					filteredBlockPatternsLength
-				),
-				filteredBlockPatternsLength
-			) }
-		</Heading>
-	);
-}
-
 function PatternList( {
 	searchValue,
 	selectedCategory,
@@ -150,26 +118,26 @@ function PatternList( {
 			className="block-editor-block-patterns-explorer__list"
 			ref={ container }
 		>
-			<PatternsListHeader
-				filterValue={ searchValue }
-				filteredBlockPatternsLength={ filteredBlockPatterns.length }
-			/>
-
-			<InserterListbox>
-				{ hasItems && (
-					<>
-						<BlockPatternsList
-							blockPatterns={ pagingProps.categoryPatterns }
-							onClickPattern={ ( pattern, blocks ) => {
-								onClickPattern( pattern, blocks );
-								onModalClose();
-							} }
-							isDraggable={ false }
-						/>
-						<BlockPatternsPaging { ...pagingProps } />
-					</>
-				) }
-			</InserterListbox>
+			{ hasItems ? (
+				<>
+					<BlockPatternsList
+						blockPatterns={ pagingProps.categoryPatterns }
+						onClickPattern={ ( pattern, blocks ) => {
+							onClickPattern( pattern, blocks );
+							onModalClose();
+						} }
+						isDraggable={ false }
+					/>
+					<BlockPatternsPaging { ...pagingProps } />
+				</>
+			) : (
+				<Text
+					render={ <p /> }
+					className="block-editor-block-patterns-explorer__no-results"
+				>
+					{ __( 'No results found.' ) }
+				</Text>
+			) }
 		</div>
 	);
 }

package/src/components/inserter/block-patterns-tab/index.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	useMemo,
 	useState,
@@ -9,7 +6,6 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -17,10 +13,6 @@ import {
 	__experimentalText as WCText,
 	FlexBlock,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import usePatternsState from '../hooks/use-patterns-state';
 import BlockPatternsList from '../../block-patterns-list';
 import usePatternsPaging from '../hooks/use-patterns-paging';

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	SVG,
 	Path,
@@ -12,10 +9,6 @@ import {
 import { __, _x } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useMemo, createInterpolateElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import {
 	myPatternsCategory,
 	INSERTER_SYNC_TYPES,

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -1,14 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 import { _x, _n, sprintf } from '@wordpress/i18n';
-
 import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
 import usePatternsState from '../hooks/use-patterns-state';
 import {
 	isPatternFiltered,

package/src/components/inserter/block-patterns-tab/utils.js

@@ -1,7 +1,3 @@
-/**
- * WordPress dependencies
- */
-
 import { __, _x } from '@wordpress/i18n';
 
 export const INSERTER_PATTERN_TYPES = {

package/src/components/inserter/block-types-tab.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import { useMemo, useEffect, forwardRef } from '@wordpress/element';
 import { useAsyncList } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';

package/src/components/inserter/category-tabs/index.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { usePrevious, useReducedMotion } from '@wordpress/compose';
 import {
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );

package/src/components/inserter/hooks/use-block-types-state.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	getBlockType,
 	createBlock,
@@ -12,10 +9,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { isFiltered } from '../../../store/utils';
 import { unlock } from '../../../lock-unlock';

package/src/components/inserter/hooks/use-insertion-point.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { _n, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
@@ -74,7 +67,7 @@ function useInsertionPoint( {
 	const {
 		getSelectedBlock,
 		getClosestAllowedInsertionPoint,
-		isBlockInsertionPointVisible,
+		getBlockInsertionPoint,
 	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
@@ -208,7 +201,7 @@ function useInsertionPoint( {
 
 	const onToggleInsertionPoint = useCallback(
 		( item ) => {
-			if ( item && ! isBlockInsertionPointVisible() ) {
+			if ( item ) {
 				const allowedDestinationRootClientId =
 					getClosestAllowedInsertionPoint(
 						item.name,
@@ -225,13 +218,18 @@ function useInsertionPoint( {
 						} )
 					);
 				}
-			} else {
+			} else if ( ! getBlockInsertionPoint()?.__unstableWithInserter ) {
+				// The insertion cue is shared state. The in-between inserter
+				// marks its own cue with `__unstableWithInserter` and mounts an
+				// inserter inside that cue's popover, so hiding that cue here
+				// would unmount a UI this inserter does not own.
+				// See https://github.com/WordPress/gutenberg/issues/72297.
 				hideInsertionPoint();
 			}
 		},
 		[
 			getClosestAllowedInsertionPoint,
-			isBlockInsertionPointVisible,
+			getBlockInsertionPoint,
 			showInsertionPoint,
 			hideInsertionPoint,
 			destinationRootClientId,

package/src/components/inserter/hooks/use-patterns-paging.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo, useState, useEffect } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
 import { getScrollContainer } from '@wordpress/dom';

package/src/components/inserter/hooks/use-patterns-state.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useCallback, useMemo } from '@wordpress/element';
 import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 import {

package/src/components/inserter/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
@@ -17,13 +10,10 @@ import {
 } from '@wordpress/blocks';
 import { forwardRef } from '@wordpress/element';
 import { plus } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import InserterMenu from './menu';
 import QuickInserter from './quick-inserter';
 import { store as blockEditorStore } from '../../store';
+import { getSiblingBlockAttributes } from '../../utils/sibling-block-attributes';
 import { getAppenderLabel } from './get-appender-label';
 
 const UnforwardedInserterToggle = (
@@ -196,11 +186,7 @@ const UnforwardedInserter = (
 	function insertOnlyAllowedBlock() {
 		const blockName = blockToInsert?.name ?? allowedBlockType.name;
 
-		function getAdjacentBlockAttributes( attributesToCopy ) {
-			if ( ! attributesToCopy?.length ) {
-				return {};
-			}
-
+		function getAdjacentBlockAttributes() {
 			// 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.
@@ -221,15 +207,7 @@ const UnforwardedInserter = (
 				}
 			}
 
-			if ( ! adjacentAttributes ) {
-				return {};
-			}
-
-			return Object.fromEntries(
-				attributesToCopy
-					.filter( ( attr ) => attr in adjacentAttributes )
-					.map( ( attr ) => [ attr, adjacentAttributes[ attr ] ] )
-			);
+			return getSiblingBlockAttributes( blockName, adjacentAttributes );
 		}
 
 		function getInsertionIndex() {
@@ -255,9 +233,7 @@ const UnforwardedInserter = (
 		// 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
-		const newAttributes = getAdjacentBlockAttributes(
-			blockToInsert?.attributesToCopy
-		);
+		const newAttributes = getAdjacentBlockAttributes();
 
 		const newBlock = createBlock( blockName, {
 			...blockToInsert?.attributes,

package/src/components/inserter/library.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { PrivateInserterMenu } from './menu';
 import { store as blockEditorStore } from '../../store';
 

package/src/components/inserter/media-tab/hooks.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 

package/src/components/inserter/media-tab/media-list.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { Composite } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { MediaPreview } from './media-preview';
 
 function MediaList( {

package/src/components/inserter/media-tab/media-panel.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { Button, Modal, Spinner, SearchControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
@@ -20,10 +13,6 @@ import { useDispatch } from '@wordpress/data';
 import { getScrollContainer } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
 import { Stack } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import MediaList from './media-list';
 import MediaUpload from '../../media-upload';
 import MediaUploadCheck from '../../media-upload/check';

package/src/components/inserter/media-tab/media-preview.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -26,12 +19,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
 import { getFilename } from '@wordpress/url';
-
 import { Tooltip } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';

package/src/components/inserter/media-tab/media-tab.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { useCallback, useEffect, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { MediaCategoryPanel } from './media-panel';
 import MediaUploadCheck from '../../media-upload/check';
 import MediaUpload from '../../media-upload';

package/src/components/inserter/media-tab/test/hooks.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { renderHook, act, waitFor } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { useDelayedLoading, useMediaResults } from '../hooks';
 
 describe( 'useDelayedLoading', () => {

package/src/components/inserter/media-tab/test/media-panel.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { MediaCategoryPanel } from '../media-panel';
 
 // Keep the panel's data + async surface out of the test: return a small,

package/src/components/inserter/media-tab/utils.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };

package/src/components/inserter/menu.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	forwardRef,
 	useState,
@@ -19,11 +12,7 @@ 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';
-
-/**
- * Internal dependencies
- */
+import { useDispatch, useSelect } from '@wordpress/data';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
@@ -107,10 +96,14 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
+	const { hideInsertionPoint } = useDispatch( blockEditorStore );
 	const blockTypesTabRef = useRef();
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock, _rootClientId ) => {
+			// The cue points at a position that no longer exists once the
+			// blocks are inserted, so clear it regardless of what showed it.
+			hideInsertionPoint();
 			onInsertBlocks(
 				blocks,
 				meta,
@@ -133,17 +126,24 @@ function InserterMenu(
 				}
 			} );
 		},
-		[ onInsertBlocks, maybeCloseInserter, onSelect, ref, shouldFocusBlock ]
+		[
+			hideInsertionPoint,
+			onInsertBlocks,
+			maybeCloseInserter,
+			onSelect,
+			ref,
+			shouldFocusBlock,
+		]
 	);
 
 	const onInsertPattern = useCallback(
 		( blocks, patternName, ...args ) => {
-			onToggleInsertionPoint( false );
+			hideInsertionPoint();
 			onInsertBlocks( blocks, { patternName }, ...args );
 			onSelect();
 			maybeCloseInserter();
 		},
-		[ onInsertBlocks, maybeCloseInserter, onSelect, onToggleInsertionPoint ]
+		[ hideInsertionPoint, onInsertBlocks, maybeCloseInserter, onSelect ]
 	);
 
 	const onHover = useCallback(
@@ -344,13 +344,15 @@ function InserterMenu(
 	// Focus first active tab, if any
 	const tabsRef = useRef();
 	useLayoutEffect( () => {
-		if ( tabsRef.current ) {
-			window.requestAnimationFrame( () => {
-				tabsRef.current
-					.querySelector( '[role="tab"][aria-selected="true"]' )
-					?.focus();
-			} );
+		if ( ! tabsRef.current ) {
+			return;
 		}
+		const frame = window.requestAnimationFrame( () => {
+			tabsRef.current
+				?.querySelector( '[role="tab"][aria-selected="true"]' )
+				?.focus();
+		} );
+		return () => window.cancelAnimationFrame( frame );
 	}, [] );
 
 	return (

package/src/components/inserter/mobile-tab-navigation.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 
 function InserterNoResults( { children = __( 'No results found.' ) } ) {

package/src/components/inserter/panel.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Icon as WCIcon } from '@wordpress/components';
 
 function InserterPanel( { title, icon, children } ) {

package/src/components/inserter/preview-panel.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	isReusableBlock,
 	createBlock,
@@ -8,10 +5,6 @@ import {
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import BlockCard from '../block-card';
 import BlockPreview from '../block-preview';