[RNMobile] Social Icons: Ensure inactive icons are visible with block…

…-based themes (#55398) Ensure inactive icons are visible with block-based themes.
WordPress · Oct 25, 2023 · 377b81d · 377b81d · github-actions · Oct 25, 2023
1 parent 67bfa0a
commit 377b81d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 35 deletions.
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
@@ -16,7 +16,7 @@ import {
 	ToolbarButton,
 	LinkSettingsNavigation,
 } from '@wordpress/components';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
@@ -30,10 +30,6 @@ const DEFAULT_ACTIVE_ICON_STYLES = {
 	backgroundColor: '#f0f0f0',
 	color: '#444',
 };
-const DEFAULT_INACTIVE_ICON_STYLES = {
-	backgroundColor: '#0000003f',
-	color: '#fff',
-};
 const ANIMATION_DELAY = 300;
 const ANIMATION_DURATION = 400;
 
@@ -66,12 +62,6 @@ const SocialLinkEdit = ( {
 		styles[ `wp-social-link-${ service }` ] ||
 		styles[ `wp-social-link` ] ||
 		DEFAULT_ACTIVE_ICON_STYLES;
-	const inactiveIcon =
-		usePreferredColorSchemeStyle(
-			styles.inactiveIcon,
-			styles.inactiveIconDark
-		) || DEFAULT_INACTIVE_ICON_STYLES;
-
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
 	const IconComponent = getIconBySite( service )();
@@ -94,23 +84,13 @@ const SocialLinkEdit = ( {
 	}, [ url ] );
 
 	const interpolationColors = {
-		backgroundColor: animatedValue.interpolate( {
-			inputRange: [ 0, 1 ],
-			outputRange: [
-				inactiveIcon.backgroundColor,
-				activeIcon.backgroundColor,
-			],
-		} ),
-		color: animatedValue.interpolate( {
+		opacity: animatedValue.interpolate( {
 			inputRange: [ 0, 1 ],
-			outputRange: [ inactiveIcon.color, activeIcon.color ],
+			outputRange: [ 0.3, 1 ],
 		} ),
-		stroke: '',
 	};
 
-	const { backgroundColor, color, stroke } = hasUrl
-		? activeIcon
-		: interpolationColors;
+	const { opacity } = hasUrl ? activeIcon : interpolationColors;
 
 	function animateColors() {
 		Animated.sequence( [
@@ -200,12 +180,18 @@ const SocialLinkEdit = ( {
 				accessibilityHint={ accessibilityHint }
 			>
 				<Animated.View
-					style={ [ styles.iconContainer, { backgroundColor } ] }
+					style={ [
+						styles.iconContainer,
+						{
+							backgroundColor: activeIcon.backgroundColor,
+							opacity,
+						},
+					] }
 				>
 					<Icon
 						animated
 						icon={ IconComponent }
-						style={ { stroke, color } }
+						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
 			</TouchableWithoutFeedback>

diff --git a/packages/block-library/src/social-link/editor.native.scss b/packages/block-library/src/social-link/editor.native.scss
@@ -13,15 +13,6 @@
 	justify-content: center;
 }
 
-.inactiveIcon {
-	background-color: $light-quaternary;
-	color: $white;
-}
-
-.inactiveIconDark {
-	background-color: $dark-quaternary;
-}
-
 .container {
 	margin: $block-selected-margin;
 }
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Social Icons: Fix visibility of inactive icons when used with block based themes in dark mode [#55398]
 -   [*] Synced Patterns: Fix visibility of heading section when used with block based themes in dark mode [#55399]
 -   [*] Classic block: Add option to convert to blocks [#55461]