Try: Make appender fixed position.

WordPress · Oct 28, 2021 · eaacedf · eaacedf
1 parent 3bcfe24
commit eaacedf
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 53 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -46,6 +46,7 @@ $grid-unit-60: 6 * $grid-unit;		// 48px
 $icon-size: 24px;
 $button-size: 36px;
 $button-size-small: 24px;
+$button-size-xs: 18px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
 $nav-sidebar-width: 300px;

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,7 +1,14 @@
 // 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;
+	position: absolute;
+	z-index: 2;
+	right: -($button-size-xs * 0.5);
+	top: calc(50% - (#{$button-size-xs} / 2));
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	/*align-self: center;
 	padding: 0;
 	list-style: none;
 
@@ -37,7 +44,7 @@
 	// 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.

diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -32,12 +32,15 @@
 		display: flex;
 		flex-direction: row;
 		box-shadow: none;
-		height: $icon-size;
-		width: $icon-size;
+		height: $button-size-xs;
+		width: $button-size-xs;
+		// Important to override styles form Button component.
+		padding: 0 !important;
 
 		& > svg {
-			width: $icon-size;
-			background-color: $gray-900;
+			width: $button-size-xs;
+			height: $button-size-xs;
+			background-color: var(--wp-admin-theme-color);
 			color: $white;
 			border-radius: $radius-block-ui;
 			flex: 1 0 auto;

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-xs;
 	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.