Tweaked variations picker design and add the default variation

WordPress · Jan 24, 2022 · f5aee3f · f5aee3f
1 parent cf1b694
commit f5aee3f
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 58 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -1,24 +1,18 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	__unstableIframe as Iframe,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
-import { Card } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
 import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = ( { height = 150, ...props } ) => {
+const StylesPreview = ( { height = 150 } ) => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
@@ -27,62 +21,50 @@ const StylesPreview = ( { height = 150, ...props } ) => {
 	const [ styles ] = useGlobalStylesOutput();
 
 	return (
-		<Card
-			{ ...props }
-			style={ {
-				height,
-				...props.style,
-			} }
-			className={ classnames(
-				'edit-site-global-styles-preview',
-				props.className
-			) }
+		<Iframe
+			className="edit-site-global-styles-preview__iframe"
+			head={ <EditorStyles styles={ styles } /> }
+			style={ { height } }
 		>
-			<Iframe
-				className="edit-site-global-styles-preview__iframe"
-				head={ <EditorStyles styles={ styles } /> }
-				style={ { height } }
+			<div
+				style={ {
+					display: 'flex',
+					gap: 20,
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+					transform: `scale(${ height / 150 })`,
+					background: gradientValue ?? backgroundColor,
+					cursor: 'pointer',
+				} }
 			>
+				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 				<div
 					style={ {
 						display: 'flex',
 						gap: 20,
-						alignItems: 'center',
-						justifyContent: 'center',
-						height: '100%',
-						transform: `scale(${ height / 150 })`,
-						background: gradientValue ?? backgroundColor,
-						cursor: 'pointer',
+						flexDirection: 'column',
 					} }
 				>
-					<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 					<div
 						style={ {
-							display: 'flex',
-							gap: 20,
-							flexDirection: 'column',
+							height: 40,
+							width: 40,
+							background: textColor,
+							borderRadius: 20,
+						} }
+					/>{ ' ' }
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: linkColor,
+							borderRadius: 20,
 						} }
-					>
-						<div
-							style={ {
-								height: 40,
-								width: 40,
-								background: textColor,
-								borderRadius: 20,
-							} }
-						/>{ ' ' }
-						<div
-							style={ {
-								height: 40,
-								width: 40,
-								background: linkColor,
-								borderRadius: 20,
-							} }
-						/>
-					</div>
+					/>
 				</div>
-			</Iframe>
-		</Card>
+			</div>
+		</Iframe>
 	);
 };
 

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -36,7 +36,9 @@ function ScreenRoot() {
 		<Card size="small">
 			<CardBody>
 				<VStack spacing={ 2 }>
-					<StylesPreview />
+					<Card>
+						<StylesPreview />
+					</Card>
 					{ !! variations?.length && (
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">

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
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -20,8 +26,12 @@ import { GlobalStylesContext } from './context';
 import StylesPreview from './preview';
 import ScreenHeader from './header';
 
+function compareVariations( a, b ) {
+	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
+}
+
 function Variation( { variation } ) {
-	const { base, setUserConfig } = useContext( GlobalStylesContext );
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
 		return {
 			user: {
@@ -50,15 +60,26 @@ function Variation( { variation } ) {
 		}
 	};
 
+	const isActive = useMemo( () => {
+		return compareVariations( user, variation );
+	}, [ user, variation ] );
+
 	return (
 		<GlobalStylesContext.Provider value={ context }>
-			<StylesPreview
-				className="edit-site-global-styles-variations_item"
+			<div
+				className={ classnames(
+					'edit-site-global-styles-variations_item',
+					{
+						'is-active': isActive,
+					}
+				) }
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
-				height={ 100 }
-			/>
+				tabIndex="0"
+			>
+				<StylesPreview height={ 100 } />
+			</div>
 		</GlobalStylesContext.Provider>
 	);
 }
@@ -72,6 +93,17 @@ function ScreenStyleVariations() {
 		};
 	}, [] );
 
+	const withEmptyVariation = useMemo( () => {
+		return [
+			{
+				name: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variations,
+		];
+	}, [ variations ] );
+
 	return (
 		<>
 			<ScreenHeader
@@ -85,7 +117,7 @@ function ScreenStyleVariations() {
 			<Card size="small" isBorderless>
 				<CardBody>
 					<Grid columns={ 2 }>
-						{ variations?.map( ( variation, index ) => (
+						{ withEmptyVariation?.map( ( variation, index ) => (
 							<Variation key={ index } variation={ variation } />
 						) ) }
 					</Grid>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -8,6 +8,7 @@
 
 .edit-site-global-styles-preview__iframe {
 	max-width: 100%;
+	display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -69,3 +70,22 @@
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
+
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	padding: 3px;
+	border-radius: $radius-block-ui;
+	border: $gray-200 1px solid;
+
+	&.is-active {
+		border: $gray-900 1px solid;
+	}
+
+	&:hover {
+		border: var(--wp-admin-theme-color) 1px solid;
+	}
+
+	&:focus {
+		border: var(--wp-admin-theme-color) 1px solid;
+	}
+}