Implement base styles to match previous button component implementation

WordPress · May 1, 2024 · 4849638 · 4849638
1 parent 0ed3099
commit 4849638
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
@@ -1,20 +1,25 @@
-// The editor uses the button component, the frontend uses a link.
-// Therefore we unstyle the button component to make it more like the frontend.
 .wp-block-social-links .wp-social-link {
 	line-height: 0;
+}
 
-	button {
-		font-size: inherit;
-		color: currentColor;
-		height: auto;
-		line-height: 0;
+// The editor uses the button element, the frontend uses a link.
+// Therefore we unstyle the button element to make it more like the frontend.
+.wp-block-social-link-anchor {
+	align-items: center;
+	background: none;
+	border: 0;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: inline-flex;
+	font-size: inherit;
+	color: currentColor;
+	height: auto;
 
-		// This rule ensures social link buttons display correctly in template parts.
-		opacity: 1;
+	// This rule ensures social link buttons display correctly in template parts.
+	opacity: 1;
 
-		// This rule is duplicated from the style.scss and needs to be the same as there.
-		padding: 0.25em;
-	}
+	// This rule is duplicated from the style.scss and needs to be the same as there.
+	padding: 0.25em;
 }
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {