@wordpress/edit-site 5.9.0 → 5.10.0

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

@@ -6,7 +6,7 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled, navigation, styles } from '@wordpress/icons';
+import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -17,23 +17,33 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenMain() {
-	const hasNavigationMenus = useSelect( ( select ) => {
-		// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
-		// to avoid double network calls.
-		const navigationMenus = select( coreStore ).getEntityRecords(
-			'postType',
-			'wp_navigation',
-			{
-				per_page: 1,
-				status: 'publish',
-				order: 'desc',
-				orderby: 'date',
-			}
-		);
-
-		return navigationMenus?.length > 0;
-	} );
-
+	const { hasNavigationMenus, hasGlobalStyleVariations } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecords,
+				__experimentalGetCurrentThemeGlobalStylesVariations,
+			} = select( coreStore );
+			// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
+			// to avoid double network calls.
+			const navigationMenus = getEntityRecords(
+				'postType',
+				'wp_navigation',
+				{
+					per_page: 1,
+					status: 'publish',
+					order: 'desc',
+					orderby: 'date',
+				}
+			);
+			return {
+				hasNavigationMenus: !! navigationMenus?.length,
+				hasGlobalStyleVariations:
+					!! __experimentalGetCurrentThemeGlobalStylesVariations()
+						?.length,
+			};
+		},
+		[]
+	);
 	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
 		? hasNavigationMenus
 		: false;
@@ -56,13 +66,24 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Navigation' ) }
 						</NavigatorButton>
 					) }
+					{ hasGlobalStyleVariations && (
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_global_styles"
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</NavigatorButton>
+					) }
+
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/wp_global_styles"
+						path="/page"
 						withChevron
-						icon={ styles }
+						icon={ page }
 					>
-						{ __( 'Styles' ) }
+						{ __( 'Pages' ) }
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
@@ -76,7 +97,7 @@ export default function SidebarNavigationScreenMain() {
 						as={ SidebarNavigationItem }
 						path="/wp_template_part"
 						withChevron
-						icon={ symbolFilled }
+						icon={ symbol }
 					>
 						{ __( 'Template Parts' ) }
 					</NavigatorButton>

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

@@ -36,15 +36,9 @@ export default function SidebarNavigationScreenNavigationItem() {
 					icon={ pencil }
 				/>
 			}
-			description={
-				postType === 'page'
-					? __(
-							'Pages are static and are not listed by date. Pages do not use tags or categories.'
-					  )
-					: __(
-							'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
-					  )
-			}
+			description={ __(
+				'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
+			) }
 			content={
 				<>
 					{ record?.link ? (

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

@@ -7,16 +7,22 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { useHistory } from '../routes';
 import NavigationMenuContent from './navigation-menu-content';
 import { NavigationMenuLoader } from './loader';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const noop = () => {};
 const NAVIGATION_MENUS_QUERY = {
@@ -84,12 +90,18 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				history.push( {
 					postType: attributes.type,
 					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						theme_preview: currentlyPreviewingTheme(),
+					} ),
 				} );
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
 				history.push( {
 					postType: 'page',
 					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						theme_preview: currentlyPreviewingTheme(),
+					} ),
 				} );
 			}
 		},

package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -144,7 +144,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		};
 	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
 
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+	const { PrivateListView, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	const offCanvasOnselect = useCallback(
 		( block ) => {
@@ -181,14 +181,14 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		<>
 			{ isLoading && <NavigationMenuLoader /> }
 			{ ! isLoading && (
-				<OffCanvasEditor
+				<PrivateListView
 					blocks={
 						isSinglePageList
 							? clientIdsTree[ 0 ].innerBlocks
 							: clientIdsTree
 					}
 					onSelect={ offCanvasOnselect }
-					LeafMoreMenu={ LeafMoreMenu }
+					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
 					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import {
+	__experimentalUseNavigator as useNavigator,
+	ExternalLink,
+} from '@wordpress/components';
+import { useEntityRecord } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { pencil } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+
+export default function SidebarNavigationScreenPage() {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		params: { postId },
+	} = useNavigator();
+	const { record } = useEntityRecord( 'postType', 'page', postId );
+
+	return (
+		<SidebarNavigationScreen
+			title={ record ? decodeEntities( record?.title?.rendered ) : null }
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			description={ __(
+				'Pages are static and are not listed by date. Pages do not use tags or categories.'
+			) }
+			content={
+				<>
+					{ record?.link ? (
+						<ExternalLink
+							className="edit-site-sidebar-navigation-screen__page-link"
+							href={ record.link }
+						>
+							{ record.link }
+						</ExternalLink>
+					) : null }
+					{ record
+						? decodeEntities( record?.description?.rendered )
+						: null }
+				</>
+			}
+		/>
+	);
+}

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

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
+
+const PageItem = ( { postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postType: 'page',
+		postId,
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
+export default function SidebarNavigationScreenPages() {
+	const { records: pages, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'page'
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Pages' ) }
+			description={ __( 'Browse and edit pages on your site.' ) }
+			content={
+				<>
+					{ isLoading && (
+						<ItemGroup>
+							<Item>{ __( 'Loading pages' ) }</Item>
+						</ItemGroup>
+					) }
+					{ ! isLoading && (
+						<>
+							<SidebarNavigationSubtitle>
+								{ __( 'Recent' ) }
+							</SidebarNavigationSubtitle>
+							<ItemGroup>
+								{ ! pages?.length && (
+									<Item>{ __( 'No page found' ) }</Item>
+								) }
+								{ pages?.map( ( page ) => (
+									<PageItem
+										postId={ page.id }
+										key={ page.id }
+										withChevron
+									>
+										{ decodeEntities(
+											page.title?.rendered
+										) ?? __( '(no title)' ) }
+									</PageItem>
+								) ) }
+								<SidebarNavigationItem
+									className="edit-site-sidebar-navigation-screen-pages__see-all"
+									href="edit.php?post_type=page"
+									onClick={ () => {
+										document.location =
+											'edit.php?post_type=page';
+									} }
+								>
+									{ __( 'Manage all pages' ) }
+								</SidebarNavigationItem>
+							</ItemGroup>
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-pages/style.scss

@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-pages__see-all {
+	/* Overrides the margin that comes from the Item component */
+	margin-top: $grid-unit-20 !important;
+}

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

@@ -74,7 +74,9 @@ export default function SidebarNavigationScreenTemplates() {
 		}
 	);
 	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
 
 	const browseAllLink = useLink( {
 		path: '/' + postType + '/all',
@@ -112,6 +114,7 @@ export default function SidebarNavigationScreenTemplates() {
 									postType={ postType }
 									postId={ template.id }
 									key={ template.id }
+									withChevron
 								>
 									{ decodeEntities(
 										template.title?.rendered ||
@@ -126,6 +129,7 @@ export default function SidebarNavigationScreenTemplates() {
 									children={
 										config[ postType ].labels.manage
 									}
+									withChevron
 								/>
 							) }
 						</ItemGroup>

package/src/components/sidebar-navigation-subtitle/index.js

@@ -0,0 +1,5 @@
+export default function SidebarNavigationSubtitle( { children } ) {
+	return (
+		<h3 className="edit-site-sidebar-navigation-subtitle">{ children }</h3>
+	);
+}

package/src/components/sidebar-navigation-subtitle/style.scss

@@ -0,0 +1,7 @@
+.edit-site-sidebar-navigation-subtitle {
+	color: $gray-100;
+	text-transform: uppercase;
+	font-weight: 500;
+	font-size: 11px;
+	padding: $grid-unit-20 0 0 $grid-unit-20;
+}

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

@@ -19,6 +19,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
+import { search } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 
 /**
  * Internal dependencies
@@ -27,30 +29,46 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../private-apis';
 
+const { store: commandsStore } = unlock( commandsPrivateApis );
+
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode } = useSelect( ( select ) => {
+	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
+
 		return {
 			canvasMode: getCanvasMode(),
-			dashboardLink: getSettings().__experimentalDashboardLink,
+			dashboardLink:
+				getSettings().__experimentalDashboardLink || 'index.php',
 		};
 	}, [] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+
 	const disableMotion = useReducedMotion();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const siteIconButtonProps = {
-		label: __( 'Open Admin Sidebar' ),
-		onClick: () => {
-			if ( canvasMode === 'edit' ) {
-				clearSelectedBlock();
-				setCanvasMode( 'view' );
-			}
-		},
-	};
+	const isBackToDashboardButton = canvasMode === 'view';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink,
+				label: __( 'Go back to the Dashboard' ),
+		  }
+		: {
+				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
+				role: 'button',
+				label: __( 'Open Navigation' ),
+				onClick: ( event ) => {
+					event.preventDefault();
+					if ( canvasMode === 'edit' ) {
+						clearSelectedBlock();
+						setCanvasMode( 'view' );
+					}
+				},
+		  };
+
 	const siteTitle = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
@@ -69,65 +87,78 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack
-				justify="flex-start"
-				className="edit-site-site-hub__text-content"
-				spacing="0"
-			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+			<HStack justify="space-between" alignment="center">
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
 					>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<motion.div
+								initial={ false }
+								animate={ {
+									scale: canvasMode === 'view' ? 0.5 : 1,
+								} }
+								whileHover={ {
+									scale: canvasMode === 'view' ? 0.5 : 0.96,
+								} }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: HUB_ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+							>
+								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							</motion.div>
+						</Button>
+					</motion.div>
+
+					<AnimatePresence>
 						<motion.div
-							initial={ false }
+							layout={ canvasMode === 'edit' }
 							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
+								opacity: canvasMode === 'view' ? 1 : 0,
 							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
+							exit={ {
+								opacity: 0,
 							} }
+							className="edit-site-site-hub__site-title"
 							transition={ {
 								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
+								duration: disableMotion ? 0 : 0.2,
 								ease: 'easeOut',
+								delay: canvasMode === 'view' ? 0.1 : 0,
 							} }
 						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							{ decodeEntities( siteTitle ) }
 						</motion.div>
-					</Button>
-				</motion.div>
-
-				<AnimatePresence>
-					<motion.div
-						layout={ canvasMode === 'edit' }
-						animate={ {
-							opacity: canvasMode === 'view' ? 1 : 0,
-						} }
-						exit={ {
-							opacity: 0,
-						} }
-						className="edit-site-site-hub__site-title"
-						transition={ {
-							type: 'tween',
-							duration: disableMotion ? 0 : 0.2,
-							ease: 'easeOut',
-							delay: canvasMode === 'view' ? 0.1 : 0,
-						} }
-					>
-						{ decodeEntities( siteTitle ) }
-					</motion.div>
-				</AnimatePresence>
+					</AnimatePresence>
+				</HStack>
+				{ window?.__experimentalEnableCommandCenter &&
+					canvasMode === 'view' && (
+						<Button
+							className="edit-site-site-hub_toggle-command-center"
+							icon={ search }
+							onClick={ () => openCommandCenter() }
+							label={ __( 'Open command center' ) }
+						/>
+					) }
 			</HStack>
 		</motion.div>
 	);

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

@@ -30,3 +30,11 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 }
+
+.edit-site-site-hub_toggle-command-center {
+	color: $white;
+
+	&:hover {
+		color: $white;
+	}
+}

package/src/components/start-template-options/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import {
@@ -36,8 +36,6 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 	return templateContent;
 }
 
-const START_BLANK_TITLE = __( 'Start blank' );
-
 function useStartPatterns( fallbackContent ) {
 	const { slug, patterns } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
@@ -72,13 +70,6 @@ function useStartPatterns( fallbackContent ) {
 				.map( ( pattern ) => {
 					return { ...pattern, blocks: parse( pattern.content ) };
 				} ),
-			{
-				name: 'start-blank',
-				blocks: parse(
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
-				),
-				title: START_BLANK_TITLE,
-			},
 		];
 	}, [ fallbackContent, slug, patterns ] );
 }
@@ -87,25 +78,15 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
 	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
-
 	return (
-		<div
-			className="edit-site-start-template-options__pattern-container"
-			style={ {
-				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( pattern, blocks ) => {
+				onChange( blocks, { selection: undefined } );
+				onChoosePattern();
 			} }
-		>
-			<BlockPatternsList
-				blockPatterns={ blockPatterns }
-				shownPatterns={ shownBlockPatterns }
-				onClickPattern={ ( pattern, blocks ) => {
-					onChange( 'start-blank' === pattern.name ? [] : blocks, {
-						selection: undefined,
-					} );
-					onChoosePattern();
-				} }
-			/>
-		</div>
+		/>
 	);
 }
 
@@ -134,6 +115,17 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 					} }
 				/>
 			</div>
+			<Flex
+				className="edit-site-start-template-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Skip' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
 		</Modal>
 	);
 }