Smaller quick inserter

WordPress · Jun 9, 2020 · a3a7619 · a3a7619
1 parent 837ef2b
commit a3a7619
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -3,6 +3,7 @@
  */
 import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { VisuallyHidden } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -28,7 +29,7 @@ function QuickInserterList( {
 	onSelectBlockPattern,
 	onHover,
 } ) {
-	const showBlockTypes = useMemo(
+	const shownBlockTypes = useMemo(
 		() => blockTypes.slice( 0, SHOWN_BLOCK_TYPES ),
 		[ blockTypes ]
 	);
@@ -37,28 +38,42 @@ function QuickInserterList( {
 		[ blockTypes ]
 	);
 	return (
-		<div className="block-editor-inserter__quick-inserter__results">
-			{ ! showBlockTypes.length && ! shownBlockPatterns.length && (
+		<div className="block-editor-inserter__quick-inserter-results">
+			{ ! shownBlockTypes.length && ! shownBlockPatterns.length && (
 				<InserterNoResults />
 			) }
 
-			{ !! showBlockTypes.length && (
-				<InserterPanel title={ __( 'Blocks' ) }>
+			{ !! shownBlockTypes.length && (
+				<InserterPanel
+					title={
+						<VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden>
+					}
+				>
 					<BlockTypesList
-						items={ showBlockTypes }
+						items={ shownBlockTypes }
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
 					/>
 				</InserterPanel>
 			) }
 
+			{ !! shownBlockTypes.length && !! shownBlockPatterns.length && (
+				<div className="block-editor-inserter__quick-inserter-separator" />
+			) }
+
 			{ !! shownBlockPatterns.length && (
-				<InserterPanel title={ __( 'Patterns' ) }>
-					<BlockPatternsList
-						shownPatterns={ shownBlockPatterns }
-						blockPatterns={ shownBlockPatterns }
-						onClickPattern={ onSelectBlockPattern }
-					/>
+				<InserterPanel
+					title={
+						<VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden>
+					}
+				>
+					<div className="block-editor-inserter__quick-inserter-patterns">
+						<BlockPatternsList
+							shownPatterns={ shownBlockPatterns }
+							blockPatterns={ shownBlockPatterns }
+							onClickPattern={ onSelectBlockPattern }
+						/>
+					</div>
 				</InserterPanel>
 			) }
 		</div>

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -251,9 +251,25 @@ $block-inserter-tabs-height: 44px;
 	width: $block-inserter-width;
 }
 
-
-.block-editor-inserter__quick-inserter__results {
+.block-editor-inserter__quick-inserter-results {
 	padding-bottom: $grid-unit-20;
+	margin-top: -$grid-unit-10;
+
+	.block-editor-inserter__panel-header {
+		height: 0;
+		padding: 0;
+		float: left;
+	}
+}
+
+.block-editor-inserter__quick-inserter-patterns {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: $grid-unit-10;
+}
+
+.block-editor-inserter__quick-inserter-separator {
+	border-top: $border-width solid $light-gray-500;
 }
 
 .block-editor-inserter__popover.is-quick > .components-popover__content {