Add link element :hover interactivity control to global styles UI (#…

…41976) * Add initial tabs * Add hover state UI and handlers * Adds focus and active states * Add layered stack to link colors overview item * Simplify and handle :hover only * Dry up generation of tabs from config * Remove need to interstitial variables * DRY up tab panels and add guard clause * Add label prop to enable i18n and simplify implementation Props @dmsnell * Learn to spell pseudo correctly 🤦‍♂️ Co-authored-by: Andrei Draganescu <[email protected]> * Simplify creation of pseudo states config Co-authored-by: Andrei Draganescu <[email protected]>
WordPress · Jul 1, 2022 · 2de9e2d · 2de9e2d
1 parent 3ae8f81
commit 2de9e2d
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 26 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -82,6 +82,7 @@ function LinkColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
 	const [ color ] = useStyle( 'elements.link.color.text', name );
+	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -93,9 +94,14 @@ function LinkColorItem( { name, parentMenu } ) {
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
-				</ColorIndicatorWrapper>
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ colorHover } />
+					</ColorIndicatorWrapper>
+				</ZStack>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>

diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
+import { TabPanel } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -29,40 +29,82 @@ function ScreenLinkColor( { name } ) {
 		isLinkEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
-	const [ linkColor, setLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name
-	);
-	const [ userLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name,
-		'user'
-	);
+	const pseudoStates = {
+		default: {
+			label: __( 'Default' ),
+			value: useStyle( 'elements.link.color.text', name )[ 0 ],
+			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
+			userValue: useStyle(
+				'elements.link.color.text',
+				name,
+				'user'
+			)[ 0 ],
+		},
+		hover: {
+			label: __( 'Hover' ),
+			value: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],
+			handler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],
+			userValue: useStyle(
+				'elements.link.:hover.color.text',
+				name,
+				'user'
+			)[ 0 ],
+		},
+	};
 
 	if ( ! hasLinkColor ) {
 		return null;
 	}
 
+	const tabs = Object.entries( pseudoStates ).map(
+		( [ selector, config ] ) => {
+			return {
+				name: selector,
+				title: config.label,
+				className: `color-text-${ selector }`,
+			};
+		}
+	);
+
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Links' ) }
 				description={ __(
-					'Set the default color used for links across the site.'
+					'Set the colors used for links across the site.'
 				) }
 			/>
-			<ColorGradientControl
-				className="edit-site-screen-link-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ linkColor }
-				onColorChange={ setLinkColor }
-				clearable={ linkColor === userLinkColor }
-			/>
+
+			<TabPanel className="my-tab-panel" tabs={ tabs }>
+				{ ( tab ) => {
+					const pseudoSelectorConfig =
+						pseudoStates[ tab.name ] ?? null;
+
+					if ( ! pseudoSelectorConfig ) {
+						return null;
+					}
+
+					return (
+						<>
+							<ColorGradientControl
+								className="edit-site-screen-link-color__control"
+								colors={ colorsPerOrigin }
+								disableCustomColors={ ! areCustomSolidsEnabled }
+								__experimentalHasMultipleOrigins
+								showTitle={ false }
+								enableAlpha
+								__experimentalIsRenderedInSidebar
+								colorValue={ pseudoSelectorConfig.value }
+								onColorChange={ pseudoSelectorConfig.handler }
+								clearable={
+									pseudoSelectorConfig.value ===
+									pseudoSelectorConfig.userValue
+								}
+							/>
+						</>
+					);
+				} }
+			</TabPanel>
 		</>
 	);
 }