@wordpress/block-editor 7.0.2 → 8.0.1

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

@@ -10,10 +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' ];
-
-const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+import { filterInserterItems } from './utils';
 
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const clipboardBlock = useClipboardBlock( rootClientId );
@@ -21,17 +18,8 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const { blockTypes } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
-
-			const allItems = getInserterItems( rootClientId );
-			const blockItems = allItems.filter(
-				( { id, category } ) =>
-					! NON_BLOCK_CATEGORIES.includes( category ) &&
-					// We don't want to show all possible embed variations
-					// as different blocks in the inserter. We'll only show a
-					// few popular ones.
-					( category !== 'embed' ||
-						( category === 'embed' &&
-							ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
+			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,8 +36,6 @@ function InserterMenu( {
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ showTabs, setShowTabs ] = useState( true );
-	// eslint-disable-next-line no-undef
-	const [ showSearchForm, setShowSearchForm ] = useState( true );
 	const [ tabIndex, setTabIndex ] = useState( 0 );
 
 	const isIOS = Platform.OS === 'ios';
@@ -71,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,
@@ -105,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;
 	}, [] );
 
@@ -178,6 +170,9 @@ function InserterMenu( {
 		setShowTabs,
 	] );
 
+	const showSearchForm = items.length > MIN_ITEMS_FOR_SEARCH;
+	const isFullScreen = ! isIOS && showSearchForm;
+
 	return (
 		<BottomSheet
 			isVisible={ true }
@@ -203,7 +198,7 @@ function InserterMenu( {
 			hasNavigation
 			setMinHeightToMaxHeight={ true }
 			contentStyle={ styles[ 'inserter-menu__list' ] }
-			isFullScreen={ ! isIOS && showSearchForm }
+			isFullScreen={ isFullScreen }
 			allowDragIndicator={ true }
 		>
 			<BottomSheetConsumer>
@@ -218,7 +213,7 @@ function InserterMenu( {
 								filterValue={ filterValue }
 								onSelect={ onSelectItem }
 								listProps={ listProps }
-								isFullScreen={ ! isIOS && showSearchForm }
+								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 (

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -8,19 +8,17 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTypesList from '../block-types-list';
 import { store as blockEditorStore } from '../../store';
-
-const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+import { filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 	const { items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
-			const reusableBlockItems = allItems.filter(
-				( { category } ) => category === REUSABLE_BLOCKS_CATEGORY
-			);
 
-			return { items: reusableBlockItems };
+			return {
+				items: filterInserterItems( allItems, { onlyReusable: true } ),
+			};
 		},
 		[ rootClientId ]
 	);

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

@@ -11,9 +11,7 @@ import BlockTypesList from '../block-types-list';
 import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-
-const NON_BLOCK_CATEGORIES = [ 'reusable' ];
-const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+import { filterInserterItems } from './utils';
 
 function InserterSearchResults( {
 	filterValue,
@@ -28,18 +26,10 @@ function InserterSearchResults( {
 				rootClientId
 			);
 
-			const blockItems = allItems.filter(
-				( { id, category } ) =>
-					! NON_BLOCK_CATEGORIES.includes( category ) &&
-					// We don't want to show all possible embed variations
-					// as different blocks in the inserter. We'll only show a
-					// few popular ones.
-					( category !== 'embed' ||
-						( category === 'embed' &&
-							ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
-			);
-
-			const filteredItems = searchItems( blockItems, filterValue );
+			const availableItems = filterInserterItems( allItems, {
+				allowReusable: true,
+			} );
+			const filteredItems = searchItems( availableItems, filterValue );
 
 			return { blockTypes: filteredItems };
 		},

package/src/components/inserter/style.scss

@@ -25,19 +25,19 @@ $block-inserter-tabs-height: 44px;
 		border: none;
 
 		.block-editor-inserter__quick-inserter > * {
-			border-left: 1px solid $gray-400;
-			border-right: 1px solid $gray-400;
+			border-left: $border-width solid $gray-400;
+			border-right: $border-width solid $gray-400;
 
 			&:first-child {
-				border-top: 1px solid $gray-400;
+				border-top: $border-width solid $gray-400;
 			}
 
 			&:last-child {
-				border-bottom: 1px solid $gray-400;
+				border-bottom: $border-width solid $gray-400;
 			}
 
 			&.components-button {
-				border: 1px solid $gray-900;
+				border: $border-width solid $gray-900;
 			}
 		}
 	}
@@ -100,7 +100,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	background: $white;
-	padding: $grid-unit-20;
+	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".block-editor-inserter__search");
@@ -108,17 +108,20 @@ $block-inserter-tabs-height: 44px;
 	.components-search-control__icon {
 		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
 	}
+
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
 }
 
 .block-editor-inserter__tabs {
 	display: flex;
 	flex-direction: column;
-	margin-top: -$grid-unit-10;
 
 	.components-tab-panel__tabs {
 		position: sticky;
 		// Computed based off the search input height and paddings
-		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60;
+		top: $grid-unit-20 + $grid-unit-60;
 		background: $white;
 		z-index: z-index(".block-editor-inserter__tabs .components-tab-panel__tabs");
 		border-bottom: $border-width solid $gray-300;
@@ -163,7 +166,8 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
-	line-height: 1.2;
+	height: 36px;
+	line-height: 36px;
 }
 
 .block-editor-inserter__panel-dropdown select {
@@ -175,10 +179,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative;
 }
 
-.block-editor-inserter__popover .block-editor-block-types-list {
-	margin: -8px;
-}
-
 .block-editor-inserter__reusable-blocks-panel {
 	position: relative;
 	text-align: right;
@@ -191,7 +191,6 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__no-results {
 	padding: $grid-unit-40;
-	margin-top: $grid-unit-40 * 2;
 	text-align: center;
 }
 
@@ -298,6 +297,12 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		grid-gap: $grid-unit-10;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
 	}
 }
 
@@ -325,7 +330,66 @@ $block-inserter-tabs-height: 44px;
 		color: $gray-400;
 	}
 
-	&:focus:not(:disabled) {
-		box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
+	// Specificity is needed for the border color.
+	&.components-button:focus:not(:disabled) {
+		box-shadow: none;
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-block-patterns-explorer {
+	&__sidebar {
+		position: absolute;
+		top: $header-height;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+		overflow-x: visible;
+		overflow-y: scroll;
+
+		&__categories-list__item {
+			display: block;
+			width: 100%;
+			height: 48px;
+			text-align: left;
+		}
+	}
+
+	&__search {
+		margin-bottom: $grid-unit-40;
+	}
+
+	&__search-results-count {
+		padding-bottom: $grid-unit-40;
+	}
+
+	&__list {
+		margin-left: $sidebar-width - $grid-unit-40;
+	}
+
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-gap: $grid-unit-40;
+		grid-template-columns: repeat(1, 1fr);
+
+		@include break-xlarge() {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@include break-huge() {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		.block-editor-block-patterns-list__list-item {
+			min-height: 240px;
+		}
+
+		.block-editor-block-preview__container {
+			height: inherit;
+			min-height: 100px;
+			max-height: 800px;
+		}
 	}
 }

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

@@ -24,7 +24,7 @@ const selectMock = {
 	canInsertBlockType: jest.fn(),
 	getBlockType: jest.fn(),
 	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( {} ) ),
+	getSettings: jest.fn( () => ( { impressions: {} } ) ),
 };
 
 describe( 'BlockTypesTab component', () => {

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

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import fixtures from './index.js';
+
+export * from './index';
+
+export default fixtures.map( ( filteredItems ) => ( {
+	...filteredItems,
+	// Set `isNew` property expected from block type impressions
+	isNew: false,
+} ) );