Follow up tweaks for global styles presets (WordPress#60031)

* Update ColorToolsPanel to "Elements" H3 * Improve copy and spacing on "colors" screen * Tweak HighlightedColors size and spacing * Tweak palette count visual and empty state copy * Tweak styles * Add "Presets" subtitle, adjust grid * Tweaks * Add back 'custom' * Adjust spacing of font families * Adjust subtitles * Use $border-width * Linting * Fix consistent margin top * remove unused styles * Remove duplicate VStack * Add reduce-motion and comments for box shadow transitions * also set the gap on the style variation component * use a generic class for shared styles --------- Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
carstingaxion · Mar 27, 2024 · 0409194 · 0409194
1 parent 3c08618
commit 0409194
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 73 deletions.
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -123,10 +123,11 @@ function ColorToolsPanel( {
 
 	return (
 		<ToolsPanel
-			label={ __( 'Color' ) }
+			label={ __( 'Elements' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			hasInnerWrapper
+			headingLevel={ 3 }
 			className="color-block-support-panel"
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"

diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
@@ -37,7 +37,7 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 3 }>
+			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 					<HStack justify="flex-end">

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -87,7 +87,9 @@ function Palette( { name } ) {
 									</ColorIndicatorWrapper>
 								) ) }
 						</ZStack>
-						<FlexItem>{ paletteButtonText }</FlexItem>
+						<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
+							{ paletteButtonText }
+						</FlexItem>
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>

diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js
@@ -40,15 +40,15 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					} }
 				>
 					<HStack
-						spacing={ 10 * ratio }
+						spacing={ 5 * ratio }
 						justify="center"
 						style={ {
 							height: '100%',
 							overflow: 'hidden',
 						} }
 					>
 						<HighlightedColors
-							normalizedColorSwatchSize={ 66 }
+							normalizedColorSwatchSize={ 56 }
 							ratio={ ratio }
 						/>
 					</HStack>

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -35,12 +35,12 @@ function ScreenColors() {
 			<ScreenHeader
 				title={ __( 'Colors' ) }
 				description={ __(
-					'Manage palettes and the default color of different global elements on the site.'
+					'Palette colors and the application of those colors on site elements.'
 				) }
 			/>
-			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 6 }>
-					<ColorVariations />
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -26,17 +26,14 @@ function ScreenTypography() {
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the typography settings for different elements.'
+					'Typography styles and the application of those styles on site elements.'
 				) }
 			/>
-			<div className="edit-site-global-styles-screen-typography">
-				<VStack spacing={ 6 }>
-					<TypographyVariations />
-					{ ! window.__experimentalDisableFontLibrary && (
-						<VStack spacing={ 3 }>
-							{ fontLibraryEnabled && <FontFamilies /> }
-						</VStack>
-					) }
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations title={ __( 'Presets' ) } />
+					{ ! window.__experimentalDisableFontLibrary &&
+						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>

diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
 
-export default function StyleVariationsContainer() {
+export default function StyleVariationsContainer( { gap = 2 } ) {
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -39,6 +39,7 @@ export default function StyleVariationsContainer() {
 		<Grid
 			columns={ 2 }
 			className="edit-site-global-styles-style-variations-container"
+			gap={ gap }
 		>
 			{ withEmptyVariation.map( ( variation, index ) => (
 				<Variation key={ index } variation={ variation }>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -7,9 +7,9 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui;
-	display: block;
+	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
+	display: block;
 	width: 100%;
 }
 
@@ -29,9 +29,8 @@
 	max-width: 100%;
 }
 
-.edit-site-global-styles-screen-typography,
-.edit-site-global-styles-screen-css {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen {
+	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
 
 .edit-site-global-styles-screen-typography__indicator {
@@ -52,14 +51,16 @@
 	justify-content: center;
 }
 
-.edit-site-global-styles-screen-colors {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen-colors .color-block-support-panel {
+	padding-left: 0;
+	padding-right: 0;
+	padding-top: 0;
+	border-top: none;
+	row-gap: calc(#{$grid-unit-05} * 3);
+}
 
-	.color-block-support-panel {
-		padding-left: 0;
-		padding-right: 0;
-		border-top: none;
-	}
+.edit-site-global-styles-screen-colors__palette-count {
+	color: $gray-700;
 }
 
 .edit-site-global-styles-header__description {
@@ -115,6 +116,7 @@
 	flex: 1 1 auto;
 	display: flex;
 	flex-direction: column;
+	margin: $grid-unit-20;
 
 	.components-v-stack {
 		flex: 1 1 auto;

diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -5,34 +5,49 @@
 	cursor: pointer;
 
 	.edit-site-global-styles-variations_item-preview {
-		padding: $border-width * 2;
 		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 $border-width $gray-200;
 		// Shown in Windows 10 high contrast mode.
 		outline: 1px solid transparent;
+		position: relative;
+		// Add the same transition that block style variations and other buttons have.
+		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: -$border-width;
+			left: -$border-width;
+			bottom: -$border-width;
+			right: -$border-width;
+			// Visually resembles the $radius-block-ui.
+			border-radius: $radius-block-ui + $border-width;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+			// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+			border: $border-width solid transparent;
+			box-sizing: inherit;
+			// Add the same transition that block style variations and other buttons have.
+			transition: box-shadow 0.1s linear;
+			@include reduce-motion("transition");
+		}
 
 		.edit-site-global-styles-color-variations & {
 			padding: $grid-unit-10;
 		}
 	}
 
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
-	}
-
-	&:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
+		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
 	}
 
-	&:focus .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	&:focus-visible {
+	&.is-active .edit-site-global-styles-variations_item-preview,
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		// Shown in Windows 10 high contrast mode.
-		outline: 3px solid transparent;
-		outline-offset: 0;
+		outline-width: 3px;
+
+		&::after {
+			box-shadow: inset 0 0 0 1px $white;
+		}
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -12,8 +12,9 @@ import {
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
+import Subtitle from '../subtitle';
 
-export default function ColorVariations() {
+export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
 
 	if ( ! colorVariations?.length ) {
@@ -22,7 +23,8 @@ export default function ColorVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Grid columns={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid columns={ 3 } gap={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation }>
 						{ () => <StylesPreviewColors /> }

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -14,8 +14,9 @@ import { useTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
+import Subtitle from '../subtitle';
 
-export default function TypographyVariations() {
+export default function TypographyVariations( { title, gap = 2 } ) {
 	const typographyVariations = useTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
@@ -24,8 +25,10 @@ export default function TypographyVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid
 				columns={ 3 }
+				gap={ gap }
 				className="edit-site-global-styles-style-variations-container"
 			>
 				{ typographyVariations &&

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -80,6 +80,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 
 	const colorVariations = useColorVariations();
 	const typographyVariations = useTypographyVariations();
+	const gap = 3;
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until
@@ -96,22 +97,15 @@ function SidebarNavigationScreenGlobalStylesContent() {
 				spacing={ 10 }
 				className="edit-site-global-styles-variation-container"
 			>
-				<StyleVariationsContainer />
+				<StyleVariationsContainer gap={ gap } />
 				{ colorVariations?.length && (
-					<div>
-						<h3 className="edit-site-global-styles-variation-title">
-							{ __( 'Colors' ) }
-						</h3>
-						<ColorVariations />
-					</div>
+					<ColorVariations title={ __( 'Colors' ) } gap={ gap } />
 				) }
 				{ typographyVariations?.length && (
-					<div>
-						<h3 className="edit-site-global-styles-variation-title">
-							{ __( 'Typography' ) }
-						</h3>
-						<TypographyVariations />
-					</div>
+					<TypographyVariations
+						title={ __( 'Typography' ) }
+						gap={ gap }
+					/>
 				) }
 			</VStack>
 		</BlockEditorProvider>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -99,18 +99,21 @@
 	font-weight: 500;
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
 	.edit-site-global-styles-variations_item-preview {
 		box-shadow: 0 0 0 $border-width $gray-900;
 	}
-	.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-100;
-	}
-	.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-	.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+	&:focus .edit-site-global-styles-variations_item-preview,
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;
+
+		// Shown in Windows 10 high contrast mode.
+		outline-width: 3px;
+
+		&::after {
+			box-shadow: inset 0 0 0 1px $gray-900;
+		}
 	}
 }