Block Navigation: Use quick inserter (#23737)

* Block Navigation: Use quick inserter * Quick Inserter: Adjust padding Remove unnecessary padding when Quick Inserter has no search field or 'Browse all' button. * Quick Inserter: Reduce selector specificity * Quick Inserter: Close dropdown when a block is selected
WordPress · Jul 15, 2020 · 2481ed4 · 2481ed4
1 parent df5f28d
commit 2481ed4
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
@@ -50,6 +50,7 @@ export default function BlockNavigationAppender( {
 						/>
 						<Inserter
 							rootClientId={ parentBlockClientId }
+							__experimentalIsQuick
 							__experimentalSelectBlockOnInsert={ false }
 							aria-describedby={ descriptionId }
 							toggleProps={ { ref, tabIndex, onFocus } }

diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -27,6 +27,7 @@ import { speak } from '@wordpress/a11y';
  * @return {Array} Insertion Point State (rootClientID, onInsertBlocks and onToggle).
  */
 function useInsertionPoint( {
+	onSelect,
 	rootClientId,
 	clientId,
 	isAppender,
@@ -116,6 +117,10 @@ function useInsertionPoint( {
 			);
 			speak( message );
 		}
+
+		if ( onSelect ) {
+			onSelect();
+		}
 	};
 
 	const onToggleInsertionPoint = ( show ) => {

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -128,6 +128,7 @@ class Inserter extends Component {
 		if ( isQuick ) {
 			return (
 				<QuickInserter
+					onSelect={ onClose }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { orderBy } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -106,6 +107,7 @@ function QuickInserterList( {
 }
 
 function QuickInserter( {
+	onSelect,
 	rootClientId,
 	clientId,
 	isAppender,
@@ -118,6 +120,7 @@ function QuickInserter( {
 		onInsertBlocks,
 		onToggleInsertionPoint,
 	] = useInsertionPoint( {
+		onSelect,
 		rootClientId,
 		clientId,
 		isAppender,
@@ -152,18 +155,18 @@ function QuickInserter( {
 		[ filterValue, patterns ]
 	);
 
-	const setInsererIsOpened = useSelect(
+	const setInserterIsOpened = useSelect(
 		( select ) =>
 			select( 'core/block-editor' ).getSettings()
 				.__experimentalSetIsInserterOpened,
 		[]
 	);
 
 	useEffect( () => {
-		if ( setInsererIsOpened ) {
-			setInsererIsOpened( false );
+		if ( setInserterIsOpened ) {
+			setInserterIsOpened( false );
 		}
-	}, [ setInsererIsOpened ] );
+	}, [ setInserterIsOpened ] );
 
 	// Announce search results on change
 	useEffect( () => {
@@ -187,7 +190,10 @@ function QuickInserter( {
 	/* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
 	return (
 		<div
-			className="block-editor-inserter__quick-inserter"
+			className={ classnames( 'block-editor-inserter__quick-inserter', {
+				'has-search': showSearch,
+				'has-expand': setInserterIsOpened,
+			} ) }
 			onKeyPress={ stopKeyPropagation }
 			onKeyDown={ preventArrowKeysPropagation }
 		>
@@ -208,10 +214,10 @@ function QuickInserter( {
 				onHover={ onToggleInsertionPoint }
 			/>
 
-			{ setInsererIsOpened && (
+			{ setInserterIsOpened && (
 				<Button
 					className="block-editor-inserter__quick-inserter-expand"
-					onClick={ () => setInsererIsOpened( true ) }
+					onClick={ () => setInserterIsOpened( true ) }
 					aria-label={ __(
 						'Browse all. This will open the main inserter panel in the editor toolbar.'
 					) }

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -274,14 +274,19 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__quick-inserter-results {
-	padding-bottom: $grid-unit-20;
+.block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
+	height: 0;
+	padding: 0;
+	float: left;
+}
 
-	.block-editor-inserter__panel-header {
-		height: 0;
-		padding: 0;
-		float: left;
-	}
+.block-editor-inserter__quick-inserter .block-editor-inserter__panel-content {
+	padding: 0 $grid-unit-10;
+}
+
+.block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
+.block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
+	padding: 0 $grid-unit-20;
 }
 
 .block-editor-inserter__quick-inserter-patterns {
@@ -305,6 +310,7 @@ $block-inserter-tabs-height: 44px;
 	width: 100%;
 	height: ($button-size + $grid-unit-10);
 	border-radius: 0;
+	margin-top: $grid-unit-20;
 
 	&:hover {
 		color: $white;