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 && ( + + ) } );