Add labels to the global styles variations (#39322)

WordPress · Mar 24, 2022 · d9ebccf · d9ebccf
1 parent 8edcf37
commit d9ebccf
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 37 deletions.
diff --git a/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php b/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php
@@ -231,7 +231,11 @@ public function get_theme_items( $request ) {
 			foreach ( $nested_html_files as $path => $file ) {
 				$decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) );
 				if ( is_array( $decoded_file ) ) {
-					$variations[] = ( new WP_Theme_JSON_Gutenberg( $decoded_file ) )->get_raw_data();
+					$variation = ( new WP_Theme_JSON_Gutenberg( $decoded_file ) )->get_raw_data();
+					if ( empty( $variation['name'] ) ) {
+						$variation['name'] = basename( $path, '.json' );
+					}
+					$variations[] = $variation;
 				}
 			}
 		}

diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
@@ -28,6 +28,7 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
 		'styles',
 		'templateParts',
 		'version',
+		'name',
 	);
 
 	/**

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -5,65 +5,214 @@ import {
 	__unstableIframe as Iframe,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import {
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useStyle } from './hooks';
+import { useSetting, useStyle } from './hooks';
 import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = ( { height = 150 } ) => {
+const firstFrame = {
+	start: {
+		opacity: 1,
+		display: 'block',
+	},
+	hover: {
+		opacity: 0,
+		display: 'none',
+	},
+};
+
+const secondFrame = {
+	hover: {
+		opacity: 1,
+		display: 'block',
+	},
+	start: {
+		opacity: 0,
+		display: 'none',
+	},
+};
+
+const normalizedWidth = 250;
+
+const StylesPreview = ( { label, isFocused } ) => {
+	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
+	const [ headingFontFamily = fontFamily ] = useStyle(
+		'elements.h1.typography.fontFamily'
+	);
+	const [ headingFontWeight = fontWeight ] = useStyle(
+		'elements.h1.typography.fontWeight'
+	);
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
+	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
+	const disableMotion = useReducedMotion();
+	const [ coreColors ] = useSetting( 'color.palette.core' );
+	const [ themeColors ] = useSetting( 'color.palette.theme' );
+	const [ customColors ] = useSetting( 'color.palette.custom' );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ containerResizeListener, { width } ] = useResizeObserver();
+	const ratio = width ? width / normalizedWidth : 1;
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+	const highlightedColors = paletteColors
+		.filter(
+			// we exclude these two colors because they are already visible in the preview.
+			( { color } ) => color !== backgroundColor && color !== headingColor
+		)
+		.slice( 0, 2 );
 
 	return (
 		<Iframe
 			className="edit-site-global-styles-preview__iframe"
 			head={ <EditorStyles styles={ styles } /> }
-			style={ { height } }
+			style={ {
+				height: 150 * ratio,
+				visibility: ! width ? 'hidden' : 'visible',
+			} }
+			onMouseEnter={ () => setIsHovered( true ) }
+			onMouseLeave={ () => setIsHovered( false ) }
+			tabIndex={ -1 }
 		>
-			<div
+			{ containerResizeListener }
+			<motion.div
 				style={ {
-					display: 'flex',
-					gap: 20,
-					alignItems: 'center',
-					justifyContent: 'center',
 					height: '100%',
-					transform: `scale(${ height / 150 })`,
+					width: '100%',
 					background: gradientValue ?? backgroundColor,
 					cursor: 'pointer',
 				} }
+				initial="start"
+				animate={
+					( isHovered || isFocused ) && ! disableMotion
+						? 'hover'
+						: 'start'
+				}
 			>
-				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
-				<div
+				<motion.div
+					variants={ firstFrame }
 					style={ {
-						display: 'flex',
-						gap: 20,
-						flexDirection: 'column',
+						height: '100%',
+						overflow: 'hidden',
 					} }
 				>
-					<div
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
 						style={ {
-							height: 40,
-							width: 40,
-							background: textColor,
-							borderRadius: 20,
+							height: '100%',
+							overflow: 'hidden',
 						} }
-					/>{ ' ' }
-					<div
+					>
+						<div
+							style={ {
+								fontFamily: headingFontFamily,
+								fontSize: 65 * ratio,
+								color: headingColor,
+								fontWeight: headingFontWeight,
+							} }
+						>
+							Aa
+						</div>
+						<VStack spacing={ 2 * ratio }>
+							{ highlightedColors.map( ( { slug, color } ) => (
+								<div
+									key={ slug }
+									style={ {
+										height: 30 * ratio,
+										width: 30 * ratio,
+										background: color,
+										borderRadius: 15 * ratio,
+									} }
+								/>
+							) ) }
+						</VStack>
+					</HStack>
+				</motion.div>
+				<motion.div
+					variants={ secondFrame }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<VStack
+						spacing={ 3 * ratio }
+						justify="center"
 						style={ {
-							height: 40,
-							width: 40,
-							background: linkColor,
-							borderRadius: 20,
+							height: '100%',
+							overflow: 'hidden',
+							padding: 10 * ratio,
+							boxSizing: 'border-box',
 						} }
-					/>
-				</div>
-			</div>
+					>
+						{ label && (
+							<div
+								style={ {
+									fontSize: 35 * ratio,
+									fontFamily: headingFontFamily,
+									color: headingColor,
+									fontWeight: headingFontWeight,
+									lineHeight: '1em',
+								} }
+							>
+								{ label }
+							</div>
+						) }
+						<HStack spacing={ 2 * ratio } justify="flex-start">
+							<div
+								style={ {
+									fontFamily,
+									fontSize: 24 * ratio,
+									color: textColor,
+								} }
+							>
+								Aa
+							</div>
+							<div
+								style={ {
+									fontFamily,
+									fontSize: 24 * ratio,
+									color: linkColor,
+								} }
+							>
+								Aa
+							</div>
+						</HStack>
+						{ paletteColors && (
+							<HStack spacing={ 0 }>
+								{ paletteColors
+									.slice( 0, 4 )
+									.map( ( { color }, index ) => (
+										<div
+											key={ index }
+											style={ {
+												height: 10 * ratio,
+												width: 30 * ratio,
+												background: color,
+												flexGrow: 1,
+											} }
+										/>
+									) ) }
+							</HStack>
+						) }
+					</VStack>
+				</motion.div>
+			</motion.div>
 		</Iframe>
 	);
 };

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext } from '@wordpress/element';
+import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	__experimentalGrid as Grid,
@@ -31,6 +31,7 @@ function compareVariations( a, b ) {
 }
 
 function Variation( { variation } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
 		return {
@@ -77,8 +78,16 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
+				aria-label={ variation?.name }
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
 			>
-				<StylesPreview height={ 100 } />
+				<div className="edit-site-global-styles-variations_item-preview">
+					<StylesPreview
+						label={ variation?.name }
+						isFocused={ isFocused }
+					/>
+				</div>
 			</div>
 		</GlobalStylesContext.Provider>
 	);

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -73,19 +73,23 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
-	padding: $border-width * 2;
-	border-radius: $radius-block-ui;
-	border: $gray-200 $border-width solid;
 
-	&.is-active {
+	.edit-site-global-styles-variations_item-preview {
+		padding: $border-width * 2;
+		border-radius: $radius-block-ui;
+		border: $gray-200 $border-width solid;
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}
 
-	&:hover {
+	&:hover .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 
-	&:focus {
+	&:focus .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
+
diff --git a/phpunit/class-gutenberg-rest-global-styles-controller-test.php b/phpunit/class-gutenberg-rest-global-styles-controller-test.php
@@ -110,6 +110,7 @@ public function test_get_theme_items() {
 						),
 					),
 				),
+				'name'     => 'variation',
 			),
 		);
 		$this->assertSameSetsWithIndex( $data, $expected );
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,7 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { @@
     		'styles',
     		'templateParts',
     		'version',
+    		'name',
     	);
     	/**
@@ Expand Down @@