@wordpress/edit-site 5.9.0 → 5.11.0

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

@@ -6,12 +6,10 @@ import {
 	store as blockEditorStore,
 	BlockList,
 	BlockTools,
-	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { VisuallyHidden } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -19,35 +17,8 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import { NavigationMenuLoader } from './loader';
+import LeafMoreMenu from './leaf-more-menu';
 
-function CustomLinkAdditionalBlockUI( { block, onClose } ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { label, url, opensInNewTab } = block.attributes;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
-	return (
-		<Popover placement="bottom" shift onClose={ onClose }>
-			<LinkControl
-				hasTextControl
-				hasRichPreviews
-				value={ link }
-				onChange={ ( updatedValue ) => {
-					updateBlockAttributes( block.clientId, {
-						label: updatedValue.title,
-						url: updatedValue.url,
-						opensInNewTab: updatedValue.opensInNewTab,
-					} );
-					onClose();
-				} }
-				onCancel={ onClose }
-			/>
-		</Popover>
-	);
-}
 // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = [
@@ -102,29 +73,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	const [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =
-		useState( false );
-
-	const renderAdditionalBlockUICallback = useCallback(
-		( block ) => {
-			if (
-				customLinkEditPopoverOpenId &&
-				block.clientId === customLinkEditPopoverOpenId
-			) {
-				return (
-					<CustomLinkAdditionalBlockUI
-						block={ block }
-						onClose={ () => {
-							setIsCustomLinkEditPopoverOpenId( false );
-						} }
-					/>
-				);
-			}
-			return null;
-		},
-		[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
-	);
-
 	// Delay loading stop by 50ms to avoid flickering.
 	useEffect( () => {
 		let timeoutId;
@@ -144,8 +92,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		};
 	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
 
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
-
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	const offCanvasOnselect = useCallback(
 		( block ) => {
 			if (
@@ -157,47 +104,34 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
-			} else if (
-				block.name === 'core/navigation-link' &&
-				block.attributes.kind === 'custom' &&
-				block.attributes.url
-			) {
-				setIsCustomLinkEditPopoverOpenId( block.clientId );
 			} else {
 				onSelect( block );
 			}
 		},
-		[
-			onSelect,
-			__unstableMarkNextChangeAsNotPersistent,
-			replaceBlock,
-			setIsCustomLinkEditPopoverOpenId,
-		]
+		[ 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
+				<PrivateListView
 					blocks={
 						isSinglePageList
 							? clientIdsTree[ 0 ].innerBlocks
 							: clientIdsTree
 					}
 					onSelect={ offCanvasOnselect }
-					LeafMoreMenu={ LeafMoreMenu }
+					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
-					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
-			<div style={ { visibility: 'hidden' } }>
+			<VisuallyHidden aria-hidden="true">
 				<BlockTools>
 					<BlockList />
 				</BlockTools>
-			</div>
+			</VisuallyHidden>
 		</>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { useEntityRecords } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
+
+export default function SidebarNavigationScreenNavigationMenuButton( {
+	children,
+	...props
+} ) {
+	const { records: navigationMenus, isResolving: isLoading } =
+		useEntityRecords(
+			'postType',
+			`wp_navigation`,
+			PRELOADED_NAVIGATION_MENUS_QUERY
+		);
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasSingleNavigationMenu = navigationMenus?.length === 1;
+	const firstNavigationMenu = navigationMenus?.[ 0 ];
+
+	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
+		? hasNavigationMenus
+		: false;
+
+	// If there is a single menu then we can go directly to that menu.
+	// Otherwise we go to the navigation listing screen.
+	const path = hasSingleNavigationMenu
+		? `/navigation/wp_navigation/${ firstNavigationMenu?.id }`
+		: '/navigation';
+
+	if ( ! showNavigationScreen ) {
+		return null;
+	}
+
+	return (
+		<NavigatorButton { ...props } disabled={ isLoading } path={ path }>
+			{ children }
+		</NavigatorButton>
+	);
+}

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

@@ -2,26 +2,6 @@
 	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 });
@@ -113,3 +93,9 @@
 .edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
 	display: none;
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
+	margin-left: auto;
+	margin-right: auto;
+	display: block;
+}

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

@@ -11,6 +11,7 @@ import { useEntityRecords } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
+import { getTemplatePartIcon } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -36,14 +37,31 @@ const config = {
 	},
 	wp_template_part: {
 		labels: {
-			title: __( 'Template parts' ),
-			loading: __( 'Loading template parts' ),
-			notFound: __( 'No template parts found' ),
+			title: __( 'Library' ),
+			loading: __( 'Loading library' ),
+			notFound: __( 'No patterns found' ),
 			manage: __( 'Manage all template parts' ),
+			reusableBlocks: __( 'Manage reusable blocks' ),
 			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.'
+				'Manage what patterns are available when editing your site.'
 			),
 		},
+		sortCallback: ( items ) => {
+			const groupedByArea = items.reduce(
+				( accumulator, item ) => {
+					const key = accumulator[ item.area ] ? item.area : 'rest';
+					accumulator[ key ].push( item );
+					return accumulator;
+				},
+				{ header: [], footer: [], sidebar: [], rest: [] }
+			);
+			return [
+				...groupedByArea.header,
+				...groupedByArea.footer,
+				...groupedByArea.sidebar,
+				...groupedByArea.rest,
+			];
+		},
 	},
 };
 
@@ -73,15 +91,20 @@ export default function SidebarNavigationScreenTemplates() {
 			per_page: -1,
 		}
 	);
-	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+	let sortedTemplates = templates ? [ ...templates ] : [];
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
+	if ( config[ postType ].sortCallback ) {
+		sortedTemplates = config[ postType ].sortCallback( sortedTemplates );
+	}
 
 	const browseAllLink = useLink( {
 		path: '/' + postType + '/all',
 	} );
 
 	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
-
+	const isTemplateList = postType === 'wp_template';
 	return (
 		<SidebarNavigationScreen
 			isRoot={ isTemplatePartsMode }
@@ -112,6 +135,11 @@ export default function SidebarNavigationScreenTemplates() {
 									postType={ postType }
 									postId={ template.id }
 									key={ template.id }
+									withChevron
+									icon={
+										! isTemplateList &&
+										getTemplatePartIcon( template.area )
+									}
 								>
 									{ decodeEntities(
 										template.title?.rendered ||
@@ -120,13 +148,28 @@ export default function SidebarNavigationScreenTemplates() {
 								</TemplateItem>
 							) ) }
 							{ ! isMobileViewport && (
-								<SidebarNavigationItem
-									className="edit-site-sidebar-navigation-screen-templates__see-all"
-									{ ...browseAllLink }
-									children={
-										config[ postType ].labels.manage
-									}
-								/>
+								<>
+									<SidebarNavigationItem
+										className="edit-site-sidebar-navigation-screen-templates__see-all"
+										withChevron
+										{ ...browseAllLink }
+									>
+										{ config[ postType ].labels.manage }
+									</SidebarNavigationItem>
+									{ !! config[ postType ].labels
+										.reusableBlocks && (
+										<SidebarNavigationItem
+											as="a"
+											href="edit.php?post_type=wp_block"
+											withChevron
+										>
+											{
+												config[ postType ].labels
+													.reusableBlocks
+											}
+										</SidebarNavigationItem>
+									) }
+								</>
 							) }
 						</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;
+}