- { showMostUsedBlocks && !! suggestedItems.length && (
+
+ { showMostUsedBlocks &&
+ // Only show the most used blocks if the total amount of block
+ // is larger than 1 row, otherwise it is not so useful.
+ items.length > 3 &&
+ !! suggestedItems.length && (
) }
- { currentlyRenderedCategories.map( ( category ) => {
- const categoryItems = itemsPerCategory[ category.slug ];
- if ( ! categoryItems || ! categoryItems.length ) {
+ { currentlyRenderedCategories.map( ( category ) => {
+ const categoryItems = items.filter(
+ ( item ) => item.category === category.slug
+ );
+ if ( ! categoryItems || ! categoryItems.length ) {
+ return null;
+ }
+ return (
+
+
+
+ );
+ } ) }
+
+ { didRenderAllCategories && uncategorizedItems.length > 0 && (
+
+
+
+ ) }
+
+ { currentlyRenderedCollections.map(
+ ( [ namespace, collection ] ) => {
+ const collectionItems = itemsPerCollection[ namespace ];
+ if ( ! collectionItems || ! collectionItems.length ) {
return null;
}
+
return (
);
- } ) }
+ }
+ ) }
+
+ );
+}
- { didRenderAllCategories && uncategorizedItems.length > 0 && (
-
- ;
+ }
+
+ const itemsForCurrentRoot = [];
+ const itemsRemaining = [];
+
+ for ( const item of items ) {
+ // Skip reusable blocks, they moved to the patterns tab.
+ if ( item.category === 'reusable' ) {
+ continue;
+ }
+
+ if ( rootClientId && item.rootClientId === rootClientId ) {
+ itemsForCurrentRoot.push( item );
+ } else {
+ itemsRemaining.push( item );
+ }
+ }
+
+ return (
+
+
+ { !! itemsForCurrentRoot.length && (
+ <>
+
-
- ) }
-
- { currentlyRenderedCollections.map(
- ( [ namespace, collection ] ) => {
- const collectionItems = itemsPerCollection[ namespace ];
- if ( ! collectionItems || ! collectionItems.length ) {
- return null;
- }
-
- return (
-
-
-
- );
- }
+
+
) }
+
);
diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
index 566d0476fbd0f5..6b9e694c1cdf8f 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
@@ -14,20 +14,24 @@ import { useCallback } from '@wordpress/element';
* Internal dependencies
*/
import { store as blockEditorStore } from '../../../store';
+import { withRootClientIdOptionKey } from '../../../store/utils';
/**
* Retrieves the block types inserter state.
*
* @param {string=} rootClientId Insertion's root client ID.
* @param {Function} onInsert function called when inserter a list of blocks.
+ * @param {boolean} isQuick
* @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
*/
-const useBlockTypesState = ( rootClientId, onInsert ) => {
+const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
const [ items ] = useSelect(
( select ) => [
- select( blockEditorStore ).getInserterItems( rootClientId ),
+ select( blockEditorStore ).getInserterItems( rootClientId, {
+ [ withRootClientIdOptionKey ]: ! isQuick,
+ } ),
],
- [ rootClientId ]
+ [ rootClientId, isQuick ]
);
const [ categories, collections ] = useSelect( ( select ) => {
@@ -37,7 +41,14 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
const onSelectItem = useCallback(
(
- { name, initialAttributes, innerBlocks, syncStatus, content },
+ {
+ name,
+ initialAttributes,
+ innerBlocks,
+ syncStatus,
+ content,
+ rootClientId: _rootClientId,
+ },
shouldFocusBlock
) => {
const insertedBlock =
@@ -51,7 +62,12 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
createBlocksFromInnerBlocksTemplate( innerBlocks )
);
- onInsert( insertedBlock, undefined, shouldFocusBlock );
+ onInsert(
+ insertedBlock,
+ undefined,
+ shouldFocusBlock,
+ _rootClientId
+ );
},
[ onInsert ]
);
diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
index 0dae090578ab4f..24074ec5004565 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import { _n, sprintf } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
@@ -13,6 +13,34 @@ import { useCallback } from '@wordpress/element';
import { store as blockEditorStore } from '../../../store';
import { unlock } from '../../../lock-unlock';
+function getIndex( {
+ destinationRootClientId,
+ destinationIndex,
+ rootClientId,
+ registry,
+} ) {
+ if ( rootClientId === destinationRootClientId ) {
+ return destinationIndex;
+ }
+ const parents = [
+ '',
+ ...registry
+ .select( blockEditorStore )
+ .getBlockParents( destinationRootClientId ),
+ destinationRootClientId,
+ ];
+ const parentIndex = parents.indexOf( rootClientId );
+ if ( parentIndex !== -1 ) {
+ return (
+ registry
+ .select( blockEditorStore )
+ .getBlockIndex( parents[ parentIndex + 1 ] ) + 1
+ );
+ }
+ return registry.select( blockEditorStore ).getBlockOrder( rootClientId )
+ .length;
+}
+
/**
* @typedef WPInserterConfig
*
@@ -42,6 +70,7 @@ function useInsertionPoint( {
shouldFocusBlock = true,
selectBlockOnInsert = true,
} ) {
+ const registry = useRegistry();
const { getSelectedBlock } = useSelect( blockEditorStore );
const { destinationRootClientId, destinationIndex } = useSelect(
( select ) => {
@@ -91,7 +120,7 @@ function useInsertionPoint( {
} = unlock( useDispatch( blockEditorStore ) );
const onInsertBlocks = useCallback(
- ( blocks, meta, shouldForceFocusBlock = false ) => {
+ ( blocks, meta, shouldForceFocusBlock = false, _rootClientId ) => {
// When we are trying to move focus or select a new block on insert, we also
// need to clear the last focus to avoid the focus being set to the wrong block
// when tabbing back into the canvas if the block was added from outside the
@@ -121,8 +150,17 @@ function useInsertionPoint( {
} else {
insertBlocks(
blocks,
- destinationIndex,
- destinationRootClientId,
+ isAppender || _rootClientId === undefined
+ ? destinationIndex
+ : getIndex( {
+ destinationRootClientId,
+ destinationIndex,
+ rootClientId: _rootClientId,
+ registry,
+ } ),
+ isAppender || _rootClientId === undefined
+ ? destinationRootClientId
+ : _rootClientId,
selectBlockOnInsert,
shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
meta
@@ -154,9 +192,17 @@ function useInsertionPoint( {
);
const onToggleInsertionPoint = useCallback(
- ( show ) => {
- if ( show ) {
- showInsertionPoint( destinationRootClientId, destinationIndex );
+ ( item ) => {
+ if ( item?.hasOwnProperty( 'rootClientId' ) ) {
+ showInsertionPoint(
+ item.rootClientId,
+ getIndex( {
+ destinationRootClientId,
+ destinationIndex,
+ rootClientId: item.rootClientId,
+ registry,
+ } )
+ );
} else {
hideInsertionPoint();
}
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 3abaee330ed22b..6a4ac798b74900 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -81,8 +81,13 @@ function InserterMenu(
const blockTypesTabRef = useRef();
const onInsert = useCallback(
- ( blocks, meta, shouldForceFocusBlock ) => {
- onInsertBlocks( blocks, meta, shouldForceFocusBlock );
+ ( blocks, meta, shouldForceFocusBlock, _rootClientId ) => {
+ onInsertBlocks(
+ blocks,
+ meta,
+ shouldForceFocusBlock,
+ _rootClientId
+ );
onSelect();
// Check for focus loss due to filtering blocks by selected block type
@@ -111,7 +116,7 @@ function InserterMenu(
const onHover = useCallback(
( item ) => {
- onToggleInsertionPoint( !! item );
+ onToggleInsertionPoint( item );
setHoveredItem( item );
},
[ onToggleInsertionPoint, setHoveredItem ]
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index 3405ac98b881cc..022957df952cea 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -44,7 +44,8 @@ export default function QuickInserter( {
} );
const [ blockTypes ] = useBlockTypesState(
destinationRootClientId,
- onInsertBlocks
+ onInsertBlocks,
+ true
);
const [ patterns ] = usePatternsState(
@@ -126,6 +127,7 @@ export default function QuickInserter( {
isDraggable={ false }
prioritizePatterns={ prioritizePatterns }
selectBlockOnInsert={ selectBlockOnInsert }
+ isQuick
/>