diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index ff7b5f8a66bfe7..10aba6d37444e8 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -33,6 +33,7 @@ import BlockHtml from './block-html';
import BlockContextualToolbar from './block-contextual-toolbar';
import BlockMultiControls from './multi-controls';
import BlockMobileToolbar from './block-mobile-toolbar';
+import BlockListSiblingInserter from './sibling-inserter';
import {
clearSelectedBlock,
editPost,
@@ -439,6 +440,7 @@ export class BlockListBlock extends Component {
{ showUI && }
{ !! error && }
+
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
diff --git a/editor/components/block-list/index.js b/editor/components/block-list/index.js
index f9b235b6bd5d9f..8b4cc3c405014a 100644
--- a/editor/components/block-list/index.js
+++ b/editor/components/block-list/index.js
@@ -4,7 +4,7 @@
import { connect } from 'react-redux';
import {
findLast,
- flatMap,
+ map,
invert,
isEqual,
mapValues,
@@ -211,7 +211,7 @@ class BlockList extends Component {
return (
{ !! blocks.length && }
- { flatMap( blocks, ( uid ) => [
+ { map( blocks, ( uid ) => (
,
- ,
- ] ) }
+ />
+ ) ) }
);
}
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index afc6ce628c5639..72122065808108 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -391,15 +391,13 @@
.editor-block-list__sibling-inserter {
z-index: z-index( '.editor-block-list__sibling-inserter' );
position: relative;
- max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ) - ( 2 * $block-padding );
- margin: 0 auto;
- @include break-small {
- max-width: $visual-editor-max-width - ( 2 * $block-padding );
- }
-
- &:not( [data-insert-index="0"] ) {
- top: #{ -1 * ( $block-spacing / 2 ) };
+ &[data-insert-index="0"] {
+ max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ) - ( 2 * $block-padding );
+ margin: 0 auto;
+ @include break-small {
+ max-width: $visual-editor-max-width - ( 2 * $block-padding );
+ }
}
&:before {
@@ -454,6 +452,19 @@
}
}
+.editor-block-list__block > .editor-block-list__sibling-inserter {
+ position: absolute;
+ bottom: 0;
+ top: auto;
+ left: 0;
+ right: 0;
+
+ @include break-small {
+ left: $block-mover-padding-visible;
+ right: $block-mover-padding-visible;
+ }
+}
+
$sticky-bottom-offset: 20px;
.editor-block-contextual-toolbar {