@wordpress/block-editor 7.0.2 → 8.0.1

package/src/components/index.js

@@ -45,13 +45,16 @@ export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
+export { default as __experimentalTextDecorationControl } from './text-decoration-control';
+export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
-export { default as __experimentalImageSizeControl } from './image-size-control';
 export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
+	default as __experimentalImageEditor,
+	ImageEditingProvider as __experimentalImageEditingProvider,
+} from './image-editor';
+export { default as __experimentalImageSizeControl } from './image-size-control';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,
 	InspectorAdvancedControls,
@@ -66,8 +69,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot';
-export { default as __experimentalListViewEditor } from './list-view/editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

package/src/components/index.native.js

@@ -18,10 +18,7 @@ export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
-export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,
 	InspectorAdvancedControls,

package/src/components/inner-blocks/button-block-appender.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -9,9 +14,13 @@ export const ButtonBlockAppender = ( {
 	showSeparator,
 	isFloating,
 	onAddBlock,
+	isToggle,
 } ) => {
 	return (
 		<BaseButtonBlockAppender
+			className={ classnames( {
+				'block-list-appender__toggle': isToggle,
+			} ) }
 			rootClientId={ clientId }
 			showSeparator={ showSeparator }
 			isFloating={ isFloating }

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

@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	getBlockType,
 	store as blocksStore,
-	withBlockContentContext,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
 } from '@wordpress/blocks';
 
 /**
@@ -42,6 +42,8 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		template,
 		templateLock,
 		wrapperRef,
@@ -57,6 +59,8 @@ function UncontrolledInnerBlocks( props ) {
 	useNestedSettingsUpdate(
 		clientId,
 		allowedBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		templateLock,
 		captureToolbars,
 		orientation,
@@ -206,13 +210,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	};
 }
 
+useInnerBlocksProps.save = getInnerBlocksProps;
+
 // Expose default appender placeholders as components.
 ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-ForwardedInnerBlocks.Content = withBlockContentContext(
-	( { BlockContent } ) => <BlockContent />
-);
+ForwardedInnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

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

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import {
+	getBlockType,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
+} from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
 
 /**
@@ -189,9 +192,9 @@ const InnerBlocks = ( props ) => {
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => (
-	<BlockContent />
-) );
+useInnerBlocksProps.save = getInnerBlocksProps;
+
+InnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -18,21 +18,26 @@ import { getLayoutType } from '../../layouts';
  * the block-editor store, then the store is updated with the new settings which
  * came from props.
  *
- * @param {string}   clientId        The client ID of the block to update.
- * @param {string[]} allowedBlocks   An array of block names which are permitted
- *                                   in inner blocks.
- * @param {string}   [templateLock]  The template lock specified for the inner
- *                                   blocks component. (e.g. "all")
- * @param {boolean}  captureToolbars Whether or children toolbars should be shown
- *                                   in the inner blocks component rather than on
- *                                   the child block.
- * @param {string}   orientation     The direction in which the block
- *                                   should face.
- * @param {Object}   layout          The layout object for the block container.
+ * @param {string}            clientId                   The client ID of the block to update.
+ * @param {string[]}          allowedBlocks              An array of block names which are permitted
+ *                                                       in inner blocks.
+ * @param {?Array}            __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
+ * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the
+ *                                                       appender.
+ * @param {string}            [templateLock]             The template lock specified for the inner
+ *                                                       blocks component. (e.g. "all")
+ * @param {boolean}           captureToolbars            Whether or children toolbars should be shown
+ *                                                       in the inner blocks component rather than on
+ *                                                       the child block.
+ * @param {string}            orientation                The direction in which the block
+ *                                                       should face.
+ * @param {Object}            layout                     The layout object for the block container.
  */
 export default function useNestedSettingsUpdate(
 	clientId,
 	allowedBlocks,
+	__experimentalDefaultBlock,
+	__experimentalDirectInsert,
 	templateLock,
 	captureToolbars,
 	orientation,
@@ -83,6 +88,14 @@ export default function useNestedSettingsUpdate(
 			newSettings.orientation = layoutType.getOrientation( layout );
 		}
 
+		if ( __experimentalDefaultBlock !== undefined ) {
+			newSettings.__experimentalDefaultBlock = __experimentalDefaultBlock;
+		}
+
+		if ( __experimentalDirectInsert !== undefined ) {
+			newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
+		}
+
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
 			updateBlockListSettings( clientId, newSettings );
 		}
@@ -90,6 +103,8 @@ export default function useNestedSettingsUpdate(
 		clientId,
 		blockListSettings,
 		_allowedBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		templateLock,
 		parentLock,
 		captureToolbars,

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PatternExplorerSidebar from './sidebar';
+import PatternList from './patterns-list';
+
+function PatternsExplorer( { initialCategory, patternCategories } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
+	return (
+		<div className="block-editor-block-patterns-explorer">
+			<PatternExplorerSidebar
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+				onClickCategory={ setSelectedCategory }
+				filterValue={ filterValue }
+				setFilterValue={ setFilterValue }
+			/>
+			<PatternList
+				filterValue={ filterValue }
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+			/>
+		</div>
+	);
+}
+
+function PatternsExplorerModal( { onModalClose, ...restProps } ) {
+	return (
+		<Modal
+			title={ __( 'Patterns' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onModalClose }
+			isFullScreen
+		>
+			<PatternsExplorer { ...restProps } />
+		</Modal>
+	);
+}
+
+export default PatternsExplorerModal;

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

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useEffect } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
+import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockPatternsList from '../../block-patterns-list';
+import InserterNoResults from '../no-results';
+import useInsertionPoint from '../hooks/use-insertion-point';
+import usePatternsState from '../hooks/use-patterns-state';
+import InserterListbox from '../../inserter-listbox';
+import { searchItems } from '../search-items';
+
+const INITIAL_INSERTER_RESULTS = 2;
+
+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. %s: block pattern search query */
+				_n(
+					'%1$d pattern found for "%2$s"',
+					'%1$d patterns found for "%2$s"',
+					filteredBlockPatternsLength
+				),
+				filteredBlockPatternsLength,
+				filterValue
+			) }
+		</Heading>
+	);
+}
+
+function PatternList( { filterValue, selectedCategory, patternCategories } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		shouldFocusBlock: true,
+	} );
+	const [ allPatterns, , onSelectBlockPattern ] = usePatternsState(
+		onInsertBlocks,
+		destinationRootClientId
+	);
+	const registeredPatternCategories = useMemo(
+		() =>
+			patternCategories.map(
+				( patternCategory ) => patternCategory.name
+			),
+		[ patternCategories ]
+	);
+
+	const filteredBlockPatterns = useMemo( () => {
+		if ( ! filterValue ) {
+			return allPatterns.filter( ( pattern ) =>
+				selectedCategory === 'uncategorized'
+					? ! pattern.categories?.length ||
+					  pattern.categories.every(
+							( category ) =>
+								! registeredPatternCategories.includes(
+									category
+								)
+					  )
+					: pattern.categories?.includes( selectedCategory )
+			);
+		}
+		return searchItems( allPatterns, filterValue );
+	}, [ filterValue, selectedCategory, allPatterns ] );
+
+	// Announce search results on change.
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		const count = filteredBlockPatterns.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ filterValue, debouncedSpeak ] );
+
+	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
+		step: INITIAL_INSERTER_RESULTS,
+	} );
+
+	const hasItems = !! filteredBlockPatterns?.length;
+	return (
+		<div className="block-editor-block-patterns-explorer__list">
+			{ hasItems && (
+				<PatternsListHeader
+					filterValue={ filterValue }
+					filteredBlockPatternsLength={ filteredBlockPatterns.length }
+				/>
+			) }
+			<InserterListbox>
+				{ ! hasItems && <InserterNoResults /> }
+				{ hasItems && (
+					<BlockPatternsList
+						shownPatterns={ currentShownPatterns }
+						blockPatterns={ filteredBlockPatterns }
+						onClickPattern={ onSelectBlockPattern }
+						isDraggable={ false }
+					/>
+				) }
+			</InserterListbox>
+		</div>
+	);
+}
+
+export default PatternList;

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

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, SearchControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function PatternCategoriesList( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ `${ baseClassName }__categories-list` }>
+			{ patternCategories.map( ( { name, label } ) => {
+				return (
+					<Button
+						key={ name }
+						label={ label }
+						className={ `${ baseClassName }__categories-list__item` }
+						isPressed={ selectedCategory === name }
+						onClick={ () => {
+							onClickCategory( name );
+						} }
+					>
+						{ label }
+					</Button>
+				);
+			} ) }
+		</div>
+	);
+}
+
+function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__search';
+	return (
+		<div className={ baseClassName }>
+			<SearchControl
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search for patterns' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+		</div>
+	);
+}
+
+function PatternExplorerSidebar( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+	filterValue,
+	setFilterValue,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ baseClassName }>
+			<PatternsExplorerSearch
+				filterValue={ filterValue }
+				setFilterValue={ setFilterValue }
+			/>
+			{ ! filterValue && (
+				<PatternCategoriesList
+					selectedCategory={ selectedCategory }
+					patternCategories={ patternCategories }
+					onClickCategory={ onClickCategory }
+				/>
+			) }
+		</div>
+	);
+}
+
+export default PatternExplorerSidebar;

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

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { fromPairs } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, useEffect } from '@wordpress/element';
+import { useMemo, useState, useCallback } from '@wordpress/element';
 import { _x } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -16,59 +11,30 @@ import { useAsyncList } from '@wordpress/compose';
 import PatternInserterPanel from './pattern-panel';
 import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
+import PatternsExplorerModal from './block-patterns-explorer/explorer';
 
 function BlockPatternsCategory( {
 	rootClientId,
 	onInsert,
 	selectedCategory,
-	onClickCategory,
+	populatedCategories,
 } ) {
-	const [ allPatterns, allCategories, onClick ] = usePatternsState(
+	const [ allPatterns, , onClick ] = usePatternsState(
 		onInsert,
 		rootClientId
 	);
 
-	// Remove any empty categories
-	const populatedCategories = useMemo(
-		() =>
-			allCategories.filter( ( category ) =>
-				allPatterns.some( ( pattern ) =>
-					pattern.categories?.includes( category.name )
-				)
-			),
-		[ allPatterns, allCategories ]
-	);
-
-	const patternCategory = selectedCategory
-		? selectedCategory
-		: populatedCategories[ 0 ];
-
-	useEffect( () => {
-		if (
-			allPatterns.some(
-				( pattern ) => getPatternIndex( pattern ) === Infinity
-			) &&
-			! populatedCategories.find(
-				( category ) => category.name === 'uncategorized'
-			)
-		) {
-			populatedCategories.push( {
-				name: 'uncategorized',
-				label: _x( 'Uncategorized' ),
-			} );
-		}
-	}, [ populatedCategories, allPatterns ] );
-
 	const getPatternIndex = useCallback(
 		( pattern ) => {
-			if ( ! pattern.categories || ! pattern.categories.length ) {
+			if ( ! pattern.categories?.length ) {
 				return Infinity;
 			}
-			const indexedCategories = fromPairs(
-				populatedCategories.map( ( { name }, index ) => [
-					name,
-					index,
-				] )
+			const indexedCategories = populatedCategories.reduce(
+				( accumulator, { name }, index ) => {
+					accumulator[ name ] = index;
+					return accumulator;
+				},
+				{}
 			);
 			return Math.min(
 				...pattern.categories.map( ( cat ) =>
@@ -84,12 +50,11 @@ function BlockPatternsCategory( {
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) =>
-				patternCategory.name === 'uncategorized'
+				selectedCategory.name === 'uncategorized'
 					? getPatternIndex( pattern ) === Infinity
-					: pattern.categories &&
-					  pattern.categories.includes( patternCategory.name )
+					: pattern.categories?.includes( selectedCategory.name )
 			),
-		[ allPatterns, patternCategory ]
+		[ allPatterns, selectedCategory ]
 	);
 
 	// Ordering the patterns is important for the async rendering.
@@ -101,25 +66,21 @@ function BlockPatternsCategory( {
 
 	const currentShownPatterns = useAsyncList( orderedPatterns );
 
+	if ( ! currentCategoryPatterns.length ) {
+		return null;
+	}
+
 	return (
-		<>
-			{ !! currentCategoryPatterns.length && (
-				<PatternInserterPanel
-					selectedCategory={ patternCategory }
-					patternCategories={ populatedCategories }
-					onClickCategory={ onClickCategory }
-				>
-					<BlockPatternList
-						shownPatterns={ currentShownPatterns }
-						blockPatterns={ currentCategoryPatterns }
-						onClickPattern={ onClick }
-						label={ patternCategory.label }
-						orientation="vertical"
-						isDraggable
-					/>
-				</PatternInserterPanel>
-			) }
-		</>
+		<div className="block-editor-inserter__panel-content">
+			<BlockPatternList
+				shownPatterns={ currentShownPatterns }
+				blockPatterns={ currentCategoryPatterns }
+				onClickPattern={ onClick }
+				label={ selectedCategory.label }
+				orientation="vertical"
+				isDraggable
+			/>
+		</div>
 	);
 }
 
@@ -129,13 +90,86 @@ function BlockPatternsTabs( {
 	onClickCategory,
 	selectedCategory,
 } ) {
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+	const [ allPatterns, allCategories ] = usePatternsState();
+
+	const hasRegisteredCategory = useCallback(
+		( pattern ) => {
+			if ( ! pattern.categories || ! pattern.categories.length ) {
+				return false;
+			}
+
+			return pattern.categories.some( ( cat ) =>
+				allCategories.some( ( category ) => category.name === cat )
+			);
+		},
+		[ allCategories ]
+	);
+
+	// Remove any empty categories
+	const populatedCategories = useMemo( () => {
+		const categories = allCategories
+			.filter( ( category ) =>
+				allPatterns.some( ( pattern ) =>
+					pattern.categories?.includes( category.name )
+				)
+			)
+			.sort( ( { name: currentName }, { name: nextName } ) => {
+				if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
+					return 0;
+				}
+				return currentName === 'featured' ? -1 : 1;
+			} );
+
+		if (
+			allPatterns.some(
+				( pattern ) => ! hasRegisteredCategory( pattern )
+			) &&
+			! categories.find(
+				( category ) => category.name === 'uncategorized'
+			)
+		) {
+			categories.push( {
+				name: 'uncategorized',
+				label: _x( 'Uncategorized' ),
+			} );
+		}
+
+		return categories;
+	}, [ allPatterns, allCategories ] );
+
+	const patternCategory = selectedCategory
+		? selectedCategory
+		: populatedCategories[ 0 ];
+
 	return (
-		<BlockPatternsCategory
-			rootClientId={ rootClientId }
-			selectedCategory={ selectedCategory }
-			onInsert={ onInsert }
-			onClickCategory={ onClickCategory }
-		/>
+		<>
+			{ ! showPatternsExplorer && (
+				<>
+					<PatternInserterPanel
+						selectedCategory={ patternCategory }
+						patternCategories={ populatedCategories }
+						onClickCategory={ onClickCategory }
+						openPatternExplorer={ () =>
+							setShowPatternsExplorer( true )
+						}
+					/>
+					<BlockPatternsCategory
+						rootClientId={ rootClientId }
+						onInsert={ onInsert }
+						selectedCategory={ patternCategory }
+						populatedCategories={ populatedCategories }
+					/>
+				</>
+			) }
+			{ showPatternsExplorer && (
+				<PatternsExplorerModal
+					initialCategory={ patternCategory }
+					patternCategories={ populatedCategories }
+					onModalClose={ () => setShowPatternsExplorer( false ) }
+				/>
+			) }
+		</>
 	);
 }