diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 2c820d9e31c0f..8cd7e81a6521c 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -444,3 +444,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;
+}
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index a671d7f312c0e..64f29bc3eddcd 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/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, isVisible } = useSelect(
( select ) => {
const {
@@ -89,7 +102,7 @@ function BlockPopoverInbetween( {
? previousElement.offsetHeight
: nextElement.offsetHeight,
};
- }, [ previousElement, nextElement, isVertical ] );
+ }, [ previousElement, nextElement, isVertical, positionRecompute ] );
const getAnchorRect = useCallback( () => {
if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
@@ -150,7 +163,7 @@ function BlockPopoverInbetween( {
width: 0,
ownerDocument,
};
- }, [ previousElement, nextElement ] );
+ }, [ previousElement, nextElement, positionRecompute ] );
const popoverScrollRef = usePopoverScroll( __unstableContentRef );
diff --git a/packages/block-editor/src/components/block-tools/exploded-mode-inserters.js b/packages/block-editor/src/components/block-tools/exploded-mode-inserters.js
new file mode 100644
index 0000000000000..ba8d00df98650
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+ } );
+}
+
+export default ExplodedModeInserters;
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 65ce450603caa..349a5158b35d1 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/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 && (
+
+ ) }
);