diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index dd1bee9fd9eb2..7c2d94703436d 100644
--- 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 (
-
- { ! showBlockTypes.length && ! shownBlockPatterns.length && (
+
+ { ! shownBlockTypes.length && ! shownBlockPatterns.length && (
) }
- { !! showBlockTypes.length && (
-
+ { !! shownBlockTypes.length && (
+ { __( 'Blocks' ) }
+ }
+ >
) }
+ { !! shownBlockTypes.length && !! shownBlockPatterns.length && (
+
+ ) }
+
{ !! shownBlockPatterns.length && (
-
-
+ { __( 'Blocks' ) }
+ }
+ >
+
+
+
) }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 1d7df196f45ec..3d7be300f8d27 100644
--- 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 {