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 {