@wordpress/block-editor 7.0.1 → 8.0.0

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 ) }
+				/>
+			) }
+		</>
 	);
 }
 

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

@@ -10,8 +10,7 @@ import BlockTypesList from '../block-types-list';
 import useClipboardBlock from './hooks/use-clipboard-block';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-
-const NON_BLOCK_CATEGORIES = [ 'reusable' ];
+import { filterInserterItems } from './utils';
 
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const clipboardBlock = useClipboardBlock( rootClientId );
@@ -19,10 +18,8 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const { blockTypes } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
-
-			const allItems = getInserterItems( rootClientId );
-			const blockItems = allItems.filter(
-				( { category } ) => ! NON_BLOCK_CATEGORIES.includes( category )
+			const blockItems = filterInserterItems(
+				getInserterItems( rootClientId )
 			);
 
 			return {

package/src/components/inserter/hooks/use-block-type-impressions.native.js

@@ -10,29 +10,22 @@ import { setBlockTypeImpressions } from '@wordpress/react-native-bridge';
 import { store as blockEditorStore } from '../../../store';
 
 function useBlockTypeImpressions( blockTypes ) {
-	const { blockTypeImpressions, enableEditorOnboarding } = useSelect(
-		( select ) => {
-			const { getSettings: getBlockEditorSettings } = select(
-				blockEditorStore
-			);
-			const { editorOnboarding, impressions } = getBlockEditorSettings();
-
-			return {
-				blockTypeImpressions: impressions,
-				enableEditorOnboarding: editorOnboarding,
-			};
-		},
-		[]
-	);
+	const { blockTypeImpressions } = useSelect( ( select ) => {
+		const { getSettings: getBlockEditorSettings } = select(
+			blockEditorStore
+		);
+		const { impressions } = getBlockEditorSettings();
+
+		return {
+			blockTypeImpressions: impressions,
+		};
+	}, [] );
 	const { updateSettings } = useDispatch( blockEditorStore );
 
-	const items = enableEditorOnboarding
-		? blockTypes.map( ( blockType ) => ( {
-				...blockType,
-				isNew: blockTypeImpressions[ blockType.name ] > 0,
-		  } ) )
-		: blockTypes;
-
+	const items = blockTypes.map( ( blockType ) => ( {
+		...blockType,
+		isNew: blockTypeImpressions[ blockType.name ] > 0,
+	} ) );
 	const trackBlockTypeSelected = ( { name } ) => {
 		if ( blockTypeImpressions[ name ] > 0 ) {
 			const updatedBlockTypeImpressions = {

package/src/components/inserter/hooks/use-clipboard-block.native.js

@@ -21,12 +21,13 @@ export default function useClipboardBlock( destinationRootClientId ) {
 		clipboardBlock?.name,
 		destinationRootClientId
 	);
+	const blockType = getBlockType( clipboardBlock?.name );
 
-	if ( ! canAddClipboardBlock ) {
+	if ( ! canAddClipboardBlock || ! blockType ) {
 		return undefined;
 	}
 
-	const { icon, name } = getBlockType( clipboardBlock.name );
+	const { name, icon } = blockType;
 	const { attributes: initialAttributes, innerBlocks } = clipboardBlock;
 
 	return {

package/src/components/inserter/index.js

@@ -102,6 +102,7 @@ class Inserter extends Component {
 			disabled,
 			blockTitle,
 			hasSingleBlockType,
+			directInsertBlock,
 			toggleProps,
 			hasItems,
 			renderToggle = defaultRenderToggle,
@@ -113,6 +114,7 @@ class Inserter extends Component {
 			disabled: disabled || ! hasItems,
 			blockTitle,
 			hasSingleBlockType,
+			directInsertBlock,
 			toggleProps,
 		} );
 	}
@@ -168,12 +170,13 @@ class Inserter extends Component {
 		const {
 			position,
 			hasSingleBlockType,
+			directInsertBlock,
 			insertOnlyAllowedBlock,
 			__experimentalIsQuick: isQuick,
 			onSelectOrClose,
 		} = this.props;
 
-		if ( hasSingleBlockType ) {
+		if ( hasSingleBlockType || directInsertBlock?.length ) {
 			return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
 		}
 
@@ -202,6 +205,7 @@ export default compose( [
 			getBlockRootClientId,
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
+			__experimentalGetDirectInsertBlock,
 		} = select( blockEditorStore );
 		const { getBlockVariations } = select( blocksStore );
 
@@ -210,6 +214,10 @@ export default compose( [
 
 		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
 
+		const directInsertBlock = __experimentalGetDirectInsertBlock(
+			rootClientId
+		);
+
 		const hasSingleBlockType =
 			size( allowedBlocks ) === 1 &&
 			size(
@@ -226,6 +234,7 @@ export default compose( [
 			hasSingleBlockType,
 			blockTitle: allowedBlockType ? allowedBlockType.title : '',
 			allowedBlockType,
+			directInsertBlock,
 			rootClientId,
 		};
 	} ),
@@ -238,10 +247,11 @@ export default compose( [
 					isAppender,
 					hasSingleBlockType,
 					allowedBlockType,
+					directInsertBlock,
 					onSelectOrClose,
 				} = ownProps;
 
-				if ( ! hasSingleBlockType ) {
+				if ( ! hasSingleBlockType && ! directInsertBlock?.length ) {
 					return;
 				}
 
@@ -274,7 +284,9 @@ export default compose( [
 
 				const { insertBlock } = dispatch( blockEditorStore );
 
-				const blockToInsert = createBlock( allowedBlockType.name );
+				const blockToInsert = directInsertBlock?.length
+					? createBlock( ...directInsertBlock )
+					: createBlock( allowedBlockType.name );
 
 				insertBlock( blockToInsert, getInsertionIndex(), rootClientId );
 

package/src/components/inserter/index.native.js

@@ -32,19 +32,9 @@ import { store as blockEditorStore } from '../../store';
 
 const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
-const defaultRenderToggle = ( {
-	displayEditorOnboardingTooltip,
-	onToggle,
-	disabled,
-	style,
-	onLongPress,
-} ) => (
+const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
-		title={
-			displayEditorOnboardingTooltip
-				? __( 'Tap to add content' )
-				: __( 'Add block' )
-		}
+		title={ __( 'Add block' ) }
 		icon={
 			<Icon
 				icon={ plusCircleFilled }
@@ -52,8 +42,6 @@ const defaultRenderToggle = ( {
 				color={ style.color }
 			/>
 		}
-		showTooltip={ displayEditorOnboardingTooltip }
-		tooltipPosition="top right"
 		onClick={ onToggle }
 		extraProps={ {
 			hint: __( 'Double tap to add a block' ),
@@ -227,7 +215,6 @@ export class Inserter extends Component {
 	 */
 	renderInserterToggle( { onToggle, isOpen } ) {
 		const {
-			displayEditorOnboardingTooltip,
 			disabled,
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
@@ -274,7 +261,6 @@ export class Inserter extends Component {
 		return (
 			<>
 				{ renderToggle( {
-					displayEditorOnboardingTooltip,
 					onToggle: onPress,
 					isOpen,
 					disabled,
@@ -410,9 +396,6 @@ export default compose( [
 
 		return {
 			blockTypeImpressions: getBlockEditorSettings().impressions,
-			displayEditorOnboardingTooltip:
-				getBlockEditorSettings().editorOnboarding &&
-				getBlockEditorSettings().firstGutenbergEditorSession,
 			destinationRootClientId,
 			insertionIndexDefault: getDefaultInsertionIndex(),
 			insertionIndexBefore,

package/src/components/inserter/library.js

@@ -21,6 +21,7 @@ function InserterLibrary( {
 	showInserterHelpPanel,
 	showMostUsedBlocks = false,
 	__experimentalInsertionIndex,
+	__experimentalFilterValue,
 	onSelect = noop,
 	shouldFocusBlock = false,
 } ) {
@@ -44,6 +45,7 @@ function InserterLibrary( {
 			showInserterHelpPanel={ showInserterHelpPanel }
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
+			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
 		/>
 	);

package/src/components/inserter/menu.js

@@ -27,9 +27,12 @@ function InserterMenu( {
 	onSelect,
 	showInserterHelpPanel,
 	showMostUsedBlocks,
+	__experimentalFilterValue = '',
 	shouldFocusBlock = true,
 } ) {
-	const [ filterValue, setFilterValue ] = useState( '' );
+	const [ filterValue, setFilterValue ] = useState(
+		__experimentalFilterValue
+	);
 	const [ hoveredItem, setHoveredItem ] = useState( null );
 	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
 		null

package/src/components/inserter/menu.native.js

@@ -22,10 +22,9 @@ import InserterSearchResults from './search-results';
 import { store as blockEditorStore } from '../../store';
 import InserterTabs from './tabs';
 import styles from './style.scss';
+import { filterInserterItems } from './utils';
 
 const MIN_ITEMS_FOR_SEARCH = 2;
-const REUSABLE_BLOCKS_CATEGORY = 'reusable';
-
 function InserterMenu( {
 	onSelect,
 	onDismiss,
@@ -37,10 +36,10 @@ function InserterMenu( {
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ showTabs, setShowTabs ] = useState( true );
-	// eslint-disable-next-line no-undef
-	const [ showSearchForm, setShowSearchForm ] = useState( __DEV__ );
 	const [ tabIndex, setTabIndex ] = useState( 0 );
 
+	const isIOS = Platform.OS === 'ios';
+
 	const {
 		showInsertionPoint,
 		hideInsertionPoint,
@@ -69,9 +68,9 @@ function InserterMenu( {
 			}
 
 			const allItems = getInserterItems( targetRootClientId );
-			const reusableBlockItems = allItems.filter(
-				( { category } ) => category === REUSABLE_BLOCKS_CATEGORY
-			);
+			const reusableBlockItems = filterInserterItems( allItems, {
+				onlyReusable: true,
+			} );
 
 			return {
 				items: allItems,
@@ -103,11 +102,6 @@ function InserterMenu( {
 		}
 		showInsertionPoint( destinationRootClientId, insertionIndex );
 
-		// Show search form if there are enough items to filter.
-		if ( items.length < MIN_ITEMS_FOR_SEARCH ) {
-			setShowSearchForm( false );
-		}
-
 		return hideInsertionPoint;
 	}, [] );
 
@@ -176,6 +170,9 @@ function InserterMenu( {
 		setShowTabs,
 	] );
 
+	const showSearchForm = items.length > MIN_ITEMS_FOR_SEARCH;
+	const isFullScreen = ! isIOS && showSearchForm;
+
 	return (
 		<BottomSheet
 			isVisible={ true }
@@ -199,18 +196,24 @@ function InserterMenu( {
 				</>
 			}
 			hasNavigation
-			setMinHeightToMaxHeight={ showSearchForm }
-			contentStyle={ styles.list }
+			setMinHeightToMaxHeight={ true }
+			contentStyle={ styles[ 'inserter-menu__list' ] }
+			isFullScreen={ isFullScreen }
+			allowDragIndicator={ true }
 		>
 			<BottomSheetConsumer>
 				{ ( { listProps } ) => (
-					<TouchableHighlight accessible={ false }>
+					<TouchableHighlight
+						accessible={ false }
+						style={ styles[ 'inserter-menu__list-wrapper' ] }
+					>
 						{ ! showTabs || filterValue ? (
 							<InserterSearchResults
 								rootClientId={ rootClientId }
 								filterValue={ filterValue }
 								onSelect={ onSelectItem }
 								listProps={ listProps }
+								isFullScreen={ isFullScreen }
 							/>
 						) : (
 							<InserterTabs

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

@@ -6,15 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 function PatternInserterPanel( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	children,
+	openPatternExplorer,
 } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
 	const categoryOptions = () => {
 		const options = [];
 
@@ -36,12 +38,10 @@ function PatternInserterPanel( {
 		);
 	};
 
-	const getPanelHeaderClassName = () => {
-		return classnames(
-			'block-editor-inserter__panel-header',
-			'block-editor-inserter__panel-header-patterns'
-		);
-	};
+	const className = classnames(
+		'block-editor-inserter__panel-header',
+		'block-editor-inserter__panel-header-patterns'
+	);
 
 	// In iOS-based mobile devices, the onBlur will fire when selecting an option
 	// from a Select element. To prevent closing the useDialog on iOS devices, we
@@ -54,8 +54,13 @@ function PatternInserterPanel( {
 	};
 
 	return (
-		<>
-			<div className={ getPanelHeaderClassName() }>
+		<Flex
+			justify="space-between"
+			align="start"
+			gap="4"
+			className={ className }
+		>
+			<FlexItem isBlock>
 				<SelectControl
 					className="block-editor-inserter__panel-dropdown"
 					label={ __( 'Filter patterns' ) }
@@ -65,11 +70,23 @@ function PatternInserterPanel( {
 					onBlur={ onBlur }
 					options={ categoryOptions() }
 				/>
-			</div>
-			<div className="block-editor-inserter__panel-content">
-				{ children }
-			</div>
-		</>
+			</FlexItem>
+			{ ! isMobile && (
+				<FlexItem>
+					<Button
+						variant="secondary"
+						className="block-editor-inserter__patterns-explorer-expand"
+						label={ __( 'Explore all patterns' ) }
+						onClick={ () => openPatternExplorer() }
+					>
+						{ _x(
+							'Explore',
+							'Label for showing all block patterns'
+						) }
+					</Button>
+				</FlexItem>
+			) }
+		</Flex>
 	);
 }
 

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

@@ -22,7 +22,7 @@ function InserterPreviewPanel( { item } ) {
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
-				{ isReusable || hoveredItemBlockType.example ? (
+				{ isReusable || hoveredItemBlockType?.example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							__experimentalPadding={ 16 }

package/src/components/inserter/quick-inserter.js

@@ -75,7 +75,7 @@ export default function QuickInserter( {
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected
 	const onBrowseAll = () => {
-		setInserterIsOpened( { rootClientId, insertionIndex } );
+		setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
 	};
 
 	return (