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 {