Block: side inserter in Popover (#19406)

WordPress · Jan 9, 2020 · 50f471e · 50f471e
1 parent 8fcbed7
commit 50f471e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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;
+	}
+}