Allow inserting blocks to post-content block on page

WordPress · May 23, 2024 · 10ba0a5 · 10ba0a5
1 parent f897cce
commit 10ba0a5
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -31,13 +31,17 @@ export function BlockTypesTab(
 	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
 	ref
 ) {
-	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
+	// Find the root of what we _can_ insert into for this block.
+	// const { rootContentBlockId } = useSelect( ( select ) => {
+	// 	// Try the empty root first.
+	// 	const { getAllowedBlockTypes } = select( 'core/block-editor' );
+
+	// 	select( 'core/block-editor' ).getInserterItems( rootClientId );
 
-	// TODO: Split this into its own component that has all items?
-	const [ allItems, allCategories ] = useBlockTypesState( '', () => {} );
+	// }, [] );
+
+	const [ allItems, items, categories, collections, onSelectItem ] =
+		useBlockTypesState( rootClientId, onInsert );
 
 	const allItemsPerCategory = useMemo( () => {
 		return pipe(
@@ -122,10 +126,6 @@ export function BlockTypesTab(
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
-	if ( ! items.length ) {
-		return <InserterNoResults />;
-	}
-
 	const availableCategories = categories.filter( ( category ) => {
 		const categoryItems = itemsPerCategory[ category.slug ];
 		if ( ! categoryItems || ! categoryItems.length ) {
@@ -137,6 +137,7 @@ export function BlockTypesTab(
 	return (
 		<InserterListbox>
 			<div ref={ ref }>
+				{ ! items.length && ! allItems.length && <InserterNoResults /> }
 				{ showMostUsedBlocks && !! suggestedItems.length && (
 					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
@@ -214,7 +215,7 @@ export function BlockTypesTab(
 				{ ( items.length === 0 ||
 					availableCategories.length === 1 ) && (
 					<div className="block-editor-inserter__all-blocks">
-						{ allCategories.map( ( category ) => {
+						{ categories.map( ( category ) => {
 							const categoryItems =
 								allItemsPerCategory[ category.slug ];
 							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
@@ -23,6 +23,26 @@ import { store as blockEditorStore } from '../../../store';
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
 const useBlockTypesState = ( rootClientId, onInsert ) => {
+	const [ allItems ] = useSelect( ( select ) => {
+		const { getBlocksByName, getInserterItems } =
+			select( blockEditorStore );
+
+		// Try the empty root first.
+		const rootInserterItems = getInserterItems( '' );
+		if ( rootInserterItems.length ) {
+			return [ rootInserterItems ];
+		}
+
+		const postContentBlock = getBlocksByName( 'core/post-content' );
+
+		if ( postContentBlock.length ) {
+			return [ getInserterItems( postContentBlock[ 0 ] ) ];
+		}
+
+		// Failsafe
+		return [ [] ];
+	}, [] );
+
 	const [ items ] = useSelect(
 		( select ) => [
 			select( blockEditorStore ).getInserterItems( rootClientId ),
@@ -57,7 +77,7 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 		[ onInsert ]
 	);
 
-	return [ items, categories, collections, onSelectItem ];
+	return [ allItems, items, categories, collections, onSelectItem ];
 };
 
 export default useBlockTypesState;
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
@@ -44,6 +44,7 @@ function useInsertionPoint( {
 } ) {
 	const {
 		getSelectedBlock,
+		getBlocksByName,
 		getBlockIndex,
 		getBlockRootClientId,
 		getBlockOrder,
@@ -142,9 +143,17 @@ function useInsertionPoint( {
 						_destinationRootClientId
 					);
 
-					// If we are at the root, there's nothing more to check
 					if ( _destinationRootClientId === null ) {
-						break;
+						// If we are at the root, try to find a post content block
+						const postContentBlock =
+							getBlocksByName( 'core/post-content' );
+						if ( postContentBlock.length ) {
+							_destinationRootClientId = postContentBlock[ 0 ];
+							// Insert at the end of the post content block.
+							_destinationIndex = getBlockOrder(
+								postContentBlock[ 0 ]
+							).length;
+						}
 					}
 				}
 
@@ -181,6 +190,10 @@ function useInsertionPoint( {
 			onSelect,
 			shouldFocusBlock,
 			selectBlockOnInsert,
+			setLastFocus,
+			canInsertBlockType,
+			getBlockOrder,
+			getBlocksByName,
 		]
 	);