Add the global styles preview to the sidebar (#34991)

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

@@ -35,6 +35,7 @@ import {
  default as DimensionsPanel,
  useHasDimensionsPanel,
 } from './dimensions-panel';
+import { StylePreview } from './global-styles/preview';
 
 function getPanelTitle( blockName ) {
  const blockType = getBlockType( blockName );
@@ -188,6 +189,11 @@ export default function GlobalStylesSidebar() {
  >
  <Navigation>
  <NavigationMenu>
+ <NavigationGroup>
+ <NavigationItem>
+ <StylePreview />
+ </NavigationItem>
+ </NavigationGroup>
  <GlobalStylesLevel
  context={ root }
  getStyle={ getStyle }

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+ Card,
+ ColorIndicator,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */ import { useGlobalStylesContext } from '../../editor/global-styles-provider';
+
+export const StylePreview = () => {
+ const { getStyle } = useGlobalStylesContext();
+ const fontFamily = getStyle( 'root', 'fontFamily' ) ?? 'serif';
+ const textColor = getStyle( 'root', 'color' ) ?? 'black';
+ const linkColor = getStyle( 'root', 'linkColor' ) ?? 'blue';
+ const backgroundColor = getStyle( 'root', 'backgroundColor' ) ?? 'white';
+
+ return (
+ <Card
+ className="edit-site-global-styles-preview"
+ style={ { background: backgroundColor } }
+ >
+ <HStack spacing={ 5 }>
+ <div>
+ <span style={ { fontFamily, fontSize: '80px' } }>A</span>
+ <span style={ { fontFamily, fontSize: '80px' } }>a</span>
+ </div>
+ <VStack spacing={ 2 }>
+ <ColorIndicator colorValue={ textColor } />
+ <ColorIndicator colorValue={ linkColor } />
+ </VStack>
+ </HStack>
+ </Card>
+ );
+};

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

@@ -0,0 +1,16 @@
+.edit-site-global-styles-preview {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 152px;
+
+ .component-color-indicator {
+ border-radius: 50%;
+ border: 0;
+ height: 36px;
+ width: 36px;
+ margin-left: 0;
+ padding: 0;
+ }
+}
+

packages/edit-site/src/style.scss

@@ -7,6 +7,7 @@
 @import "./components/navigation-sidebar/navigation-toggle/style.scss";
 @import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/sidebar/style.scss";
+@import "./components/sidebar/global-styles/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-card/style.scss";
 @import "./components/editor/style.scss";