Remove Button component from social link block, replace with `butto…

…n` element (#61270) * Use button element instead of button component in social link block * Implement base styles to match previous button component implementation * Add focus styles Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: tellthemachines <[email protected]>
WordPress · May 1, 2024 · 96291ee · 96291ee
1 parent 28054e3
commit 96291ee
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -158,7 +158,7 @@ const SocialLinkEdit = ( {
 				/>
 			</InspectorControls>
 			<li { ...blockProps }>
-				<Button
+				<button
 					className="wp-block-social-link-anchor"
 					ref={ setPopoverAnchor }
 					onClick={ () => setPopover( true ) }
@@ -171,7 +171,7 @@ const SocialLinkEdit = ( {
 					>
 						{ socialLinkText }
 					</span>
-				</Button>
+				</button>
 				{ isSelected && showURLPopover && (
 					<SocialLinkURLPopover
 						url={ url }

diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
@@ -1,19 +1,33 @@
-// 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;
+}
+
+// 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;
 
-	button {
-		font-size: inherit;
-		color: currentColor;
-		height: auto;
-		line-height: 0;
+	// This rule is duplicated from the style.scss and needs to be the same as there.
+	padding: 0.25em;
 
-		// This rule ensures social link buttons display correctly in template parts.
-		opacity: 1;
+	// Focus styles replicate the `@wordpress/components` button component.
+	&:focus:not(:disabled) {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-		// This rule is duplicated from the style.scss and needs to be the same as there.
-		padding: 0.25em;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 3px solid transparent;
 	}
 }