@wordpress/edit-site 5.3.6 → 5.3.8

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

@@ -2,20 +2,84 @@
  * 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' };
+
+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
+				),
+			};
+		}, [] );
+
+	// Sort navigation menus by date.
+	const orderedNavigationMenus = useMemo(
+		() =>
+			navigationMenus?.sort( ( menuA, menuB ) => {
+				const menuADate = new Date( menuA.date );
+				const menuBDate = new Date( menuB.date );
+				return menuADate.getTime() > menuBDate.getTime();
+			} ),
+		[ navigationMenus ]
+	);
+	const firstNavigationMenu = orderedNavigationMenus?.[ 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 &&
@@ -27,17 +91,47 @@ export default function SidebarNavigationScreenNavigationMenus() {
 					postId: attributes.id,
 				} );
 			}
+			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
-			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>
+		</>
+	);
+}

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

@@ -1,12 +1,67 @@
-.edit-site-sidebar-navigation-screen-navigation-menus {
-	.block-editor-list-view-block__menu-edit,
-	.edit-site-navigation-inspector__select-menu {
-		display: none;
+.edit-site-sidebar-navigation-screen__description {
+	margin: 0 0 $grid-unit-40 $grid-unit-20;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
+	padding: $grid-unit-10;
+	margin: $grid-unit-10;
+	background-color: $gray-100;
+	animation: loadingpulse 1s linear infinite;
+	animation-delay: 0.5s; // avoid animating for fast network responses
+}
+
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
 	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
+		border-radius: $radius-block-ui;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			background: $gray-800;
+		}
+		.block-editor-list-view-block__menu {
+			margin-left: -$grid-unit-10;
+		}
 	}
+
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
 	}
+
+	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
+		white-space: normal;
+	}
+
+	.block-editor-list-view-block__title {
+		margin-top: 3px;
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-right: 0;
+	}
+
+	.components-button {
+		color: $gray-600;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			color: $white;
+		}
+	}
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
+	display: none;
 }

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

@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,13 +16,26 @@ import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreenTemplate() {
+	const { params } = useNavigator();
+	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { getDescription, getTitle, record } = useEditedEntityRecord();
+	const { getDescription, getTitle, record } = useEditedEntityRecord(
+		postType,
+		postId
+	);
 	let description = getDescription();
-	if ( ! description && record.is_custom ) {
-		description = __(
-			'This is a custom template that can be applied manually to any Post or Page.'
-		);
+	if ( ! description ) {
+		if ( record.type === 'wp_template' && record.is_custom ) {
+			description = __(
+				'This is a custom template that can be applied manually to any Post or Page.'
+			);
+		} else if ( record.type === 'wp_template_part' ) {
+			description = sprintf(
+				// translators: %s: template part title e.g: "Header".
+				__( 'This is your %s template part.' ),
+				getTitle()
+			);
+		}
 	}
 
 	return (
@@ -34,7 +48,7 @@ export default function SidebarNavigationScreenTemplate() {
 					icon={ pencil }
 				/>
 			}
-			content={ description ? <p>{ description }</p> : undefined }
+			description={ description }
 		/>
 	);
 }

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

@@ -29,6 +29,9 @@ const config = {
 			loading: __( 'Loading templates' ),
 			notFound: __( 'No templates found' ),
 			manage: __( 'Manage all templates' ),
+			description: __(
+				'Express the layout of your site with templates.'
+			),
 		},
 	},
 	wp_template_part: {
@@ -37,6 +40,9 @@ const config = {
 			loading: __( 'Loading template parts' ),
 			notFound: __( 'No template parts found' ),
 			manage: __( 'Manage all template parts' ),
+			description: __(
+				'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'
+			),
 		},
 	},
 };
@@ -80,6 +86,7 @@ export default function SidebarNavigationScreenTemplates() {
 		<SidebarNavigationScreen
 			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].labels.title }
+			description={ config[ postType ].labels.description }
 			actions={
 				canCreate && (
 					<AddNewTemplate

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

@@ -12,9 +12,15 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 const config = {
 	wp_template: {
 		title: __( 'All templates' ),
+		description: __(
+			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+		),
 	},
 	wp_template_part: {
 		title: __( 'All template parts' ),
+		description: __(
+			'Create new template parts, or reset any customisations made to the template parts supplied by your theme.'
+		),
 	},
 };
 
@@ -22,5 +28,10 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
-	return <SidebarNavigationScreen title={ config[ postType ].title } />;
+	return (
+		<SidebarNavigationScreen
+			title={ config[ postType ].title }
+			description={ config[ postType ].description }
+		/>
+	);
 }

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

@@ -11,7 +11,7 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height + 4px;
+	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
 }