diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 4f73af7a42175..e7c4d80575e24 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 ( <animated.div id={ blockElementId } @@ -427,18 +434,20 @@ function BlockListBlock( { // of the appropriate parent. <ChildToolbarSlot /> ) } - { ( shouldShowBreadcrumb || shouldShowContextualToolbar || isForcingContextualToolbar.current ) && ( + { ( + shouldShowBreadcrumb || + shouldShowContextualToolbar || + isForcingContextualToolbar.current || + showEmptyBlockSideInserter + ) && ( <Popover noArrow animate={ false } - // Position above the anchor, pop out towards the right, - // and position in the left corner. - // To do: refactor `Popover` to make this prop clearer. - position="top right left" + position={ popoverPosition } focusOnMount={ false } anchorRef={ blockNodeRef.current } className="block-editor-block-list__block-popover" - __unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true } + __unstableSticky={ showEmptyBlockSideInserter ? false : popoverIsSticky } __unstableSlotName="block-toolbar" // Allow subpixel positioning for the block movement animation. __unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && wrapper.current } @@ -460,6 +469,16 @@ function BlockListBlock( { data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined } /> ) } + { showEmptyBlockSideInserter && ( + <div className="block-editor-block-list__empty-block-inserter"> + <Inserter + position="top right" + onToggle={ selectOnOpen } + rootClientId={ rootClientId } + clientId={ clientId } + /> + </div> + ) } </Popover> ) } <div @@ -485,16 +504,6 @@ function BlockListBlock( { </BlockCrashBoundary> { !! hasError && <BlockCrashWarning /> } </div> - { showEmptyBlockSideInserter && ( - <div className="block-editor-block-list__empty-block-inserter"> - <Inserter - position="top right" - onToggle={ selectOnOpen } - rootClientId={ rootClientId } - clientId={ clientId } - /> - </div> - ) } </animated.div> ); } diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ad5ce253e32b2..1ccf86d9b6479 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 b1368fb2a2b06..01d61a95aa4e1 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; + } +}