Site editor: integrate global styles controls and style book preview …

…into the styles panel (#65619)

This commit integrates global styles controls and a style book preview into the styles panel. This affects the site editor in view mode. A toggle allows users to switch between previewing the site and the style book while editing global styles. 

---------

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: mtias <[email protected]>
Co-authored-by: afercia <[email protected]>

packages/edit-site/src/components/block-editor/use-editor-iframe-props.js

@@ -60,11 +60,10 @@ export default function useEditorIframeProps() {
 				} );
 			}
 		},
-		onClick: () => {
+		onClick: () =>
 			history.push( { ...params, canvas: 'edit' }, undefined, {
 				transition: 'canvas-mode-edit-transition',
-			} );
-		},
+			} ),
 		onClickCapture: ( event ) => {
 			if ( currentPostIsTrashed ) {
 				event.preventDefault();

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

@@ -19,7 +19,8 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Fragment } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -291,18 +292,52 @@ function GlobalStylesEditorCanvasContainerLink() {
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
 
-function GlobalStylesUI() {
+function useNavigatorSync( parentPath, onPathChange ) {
+	const navigator = useNavigator();
+	const { path: childPath } = navigator.location;
+	const previousParentPath = usePrevious( parentPath );
+	const previousChildPath = usePrevious( childPath );
+	useEffect( () => {
+		if ( parentPath !== childPath ) {
+			if ( parentPath !== previousParentPath ) {
+				navigator.goTo( parentPath );
+			} else if ( childPath !== previousChildPath ) {
+				onPathChange( childPath );
+			}
+		}
+	}, [
+		onPathChange,
+		parentPath,
+		previousChildPath,
+		previousParentPath,
+		childPath,
+		navigator,
+	] );
+}
+
+// This component is used to wrap the hook in order to conditionally execute it
+// when the parent component is used on controlled mode.
+function NavigationSync( { path: parentPath, onPathChange, children } ) {
+	useNavigatorSync( parentPath, onPathChange );
+	return children;
+}
+
+function GlobalStylesUI( { path, onPathChange } ) {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
 		[]
 	);
+
 	return (
 		<Navigator
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
+			{ path && onPathChange && (
+				<NavigationSync path={ path } onPathChange={ onPathChange } />
+			) }
 			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
 			</GlobalStylesNavigationScreen>

packages/edit-site/src/components/layout/index.js

@@ -125,7 +125,12 @@ export default function Layout( { route } ) {
 												isResizableFrameOversized
 											}
 										/>
-										<SidebarContent routeKey={ routeKey }>
+										<SidebarContent
+											shouldAnimate={
+												routeKey !== 'styles-view'
+											}
+											routeKey={ routeKey }
+										>
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />

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

@@ -0,0 +1,145 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesUI from '../global-styles/ui';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+import StyleBook from '../style-book';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
+const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
+
+const GlobalStylesPageActions = ( {
+	isStyleBookOpened,
+	setIsStyleBookOpened,
+} ) => {
+	return (
+		<Menu
+			trigger={
+				<Button __next40pxDefaultSize variant="tertiary" size="compact">
+					{ __( 'Preview' ) }
+				</Button>
+			}
+		>
+			<Menu.RadioItem
+				value
+				checked={ isStyleBookOpened }
+				name="styles-preview-actions"
+				onChange={ () => setIsStyleBookOpened( true ) }
+				defaultChecked
+			>
+				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
+				<Menu.ItemHelpText>
+					{ __( 'Preview blocks and styles.' ) }
+				</Menu.ItemHelpText>
+			</Menu.RadioItem>
+			<Menu.RadioItem
+				value={ false }
+				checked={ ! isStyleBookOpened }
+				name="styles-preview-actions"
+				onChange={ () => setIsStyleBookOpened( false ) }
+			>
+				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
+				<Menu.ItemHelpText>
+					{ __( 'Preview your site.' ) }
+				</Menu.ItemHelpText>
+			</Menu.RadioItem>
+		</Menu>
+	);
+};
+
+export default function GlobalStylesUIWrapper() {
+	const { params } = useLocation();
+	const history = useHistory();
+	const { canvas = 'view' } = params;
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const pathWithPrefix = params.path;
+	const [ path, onPathChange ] = useMemo( () => {
+		const processedPath = pathWithPrefix.substring(
+			GLOBAL_STYLES_PATH_PREFIX.length
+		);
+		return [
+			processedPath ? processedPath : '/',
+			( newPath ) => {
+				history.push( {
+					path:
+						! newPath || newPath === '/'
+							? GLOBAL_STYLES_PATH_PREFIX
+							: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
+				} );
+			},
+		];
+	}, [ pathWithPrefix, history ] );
+
+	return (
+		<>
+			<Page
+				actions={
+					! isMobileViewport ? (
+						<GlobalStylesPageActions
+							isStyleBookOpened={ isStyleBookOpened }
+							setIsStyleBookOpened={ setIsStyleBookOpened }
+						/>
+					) : null
+				}
+				className="edit-site-styles"
+				title={ __( 'Styles' ) }
+			>
+				<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
+			</Page>
+			{ canvas === 'view' && isStyleBookOpened && (
+				<StyleBook
+					enableResizing={ false }
+					showCloseButton={ false }
+					showTabs={ false }
+					isSelected={ ( blockName ) =>
+						// Match '/blocks/core%2Fbutton' and
+						// '/blocks/core%2Fbutton/typography', but not
+						// '/blocks/core%2Fbuttons'.
+						path ===
+							`/wp_global_styles/blocks/${ encodeURIComponent(
+								blockName
+							) }` ||
+						path.startsWith(
+							`/wp_global_styles/blocks/${ encodeURIComponent(
+								blockName
+							) }/`
+						)
+					}
+					path={ path }
+					onSelect={ ( blockName ) => {
+						if (
+							STYLE_BOOK_COLOR_GROUPS.find(
+								( group ) => group.slug === blockName
+							)
+						) {
+							// Go to color palettes Global Styles.
+							onPathChange( '/colors/palette' );
+							return;
+						}
+
+						// Now go to the selected block.
+						onPathChange(
+							`/blocks/${ encodeURIComponent( blockName ) }`
+						);
+					} }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,35 @@
+.edit-site-styles .edit-site-page-content {
+	.edit-site-global-styles-screen-root {
+		box-shadow: none;
+		& > div > hr {
+			display: none;
+		}
+	}
+	.edit-site-global-styles-sidebar__navigator-provider {
+		.components-tools-panel {
+			border-top: none;
+		}
+		overflow-y: auto;
+		padding-left: 0;
+		padding-right: 0;
+
+		.edit-site-global-styles-sidebar__navigator-screen {
+			padding-top: $grid-unit-15;
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+			padding-bottom: $grid-unit-15;
+			outline: none;
+		}
+	}
+	.edit-site-page-header {
+		padding-left: $grid-unit-60;
+		padding-right: $grid-unit-60;
+		@container (max-width: 430px) {
+			padding-left: $grid-unit-30;
+			padding-right: $grid-unit-30;
+		}
+	}
+	.edit-site-sidebar-button {
+		color: $gray-900;
+	}
+}

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

@@ -7,7 +7,7 @@
 
 	&:hover,
 	&:focus,
-	&[aria-current] {
+	&[aria-current="true"] {
 		color: $gray-200;
 		background: $gray-800;
 
@@ -16,7 +16,7 @@
 		}
 	}
 
-	&[aria-current] {
+	&[aria-current="true"] {
 		background: var(--wp-admin-theme-color);
 		color: $white;
 	}