From bd1c28baed3e1d0bf36e97ad007c1666ee784fb6 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 16 Oct 2023 22:18:48 +0100 Subject: [PATCH 1/4] Default colors for inactive icons with block theme --- .../src/social-link/edit.native.js | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index 856c6aa704a4e6..9e832e8be60e80 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -10,11 +10,18 @@ import { BlockControls, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useEffect, useState, useRef, useCallback } from '@wordpress/element'; +import { + useEffect, + useState, + useRef, + useCallback, + useContext, +} from '@wordpress/element'; import { ToolbarGroup, ToolbarButton, LinkSettingsNavigation, + GlobalStylesContext, } from '@wordpress/components'; import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; @@ -62,15 +69,21 @@ const SocialLinkEdit = ( { const { url, service = name } = attributes; const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false ); const [ hasUrl, setHasUrl ] = useState( !! url ); + const globalStyles = useContext( GlobalStylesContext ); const activeIcon = styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ] || DEFAULT_ACTIVE_ICON_STYLES; + + const inactivePreferredStyles = usePreferredColorSchemeStyle( + styles.inactiveIcon, + styles.inactiveIconDark + ); + const inactiveIcon = - usePreferredColorSchemeStyle( - styles.inactiveIcon, - styles.inactiveIconDark - ) || DEFAULT_INACTIVE_ICON_STYLES; + ! globalStyles && inactivePreferredStyles + ? inactivePreferredStyles + : DEFAULT_INACTIVE_ICON_STYLES; const animatedValue = useRef( new Animated.Value( 0 ) ).current; From 90f8216f2bd8a42e85433e3012d80d6b050a718c Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 19 Oct 2023 15:10:53 +0100 Subject: [PATCH 2/4] Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 9e69c51a6b73ba..0411eb81edab51 100644 --- 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] ## 1.106.0 - [*] Exit Preformatted and Verse blocks by triple pressing the Return key [#53354] From dc5653a00cd1417791c71ead4c8418bf62ac362c Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 20 Oct 2023 11:43:09 +0100 Subject: [PATCH 3/4] Replace context with function for fetching styles --- .../block-library/src/social-link/edit.native.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index 9e832e8be60e80..a47ce457bf45e8 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -10,18 +10,12 @@ import { BlockControls, store as blockEditorStore, } from '@wordpress/block-editor'; -import { - useEffect, - useState, - useRef, - useCallback, - useContext, -} from '@wordpress/element'; +import { useEffect, useState, useRef, useCallback } from '@wordpress/element'; import { ToolbarGroup, ToolbarButton, LinkSettingsNavigation, - GlobalStylesContext, + useGlobalStyles, } from '@wordpress/components'; import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; @@ -69,7 +63,7 @@ const SocialLinkEdit = ( { const { url, service = name } = attributes; const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false ); const [ hasUrl, setHasUrl ] = useState( !! url ); - const globalStyles = useContext( GlobalStylesContext ); + const globalStyles = useGlobalStyles(); const activeIcon = styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ] || From bcda2334ae49117d326f97a487247beb54948a00 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 23 Oct 2023 11:46:54 +0100 Subject: [PATCH 4/4] Swap inactive icon colors with reduced opacity As per the feedback here, we've decided to reduce the opacity of inactive icons, rather than setting custom colors: https://github.com/WordPress/gutenberg/pull/55398#issuecomment-1772693340 This change aligns with the web's behaviour. --- .../src/social-link/edit.native.js | 45 +++++-------------- .../src/social-link/editor.native.scss | 9 ---- 2 files changed, 12 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index a47ce457bf45e8..3ea794a9b8c20b 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -15,9 +15,8 @@ import { ToolbarGroup, ToolbarButton, LinkSettingsNavigation, - useGlobalStyles, } 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'; @@ -31,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; @@ -63,22 +58,10 @@ const SocialLinkEdit = ( { const { url, service = name } = attributes; const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false ); const [ hasUrl, setHasUrl ] = useState( !! url ); - const globalStyles = useGlobalStyles(); const activeIcon = styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ] || DEFAULT_ACTIVE_ICON_STYLES; - - const inactivePreferredStyles = usePreferredColorSchemeStyle( - styles.inactiveIcon, - styles.inactiveIconDark - ); - - const inactiveIcon = - ! globalStyles && inactivePreferredStyles - ? inactivePreferredStyles - : DEFAULT_INACTIVE_ICON_STYLES; - const animatedValue = useRef( new Animated.Value( 0 ) ).current; const IconComponent = getIconBySite( service )(); @@ -101,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( [ @@ -207,12 +180,18 @@ const SocialLinkEdit = ( { accessibilityHint={ accessibilityHint } > diff --git a/packages/block-library/src/social-link/editor.native.scss b/packages/block-library/src/social-link/editor.native.scss index 91b69de77de64e..fbbc8eb09e6a8c 100644 --- 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; }