Make appender fixed position to avoid jumps in the UI (#36605)

Co-authored-by: Ella van Durpe <ella@vandurpe.com>
WordPress · Nov 19, 2021 · d69d172 · d69d172
1 parent 4d1b2dc
commit d69d172
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 122 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -43,6 +43,9 @@ $z-layers: (
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
+	// Fixed position appender:
+	".block-editor-block-list__block .block-list-appender": 2,
+
 	// Navigation menu dropdown.
 	".has-child .wp-block-navigation__submenu-container": 28,
 	".has-child:hover .wp-block-navigation__submenu-container": 29,

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -1,45 +1,3 @@
-// These styles are only applied to the appender when it appears inside of a block.
-// Otherwise the default appender may be improperly positioned in some themes.
-.block-editor-block-list__block .block-list-appender {
-	align-self: center;
-	padding: 0;
-	list-style: none;
-
-	// Themes sometimes apply a max-width to all elements classed blocks.
-	&.wp-block {
-		max-width: none;
-	}
-
-	.block-editor-default-block-appender {
-		margin: $grid-unit-10 0;
-	}
-
-	// Zero out the margin that's inherited from common.scss.
-	margin-bottom: revert;
-
-	// Black square plus appender.
-	.block-list-appender__toggle {
-		padding: 0;
-
-		// Animate appearance.
-		opacity: 1;
-		transform: scale(1);
-		transition: all 0.1s ease;
-		@include reduce-motion("transition");
-
-		// The black square button should have a little left margin in horizontal containers.
-		margin-left: $grid-unit-10;
-	}
-
-	// Cancel any left margin if the black plus sits alone in the container.
-	// `first-of-type` is used instead of `first-child` as the element is not always the only
-	// element in the "empty" container. For example the empty navigation block state has a
-	// zero-width placeholder state that is meant to help correctly size the dimensions.
-	&:first-of-type .block-list-appender__toggle {
-		margin-left: 0;
-	}
-}
-
 // For vertical flex containers, a 100% width ensures correct alignment.
 .is-vertical .block-list-appender {
 	width: $icon-size;

diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -26,21 +26,4 @@
 	&:active {
 		color: $black;
 	}
-
-	// This variant is used in inline situations, like Buttons, Social Links, Navigation Menu.
-	&.block-list-appender__toggle {
-		display: flex;
-		flex-direction: row;
-		box-shadow: none;
-		height: $icon-size;
-		width: $icon-size;
-
-		& > svg {
-			width: $icon-size;
-			background-color: $gray-900;
-			color: $white;
-			border-radius: $radius-block-ui;
-			flex: 1 0 auto;
-		}
-	}
 }
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -1,3 +1,12 @@
+/**
+ * Default block appender.
+ *
+ * This component shows up in 3 places:
+ * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
+ * - on the right, inside empty paragraphs
+ * - absolute positioned and blue inside nesting containers
+ */
+
 .block-editor-default-block-appender {
 	clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
 
@@ -23,32 +32,97 @@
 	}
 }
 
-// Empty / default block side inserter.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
-.block-editor-default-block-appender .block-editor-inserter { // Empty appender.
+// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
+// that exists only on empty documents.
+.block-editor-default-block-appender .block-editor-inserter,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
 	position: absolute;
 	top: 0;
-	height: $button-size-small + $grid-unit-10;
+	right: 0;
+	line-height: 0;
 
-	.block-editor-inserter__toggle {
-		margin-right: 0;
+	&:disabled {
+		display: none;
 	}
 }
 
-// Left side.
-.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-	@include break-small {
-		display: flex;
-		height: 100%;
+
+/**
+ * Fixed position appender.
+ * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ */
+
+.block-editor-block-list__block .block-list-appender {
+	position: absolute;
+	list-style: none;
+	padding: 0;
+	z-index: z-index(".block-editor-block-list__block .block-list-appender");
+	bottom: 0;
+	right: 0;
+
+	// These rules needs extra specificity as it's affected by DOM rules.
+	&.block-list-appender {
+		margin: 0;
+		line-height: 0;
 	}
 
-	&:disabled {
+	.block-editor-default-block-appender {
+		height: $button-size-small;
+	}
+
+	// @todo: these are currently two separate components. Since we're now
+	// treating them the same, one or both can be retired.
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		flex-direction: row;
+		box-shadow: none;
+		height: $button-size-small;
+		width: $button-size-small;
+
+		// Hide by default, then we unhide it when the selected block is a direct ancestor.
+		display: none;
+
+		// Important to override styles form Button component.
+		padding: 0 !important;
+
+		// Basic look
+		background: $gray-900;
+		color: $white;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	// This content only shows up inside the empty appender.
+	.block-editor-default-block-appender__content {
 		display: none;
 	}
+
+	// These could be avoided by employing a :not(:only-child) on the parent,
+	// but this should be more performant.
+	// @todo: These styles can almost certainly be refactored away we refactor
+	// the markup and classes of the component itself. The rules provide some
+	// baseline styles for when the block is the only one inside.
+	&:only-child {
+		position: relative;
+		right: auto;
+		align-self: center;
+		list-style: none;
+		line-height: inherit;
+
+		.block-editor-default-block-appender__content {
+			display: block;
+		}
+	}
 }
 
-.block-editor-default-block-appender.has-visible-prompt .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter {
-	right: 0;
+// Unhide the inserter when you're in the exact container.
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
+.block-editor-block-list__block.is-selected > .block-list-appender {
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		display: flex;
+	}
 }
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
@@ -37,7 +37,6 @@
 		display: flex;
 	}
 
-	& + .block-list-appender,
 	.wp-social-link {
 		padding: 0.25em;
 
@@ -66,6 +65,7 @@
 
 // Selected placeholder state.
 .wp-block-social-links .wp-block-social-links__social-prompt {
+	min-height: $button-size-small;
 	list-style: none;
 	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
@@ -77,52 +77,6 @@
 	margin-bottom: auto;
 	cursor: default;
 	padding-right: $grid-unit-10;
-
-	& + .block-list-appender {
-		margin-right: $grid-unit-10;
-		padding: 0.25em;
-	}
-}
-
-// Polish the Appender.
-.wp-block-social-links .block-list-appender {
-	// Match the overall silhouette of social links.
-	margin: 4px auto 4px 0;
-	border-radius: 9999px; // This works as both circular and pill shapes.
-
-	// Treat just like a social icon.
-	.block-editor-inserter {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: inherit;
-		width: 1em;
-		height: 1em;
-	}
-
-	// Duplicate the font sizes from style.scss to size the appender.
-	.has-small-icon-size & {
-		font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
-	}
-
-	// Normal/default.
-	.has-normal-icon-size & {
-		font-size: 24px;
-	}
-
-	// Large.
-	.has-large-icon-size & {
-		font-size: 36px;
-	}
-
-	// Huge.
-	.has-huge-icon-size & {
-		font-size: 48px;
-	}
-
-	&::before {
-		content: none;
-	}
 }
 
 // Center flex items. This has an equivalent in style.scss.

diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
@@ -9,6 +9,7 @@ import {
 	insertBlock,
 	openGlobalBlockInserter,
 	closeGlobalBlockInserter,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Allowed Blocks Setting on InnerBlocks', () => {
@@ -75,6 +76,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		await insertBlock( 'Image' );
 		await closeGlobalBlockInserter();
 		await page.waitForSelector( '.product[data-number-of-children="2"]' );
+		await clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
 		// This focus shouldn't be neessary but there's a bug in trunk right now
 		// Where if you open the inserter, don't do anything and click the "appender" on the canvas
 		// the appender is not opened right away.