Global Styles: Try presets in Site View

WordPress · Mar 5, 2024 · cf067df · cf067df
1 parent 74a326f
commit cf067df
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 17 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js
@@ -50,6 +50,11 @@ export default function PreviewTypography( { fontSize, variation } ) {
 				delay: 0.3,
 				type: 'tween',
 			} }
+			style={ {
+				fontSize: '22px',
+				lineHeight: '44px',
+				textAlign: 'center',
+			} }
 		>
 			<span style={ headingPreviewStyle }>
 				{ _x( 'A', 'Uppercase letter A' ) }

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
@@ -5,25 +5,30 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import Subtitle from '../subtitle';
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
-export default function ColorVariations( { variations } ) {
+export default function ColorVariations() {
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+		filter: ( variation ) =>
+			variation?.settings?.color &&
+			Object.keys( variation?.settings?.color ).length,
+	} );
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid columns={ 3 }>
-				{ variations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation }>
-						{ () => <StylesPreviewColors /> }
-					</Variation>
-				) ) }
+				{ colorVariations &&
+					colorVariations.map( ( variation, index ) => (
+						<Variation key={ index } variation={ variation }>
+							{ () => <StylesPreviewColors /> }
+						</Variation>
+					) ) }
 			</Grid>
 		</VStack>
 	);

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
@@ -6,7 +6,6 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -16,9 +15,9 @@ 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 PreviewTypography from '../preview-typography';
-import Subtitle from '../subtitle';
 import { getFontFamilies } from '../utils';
 import Variation from './variation';
+import PreviewIframe from '../preview-iframe';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
@@ -63,7 +62,6 @@ export default function TypographyVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid
 				columns={ 3 }
 				className="edit-site-global-styles-style-variations-container"
@@ -72,9 +70,9 @@ export default function TypographyVariations() {
 					? uniqueTypographyVariations.map( ( variation, index ) => (
 							<Variation key={ index } variation={ variation }>
 								{ () => (
-									<PreviewTypography
-										variation={ variation }
-									/>
+									<PreviewIframe>
+										{ () => <PreviewTypography /> }
+									</PreviewIframe>
 								) }
 							</Variation>
 					  ) )

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
@@ -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,8 @@ 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';
 
 const noop = () => {};
 
@@ -80,7 +85,33 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<StyleVariationsContainer />
+			<VStack spacing={ 10 }>
+				<StyleVariationsContainer />
+				<div className="edit-site-global-styles-style-variations-container">
+					<h2
+						style={ {
+							textTransform: 'uppercase',
+							color: 'white',
+							fontWeight: '400',
+						} }
+					>
+						{ __( 'Colors' ) }
+					</h2>
+					<ColorVariations />
+				</div>
+				<div className="edit-site-global-styles-style-variations-container">
+					<h2
+						style={ {
+							textTransform: 'uppercase',
+							color: 'white',
+							fontWeight: '400',
+						} }
+					>
+						{ __( 'Typography' ) }
+					</h2>
+					<TypographyVariations />
+				</div>
+			</VStack>
 		</BlockEditorProvider>
 	);
 }