Global Styles: Try color and typography presets in Site View

packages/edit-site/src/components/global-styles/hooks.js

@@ -9,14 +9,20 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -92,3 +98,38 @@ export function useSupportedStyles( name, element ) {
 
 	return supportedPanels;
 }
+
+export function useUniqueTypographyVariations() {
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+		} );
+
+	const { base } = useContext( GlobalStylesContext );
+	/*
+	 * Filter duplicate variations based on the font families used in the variation.
+	 */
+	return typographyVariations?.length
+		? Object.values(
+				typographyVariations.reduce( ( acc, variation ) => {
+					const [ bodyFontFamily, headingFontFamily ] =
+						getFontFamilies(
+							mergeBaseAndUserConfigs( base, variation )
+						);
+					if (
+						headingFontFamily?.name &&
+						bodyFontFamily?.name &&
+						! acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						]
+					) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					}
+
+					return acc;
+				}, {} )
+		  )
+		: [];
+}

packages/edit-site/src/components/global-styles/preview-iframe.js

@@ -118,7 +118,6 @@ export default function PreviewIframe( {
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
 					style={ {
-						width: '100%',
 						height: normalizedHeight * ratio,
 					} }
 					onMouseEnter={ () => setIsHovered( true ) }

packages/edit-site/src/components/global-styles/screen-colors.js

@@ -39,7 +39,7 @@ function ScreenColors() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 6 }>
 					<ColorVariations />
 					<Palette />
 					<StylesColorPanel

packages/edit-site/src/components/global-styles/style.scss

@@ -7,8 +7,10 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	max-width: 100%;
+	border-radius: $radius-block-ui;
 	display: block;
+	max-width: 100%;
+	width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -165,3 +167,4 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
+

packages/edit-site/src/components/global-styles/typography-example.js

@@ -50,8 +50,6 @@ export default function PreviewTypography( { fontSize, variation } ) {
 				type: 'tween',
 			} }
 			style={ {
-				fontSize: '22px',
-				lineHeight: '44px',
 				textAlign: 'center',
 			} }
 		>

packages/edit-site/src/components/global-styles/variations/variations-typography.js

@@ -1,84 +1,56 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
 import {
 	__experimentalGrid as Grid,
+	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
-import { unlock } from '../../../lock-unlock';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { useUniqueTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
-import { getFontFamilies } from '../utils';
 import Variation from './variation';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
 export default function TypographyVariations() {
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-		} );
-
-	const { base } = useContext( GlobalStylesContext );
+	const typographyVariations = useUniqueTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
 		return null;
 	}
 
-	/*
-	 * Filter duplicate variations based on the font families used in the variation.
-	 */
-	const uniqueTypographyVariations = typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-					if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-
-					return acc;
-				}, {} )
-		  )
-		: [];
-
 	return (
 		<VStack spacing={ 3 }>
 			<Grid
 				columns={ 3 }
 				className="edit-site-global-styles-style-variations-container"
 			>
 				{ typographyVariations && typographyVariations.length
-					? uniqueTypographyVariations.map( ( variation, index ) => (
+					? typographyVariations.map( ( variation, index ) => (
 							<Variation key={ index } variation={ variation }>
 								{ ( isFocused ) => (
 									<PreviewIframe
 										label={ variation?.title }
 										isFocused={ isFocused }
 									>
-										{ ( { key } ) => (
-											<TypographyExample
+										{ ( { ratio, key } ) => (
+											<HStack
 												key={ key }
-												variation={ variation }
-											/>
+												spacing={ 10 * ratio }
+												justify="center"
+												style={ {
+													height: '100%',
+													overflow: 'hidden',
+												} }
+											>
+												<TypographyExample
+													variation={ variation }
+													fontSize={ 85 * ratio }
+												/>
+											</HStack>
 										) }
 									</PreviewIframe>
 								) }

packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -5,7 +5,10 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import {
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
@@ -24,6 +27,10 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import ColorVariations from '../global-styles/variations/variations-color';
+import TypographyVariations from '../global-styles/variations/variations-typography';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { useUniqueTypographyVariations } from '../global-styles/hooks';
 
 const noop = () => {};
 
@@ -69,6 +76,12 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		};
 	}, [] );
 
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+	} );
+
+	const typographyVariations = useUniqueTypographyVariations();
+
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until
 	// the block editor store's `__internalIsInitialized` is true before
@@ -80,7 +93,28 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<StyleVariationsContainer />
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
+				<StyleVariationsContainer />
+				{ colorVariations?.length && (
+					<div>
+						<h3 className="edit-site-global-styles-variation-title">
+							{ __( 'Colors' ) }
+						</h3>
+						<ColorVariations />
+					</div>
+				) }
+				{ typographyVariations?.length && (
+					<div>
+						<h3 className="edit-site-global-styles-variation-title">
+							{ __( 'Typography' ) }
+						</h3>
+						<TypographyVariations />
+					</div>
+				) }
+			</VStack>
 		</BlockEditorProvider>
 	);
 }

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

@@ -77,7 +77,7 @@
 	flex-shrink: 0;
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
 	@include break-medium() {
 		// Safari does not currently support `scrollbar-gutter: stable`, so at
 		// particular viewport sizes it's possible for previews to render prior to a
@@ -90,7 +90,16 @@
 		// See: https://github.com/WordPress/gutenberg/issues/55112
 		max-width: 292px;
 	}
+}
+
+.edit-site-global-styles-variation-title {
+	color: $gray-300;
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+}
 
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
 	.edit-site-global-styles-variations_item-preview {
 		box-shadow: 0 0 0 $border-width $gray-900;
 	}