@wordpress/block-editor 7.0.1-next.5df0cd52b7.0 → 7.0.4

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/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,19 +11,25 @@ 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';
+import { filterInserterItems } from './utils';
 
 function InserterSearchResults( {
 	filterValue,
 	onSelect,
 	listProps,
 	rootClientId,
+	isFullScreen,
 } ) {
 	const { blockTypes } = useSelect(
 		( select ) => {
 			const allItems = select( blockEditorStore ).getInserterItems(
 				rootClientId
 			);
-			const filteredItems = searchItems( allItems, filterValue );
+
+			const availableItems = filterInserterItems( allItems, {
+				allowReusable: true,
+			} );
+			const filteredItems = searchItems( availableItems, filterValue );
 
 			return { blockTypes: filteredItems };
 		},
@@ -46,6 +52,7 @@ function InserterSearchResults( {
 	return (
 		<BlockTypesList
 			name="Blocks"
+			initialNumToRender={ isFullScreen ? 10 : 3 }
 			{ ...{ items, onSelect: handleSelect, listProps } }
 		/>
 	);

package/src/components/inserter/style.native.scss

@@ -8,7 +8,11 @@
 	color: $blue-30;
 }
 
-.list {
+.inserter-menu__list-wrapper {
+	flex: 1;
+}
+
+.inserter-menu__list {
 	padding-bottom: 20;
 	padding-top: 8;
 }
@@ -51,13 +55,12 @@
 
 .inserter-tabs__wrapper {
 	overflow: hidden;
+	flex: 1;
 }
 
 .inserter-tabs__container {
 	height: 100%;
 	width: 100%;
-}
-
-.inserter-tabs__item {
-	position: absolute;
+	flex: 1;
+	flex-direction: row;
 }

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;
@@ -175,10 +178,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 +190,6 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__no-results {
 	padding: $grid-unit-40;
-	margin-top: $grid-unit-40 * 2;
 	text-align: center;
 }
 
@@ -325,7 +323,10 @@ $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);
 	}
 }

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

@@ -100,13 +100,7 @@ function InserterTabs( {
 		>
 			<Animated.View style={ containerStyle }>
 				{ tabs.map( ( { component: TabComponent }, index ) => (
-					<View
-						key={ `tab-${ index }` }
-						style={ [
-							styles[ 'inserter-tabs__item' ],
-							{ left: index * wrapperWidth },
-						] }
-					>
+					<View key={ `tab-${ index }` }>
 						<TabComponent
 							rootClientId={ rootClientId }
 							onSelect={ onSelect }

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

@@ -49,7 +49,8 @@ describe( 'BlockTypesTab component', () => {
 		selectMock.getInserterItems.mockReturnValue( items );
 
 		const blockItems = items.filter(
-			( { category } ) => category !== 'reusable'
+			( { id, category } ) =>
+				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
 		);
 		const component = shallow(
 			<BlockTypesTab

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

@@ -0,0 +1,35 @@
+const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+const ALLOWED_EMBED_VARIATIONS = [
+	'core/embed',
+	'core/embed/youtube',
+	'core/embed/twitter',
+	'core/embed/wordpress',
+	'core/embed/instagram',
+	'core/embed/vimeo',
+];
+
+export function blockAllowed( block, { onlyReusable, allowReusable } ) {
+	const { id, category } = block;
+	const isReusable = category === REUSABLE_BLOCKS_CATEGORY;
+
+	if ( onlyReusable ) {
+		return isReusable;
+	}
+
+	if ( isReusable ) {
+		return allowReusable;
+	}
+	// We don't want to show all possible embed variations
+	// as different blocks in the inserter. We'll only show a
+	// few popular ones.
+	return category !== 'embed' || ALLOWED_EMBED_VARIATIONS.includes( id );
+}
+
+export function filterInserterItems(
+	items,
+	{ onlyReusable = false, allowReusable = false } = {}
+) {
+	return items.filter( ( block ) =>
+		blockAllowed( block, { onlyReusable, allowReusable } )
+	);
+}

package/src/components/inserter-list-item/style.scss

@@ -18,7 +18,6 @@
 	background: transparent;
 	word-break: break-word;
 	border-radius: $radius-block-ui;
-	border: $border-width solid transparent;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
@@ -31,10 +30,13 @@
 
 	&:not(:disabled) {
 		&:hover {
-			border-color: var(--wp-admin-theme-color);
 			color: var(--wp-admin-theme-color) !important;
 		}
 
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+
 		&.is-active {
 			color: $white;
 			background: $gray-900;