@wordpress/edit-site 5.4.0 → 5.6.0

package/src/components/sidebar-button/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+export default function SidebarButton( props ) {
+	return (
+		<Button
+			{ ...props }
+			className={ classnames(
+				'edit-site-sidebar-button',
+				props.className
+			) }
+		/>
+	);
+}

package/src/components/sidebar-button/style.scss

@@ -0,0 +1,24 @@
+.edit-site-sidebar-button {
+	color: $gray-200;
+	flex-shrink: 0;
+
+	// Focus (resets default button focus and use focus-visible).
+	&:focus:not(:disabled) {
+		box-shadow: none;
+		outline: none;
+	}
+	&:focus-visible:not(:disabled) {
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	&:hover,
+	&:focus-visible,
+	&:focus,
+	&:not([aria-disabled="true"]):active,
+	&[aria-expanded="true"] {
+		color: $white;
+	}
+}

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -37,18 +37,14 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles sidebar' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex>
-					<FlexBlock>
+				<Flex className="edit-site-global-styles-sidebar__header">
+					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<strong>{ __( 'Styles' ) }</strong>
 					</FlexBlock>
 					<FlexItem>
 						<Button
 							icon={ seen }
-							label={
-								isStyleBookOpened
-									? __( 'Close Style Book' )
-									: __( 'Open Style Book' )
-							}
+							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
 							disabled={ editorMode !== 'visual' }
 							onClick={ () => {

package/src/components/sidebar-edit-mode/style.scss

@@ -83,3 +83,19 @@
 .edit-site-global-styles-sidebar hr {
 	margin: 0;
 }
+
+.show-icon-labels {
+	.edit-site-global-styles-sidebar__header {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}

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

@@ -1,13 +1,12 @@
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
-	border-width: $border-width-tab;
+	margin: 0 $grid-unit-05;
 
 	&:hover,
 	&:focus,
 	&[aria-current] {
 		color: $white;
 		background: $gray-800;
-		border-width: $border-width-tab;
 	}
 
 	&[aria-current] {
@@ -15,28 +14,7 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
-	color: $gray-600;
-	&:hover,
-	&:focus,
-	&[aria-current] {
-		color: $white;
-	}
-}
-
-.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf {
-	&:hover,
-	&:focus,
-	&[aria-current] {
-		background: $gray-800;
-	}
-	.block-editor-list-view-block__menu {
-		margin-left: -$grid-unit-10;
-	}
-}
-
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
 	cursor: grab;
-	width: calc(100% - #{ $border-width-focus });
 	padding: $grid-unit-10;
 }

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

@@ -5,8 +5,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
-	Button,
-	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -17,12 +15,14 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreen( {
-	path,
+	isRoot,
 	title,
 	actions,
 	content,
+	description,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -32,41 +32,40 @@ export default function SidebarNavigationScreen( {
 	}, [] );
 
 	return (
-		<NavigatorScreen
-			className="edit-site-sidebar-navigation-screen"
-			path={ path }
-		>
-			<VStack spacing={ 2 }>
-				<HStack
-					spacing={ 4 }
-					justify="flex-start"
-					className="edit-site-sidebar-navigation-screen__title-icon"
-				>
-					{ path !== '/' ? (
-						<NavigatorToParentButton
-							className="edit-site-sidebar-navigation-screen__back"
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Back' ) }
-						/>
-					) : (
-						<Button
-							className="edit-site-sidebar-navigation-screen__back"
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Navigate to the Dashboard' ) }
-							href={ dashboardLink || 'index.php' }
-							label={ __( 'Dashboard' ) }
-						/>
-					) }
-					<h2 className="edit-site-sidebar-navigation-screen__title">
-						{ title }
-					</h2>
-					{ actions }
-				</HStack>
+		<VStack spacing={ 2 }>
+			<HStack
+				spacing={ 4 }
+				justify="flex-start"
+				className="edit-site-sidebar-navigation-screen__title-icon"
+			>
+				{ ! isRoot ? (
+					<NavigatorToParentButton
+						as={ SidebarButton }
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						aria-label={ __( 'Back' ) }
+					/>
+				) : (
+					<SidebarButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						aria-label={ __( 'Navigate to the Dashboard' ) }
+						href={ dashboardLink || 'index.php' }
+						label={ __( 'Dashboard' ) }
+					/>
+				) }
+				<h2 className="edit-site-sidebar-navigation-screen__title">
+					{ title }
+				</h2>
+				{ actions }
+			</HStack>
 
-				<nav className="edit-site-sidebar-navigation-screen__content">
-					{ content }
-				</nav>
-			</VStack>
-		</NavigatorScreen>
+			<nav className="edit-site-sidebar-navigation-screen__content">
+				{ description && (
+					<p className="edit-site-sidebar-navigation-screen__description">
+						{ description }
+					</p>
+				) }
+				{ content }
+			</nav>
+		</VStack>
 	);
 }

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

@@ -10,6 +10,21 @@
 	color: $gray-600;
 }
 
+.edit-site-sidebar-navigation-screen__page-link {
+	color: $gray-600;
+
+	&:hover,
+	&:focus {
+		color: $white;
+	}
+
+	.components-external-link__icon {
+		margin-left: $grid-unit-05;
+	}
+	margin-left: $grid-unit-20;
+	display: inline-block;
+}
+
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
@@ -23,17 +38,9 @@
 
 .edit-site-sidebar-navigation-screen__title {
 	font-size: calc(1.56 * 13px);
+	line-height: normal;
 	font-weight: 500;
 	flex-grow: 1;
 	color: $white;
 	margin: 0;
 }
-
-.edit-site-sidebar-navigation-screen__back {
-	color: $gray-200;
-
-	&:hover,
-	&:not([aria-disabled="true"]):active {
-		color: $white;
-	}
-}

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

@@ -17,23 +17,36 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenMain() {
-	const { navigationMenus } = useSelect( ( select ) => {
-		const { getEntityRecords } = select( coreStore );
-		return {
-			navigationMenus: getEntityRecords( 'postType', 'wp_navigation', {
-				per_page: -1,
+	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 showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
+		? hasNavigationMenus
+		: false;
 	return (
 		<SidebarNavigationScreen
-			path="/"
+			isRoot
 			title={ __( 'Design' ) }
+			description={ __(
+				'Customize the appearance of your website using the block editor.'
+			) }
 			content={
 				<ItemGroup>
-					{ !! navigationMenus && navigationMenus.length > 0 && (
+					{ showNavigationScreen && (
 						<NavigatorButton
 							as={ SidebarNavigationItem }
 							path="/navigation"
@@ -45,7 +58,7 @@ export default function SidebarNavigationScreenMain() {
 					) }
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/templates"
+						path="/wp_template"
 						withChevron
 						icon={ layout }
 					>
@@ -53,7 +66,7 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/template-parts"
+						path="/wp_template_part"
 						withChevron
 						icon={ symbolFilled }
 					>

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

@@ -2,10 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+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
@@ -13,39 +17,48 @@ import { decodeEntities } from '@wordpress/html-entities';
 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 SidebarNavigationScreenNavigationItem() {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
-	const { post } = useSelect( ( select ) => {
-		const { getEditedPostContext } = select( editSiteStore );
-		const { getEntityRecord } = select( coreStore );
-		const { postType, postId } = getEditedPostContext() ?? {};
-
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			post:
-				postId && postType
-					? getEntityRecord( 'postType', postType, postId )
-					: null,
-		};
-	}, [] );
+	const {
+		params: { postType, postId },
+	} = useNavigator();
+	const { record } = useEntityRecord( 'postType', postType, postId );
 
 	return (
 		<SidebarNavigationScreen
-			path="/navigation/single"
-			title={ post ? decodeEntities( post?.title?.rendered ) : null }
+			title={ record ? decodeEntities( record?.title?.rendered ) : null }
 			actions={
-				<Button
-					variant="primary"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					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.'
+					  )
 			}
 			content={
-				post ? decodeEntities( post?.description?.rendered ) : null
+				<>
+					{ 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-navigation-menus/index.js

@@ -2,20 +2,79 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import NavigationInspector from '../navigation-inspector';
 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';
+
+const noop = () => {};
+const NAVIGATION_MENUS_QUERY = {
+	per_page: 1,
+	status: 'publish',
+	order: 'desc',
+	orderby: 'date',
+};
+
+function SidebarNavigationScreenWrapper( { children, actions } ) {
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Navigation' ) }
+			actions={ actions }
+			description={ __(
+				'Browse your site, edit pages, and manage your primary navigation menu.'
+			) }
+			content={ children }
+		/>
+	);
+}
 
 export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
+	const { navigationMenus, hasResolvedNavigationMenus, storedSettings } =
+		useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
+
+			const navigationMenusQuery = [
+				'postType',
+				'wp_navigation',
+				NAVIGATION_MENUS_QUERY,
+			];
+			return {
+				storedSettings: getSettings( false ),
+				navigationMenus: getEntityRecords( ...navigationMenusQuery ),
+				hasResolvedNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					navigationMenusQuery
+				),
+			};
+		}, [] );
+
+	const firstNavigationMenu = navigationMenus?.[ 0 ]?.id;
+	const blocks = useMemo( () => {
+		return [
+			createBlock( 'core/navigation', { ref: firstNavigationMenu } ),
+		];
+	}, [ firstNavigationMenu ] );
+
+	const isLoading = ! hasResolvedNavigationMenus;
+	const hasNavigationMenus = !! navigationMenus?.length;
+
 	const onSelect = useCallback(
 		( selectedBlock ) => {
-			const { attributes } = selectedBlock;
+			const { attributes, name } = selectedBlock;
 			if (
 				attributes.kind === 'post-type' &&
 				attributes.id &&
@@ -25,21 +84,49 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				history.push( {
 					postType: attributes.type,
 					postId: attributes.id,
-					path: '/navigation/single',
+				} );
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
 				} );
 			}
 		},
 		[ history ]
 	);
+
+	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				{ __( 'There are no Navigation Menus.' ) }
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! hasResolvedNavigationMenus || isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				<NavigationMenuLoader />
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
 	return (
-		<SidebarNavigationScreen
-			path="/navigation"
-			title={ __( 'Navigation' ) }
-			content={
-				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
-					<NavigationInspector onSelect={ onSelect } />
+		<BlockEditorProvider
+			settings={ storedSettings }
+			value={ blocks }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<SidebarNavigationScreenWrapper>
+				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+					<NavigationMenuContent
+						rootClientId={ blocks[ 0 ].clientId }
+						onSelect={ onSelect }
+					/>
 				</div>
-			}
-		/>
+			</SidebarNavigationScreenWrapper>
+		</BlockEditorProvider>
 	);
 }

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

@@ -0,0 +1,9 @@
+export function NavigationMenuLoader() {
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
+		</>
+	);
+}

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

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	BlockList,
+	BlockTools,
+} from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { NavigationMenuLoader } from './loader';
+
+export default function NavigationMenuContent( { rootClientId, onSelect } ) {
+	const { clientIdsTree, isLoading } = useSelect(
+		( select ) => {
+			const { __unstableGetClientIdsTree, areInnerBlocksControlled } =
+				select( blockEditorStore );
+			return {
+				clientIdsTree: __unstableGetClientIdsTree( rootClientId ),
+
+				// This is a small hack to wait for the navigation block
+				// to actually load its inner blocks.
+				isLoading: ! areInnerBlocksControlled( rootClientId ),
+			};
+		},
+		[ rootClientId ]
+	);
+	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+
+	const offCanvasOnselect = useCallback(
+		( block ) => {
+			if (
+				block.name === 'core/navigation-link' &&
+				! block.attributes.url
+			) {
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceBlock(
+					block.clientId,
+					createBlock( 'core/navigation-link', block.attributes )
+				);
+			} else {
+				onSelect( block );
+			}
+		},
+		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+	);
+
+	// The hidden block is needed because it makes block edit side effects trigger.
+	// For example a navigation page list load its items has an effect on edit to load its items.
+	return (
+		<>
+			{ isLoading && <NavigationMenuLoader /> }
+			{ ! isLoading && (
+				<OffCanvasEditor
+					blocks={ clientIdsTree }
+					onSelect={ offCanvasOnselect }
+					LeafMoreMenu={ LeafMoreMenu }
+					showAppender={ false }
+				/>
+			) }
+			<div style={ { visibility: 'hidden' } }>
+				<BlockTools>
+					<BlockList />
+				</BlockTools>
+			</div>
+		</>
+	);
+}