Add initial quick inserter (#22789)

* Add initial quick inserter * Smaller quick inserter * Default to 6 blocks * Add the browse all button * Show one inserter at a time * Fix small visual glitches * Fix border radius and focus. * Fix patterns insertion * Inserter close button * Announce search results * Fix search close button * Label browse all button * Default to bottom for the position of the quick inserter * Fix inserter padding after rebase * changes per review * Fix unit tests * Fix end2end tests * Block types tab tests * Fix end2end tests Co-authored-by: jasmussen <joen@automattic.com>
WordPress · Jun 24, 2020 · 1bec21f · 1bec21f
1 parent 9d27f7b
commit 1bec21f
Show file tree

Hide file tree

Showing 31 changed files with 587 additions and 165 deletions.
diff --git a/docs/designers-developers/developers/data/data-core-edit-post.md b/docs/designers-developers/developers/data/data-core-edit-post.md
@@ -177,6 +177,18 @@ _Returns_
 
 -   `boolean`: Is active.
 
+<a name="isInserterOpened" href="#isInserterOpened">#</a> **isInserterOpened**
+
+Returns true if the inserter is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether the inserter is opened.
+
 <a name="isMetaBoxLocationActive" href="#isMetaBoxLocationActive">#</a> **isMetaBoxLocationActive**
 
 Returns true if there is an active meta box in the given location, or false
@@ -377,6 +389,18 @@ _Returns_
 
 -   `Object`: Action object.
 
+<a name="setIsInserterOpened" href="#setIsInserterOpened">#</a> **setIsInserterOpened**
+
+Returns an action object used to open/close the inserter.
+
+_Parameters_
+
+-   _value_ `boolean`: A boolean representing whether the inserter should be opened or closed.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="showBlockTypes" href="#showBlockTypes">#</a> **showBlockTypes**
 
 Returns an action object used in signalling that block types by the given

diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
@@ -184,6 +184,7 @@ function BlockPopover( {
 					<Inserter
 						clientId={ clientId }
 						rootClientId={ rootClientId }
+						__experimentalIsQuick
 					/>
 				</div>
 			) }
@@ -206,9 +207,10 @@ function BlockPopover( {
 			{ showEmptyBlockSideInserter && (
 				<div className="block-editor-block-list__empty-block-inserter">
 					<Inserter
-						position="top right"
+						position="bottom right"
 						rootClientId={ rootClientId }
 						clientId={ clientId }
+						__experimentalIsQuick
 					/>
 				</div>
 			) }

diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -187,6 +187,7 @@ export default function InsertionPoint( {
 							<Inserter
 								position="bottom center"
 								clientId={ inserterClientId }
+								__experimentalIsQuick
 							/>
 						</div>
 					</div>

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import BlockPreview from '../block-preview';
+
+function BlockPattern( { pattern, onClick } ) {
+	const { content, viewportWidth } = pattern;
+	const blocks = useMemo( () => parse( content ), [ content ] );
+
+	return (
+		<div
+			className="block-editor-block-patterns-list__item"
+			role="button"
+			onClick={ () => onClick( pattern, blocks ) }
+			onKeyDown={ ( event ) => {
+				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+					onClick( pattern, blocks );
+				}
+			} }
+			tabIndex={ 0 }
+			aria-label={ pattern.title }
+		>
+			<BlockPreview blocks={ blocks } viewportWidth={ viewportWidth } />
+			<div className="block-editor-block-patterns-list__item-title">
+				{ pattern.title }
+			</div>
+		</div>
+	);
+}
+
+function BlockPatternPlaceholder() {
+	return (
+		<div className="block-editor-block-patterns-list__item is-placeholder" />
+	);
+}
+
+function BlockPatternList( { blockPatterns, shownPatterns, onClickPattern } ) {
+	return blockPatterns.map( ( pattern ) => {
+		const isShown = shownPatterns.includes( pattern );
+		return isShown ? (
+			<BlockPattern
+				key={ pattern.name }
+				pattern={ pattern }
+				onClick={ onClickPattern }
+			/>
+		) : (
+			<BlockPatternPlaceholder key={ pattern.name } />
+		);
+	} );
+}
+
+export default BlockPatternList;
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -0,0 +1,30 @@
+.block-editor-block-patterns-list__item {
+
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+	margin-top: $grid-unit-20;
+	transition: all 0.05s ease-in-out;
+	position: relative;
+	border: $border-width solid transparent;
+
+	&:hover {
+		border: $border-width solid var(--wp-admin-theme-color);
+	}
+
+	&:focus {
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+	}
+
+	&.is-placeholder {
+		min-height: 100px;
+	}
+}
+
+.block-editor-block-patterns-list__item-title {
+	padding: $grid-unit-05;
+	font-size: 12px;
+	text-align: center;
+}
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
@@ -31,6 +31,7 @@ function ButtonBlockAppender(
 			position="bottom center"
 			rootClientId={ rootClientId }
 			__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
+			__experimentalIsQuick
 			renderToggle={ ( {
 				onToggle,
 				disabled,

diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
@@ -63,8 +63,9 @@ export function DefaultBlockAppender( {
 			/>
 			<Inserter
 				rootClientId={ rootClientId }
-				position="top right"
+				position="bottom right"
 				isAppender
+				__experimentalIsQuick
 			/>
 		</div>
 	);

diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -27,8 +27,9 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     value="Start writing or type / to choose a block"
   />
   <WithSelect(WithDispatch(IfCondition(Inserter)))
+    __experimentalIsQuick={true}
     isAppender={true}
-    position="top right"
+    position="bottom right"
   />
 </div>
 `;
@@ -48,8 +49,9 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     value="Start writing or type / to choose a block"
   />
   <WithSelect(WithDispatch(IfCondition(Inserter)))
+    __experimentalIsQuick={true}
     isAppender={true}
-    position="top right"
+    position="bottom right"
   />
 </div>
 `;
@@ -69,8 +71,9 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     value=""
   />
   <WithSelect(WithDispatch(IfCondition(Inserter)))
+    __experimentalIsQuick={true}
     isAppender={true}
-    position="top right"
+    position="bottom right"
   />
 </div>
 `;
diff --git a/...src/components/inserter/block-patterns.js → ...components/inserter/block-patterns-tab.js b/...src/components/inserter/block-patterns.js → ...components/inserter/block-patterns-tab.js
@@ -7,65 +7,17 @@ import { fromPairs } from 'lodash';
  * WordPress dependencies
  */
 import { useMemo, useCallback } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 import { __, _x } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import BlockPreview from '../block-preview';
 import InserterPanel from './panel';
 import { searchItems } from './search-items';
 import InserterNoResults from './no-results';
 import usePatternsState from './hooks/use-patterns-state';
-
-function BlockPattern( { pattern, onClick } ) {
-	const { content, viewportWidth } = pattern;
-	const blocks = useMemo( () => parse( content ), [ content ] );
-
-	return (
-		<div
-			className="block-editor-inserter__patterns-item"
-			role="button"
-			onClick={ () => onClick( pattern, blocks ) }
-			onKeyDown={ ( event ) => {
-				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-					onClick( pattern, blocks );
-				}
-			} }
-			tabIndex={ 0 }
-			aria-label={ pattern.title }
-		>
-			<BlockPreview blocks={ blocks } viewportWidth={ viewportWidth } />
-			<div className="block-editor-inserter__patterns-item-title">
-				{ pattern.title }
-			</div>
-		</div>
-	);
-}
-
-function BlockPatternPlaceholder() {
-	return (
-		<div className="block-editor-inserter__patterns-item is-placeholder" />
-	);
-}
-
-function BlockPatternList( { patterns, shownPatterns, onClickPattern } ) {
-	return patterns.map( ( pattern ) => {
-		const isShown = shownPatterns.includes( pattern );
-		return isShown ? (
-			<BlockPattern
-				key={ pattern.name }
-				pattern={ pattern }
-				onClick={ onClickPattern }
-			/>
-		) : (
-			<BlockPatternPlaceholder key={ pattern.name } />
-		);
-	} );
-}
+import BlockPatternList from '../block-patterns-list';
 
 function BlockPatternsSearchResults( { filterValue, onInsert } ) {
 	const [ patterns, , onClick ] = usePatternsState( onInsert );
@@ -81,7 +33,7 @@ function BlockPatternsSearchResults( { filterValue, onInsert } ) {
 			<InserterPanel title={ __( 'Search Results' ) }>
 				<BlockPatternList
 					shownPatterns={ currentShownPatterns }
-					patterns={ filteredPatterns }
+					blockPatterns={ filteredPatterns }
 					onClickPattern={ onClick }
 				/>
 			</InserterPanel>
@@ -147,7 +99,7 @@ function BlockPatternsPerCategories( { onInsert } ) {
 						>
 							<BlockPatternList
 								shownPatterns={ currentShownPatterns }
-								patterns={ categoryPatterns }
+								blockPatterns={ categoryPatterns }
 								onClickPattern={ onClick }
 							/>
 						</InserterPanel>
@@ -159,7 +111,7 @@ function BlockPatternsPerCategories( { onInsert } ) {
 				<InserterPanel title={ _x( 'Uncategorized' ) }>
 					<BlockPatternList
 						shownPatterns={ currentShownPatterns }
-						patterns={ uncategorizedPatterns }
+						blockPatterns={ uncategorizedPatterns }
 						onClickPattern={ onClick }
 					/>
 				</InserterPanel>
@@ -168,7 +120,7 @@ function BlockPatternsPerCategories( { onInsert } ) {
 	);
 }
 
-function BlockPatterns( { onInsert, filterValue } ) {
+function BlockPatternsTabs( { onInsert, filterValue } ) {
 	return filterValue ? (
 		<BlockPatternsSearchResults
 			onInsert={ onInsert }
@@ -179,4 +131,4 @@ function BlockPatterns( { onInsert, filterValue } ) {
 	);
 }
 
-export default BlockPatterns;
+export default BlockPatternsTabs;
diff --git a/...tor/src/components/inserter/block-list.js → ...rc/components/inserter/block-types-tab.js b/...tor/src/components/inserter/block-list.js → ...rc/components/inserter/block-types-tab.js
@@ -12,7 +12,6 @@ import { addQueryArgs } from '@wordpress/url';
 import { controlsRepeat } from '@wordpress/icons';
 import { useMemo, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,7 +28,7 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
 const MAX_SUGGESTED_ITEMS = 6;
 
-export function InserterBlockList( {
+export function BlockTypesTab( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -244,4 +243,4 @@ export function InserterBlockList( {
 	);
 }
 
-export default compose( withSpokenMessages )( InserterBlockList );
+export default withSpokenMessages( BlockTypesTab );