@wordpress/edit-site 6.11.0 → 6.12.0

package/src/components/post-list/style.scss

@@ -9,7 +9,9 @@
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)),
+	&.is-layout-table:not(
+	:has(.edit-site-post-list__featured-image-button)
+),
 	&.is-layout-table .edit-site-post-list__featured-image-button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
@@ -46,7 +48,9 @@
 	border-radius: $grid-unit-05;
 
 	&:focus-visible {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
@@ -54,7 +58,9 @@
 
 .dataviews-view-grid__card.is-selected {
 	.edit-site-post-list__featured-image-button::after {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 }
@@ -64,6 +70,26 @@
 	overflow: hidden;
 }
 
+.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable
+.edit-site-post-list__title
+span,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable
+.edit-site-post-list__title
+span {
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	display: block;
+	flex-grow: 0;
+	color: $gray-900;
+
+	&:hover {
+		color: var(--wp-admin-theme-color);
+	}
+	@include link-reset();
+}
+
 .edit-site-post-list__title-badge {
 	background: $gray-100;
 	color: $gray-800;

package/src/components/sidebar/index.js

@@ -55,7 +55,7 @@ function createNavState() {
 	};
 }
 
-function SidebarContentWrapper( { children } ) {
+function SidebarContentWrapper( { children, shouldAnimate } ) {
 	const navState = useContext( SidebarNavigationContext );
 	const wrapperRef = useRef();
 	const [ navAnimation, setNavAnimation ] = useState( null );
@@ -66,10 +66,19 @@ function SidebarContentWrapper( { children } ) {
 		setNavAnimation( direction );
 	}, [ navState ] );
 
-	const wrapperCls = clsx( 'edit-site-sidebar__screen-wrapper', {
-		'slide-from-left': navAnimation === 'back',
-		'slide-from-right': navAnimation === 'forward',
-	} );
+	const wrapperCls = clsx(
+		'edit-site-sidebar__screen-wrapper',
+		/*
+		 * Some panes do not have sub-panes and therefore
+		 * should not animate when clicked on.
+		 */
+		shouldAnimate
+			? {
+					'slide-from-left': navAnimation === 'back',
+					'slide-from-right': navAnimation === 'forward',
+			  }
+			: {}
+	);
 
 	return (
 		<div ref={ wrapperRef } className={ wrapperCls }>
@@ -78,13 +87,20 @@ function SidebarContentWrapper( { children } ) {
 	);
 }
 
-export default function SidebarContent( { routeKey, children } ) {
+export default function SidebarContent( {
+	routeKey,
+	shouldAnimate,
+	children,
+} ) {
 	const [ navState ] = useState( createNavState );
 
 	return (
 		<SidebarNavigationContext.Provider value={ navState }>
 			<div className="edit-site-sidebar__content">
-				<SidebarContentWrapper key={ routeKey }>
+				<SidebarContentWrapper
+					shouldAnimate={ shouldAnimate }
+					key={ routeKey }
+				>
 					{ children }
 				</SidebarContentWrapper>
 			</div>

package/src/components/sidebar-global-styles-wrapper/index.js

@@ -0,0 +1,150 @@
+/**
+ * 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;
+						}
+						if ( blockName === 'typography' ) {
+							// Go to typography Global Styles.
+							onPathChange( '/typography' );
+							return;
+						}
+
+						// Now go to the selected block.
+						onPathChange(
+							`/blocks/${ encodeURIComponent( blockName ) }`
+						);
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/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;
+	}
+}

package/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;
 	}

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -2,12 +2,9 @@
  * WordPress dependencies
  */
 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 { useViewportMatch } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -17,18 +14,14 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
 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 SidebarNavigationScreenGlobalStylesContent from './content';
+import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const history = useHistory();
 	const { params } = useLocation();
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
@@ -43,47 +36,25 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 				{ ...props }
 				params={ { path: '/wp_global_styles' } }
 				uid="global-styles-navigation-item"
+				aria-current={
+					params.path && params.path.startsWith( '/wp_global_styles' )
+				}
 			/>
 		);
 	}
-	return (
-		<SidebarNavigationItem
-			{ ...props }
-			onClick={ () => {
-				// Switch to edit mode.
-				history.push(
-					{
-						...params,
-						canvas: 'edit',
-					},
-					undefined,
-					{
-						transition: 'canvas-mode-edit-transition',
-					}
-				);
-				// Open global styles sidebar.
-				openGeneralSidebar( 'edit-site/global-styles' );
-			} }
-		/>
-	);
+	return <SidebarNavigationItem { ...props } />;
 }
 
-export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
+export default function SidebarNavigationScreenGlobalStyles() {
 	const history = useHistory();
 	const { params } = useLocation();
-	const { canvas = 'view' } = params;
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setIsListViewOpened } = useDispatch( editorStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { isStyleBookOpened, revisionsCount } = useSelect( ( select ) => {
-		const { getEditorCanvasContainerView } = unlock(
-			select( editSiteStore )
-		);
+	const { revisionsCount } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
 		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
@@ -91,7 +62,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
 			: undefined;
 		return {
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
 			revisionsCount:
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
@@ -115,19 +85,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 		] );
 	}, [ history, params, openGeneralSidebar, setPreference ] );
 
-	const openStyleBook = useCallback( async () => {
-		await openGlobalStyles();
-		// Open the Style Book once the canvas mode is set to edit,
-		// and the global styles sidebar is open. This ensures that
-		// the Style Book is not prematurely closed.
-		setEditorCanvasContainerView( 'style-book' );
-		setIsListViewOpened( false );
-	}, [
-		openGlobalStyles,
-		setEditorCanvasContainerView,
-		setIsListViewOpened,
-	] );
-
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();
 		// Open the global styles revisions once the canvas mode is set to edit,
@@ -142,16 +99,17 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
 		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
-
 	return (
 		<>
 			<SidebarNavigationScreen
-				title={ __( 'Styles' ) }
+				title={ __( 'Design' ) }
+				isRoot
 				description={ __(
-					'Choose a different style combination for the theme styles.'
+					'Customize the appearance of your website using the block editor.'
 				) }
-				backPath={ backPath }
-				content={ <SidebarNavigationScreenGlobalStylesContent /> }
+				content={
+					<MainSidebarNavigationContent activeItem="styles-navigation-item" />
+				}
 				footer={
 					shouldShowGlobalStylesFooter && (
 						<SidebarNavigationScreenDetailsFooter
@@ -160,40 +118,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 						/>
 					)
 				}
-				actions={
-					<>
-						{ ! isMobileViewport && (
-							<SidebarButton
-								icon={ seen }
-								label={ __( 'Style Book' ) }
-								onClick={ () =>
-									setEditorCanvasContainerView(
-										! isStyleBookOpened
-											? 'style-book'
-											: undefined
-									)
-								}
-								isPressed={ isStyleBookOpened }
-							/>
-						) }
-						<SidebarButton
-							icon={ edit }
-							label={ __( 'Edit styles' ) }
-							onClick={ async () => await openGlobalStyles() }
-						/>
-					</>
-				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && canvas === 'view' && (
-				<StyleBook
-					enableResizing={ false }
-					isSelected={ () => false }
-					onClick={ openStyleBook }
-					onSelect={ openStyleBook }
-					showCloseButton={ false }
-					showTabs={ false }
-				/>
-			) }
 		</>
 	);
 }

package/src/components/sidebar-navigation-screen-main/index.js

@@ -21,6 +21,51 @@ import {
 	PATTERN_TYPES,
 } from '../../utils/constants';
 
+export function MainSidebarNavigationContent() {
+	return (
+		<ItemGroup>
+			<SidebarNavigationItem
+				uid="navigation-navigation-item"
+				params={ { postType: NAVIGATION_POST_TYPE } }
+				withChevron
+				icon={ navigation }
+			>
+				{ __( 'Navigation' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItemGlobalStyles
+				uid="styles-navigation-item"
+				icon={ styles }
+			>
+				{ __( 'Styles' ) }
+			</SidebarNavigationItemGlobalStyles>
+			<SidebarNavigationItem
+				uid="page-navigation-item"
+				params={ { postType: 'page' } }
+				withChevron
+				icon={ page }
+			>
+				{ __( 'Pages' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="template-navigation-item"
+				params={ { postType: TEMPLATE_POST_TYPE } }
+				withChevron
+				icon={ layout }
+			>
+				{ __( 'Templates' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="patterns-navigation-item"
+				params={ { postType: PATTERN_TYPES.user } }
+				withChevron
+				icon={ symbol }
+			>
+				{ __( 'Patterns' ) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	);
+}
+
 export default function SidebarNavigationScreenMain() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
@@ -38,51 +83,7 @@ export default function SidebarNavigationScreenMain() {
 			description={ __(
 				'Customize the appearance of your website using the block editor.'
 			) }
-			content={
-				<>
-					<ItemGroup>
-						<SidebarNavigationItem
-							uid="navigation-navigation-item"
-							params={ { postType: NAVIGATION_POST_TYPE } }
-							withChevron
-							icon={ navigation }
-						>
-							{ __( 'Navigation' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItemGlobalStyles
-							uid="styles-navigation-item"
-							withChevron
-							icon={ styles }
-						>
-							{ __( 'Styles' ) }
-						</SidebarNavigationItemGlobalStyles>
-						<SidebarNavigationItem
-							uid="page-navigation-item"
-							params={ { postType: 'page' } }
-							withChevron
-							icon={ page }
-						>
-							{ __( 'Pages' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItem
-							uid="template-navigation-item"
-							params={ { postType: TEMPLATE_POST_TYPE } }
-							withChevron
-							icon={ layout }
-						>
-							{ __( 'Templates' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItem
-							uid="patterns-navigation-item"
-							params={ { postType: PATTERN_TYPES.user } }
-							withChevron
-							icon={ symbol }
-						>
-							{ __( 'Patterns' ) }
-						</SidebarNavigationItem>
-					</ItemGroup>
-				</>
-			}
+			content={ <MainSidebarNavigationContent /> }
 		/>
 	);
 }

package/src/components/site-editor-routes/styles-edit.js

@@ -3,15 +3,24 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 
 export const stylesEditRoute = {
 	name: 'styles-edit',
 	match: ( params ) => {
-		return params.path === '/wp_global_styles' && params.canvas === 'edit';
+		return (
+			params.path &&
+			params.path.startsWith( '/wp_global_styles' ) &&
+			params.canvas !== 'edit'
+		);
 	},
 	areas: {
+		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
 		preview: <Editor />,
 		mobile: <Editor />,
 	},
+	widths: {
+		content: 380,
+	},
 };

package/src/components/site-editor-routes/styles-view.js

@@ -3,14 +3,24 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 
 export const stylesViewRoute = {
 	name: 'styles-view',
 	match: ( params ) => {
-		return params.path === '/wp_global_styles' && params.canvas !== 'edit';
+		return (
+			params.path &&
+			params.path.startsWith( '/wp_global_styles' ) &&
+			params.canvas !== 'edit'
+		);
 	},
 	areas: {
+		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
 		preview: <Editor />,
+		mobile: <GlobalStylesUIWrapper />,
+	},
+	widths: {
+		content: 380,
 	},
 };