@wordpress/block-editor 16.2.0 → 17.0.0

package/src/components/inner-blocks/stories/index.story.jsx

@@ -0,0 +1,246 @@
+import {
+	createBlock,
+	getBlockType,
+	registerBlockType,
+} from '@wordpress/blocks';
+import { createContext, useContext, useMemo } from '@wordpress/element';
+import InnerBlocks from '../';
+import BlockList from '../../block-list';
+import { useBlockProps } from '../../block-list/use-block-props';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+
+// `InnerBlocks` only renders within a block, so the story args are passed down
+// to the block type registered below through a context rather than rendered by
+// the story directly.
+const ArgsContext = createContext( {} );
+
+const CONTAINER_BLOCK = 'storybook/inner-blocks-container';
+const TEXT_BLOCK = 'storybook/example-text';
+const MEDIA_BLOCK = 'storybook/example-media';
+const CHILD_BLOCKS = [
+	[ TEXT_BLOCK, 'Example Text', 'text' ],
+	[ MEDIA_BLOCK, 'Example Media', 'media' ],
+];
+
+// The inner blocks appender is only rendered while the block holding the inner
+// blocks is selected, so the container is selected from the start and its
+// client ID is hardcoded instead of using the generated one.
+const CONTAINER_CLIENT_ID = 'inner-blocks-container';
+const SELECTION = {
+	selectionStart: { clientId: CONTAINER_CLIENT_ID },
+	selectionEnd: { clientId: CONTAINER_CLIENT_ID },
+};
+
+function ContainerEdit() {
+	const args = useContext( ArgsContext );
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks { ...args } />
+		</div>
+	);
+}
+
+function ChildEdit( { name } ) {
+	const blockProps = useBlockProps();
+	const { title } = getBlockType( name );
+
+	return <p { ...blockProps }>{ title }</p>;
+}
+
+// Minimal block types, so that the story doesn't depend on the block library.
+// They are registered when the story renders rather than when this file loads,
+// so that they don't leak into the registry shared with the other stories.
+function useContainerBlock() {
+	return useMemo( () => {
+		CHILD_BLOCKS.forEach( ( [ name, title, category ] ) => {
+			if ( ! getBlockType( name ) ) {
+				registerBlockType( name, {
+					apiVersion: 3,
+					title,
+					category,
+					edit: ChildEdit,
+					save: () => null,
+				} );
+			}
+		} );
+
+		if ( ! getBlockType( CONTAINER_BLOCK ) ) {
+			registerBlockType( CONTAINER_BLOCK, {
+				apiVersion: 3,
+				title: 'Example Container',
+				category: 'design',
+				// The container is only meant to host the inner blocks area,
+				// so it is kept out of the inserter itself.
+				supports: { inserter: false },
+				edit: ContainerEdit,
+				save: () => null,
+			} );
+		}
+
+		return [
+			{
+				...createBlock( CONTAINER_BLOCK ),
+				clientId: CONTAINER_CLIENT_ID,
+			},
+		];
+	}, [] );
+}
+
+// Marks out the inner blocks area, so that it is easier to tell which part of
+// the block list the props apply to.
+const storyStyles = `
+	.inner-blocks-story .wp-block[data-type="${ CONTAINER_BLOCK }"] {
+		border: 1px dashed #949494;
+		padding: 16px;
+	}
+`;
+
+// The rendered story is a block editor hosting the example block below, so the
+// generated snippet would only show that scaffolding. This is how a block
+// renders the inner blocks area that the controls act on instead.
+const sourceCode = `registerBlockType( 'my-plugin/my-block', {
+	edit() {
+		const blockProps = useBlockProps();
+
+		return (
+			<div { ...blockProps }>
+				<InnerBlocks
+					allowedBlocks={ [ 'core/image', 'core/paragraph' ] }
+					orientation="vertical"
+					renderAppender={ InnerBlocks.ButtonBlockAppender }
+				/>
+			</div>
+		);
+	},
+
+	save() {
+		const blockProps = useBlockProps.save();
+
+		return (
+			<div { ...blockProps }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+} );`;
+
+const meta = {
+	title: 'BlockEditor/InnerBlocks',
+	component: InnerBlocks,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'InnerBlocks is a component which allows a single block to have multiple blocks as children. It is rendered by a block `edit` implementation, and pairs with `InnerBlocks.Content` in the `save` implementation, which is replaced by the content of the nested blocks.',
+			},
+			source: { code: sourceCode },
+		},
+	},
+	argTypes: {
+		allowedBlocks: {
+			control: { type: 'select' },
+			options: [ 'all', 'none', 'text block only' ],
+			mapping: {
+				all: true,
+				none: false,
+				'text block only': [ TEXT_BLOCK ],
+			},
+			description:
+				'The block types that can be inserted. `true` allows every block type, `false` allows none, and an array limits insertion to the listed block types.',
+			table: {
+				type: { summary: 'boolean | string[]' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		orientation: {
+			control: { type: 'select' },
+			options: [ 'vertical', 'horizontal' ],
+			description:
+				'Whether inner blocks are shown horizontally or vertically. It does not style the inner blocks, but it orients the block movers and makes drag and drop behave accordingly.',
+			table: {
+				type: { summary: "'horizontal' | 'vertical'" },
+				defaultValue: { summary: "'vertical'" },
+			},
+		},
+		templateLock: {
+			control: { type: 'select' },
+			options: [ false, 'all', 'insert', 'contentOnly' ],
+			description:
+				"Locks the inner blocks area. `'all'` prevents all operations, `'insert'` prevents inserting and removing blocks but allows moving them, `'contentOnly'` prevents all operations and cannot be overridden by children, and `false` opts out of a lock applied by a parent. When unset, the lock of the parent inner blocks area is used.",
+			table: {
+				type: { summary: "boolean | 'all' | 'insert' | 'contentOnly'" },
+			},
+		},
+		renderAppender: {
+			control: { type: 'select' },
+			options: [ 'default', 'button', 'none' ],
+			mapping: {
+				default: undefined,
+				button: InnerBlocks.ButtonBlockAppender,
+				none: false,
+			},
+			description:
+				'The component shown as the trailing appender of the inner blocks list. `InnerBlocks.ButtonBlockAppender` and `InnerBlocks.DefaultBlockAppender` are exposed for convenience, and any valid component can be passed. `false` renders no appender, and when unset the default appender is shown.',
+			table: {
+				type: { summary: 'Component | false' },
+			},
+		},
+		defaultBlock: {
+			control: { type: 'object' },
+			description:
+				'The block type inserted by default, in the form `{ name, attributes }`.',
+			table: {
+				type: { summary: 'Object' },
+			},
+		},
+		directInsert: {
+			control: { type: 'boolean' },
+			description:
+				'Whether the appender inserts `defaultBlock` directly, skipping the inserter dropdown and any registered inserter variations of that block type.',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		prioritizedInserterBlocks: {
+			control: { type: 'object' },
+			description:
+				'The block types shown first in the block inserter, as an array of `{blockName}/{variationName}` strings, where the variation name is optional.',
+			table: {
+				type: { summary: 'string[]' },
+			},
+		},
+		placeholder: {
+			control: false,
+			description:
+				'An element rendered in front of the appender, which can be used to represent an example state before any block is inserted.',
+			table: {
+				type: { summary: 'Element' },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( args ) {
+		const blocks = useContainerBlock();
+
+		return (
+			<ArgsContext.Provider value={ args }>
+				<ExperimentalBlockEditorProvider
+					value={ blocks }
+					selection={ SELECTION }
+				>
+					<style>{ storyStyles }</style>
+					<div className="inner-blocks-story">
+						<BlockList />
+					</div>
+				</ExperimentalBlockEditorProvider>
+			</ArgsContext.Provider>
+		);
+	},
+};

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

@@ -1,4 +1,5 @@
 import { Modal } from '@wordpress/components';
+import { Tabs } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import PatternExplorerSidebar from './pattern-explorer-sidebar';
@@ -14,22 +15,34 @@ function PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {
 	const patternCategories = usePatternCategories( rootClientId );
 
 	return (
-		<div className="block-editor-block-patterns-explorer">
+		<Tabs.Root
+			className="block-editor-block-patterns-explorer"
+			orientation="vertical"
+			value={ selectedCategory }
+			onValueChange={ setSelectedCategory }
+		>
 			<PatternExplorerSidebar
-				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
-				onClickCategory={ setSelectedCategory }
 				searchValue={ searchValue }
 				setSearchValue={ setSearchValue }
 			/>
-			<PatternList
-				searchValue={ searchValue }
-				selectedCategory={ selectedCategory }
-				patternCategories={ patternCategories }
-				rootClientId={ rootClientId }
-				onModalClose={ onModalClose }
-			/>
-		</div>
+			{ patternCategories.map( ( { name } ) => (
+				<Tabs.Panel
+					key={ name }
+					value={ name }
+					tabIndex={ -1 }
+					className="block-editor-block-patterns-explorer__panel"
+				>
+					<PatternList
+						searchValue={ searchValue }
+						selectedCategory={ name }
+						patternCategories={ patternCategories }
+						rootClientId={ rootClientId }
+						onModalClose={ onModalClose }
+					/>
+				</Tabs.Panel>
+			) ) }
+		</Tabs.Root>
 	);
 }
 

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

@@ -1,70 +1,32 @@
-import { Button, SearchControl } from '@wordpress/components';
+import { SearchControl } from '@wordpress/components';
+import { Stack, Tabs } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 
-function PatternCategoriesList( {
-	selectedCategory,
+function PatternExplorerSidebar( {
 	patternCategories,
-	onClickCategory,
+	searchValue,
+	setSearchValue,
 } ) {
-	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
-	return (
-		<div className={ `${ baseClassName }__categories-list` }>
-			{ patternCategories.map( ( { name, label } ) => {
-				return (
-					<Button
-						__next40pxDefaultSize
-						key={ name }
-						label={ label }
-						className={ `${ baseClassName }__categories-list__item` }
-						isPressed={ selectedCategory === name }
-						onClick={ () => {
-							onClickCategory( name );
-						} }
-					>
-						{ label }
-					</Button>
-				);
-			} ) }
-		</div>
-	);
-}
-
-function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
-	const baseClassName = 'block-editor-block-patterns-explorer__search';
 	return (
-		<div className={ baseClassName }>
+		<Stack
+			direction="column"
+			gap="lg"
+			className="block-editor-block-patterns-explorer__sidebar"
+		>
 			<SearchControl
 				onChange={ setSearchValue }
 				value={ searchValue }
 				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
-		</div>
-	);
-}
-
-function PatternExplorerSidebar( {
-	selectedCategory,
-	patternCategories,
-	onClickCategory,
-	searchValue,
-	setSearchValue,
-} ) {
-	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
-	return (
-		<div className={ baseClassName }>
-			<PatternsExplorerSearch
-				searchValue={ searchValue }
-				setSearchValue={ setSearchValue }
-			/>
-			{ ! searchValue && (
-				<PatternCategoriesList
-					selectedCategory={ selectedCategory }
-					patternCategories={ patternCategories }
-					onClickCategory={ onClickCategory }
-				/>
-			) }
-		</div>
+			<Tabs.List>
+				{ patternCategories.map( ( { name, label } ) => (
+					<Tabs.Tab key={ name } value={ name }>
+						{ label }
+					</Tabs.Tab>
+				) ) }
+			</Tabs.List>
+		</Stack>
 	);
 }
 

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

@@ -1,12 +1,11 @@
 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';
 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';
@@ -17,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,
@@ -143,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/hooks/use-insertion-point.js

@@ -67,7 +67,7 @@ function useInsertionPoint( {
 	const {
 		getSelectedBlock,
 		getClosestAllowedInsertionPoint,
-		isBlockInsertionPointVisible,
+		getBlockInsertionPoint,
 	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
@@ -201,7 +201,7 @@ function useInsertionPoint( {
 
 	const onToggleInsertionPoint = useCallback(
 		( item ) => {
-			if ( item && ! isBlockInsertionPointVisible() ) {
+			if ( item ) {
 				const allowedDestinationRootClientId =
 					getClosestAllowedInsertionPoint(
 						item.name,
@@ -218,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/menu.js

@@ -12,7 +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';
+import { useDispatch, useSelect } from '@wordpress/data';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
@@ -96,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,
@@ -122,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(
@@ -333,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/quick-inserter.js

@@ -103,20 +103,22 @@ export default function QuickInserter( {
 					selectBlockOnInsert={ selectBlockOnInsert }
 					isQuick
 				/>
+				{ setInserterIsOpened && (
+					<div className="block-editor-inserter__quick-inserter-expand">
+						<Button
+							className="block-editor-inserter__quick-inserter-expand-toggle"
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ onBrowseAll }
+							aria-label={ __(
+								'Browse all. This will open the main inserter panel in the editor toolbar.'
+							) }
+						>
+							{ __( 'Browse all' ) }
+						</Button>
+					</div>
+				) }
 			</div>
-
-			{ setInserterIsOpened && (
-				<Button
-					__next40pxDefaultSize
-					className="block-editor-inserter__quick-inserter-expand"
-					onClick={ onBrowseAll }
-					aria-label={ __(
-						'Browse all. This will open the main inserter panel in the editor toolbar.'
-					) }
-				>
-					{ __( 'Browse all' ) }
-				</Button>
-			) }
 		</div>
 	);
 }