Add inbetween inserters

packages/block-editor/src/components/block-list/style.scss

@@ -455,3 +455,7 @@
 		box-shadow: $border-width 0 0 0 var(--wp-admin-theme-color) inset;
 	}
 }
+
+.is-root-container.is-exploded-mode > .block-list-appender {
+	display: none;
+}

packages/block-editor/src/components/block-popover/inbetween.js

@@ -7,7 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useCallback, useMemo, createContext } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	createContext,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import { Popover } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 
@@ -28,6 +34,13 @@ function BlockPopoverInbetween( {
 	__unstableContentRef,
 	...props
 } ) {
+	// This is a temporary hack to get the inbetween inserter to recompute properly.
+	const [ positionRecompute, forceRecompute ] = useState( {} );
+	useEffect( () => {
+		const intervalHandle = setInterval( forceRecompute, 500 );
+		return () => clearInterval( intervalHandle );
+	}, [] );
+
 	const { orientation, rootClientId } = useSelect(
 		( select ) => {
 			const { getBlockListSettings, getBlockRootClientId } = select(
@@ -84,7 +97,7 @@ function BlockPopoverInbetween( {
 				? previousElement.offsetHeight
 				: nextElement.offsetHeight,
 		};
-	}, [ previousElement, nextElement, isVertical ] );
+	}, [ previousElement, nextElement, isVertical, positionRecompute ] );
 
 	const getAnchorRect = useCallback( () => {
 		if ( ! previousElement && ! nextElement ) {
@@ -137,7 +150,7 @@ function BlockPopoverInbetween( {
 			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
 			ownerDocument,
 		};
-	}, [ previousElement, nextElement ] );
+	}, [ previousElement, nextElement, positionRecompute ] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 

packages/block-editor/src/components/block-tools/exploded-mode-inserters.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverInbetween from '../block-popover/inbetween';
+import { store as blockEditorStore } from '../../store';
+import Inserter from '../inserter';
+
+function ExplodedModeInserters( { __unstableContentRef } ) {
+	const blockOrder = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockOrder();
+	}, [] );
+
+	return blockOrder.map( ( clientId, index ) => {
+		if ( index === blockOrder.length - 1 ) {
+			return null;
+		}
+		return (
+			<BlockPopoverInbetween
+				key={ clientId }
+				previousClientId={ clientId }
+				nextClientId={ blockOrder[ index + 1 ] }
+				__unstableContentRef={ __unstableContentRef }
+			>
+				<div className="block-editor-block-list__insertion-point-inserter">
+					<Inserter
+						position="bottom center"
+						clientId={ blockOrder[ index + 1 ] }
+						__experimentalIsQuick
+					/>
+				</div>
+			</BlockPopoverInbetween>
+		);
+	} );
+}
+
+export default ExplodedModeInserters;

packages/block-editor/src/components/block-tools/index.js

@@ -23,6 +23,7 @@ import SelectedBlockPopover from './selected-block-popover';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
+import ExplodedModeInserters from './exploded-mode-inserters';
 
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
@@ -143,6 +144,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
+				{ isExplodedMode && (
+					<ExplodedModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);