@wordpress/edit-site 5.12.5 → 5.12.7

package/src/components/page-template-parts/index.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+
+export default function PageTemplateParts() {
+	const { records: templateParts } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template Part' ),
+			cell: ( templatePart ) => (
+				<VStack>
+					<Heading as="h3" level={ 5 }>
+						<Link
+							params={ {
+								postId: templatePart.id,
+								postType: templatePart.type,
+								canvas: 'view',
+							} }
+							state={ { backPath: '/wp_template_part/all' } }
+						>
+							{ decodeEntities(
+								templatePart.title?.rendered ||
+									templatePart.slug
+							) }
+						</Link>
+					</Heading>
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( templatePart ) => (
+				<AddedBy
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( templatePart ) => (
+				<TemplateActions
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Template Parts' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template_part' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templateParts && (
+				<Table data={ templateParts } columns={ columns } />
+			) }
+		</Page>
+	);
+}

package/src/components/page-templates/index.js

@@ -46,7 +46,7 @@ export default function PageTemplates() {
 			header: __( 'Template' ),
 			cell: ( template ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: template.id,

package/src/components/sidebar/index.js

@@ -12,9 +12,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
@@ -56,15 +56,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/library">
-				<SidebarNavigationScreenLibrary />
+			<NavigatorScreen path="/patterns">
+				<SidebarNavigationScreenPatterns />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/all">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>

package/src/components/sidebar-edit-mode/page-panels/page-content.js

@@ -6,22 +6,24 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
 import { unlock } from '../../../lock-unlock';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
 export default function PageContent() {
-	const clientIds = useSelect(
+	const clientIdsTree = useSelect(
 		( select ) =>
-			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
-				PAGE_CONTENT_BLOCK_TYPES
-			),
+			unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),
 		[]
 	);
+	const clientIds = useMemo(
+		() => clientIdsTree.map( ( { clientId } ) => clientId ),
+		[ clientIdsTree ]
+	);
 	return <BlockQuickNavigation clientIds={ clientIds } />;
 }

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -18,6 +18,12 @@ import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
 
+const entityLabels = {
+	wp_navigation: __( 'Navigation' ),
+	wp_block: __( 'Pattern' ),
+	wp_template: __( 'Template' ),
+};
+
 const SettingsHeader = ( { sidebarName } ) => {
 	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
 		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
@@ -29,8 +35,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 		};
 	} );
 
-	const entityLabel =
-		entityType === 'wp_navigation' ? __( 'Navigation' ) : __( 'Template' );
+	const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>

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

@@ -98,6 +98,20 @@
 	border-top: 1px solid $gray-800;
 }
 
+.edit-site-sidebar__notice {
+	background: $gray-800;
+	color: $gray-300;
+	margin: $grid-unit-30 0;
+	&.is-dismissible {
+		padding-right: $grid-unit-10;
+	}
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
+		color: $gray-100;
+	}
+}
+
 /* In general style overrides are discouraged.
  * This is a temporary solution to override the InputControl component's styles.
  * The `Theme` component will potentially be the more appropriate approach
@@ -107,7 +121,11 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: transparent;
+		background: $gray-800;
+
+		.components-button {
+			color: $gray-200 !important;
+		}
 	}
 	.components-input-control__input {
 		color: $gray-200 !important;

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

@@ -16,6 +16,7 @@ import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -32,9 +33,26 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 const noop = () => {};
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar, toggleFeature } = useDispatch( editSiteStore );
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -55,16 +73,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// Disable distraction free mode.
-				toggleFeature( 'distractionFree', false );
-				createNotice(
-					'info',
-					__( 'Distraction free mode turned off' ),
-					{
-						isDismissible: true,
-						type: 'snackbar',
-					}
-				);
+				turnOffDistractionFreeMode();
 				// Switch to edit mode.
 				setCanvasMode( 'edit' );
 				// Open global styles sidebar.
@@ -159,22 +168,41 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
+		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			isViewMode: 'view' === getCanvasMode(),
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+		};
+	}, [] );
 
-	const isStyleBookOpened = useSelect(
-		( select ) =>
-			'style-book' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 
-	const openGlobalStyles = useCallback(
-		async () =>
-			Promise.all( [
-				setCanvasMode( 'edit' ),
-				openGeneralSidebar( 'edit-site/global-styles' ),
-			] ),
-		[ setCanvasMode, openGeneralSidebar ]
-	);
+	const openGlobalStyles = useCallback( async () => {
+		turnOffDistractionFreeMode();
+		return Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -235,7 +263,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && (
+			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

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

@@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import TemplatePartHint from './template-part-hint';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() {
 				'Customize the appearance of your website using the block editor.'
 			) }
 			content={
-				<ItemGroup>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/navigation"
-						withChevron
-						icon={ navigation }
-					>
-						{ __( 'Navigation' ) }
-					</NavigatorButton>
-					<SidebarNavigationItemGlobalStyles
-						withChevron
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/page"
-						withChevron
-						icon={ page }
-					>
-						{ __( 'Pages' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/library"
-						withChevron
-						icon={ symbol }
-					>
-						{ __( 'Library' ) }
-					</NavigatorButton>
-				</ItemGroup>
+				<>
+					<ItemGroup>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+						<SidebarNavigationItemGlobalStyles
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</SidebarNavigationItemGlobalStyles>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/page"
+							withChevron
+							icon={ page }
+						>
+							{ __( 'Pages' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_template"
+							withChevron
+							icon={ layout }
+						>
+							{ __( 'Templates' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/patterns"
+							withChevron
+							icon={ symbol }
+						>
+							{ __( 'Patterns' ) }
+						</NavigatorButton>
+					</ItemGroup>
+					<TemplatePartHint />
+				</>
 			}
 		/>
 	);

package/src/components/sidebar-navigation-screen-main/template-part-hint.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
+
+export default function TemplatePartHint() {
+	const showTemplatePartHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! showTemplatePartHint ) {
+		return null;
+	}
+
+	return (
+		<Notice
+			politeness="polite"
+			className="edit-site-sidebar__notice"
+			onRemove={ () => {
+				setPreference( 'core', PREFERENCE_NAME, false );
+			} }
+		>
+			{ __(
+				'Looking for template parts? You can now find them in the new "Patterns" page.'
+			) }
+		</Notice>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -2,23 +2,20 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { unlock } from '../../lock-unlock';
-
-export default function EditButton() {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+import { useLink } from '../routes/link';
 
+export default function EditButton( { postId } ) {
+	const linkInfo = useLink( {
+		postId,
+		postType: 'wp_navigation',
+		canvas: 'edit',
+	} );
 	return (
-		<SidebarButton
-			onClick={ () => setCanvasMode( 'edit' ) }
-			label={ __( 'Edit' ) }
-			icon={ pencil }
-		/>
+		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
 	);
 }

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

@@ -33,11 +33,8 @@ export default function SidebarNavigationScreenNavigationMenu() {
 
 	const { isSaving, isDeleting } = useSelect(
 		( select ) => {
-			const {
-				isSavingEntityRecord,
-				isDeletingEntityRecord,
-				getEditedEntityRecord: getEditedEntityRecordSelector,
-			} = select( coreStore );
+			const { isSavingEntityRecord, isDeletingEntityRecord } =
+				select( coreStore );
 
 			return {
 				isSaving: isSavingEntityRecord( 'postType', postType, postId ),
@@ -46,7 +43,6 @@ export default function SidebarNavigationScreenNavigationMenu() {
 					postType,
 					postId
 				),
-				getEditedEntityRecord: getEditedEntityRecordSelector,
 			};
 		},
 		[ postId ]

package/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -9,6 +9,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
+import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -21,12 +22,15 @@ export default function SingleNavigationMenu( {
 	return (
 		<SidebarNavigationScreenWrapper
 			actions={
-				<ScreenNavigationMoreMenu
-					menuTitle={ decodeEntities( menuTitle ) }
-					onDelete={ handleDelete }
-					onSave={ handleSave }
-					onDuplicate={ handleDuplicate }
-				/>
+				<>
+					<EditButton postId={ navigationMenu?.id } />
+					<ScreenNavigationMoreMenu
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ handleDelete }
+						onSave={ handleSave }
+						onDuplicate={ handleDuplicate }
+					/>
+				</>
 			}
 			title={ decodeEntities( menuTitle ) }
 			description={ __(

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

@@ -21,6 +21,7 @@ import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 import { useLink } from '../routes/link';
 import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
 import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
+import { unlock } from '../../lock-unlock';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
@@ -41,6 +42,9 @@ function buildMenuLabel( title, id, status ) {
 	);
 }
 
+// Save a boolean to prevent us creating a fallback more than once per session.
+let hasCreatedFallback = false;
+
 export default function SidebarNavigationScreenNavigationMenus() {
 	const {
 		records: navigationMenus,
@@ -55,18 +59,22 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	const isLoading =
 		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
 
-	const getNavigationFallbackId = useSelect(
-		( select ) => select( coreStore ).getNavigationFallbackId
-	);
+	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
 
 	const firstNavigationMenu = navigationMenus?.[ 0 ];
 
+	// Save a boolean to prevent us creating a fallback more than once per session.
+	if ( firstNavigationMenu ) {
+		hasCreatedFallback = true;
+	}
+
 	// If there is no navigation menu found
 	// then trigger fallback algorithm to create one.
 	if (
 		! firstNavigationMenu &&
 		! isResolvingNavigationMenus &&
-		hasResolvedNavigationMenus
+		hasResolvedNavigationMenus &&
+		! hasCreatedFallback
 	) {
 		getNavigationFallbackId();
 	}

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

@@ -43,7 +43,7 @@ const pendingIcon = (
 
 export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
+	let statusLabel = status;
 	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':

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

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { layout, page, home, loop, plus } from '@wordpress/icons';
+import { layout, page, home, verse, plus } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -159,7 +159,7 @@ export default function SidebarNavigationScreenPages() {
 											itemIcon = home;
 											break;
 										case postsPage:
-											itemIcon = loop;
+											itemIcon = verse;
 											break;
 										default:
 											itemIcon = page;