@wordpress/edit-site 5.12.0 → 5.12.2

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

@@ -9,16 +9,17 @@ import {
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { VisuallyHidden } from '@wordpress/components';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import LeafMoreMenu from './leaf-more-menu';
 
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 // 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 = [
@@ -35,37 +36,40 @@ const PAGES_QUERY = [
 	},
 ];
 
-export default function NavigationMenuContent( { rootClientId, onSelect } ) {
-	const [ isLoading, setIsLoading ] = useState( true );
-	const { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(
+export default function NavigationMenuContent( { rootClientId } ) {
+	const { listViewRootClientId, isLoading } = useSelect(
 		( select ) => {
 			const {
-				__unstableGetClientIdsTree,
 				areInnerBlocksControlled,
 				getBlockName,
+				getBlockCount,
+				getBlockOrder,
 			} = select( blockEditorStore );
 			const { isResolving } = select( coreStore );
 
-			const _clientIdsTree = __unstableGetClientIdsTree( rootClientId );
+			const blockClientIds = getBlockOrder( rootClientId );
+
 			const hasOnlyPageListBlock =
-				_clientIdsTree.length === 1 &&
-				getBlockName( _clientIdsTree[ 0 ].clientId ) ===
-					'core/page-list';
+				blockClientIds.length === 1 &&
+				getBlockName( blockClientIds[ 0 ] ) === 'core/page-list';
+			const pageListHasBlocks =
+				hasOnlyPageListBlock &&
+				getBlockCount( blockClientIds[ 0 ] ) > 0;
+
 			const isLoadingPages = isResolving(
 				'getEntityRecords',
 				PAGES_QUERY
 			);
+
 			return {
-				clientIdsTree: _clientIdsTree,
+				listViewRootClientId: pageListHasBlocks
+					? blockClientIds[ 0 ]
+					: rootClientId,
 				// This is a small hack to wait for the navigation block
 				// to actually load its inner blocks.
-				shouldKeepLoading:
+				isLoading:
 					! areInnerBlocksControlled( rootClientId ) ||
 					isLoadingPages,
-				isSinglePageList:
-					hasOnlyPageListBlock &&
-					! isLoadingPages &&
-					_clientIdsTree[ 0 ].innerBlocks.length > 0,
 			};
 		},
 		[ rootClientId ]
@@ -73,26 +77,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	// Delay loading stop by 50ms to avoid flickering.
-	useEffect( () => {
-		let timeoutId;
-		if ( shouldKeepLoading && ! isLoading ) {
-			setIsLoading( true );
-		}
-		if ( ! shouldKeepLoading && isLoading ) {
-			timeoutId = setTimeout( () => {
-				setIsLoading( false );
-				timeoutId = undefined;
-			}, 50 );
-		}
-		return () => {
-			if ( timeoutId ) {
-				clearTimeout( timeoutId );
-			}
-		};
-	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
-
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	const offCanvasOnselect = useCallback(
 		( block ) => {
 			if (
@@ -104,11 +88,9 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
-			} else {
-				onSelect( block );
 			}
 		},
-		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+		[ __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
@@ -117,21 +99,17 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		<>
 			{ ! isLoading && (
 				<PrivateListView
-					blocks={
-						isSinglePageList
-							? clientIdsTree[ 0 ].innerBlocks
-							: clientIdsTree
-					}
+					rootClientId={ listViewRootClientId }
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
 				/>
 			) }
-			<VisuallyHidden aria-hidden="true">
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
 				<BlockTools>
 					<BlockList />
 				</BlockTools>
-			</VisuallyHidden>
+			</div>
 		</>
 	);
 }

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

@@ -99,3 +99,7 @@
 	margin-right: auto;
 	display: block;
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
+	display: none;
+}

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

@@ -1,39 +1,31 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
 } from '@wordpress/components';
 import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { pencil } from '@wordpress/icons';
-import { humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { escapeAttribute } from '@wordpress/escape-html';
+import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
 import PageDetails from './page-details';
 import PageActions from '../page-actions';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
 export default function SidebarNavigationScreenPage() {
 	const navigator = useNavigator();
@@ -99,35 +91,27 @@ export default function SidebarNavigationScreenPage() {
 					className="edit-site-sidebar-navigation-screen__page-link"
 					href={ record.link }
 				>
-					{ record.link.replace( /^(https?:\/\/)?/, '' ) }
+					{ filterURLForDisplay(
+						safeDecodeURIComponent( record.link )
+					) }
 				</ExternalLink>
 			}
 			content={
 				<>
-					<VStack
-						className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
-						alignment="left"
-						spacing={ 2 }
-					>
-						<div
-							className={ classnames(
-								'edit-site-sidebar-navigation-screen-page__featured-image',
-								{
-									'has-image': !! featuredMediaSourceUrl,
-								}
-							) }
+					{ !! featuredMediaSourceUrl && (
+						<VStack
+							className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
+							alignment="left"
+							spacing={ 2 }
 						>
-							{ !! featuredMediaSourceUrl && (
+							<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
 								<img
 									alt={ featureImageAltText }
 									src={ featuredMediaSourceUrl }
 								/>
-							) }
-							{ ! record?.featured_media && (
-								<p>{ __( 'No featured image' ) }</p>
-							) }
-						</div>
-					</VStack>
+							</div>
+						</VStack>
+					) }
 					{ !! record?.excerpt?.rendered && (
 						<Truncate
 							className="edit-site-sidebar-navigation-screen-page__excerpt"
@@ -136,36 +120,13 @@ export default function SidebarNavigationScreenPage() {
 							{ stripHTML( record.excerpt.rendered ) }
 						</Truncate>
 					) }
-					<SidebarNavigationSubtitle>
-						{ __( 'Details' ) }
-					</SidebarNavigationSubtitle>
 					<PageDetails id={ postId } />
 				</>
 			}
 			footer={
-				!! record?.modified && (
-					<HStack
-						spacing={ 5 }
-						alignment="left"
-						className="edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer"
-					>
-						<Text className="edit-site-sidebar-navigation-screen-page__details-label">
-							{ __( 'Last modified' ) }
-						</Text>
-						<Text className="edit-site-sidebar-navigation-screen-page__details-value">
-							{ createInterpolateElement(
-								sprintf(
-									/* translators: %s: is the relative time when the post was last modified. */
-									__( '<time>%s</time>' ),
-									humanTimeDiff( record.modified )
-								),
-								{
-									time: <time dateTime={ record.modified } />,
-								}
-							) }
-						</Text>
-					</HStack>
-				)
+				<SidebarNavigationScreenDetailsFooter
+					lastModifiedDateTime={ record?.modified }
+				/>
 			}
 		/>
 	) : null;

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

@@ -2,23 +2,25 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { count as wordCount } from '@wordpress/wordcount';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
+import { safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import StatusLabel from './status-label';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 // Taken from packages/editor/src/components/time-to-read/index.js.
 const AVERAGE_READING_RATE = 189;
@@ -35,12 +37,17 @@ function getPageDetails( page ) {
 				<StatusLabel
 					status={ page?.password ? 'protected' : page.status }
 					date={ page?.date }
+					short
 				/>
 			),
 		},
 		{
 			label: __( 'Slug' ),
-			value: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,
+			value: (
+				<Truncate numberOfLines={ 1 }>
+					{ safeDecodeURIComponent( page.slug ) }
+				</Truncate>
+			),
 		},
 	];
 
@@ -51,14 +58,12 @@ function getPageDetails( page ) {
 		} );
 	}
 
-	details.push( {
-		label: __( 'Parent' ),
-		// `null` indicates no parent.
-		value:
-			null === page?.parentTitle
-				? __( 'Top level' )
-				: decodeEntities( page?.parentTitle || __( '(no title)' ) ),
-	} );
+	if ( page?.parentTitle ) {
+		details.push( {
+			label: __( 'Parent' ),
+			value: decodeEntities( page.parentTitle || __( '(no title)' ) ),
+		} );
+	}
 
 	/*
 	 * translators: If your word count is based on single characters (e.g. East Asian characters),
@@ -95,15 +100,15 @@ function getPageDetails( page ) {
 
 export default function PageDetails( { id } ) {
 	const { record } = useEntityRecord( 'postType', 'page', id );
-
 	const { parentTitle, templateTitle } = useSelect(
 		( select ) => {
-			const { getEditedPostContext, getSettings } = unlock(
-				select( editSiteStore )
-			);
-			const defaultTemplateTypes = getSettings()?.defaultTemplateTypes;
+			const { getEditedPostContext } = unlock( select( editSiteStore ) );
 			const postContext = getEditedPostContext();
-
+			const templates = select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			);
 			// Template title.
 			const templateSlug =
 				// Checks that the post type matches the current theme's post type, otherwise
@@ -112,10 +117,10 @@ export default function PageDetails( { id } ) {
 					? postContext?.templateSlug
 					: null;
 			const _templateTitle =
-				defaultTemplateTypes && templateSlug
-					? defaultTemplateTypes.find(
+				templates && templateSlug
+					? templates.find(
 							( template ) => template.slug === templateSlug
-					  )?.title
+					  )?.title?.rendered
 					: null;
 
 			// Parent page title.
@@ -135,29 +140,27 @@ export default function PageDetails( { id } ) {
 				templateTitle: _templateTitle,
 			};
 		},
-		[ record ]
+		[ record?.parent ]
 	);
 	return (
-		<VStack spacing={ 5 }>
+		<SidebarNavigationScreenDetailsPanel
+			spacing={ 5 }
+			title={ __( 'Details' ) }
+		>
 			{ getPageDetails( {
 				parentTitle,
 				templateTitle,
 				...record,
 			} ).map( ( { label, value } ) => (
-				<HStack
-					key={ label }
-					spacing={ 5 }
-					alignment="left"
-					className="edit-site-sidebar-navigation-screen-page__details"
-				>
-					<Text className="edit-site-sidebar-navigation-screen-page__details-label">
+				<SidebarNavigationScreenDetailsPanelRow key={ label }>
+					<SidebarNavigationScreenDetailsPanelLabel>
 						{ label }
-					</Text>
-					<Text className="edit-site-sidebar-navigation-screen-page__details-value">
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
 						{ value }
-					</Text>
-				</HStack>
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
 			) ) }
-		</VStack>
+		</SidebarNavigationScreenDetailsPanel>
 	);
 }

package/src/components/sidebar-navigation-screen-page/status-label.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date';
+import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/primitives';
 
@@ -41,35 +41,39 @@ const pendingIcon = (
 	</SVG>
 );
 
-export default function StatusLabel( { status, date } ) {
+export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
 	let statusLabel = '';
 	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':
-			statusLabel = createInterpolateElement(
-				sprintf(
-					/* translators: %s: is the relative time when the post was published. */
-					__( 'Published <time>%s</time>' ),
-					relateToNow
-				),
-				{ time: <time dateTime={ date } /> }
-			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the relative time when the post was published. */
+							__( 'Published <time>%s</time>' ),
+							relateToNow
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Published' );
 			statusIcon = publishedIcon;
 			break;
 		case 'future':
 			const formattedDate = dateI18n(
-				getSettings().formats.date,
+				short ? 'M j' : 'F j',
 				getDate( date )
 			);
-			statusLabel = createInterpolateElement(
-				sprintf(
-					/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
-					__( 'Scheduled for <time>%s</time>' ),
-					formattedDate
-				),
-				{ time: <time dateTime={ date } /> }
-			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
+							__( 'Scheduled: <time>%s</time>' ),
+							formattedDate
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Scheduled' );
 			break;
 		case 'draft':
 			statusLabel = __( 'Draft' );

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

@@ -30,6 +30,7 @@
 
 .edit-site-sidebar-navigation-screen-page__excerpt {
 	font-size: $helptext-font-size;
+	margin-bottom: $grid-unit-30;
 }
 
 .edit-site-sidebar-navigation-screen-page__modified {
@@ -60,21 +61,3 @@
 		fill: $alert-green;
 	}
 }
-
-.edit-site-sidebar-navigation-screen-page__footer {
-	padding-top: $grid-unit-10;
-	padding-bottom: $grid-unit-10;
-	padding-left: $grid-unit-20;
-}
-
-.edit-site-sidebar-navigation-screen-page__details {
-	.edit-site-sidebar-navigation-screen-page__details-label {
-		color: $gray-600;
-		width: 100px;
-	}
-
-	.edit-site-sidebar-navigation-screen-page__details-value.edit-site-sidebar-navigation-screen-page__details-value {
-		color: $gray-200;
-	}
-}
-

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

@@ -23,7 +23,7 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarButton from '../sidebar-button';
 import AddNewPageModal from '../add-new-page';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -180,38 +180,39 @@ export default function SidebarNavigationScreenPages() {
 										</PageItem>
 									);
 								} ) }
-								<VStack className="edit-site-sidebar-navigation-screen__sticky-section">
-									{ dynamicPageTemplates?.map( ( item ) => (
-										<PageItem
-											postType="wp_template"
-											postId={ item.id }
-											key={ item.id }
-											icon={ layout }
-											withChevron
-										>
-											<Truncate numberOfLines={ 1 }>
-												{ decodeEntities(
-													item.title?.rendered ||
-														__( '(no title)' )
-												) }
-											</Truncate>
-										</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>
-								</VStack>
 							</ItemGroup>
 						) }
 					</>
 				}
+				footer={
+					<VStack spacing={ 0 }>
+						{ dynamicPageTemplates?.map( ( item ) => (
+							<PageItem
+								postType="wp_template"
+								postId={ item.id }
+								key={ item.id }
+								icon={ layout }
+								withChevron
+							>
+								<Truncate numberOfLines={ 1 }>
+									{ decodeEntities(
+										item.title?.rendered ||
+											__( '(no title)' )
+									) }
+								</Truncate>
+							</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>
+					</VStack>
+				}
 			/>
 		</>
 	);

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { pencil } from '@wordpress/icons';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarButton from '../sidebar-button';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import usePatternDetails from './use-pattern-details';
+import useNavigationMenuContent from './use-navigation-menu-content';
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function SidebarNavigationScreenPattern() {
+	const { params } = useNavigator();
+	const { postType, postId } = params;
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
+	useInitEditedEntityFromURL();
+
+	const patternDetails = usePatternDetails( postType, postId );
+	const content = useNavigationMenuContent( postType, postId );
+
+	return (
+		<SidebarNavigationScreen
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			backPath={ '/library' }
+			content={ content }
+			{ ...patternDetails }
+		/>
+	);
+}

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

@@ -0,0 +1,25 @@
+.edit-site-sidebar-navigation-screen-pattern__added-by-description {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: $grid-unit-30;
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
+
+	img {
+		border-radius: $grid-unit-15;
+	}
+
+	svg {
+		fill: $gray-600;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}