From 95256f7d3a29811346593b28e92f3a3fd64a37e2 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 8 Feb 2021 12:49:54 +0100
Subject: [PATCH] Polish social links when inside navigation.

---
 .../block-library/src/navigation/style.scss     | 17 +++++++++++------
 .../block-library/src/social-links/editor.scss  |  8 ++++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index d385d679283953..2458c50779ecd6 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -1,9 +1,14 @@
-// Default background and font color
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
-	.wp-block-navigation__container {
-		color: $gray-900;
-		background-color: $white;
-		min-width: 200px;
+.wp-block-navigation__container {
+	// Vertically align child blocks, like Social Links or Search.
+	align-items: center;
+
+	// Default background and font color
+	&:not(.has-background) .wp-block-navigation__container {
+		.wp-block-navigation__container {
+			color: $gray-900;
+			background-color: $white;
+			min-width: 200px;
+		}
 	}
 }
 
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index e1c2e70cd0e570..e0ab02cb444da1 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -22,7 +22,7 @@
 	transition: all 0.1s ease-in-out;
 	@include reduce-motion("transition");
 
-	.is-selected & {
+	.is-selected > & {
 		opacity: 0.1;
 	}
 
@@ -40,7 +40,7 @@
 	// Wrap the remaining placeholders in a container so the plus can overlap.
 	> .wp-block-social-links__social-placeholder-icons {
 		display: flex;
-		position: absolute;
+		//position: absolute;
 	}
 
 	& + .block-list-appender,
@@ -67,6 +67,10 @@
 }
 
 // Polish the Appender.
+.wp-block-social-links .wp-block-social-links__social-placeholder + .block-list-appender {
+	position: absolute;
+}
+
 .wp-block-social-links .block-list-appender {
 	padding: 0;