diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 070c5edf272a25..b7d78bcf87821e 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -46,9 +46,8 @@ export function SocialLinksEdit( props ) {
 		<div className="wp-block-social-links__social-placeholder">
 			<div className="wp-social-link"></div>
 			<div className="wp-block-social-links__social-placeholder-icons">
-				<div className="wp-social-link"></div>
-				<div className="wp-social-link wp-social-link-facebook"></div>
 				<div className="wp-social-link wp-social-link-twitter"></div>
+				<div className="wp-social-link wp-social-link-facebook"></div>
 				<div className="wp-social-link wp-social-link-instagram"></div>
 			</div>
 		</div>
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index c4f31b23ac267d..ec7d7962dd19cd 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -19,6 +19,12 @@
 .wp-block-social-links__social-placeholder {
 	display: flex;
 	opacity: 0.8;
+	transition: all 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	.is-selected & {
+		opacity: 0.1;
+	}
 
 	// Use the first link to set the height.
 	> .wp-social-link {