@wordpress/edit-site 6.11.0 → 6.12.1-next.082ed6819.0

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,59 +36,27 @@ 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 {
+		revisions,
+		isLoading: isLoadingRevisions,
+		revisionsCount,
+	} = 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 { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-		return {
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
@@ -115,19 +76,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,
@@ -138,62 +86,30 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
 	// If there are no revisions, do not render a footer.
-	const hasRevisions = revisionsCount > 0;
-	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
-		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
+		!! revisionsCount && ! isLoadingRevisions;
 
 	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
 							record={ revisions?.[ 0 ] }
+							revisionsCount={ revisionsCount }
 							onClick={ openRevisions }
 						/>
 					)
 				}
-				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/sidebar-navigation-screen-navigation-menus/style.scss

@@ -27,6 +27,14 @@
 			color: $white;
 		}
 	}
+
+	.block-editor-list-view-block__menu {
+		color: $gray-600;
+		&:hover,
+		&:focus {
+			color: $white;
+		}
+	}
 }
 
 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {

package/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js

@@ -69,7 +69,7 @@ export default function usePatternCategories() {
 			// If the pattern has no categories, add it to uncategorized.
 			if (
 				! pattern.wp_pattern_category?.length ||
-				! pattern.wp_pattern_category.some( ( catId ) =>
+				! pattern.wp_pattern_category?.some( ( catId ) =>
 					userPatternCategories.find( ( cat ) => cat.id === catId )
 				)
 			) {

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,7 +17,8 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
 		[]
 	);
 
@@ -43,7 +43,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 		const key = accumulator[ item.area ]
 			? item.area
 			: TEMPLATE_PART_AREA_DEFAULT_CATEGORY;
-		accumulator[ key ].templateParts.push( item );
+		accumulator[ key ]?.templateParts?.push( item );
 		return accumulator;
 	}, knownAreas );
 

package/src/components/site-editor-routes/README.md

@@ -2,7 +2,7 @@
 
 ## Areas
 
-When `canvasMode` is not `edit`, the areas avaliable to use are:
+When `canvasMode` is not `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |
@@ -12,7 +12,7 @@ When `canvasMode` is not `edit`, the areas avaliable to use are:
 | `edit` | Rendered if provided. | Not rendered. |
 | `mobile` | Not rendered | Rendered as full-screen, if provided. |
 
-When `canvasMode` is `edit`, the areas avaliable to use are:
+When `canvasMode` is `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |

package/src/components/site-editor-routes/index.js

@@ -15,7 +15,6 @@ import { navigationViewRoute } from './navigation-view';
 import { navigationEditRoute } from './navigation-edit';
 import { navigationItemEditRoute } from './navigation-item-edit';
 import { navigationItemViewRoute } from './navigation-item-view';
-import { stylesEditRoute } from './styles-edit';
 import { stylesViewRoute } from './styles-view';
 import { patternsEditRoute } from './patterns-edit';
 import { patternsViewRoute } from './patterns-view';
@@ -40,7 +39,6 @@ const routes = [
 	patternsViewRoute,
 	patternsEditRoute,
 	stylesViewRoute,
-	stylesEditRoute,
 	navigationItemViewRoute,
 	navigationItemEditRoute,
 	navigationViewRoute,

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

package/src/components/site-hub/index.js

@@ -121,17 +121,27 @@ export const SiteHubMobile = memo(
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
 
-		const { homeUrl, siteTitle } = useSelect( ( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
-			return {
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
-			};
-		}, [] );
+		const { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(
+			( select ) => {
+				const { getSettings } = unlock( select( editSiteStore ) );
+
+				const { getEntityRecord, getCurrentTheme } =
+					select( coreStore );
+				const _site = getEntityRecord( 'root', 'site' );
+				return {
+					dashboardLink:
+						getSettings().__experimentalDashboardLink ||
+						'index.php',
+					isBlockTheme: getCurrentTheme()?.is_block_theme,
+					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+					siteTitle:
+						! _site?.title && !! _site?.url
+							? filterURLForDisplay( _site?.url )
+							: _site?.title,
+				};
+			},
+			[]
+		);
 		const { open: openCommandCenter } = useDispatch( commandsStore );
 
 		return (
@@ -148,16 +158,23 @@ export const SiteHubMobile = memo(
 						<Button
 							__next40pxDefaultSize
 							ref={ ref }
-							label={ __( 'Go to Site Editor' ) }
 							className="edit-site-layout__view-mode-toggle"
 							style={ {
 								transform: 'scale(0.5)',
 								borderRadius: 4,
 							} }
-							onClick={ () => {
-								history.push( {} );
-								navigate( 'back' );
-							} }
+							{ ...( ! isBlockTheme
+								? {
+										href: dashboardLink,
+										label: __( 'Go to the Dashboard' ),
+								  }
+								: {
+										onClick: () => {
+											history.push( {} );
+											navigate( 'back' );
+										},
+										label: __( 'Go to Site Editor' ),
+								  } ) }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>

package/src/components/site-hub/style.scss

@@ -4,7 +4,7 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 	margin-right: $grid-unit-15;
-	height: $grid-unit-70;
+	height: $header-height;
 }
 
 .edit-site-site-hub__actions {

package/src/components/site-icon/style.scss

@@ -20,3 +20,19 @@
 		border-radius: 0;
 	}
 }
+
+.edit-site-editor__view-mode-toggle button:focus {
+	position: relative;
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(#{ $border-width } + var(--wp-admin-border-width-focus)) $white;
+	}
+}

package/src/components/style-book/constants.ts

@@ -107,6 +107,11 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
 ];
 
 export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'overview',
+		title: __( 'Overview' ),
+		blocks: [],
+	},
 	{
 		slug: 'text',
 		title: __( 'Text' ),
@@ -249,16 +254,19 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.edit-site-style-book__example-preview {
 		width: 100%;
 	}
+	
+	.is-wide .edit-site-style-book__example-preview {
+		width: calc(100% - 120px);
+	}
 
 	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
 	.edit-site-style-book__example-preview .block-list-appender {
 		display: none;
 	}
-
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+	:where(.is-root-container > .wp-block:first-child) {
 		margin-top: 0;
 	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+	:where(.is-root-container > .wp-block:last-child) {
 		margin-bottom: 0;
 	}
 `;