+ { patterns.map( ( pattern, patternIndex ) => (
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 5698b278e211d..4da5338b5fbff 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,13 +1,17 @@
/**
* External dependencies
*/
-import { includes } from 'lodash';
+import { includes, pick } from 'lodash';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -16,6 +20,7 @@ import Tips from './tips';
import InserterSearchForm from './search-form';
import InserterPreviewPanel from './preview-panel';
import InserterBlockList from './block-list';
+import BlockPatterns from './block-patterns';
const stopKeyPropagation = ( event ) => event.stopPropagation();
@@ -29,6 +34,49 @@ function InserterMenu( {
} ) {
const [ filterValue, setFilterValue ] = useState( '' );
const [ hoveredItem, setHoveredItem ] = useState( null );
+ const {
+ destinationRootClientId,
+ patterns,
+ getSelectedBlock,
+ getBlockIndex,
+ getBlockSelectionEnd,
+ getBlockOrder,
+ } = useSelect( ( select ) => {
+ const {
+ getSettings,
+ getBlockRootClientId,
+ getBlockSelectionEnd: _getBlockSelectionEnd,
+ } = select( 'core/block-editor' );
+
+ let destRootClientId = rootClientId;
+ if ( ! destRootClientId && ! clientId && ! isAppender ) {
+ const end = _getBlockSelectionEnd();
+ if ( end ) {
+ destRootClientId = getBlockRootClientId( end ) || undefined;
+ }
+ }
+ return {
+ patterns: getSettings().__experimentalBlockPatterns,
+ destinationRootClientId: destRootClientId,
+ ...pick( select( 'core/block-editor' ), [
+ 'getSelectedBlock',
+ 'getBlockIndex',
+ 'getBlockSelectionEnd',
+ 'getBlockOrder',
+ ] ),
+ };
+ }, [] );
+ const {
+ replaceBlocks,
+ insertBlocks,
+ showInsertionPoint,
+ hideInsertionPoint,
+ } = useDispatch( 'core/block-editor' );
+ const hasPatterns =
+ ! destinationRootClientId &&
+ !! patterns &&
+ !! patterns.length &&
+ ! filterValue;
const onKeyDown = ( event ) => {
if (
includes(
@@ -41,6 +89,86 @@ function InserterMenu( {
}
};
+ // To avoid duplication, getInsertionIndex is extracted and used in two event handlers
+ // This breaks the withDispatch not containing any logic rule.
+ // Since it's a function only called when the event handlers are called,
+ // it's fine to extract it.
+ // eslint-disable-next-line no-restricted-syntax
+ function getInsertionIndex() {
+ // If the clientId is defined, we insert at the position of the block.
+ if ( clientId ) {
+ return getBlockIndex( clientId, destinationRootClientId );
+ }
+
+ // If there a selected block, we insert after the selected block.
+ const end = getBlockSelectionEnd();
+ if ( ! isAppender && end ) {
+ return getBlockIndex( end, destinationRootClientId ) + 1;
+ }
+
+ // Otherwise, we insert at the end of the current rootClientId
+ return getBlockOrder( destinationRootClientId ).length;
+ }
+
+ const onInsertBlocks = ( blocks ) => {
+ const selectedBlock = getSelectedBlock();
+ if (
+ ! isAppender &&
+ selectedBlock &&
+ isUnmodifiedDefaultBlock( selectedBlock )
+ ) {
+ replaceBlocks( selectedBlock.clientId, blocks );
+ } else {
+ insertBlocks(
+ blocks,
+ getInsertionIndex(),
+ destinationRootClientId,
+ __experimentalSelectBlockOnInsert
+ );
+ }
+
+ onSelect();
+ };
+
+ const onHover = ( item ) => {
+ setHoveredItem( item );
+ if ( item ) {
+ const index = getInsertionIndex();
+ showInsertionPoint( destinationRootClientId, index );
+ } else {
+ hideInsertionPoint();
+ }
+ };
+
+ const blocksTab = (
+ <>
+
+ { showInserterHelpPanel && (
+
+
+
+ ) }
+
+ );
+
+ const patternsTab = (
+
+
+
+ );
+
// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
// is always visible, and one which already incurs this behavior of autoFocus via
// Popover's focusOnMount.
@@ -55,22 +183,29 @@ function InserterMenu( {
>
-
- { showInserterHelpPanel && (
-
-
-
+ { hasPatterns && (
+
+ { ( tab ) => {
+ if ( tab.name === 'blocks' ) {
+ return blocksTab;
+ }
+ return patternsTab;
+ } }
+
) }
+ { ! hasPatterns && blocksTab }
{ showInserterHelpPanel && hoveredItem && (
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 7adfb07c597f6..7fbf26549c91f 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -1,6 +1,5 @@
$block-inserter-preview-height: 350px;
$block-inserter-tabs-height: 44px;
-$block-inserter-search-height: 38px;
.block-editor-inserter {
display: inline-block;
@@ -82,9 +81,28 @@ $block-inserter-search-height: 38px;
}
}
-.block-editor-inserter__results {
+.block-editor-inserter__tabs {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ margin-top: -$grid-unit-20;
+
+ .components-tab-panel__tabs {
+ padding: 0 $grid-unit-20;
+ margin-bottom: -1px;
+ border-bottom: $border-width solid $light-gray-secondary;
+ }
+
+ .components-tab-panel__tab-content {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ position: relative;
+ }
+}
+
+.block-editor-inserter__block-list {
flex-grow: 1;
- overflow: auto;
position: relative;
z-index: 1; // Necessary for the stacked card below parent blocks to show up.
padding: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
@@ -99,6 +117,17 @@ $block-inserter-search-height: 38px;
}
}
+// This extra div is needed because
+// flex grow and overflow auto doesn't work well together.
+.block-editor-inserter__scrollable {
+ overflow: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
.block-editor-inserter__popover .block-editor-block-types-list {
margin: 0 -8px;
}
@@ -227,3 +256,37 @@ $block-inserter-search-height: 38px;
padding: $grid-unit-20;
flex-shrink: 0;
}
+
+.block-editor-inserter__patterns {
+ padding: $grid-unit-20;
+}
+
+.block-editor-inserter__patterns-item {
+ border-radius: $radius-block-ui;
+ cursor: pointer;
+ margin-bottom: $grid-unit-20;
+ border: 1px solid $light-gray-500;
+ transition: all 0.05s ease-in-out;
+ position: relative;
+
+ &:hover {
+ background: $white;
+ box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-500;
+ }
+
+ &: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;
+ }
+}
+
+.block-editor-inserter__patterns-item-preview {
+ padding: $grid-unit-20;
+}
+
+.block-editor-inserter__patterns-item-title {
+ text-align: center;
+ padding: 10px 0;
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 3f4ae8b3b3136..f64e5506903d9 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -15,7 +15,6 @@
@import "./components/block-mobile-toolbar/style.scss";
@import "./components/block-mover/style.scss";
@import "./components/block-navigation/style.scss";
-@import "./components/block-patterns/style.scss";
@import "./components/block-preview/style.scss";
@import "./components/block-settings-menu/style.scss";
@import "./components/block-styles/style.scss";
diff --git a/packages/edit-post/src/plugins/block-patterns/index.js b/packages/edit-post/src/plugins/block-patterns/index.js
deleted file mode 100644
index e9018bbfd3ed9..0000000000000
--- a/packages/edit-post/src/plugins/block-patterns/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { layout } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { __experimentalBlockPatterns as BlockPatternsList } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import PluginSidebar from '../../components/sidebar/plugin-sidebar';
-import PluginSidebarMoreMenuItem from '../../components/header/plugin-sidebar-more-menu-item';
-
-function BlockPatterns() {
- const { __experimentalBlockPatterns: blockPatterns = [] } = useSelect(
- ( select ) => {
- return select( 'core/editor' ).getEditorSettings();
- },
- []
- );
-
- return (
- <>
-
-
-
-
- { __( 'Block Patterns' ) }
-
-
- );
-}
-
-export default BlockPatterns;
diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
index 5b0395de59eca..cbdc9b2bb7ace 100644
--- a/packages/edit-post/src/plugins/index.js
+++ b/packages/edit-post/src/plugins/index.js
@@ -14,13 +14,6 @@ import ManageBlocksMenuItem from './manage-blocks-menu-item';
import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import BlockPatterns from './block-patterns';
-
-registerPlugin( 'edit-post-block-patterns', {
- render() {
- return
;
- },
-} );
registerPlugin( 'edit-post', {
render() {
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 74c7b2f67cf72..d57ceeede790a 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -125,6 +125,7 @@ class EditorProvider extends Component {
'__experimentalGlobalStylesUserEntityId',
'__experimentalGlobalStylesBase',
'__experimentalDisableCustomLineHeight',
+ '__experimentalBlockPatterns',
'gradients',
] ),
mediaUpload: hasUploadPermissions ? mediaUpload : undefined,