Try alternate approach.

WordPress · Nov 18, 2020 · ca0ebc8 · ca0ebc8
1 parent 8caf3a0
commit ca0ebc8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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 {