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;
+ }
+}