diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 4f73af7a421756..e7c4d80575e24e 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -396,6 +396,13 @@ function BlockListBlock( { /> ); + // Position above the anchor, pop out towards the right, and position in the + // left corner. For the side inserter, pop out towards the left, and + // position in the right corner. + // To do: refactor `Popover` to make this prop clearer. + const popoverPosition = showEmptyBlockSideInserter ? 'top left right' : 'top right left'; + const popoverIsSticky = isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true; + return ( ) } - { ( shouldShowBreadcrumb || shouldShowContextualToolbar || isForcingContextualToolbar.current ) && ( + { ( + shouldShowBreadcrumb || + shouldShowContextualToolbar || + isForcingContextualToolbar.current || + showEmptyBlockSideInserter + ) && ( ) } + { showEmptyBlockSideInserter && ( +
+ +
+ ) }
) }
{ !! hasError && }
- { showEmptyBlockSideInserter && ( -
- -
- ) }
); } diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ad5ce253e32b22..1ccf86d9b64793 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -361,7 +361,6 @@ // This essentially duplicates the mobile styles for the appender component. // It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec .block-editor-block-list__layout { - .block-editor-block-list__empty-block-inserter, .block-editor-default-block-appender .block-editor-inserter { left: auto; right: $grid-size; @@ -535,7 +534,7 @@ z-index: z-index(".block-editor-block-list__block-popover"); .components-popover__content { - margin-left: 0 !important; + margin: 0 !important; min-width: auto; background: none; border: none; diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss index b1368fb2a2b060..01d61a95aa4e16 100644 --- a/packages/block-editor/src/components/default-block-appender/style.scss +++ b/packages/block-editor/src/components/default-block-appender/style.scss @@ -62,7 +62,6 @@ .components-button.has-icon { width: $block-side-ui-width; height: $block-side-ui-width; - margin-right: 12px; padding: 0; } @@ -89,10 +88,7 @@ @include break-small { display: flex; - align-items: center; height: 100%; - left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; - right: auto; } &:disabled { @@ -114,3 +110,9 @@ } } } + +.block-editor-default-block-appender .block-editor-inserter { + @include break-small { + align-items: center; + } +}