);
@@ -119,28 +121,14 @@ function InserterMenu( {
{ showPatterns && (
-
+
{ ( tab ) => {
if ( tab.name === 'blocks' ) {
return blocksTab;
}
return patternsTab;
} }
-
+
) }
{ ! showPatterns && blocksTab }
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
new file mode 100644
index 00000000000000..dd1bee9fd9eb29
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesList from '../block-types-list';
+import BlockPatternsList from '../block-patterns-list';
+import InserterSearchForm from './search-form';
+import InserterPanel from './panel';
+import InserterNoResults from './no-results';
+import useInsertionPoint from './hooks/use-insertion-point';
+import usePatternsState from './hooks/use-patterns-state';
+import useBlockTypesState from './hooks/use-block-types-state';
+import { searchBlockItems, searchItems } from './search-items';
+
+const SEARCH_THRESHOLD = 6;
+const SHOWN_BLOCK_TYPES = 6;
+const SHOWN_BLOCK_PATTERNS = 2;
+
+function QuickInserterList( {
+ blockTypes,
+ blockPatterns,
+ onSelectBlockType,
+ onSelectBlockPattern,
+ onHover,
+} ) {
+ const showBlockTypes = useMemo(
+ () => blockTypes.slice( 0, SHOWN_BLOCK_TYPES ),
+ [ blockTypes ]
+ );
+ const shownBlockPatterns = useMemo(
+ () => blockPatterns.slice( 0, SHOWN_BLOCK_PATTERNS ),
+ [ blockTypes ]
+ );
+ return (
+
+ { ! showBlockTypes.length && ! shownBlockPatterns.length && (
+
+ ) }
+
+ { !! showBlockTypes.length && (
+
+
+
+ ) }
+
+ { !! shownBlockPatterns.length && (
+
+
+
+ ) }
+
+ );
+}
+
+function QuickInserter( {
+ rootClientId,
+ clientId,
+ isAppender,
+ selectBlockOnInsert,
+} ) {
+ const [ isFiltered, setIsFiltered ] = useState( false );
+ const [ filterValue, setFilterValue ] = useState( '' );
+ const [
+ destinationRootClientId,
+ onInsertBlocks,
+ onToggleInsertionPoint,
+ ] = useInsertionPoint( {
+ rootClientId,
+ clientId,
+ isAppender,
+ selectBlockOnInsert,
+ } );
+ const [
+ blockTypes,
+ blockTypeCategories,
+ blockTypeCollections,
+ onSelectBlockType,
+ ] = useBlockTypesState( destinationRootClientId, onInsertBlocks );
+ const [ patterns, onSelectBlockPattern ] = usePatternsState(
+ onInsertBlocks
+ );
+ const showPatterns = ! destinationRootClientId && patterns.length;
+ const showSearch =
+ ( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
+ blockTypes.length > SEARCH_THRESHOLD;
+
+ const filteredBlockTypes = useMemo( () => {
+ return searchBlockItems(
+ blockTypes,
+ blockTypeCategories,
+ blockTypeCollections,
+ filterValue
+ );
+ }, [ filterValue, blockTypes, blockTypeCategories, blockTypeCollections ] );
+
+ const filteredBlockPatterns = useMemo(
+ () => searchItems( patterns, filterValue ),
+ [ filterValue, patterns ]
+ );
+
+ return (
+
+ { showSearch && (
+ {
+ setFilterValue( value );
+ setIsFiltered( true );
+ } }
+ />
+ ) }
+ { ( ! showSearch || isFiltered ) && (
+
+ ) }
+
+ );
+}
+
+export default QuickInserter;
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 2725c904073ee7..7a1cfb08fbe65c 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -16,7 +16,7 @@ $block-inserter-tabs-height: 44px;
}
}
-.block-editor-inserter__popover > .components-popover__content {
+.block-editor-inserter__popover:not(.is-quick) > .components-popover__content {
@include break-medium {
overflow-y: visible;
height: 100vh;
@@ -247,32 +247,17 @@ $block-inserter-tabs-height: 44px;
flex-shrink: 0;
}
-.block-editor-inserter__patterns-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 $theme-color;
- }
+.block-editor-inserter__quick-inserter {
+ width: $block-inserter-width;
+}
- &:focus {
- box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $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-inserter__quick-inserter__results {
+ padding-bottom: $grid-unit-20;
}
-.block-editor-inserter__patterns-item-title {
- padding: $grid-unit-05;
- font-size: 12px;
- text-align: center;
+.block-editor-inserter__popover.is-quick > .components-popover__content {
+ @include break-medium {
+ padding: 0;
+ }
}
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
new file mode 100644
index 00000000000000..11393b2a703728
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function InserterTabs( { children } ) {
+ return (
+
+ { children }
+
+ );
+}
+
+export default InserterTabs;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index f7648056f036c2..1ddb4f39f2fdd0 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -18,6 +18,7 @@
@import "./components/block-mover/style.scss";
@import "./components/block-navigation/style.scss";
@import "./components/block-parent-selector/style.scss";
+@import "./components/block-patterns-list/style.scss";
@import "./components/block-preview/style.scss";
@import "./components/block-settings-menu/style.scss";
@import "./components/block-styles/style.scss";