Global Styles: Try presets in Site View

WordPress · Mar 7, 2024 · f65aa46 · f65aa46
1 parent 2071a26
commit f65aa46
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
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
@@ -18,6 +18,7 @@ import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import { getFontFamilies } from '../utils';
 import Variation from './variation';
+import PreviewIframe from '../preview-iframe';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 

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>
 	);
 }