@wordpress/edit-site 5.13.0 → 5.15.0

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

@@ -17,13 +17,15 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import SingleNavigationMenu from './single-navigation-menu';
 import useNavigationMenuHandlers from './use-navigation-menu-handlers';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
 
 export const postType = `wp_navigation`;
 
 export default function SidebarNavigationScreenNavigationMenu() {
-	const {
-		params: { postId },
-	} = useNavigator();
+	const { params } = useNavigator();
+
+	// See https://github.com/WordPress/gutenberg/pull/52120.
+	const postId = Number( params?.postId );
 
 	const { record: navigationMenu, isResolving } = useEntityRecord(
 		'postType',
@@ -33,11 +35,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 +45,6 @@ export default function SidebarNavigationScreenNavigationMenu() {
 					postType,
 					postId
 				),
-				getEditedEntityRecord: getEditedEntityRecordSelector,
 			};
 		},
 		[ postId ]
@@ -60,7 +58,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		useNavigationMenuHandlers();
 
 	const _handleDelete = () => handleDelete( navigationMenu );
-	const _handleSave = () => handleSave( navigationMenu );
+	const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
 	const _handleDuplicate = () => handleDuplicate( navigationMenu );
 
 	if ( isLoading ) {
@@ -94,7 +92,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
-				title={ decodeEntities( menuTitle ) }
+				title={ buildNavigationLabel(
+					navigationMenu?.title,
+					navigationMenu?.id,
+					navigationMenu?.status
+				) }
 				description={ __( 'This Navigation Menu is empty.' ) }
 			/>
 		);

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

@@ -33,6 +33,7 @@ export default function ScreenNavigationMoreMenu( props ) {
 		<>
 			<DropdownMenu
 				className="sidebar-navigation__more-menu"
+				label={ __( 'Actions' ) }
 				icon={ moreVertical }
 				popoverProps={ POPOVER_PROPS }
 			>

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -11,9 +11,16 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
+const notEmptyString = ( testString ) => testString?.trim()?.length > 0;
+
 export default function RenameModal( { menuTitle, onClose, onSave } ) {
 	const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
 
+	const titleHasChanged = editedMenuTitle !== menuTitle;
+
+	const isEditedMenuTitleValid =
+		titleHasChanged && notEmptyString( editedMenuTitle );
+
 	return (
 		<Modal title={ __( 'Rename' ) } onRequestClose={ onClose }>
 			<form className="sidebar-navigation__rename-modal-form">
@@ -30,11 +37,15 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						</Button>
 
 						<Button
-							disabled={ editedMenuTitle === menuTitle }
+							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"
 							onClick={ ( e ) => {
 								e.preventDefault();
+
+								if ( ! isEditedMenuTitleValid ) {
+									return;
+								}
 								onSave( { title: editedMenuTitle } );
 
 								// Immediate close avoids ability to hit save multiple times.

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

@@ -9,6 +9,8 @@ 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 buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -21,14 +23,21 @@ export default function SingleNavigationMenu( {
 	return (
 		<SidebarNavigationScreenWrapper
 			actions={
-				<ScreenNavigationMoreMenu
-					menuTitle={ decodeEntities( menuTitle ) }
-					onDelete={ handleDelete }
-					onSave={ handleSave }
-					onDuplicate={ handleDuplicate }
-				/>
+				<>
+					<ScreenNavigationMoreMenu
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ handleDelete }
+						onSave={ handleSave }
+						onDuplicate={ handleDuplicate }
+					/>
+					<EditButton postId={ navigationMenu?.id } />
+				</>
 			}
-			title={ decodeEntities( menuTitle ) }
+			title={ buildNavigationLabel(
+				navigationMenu?.title,
+				navigationMenu?.id,
+				navigationMenu?.status
+			) }
 			description={ __(
 				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
 			) }

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

@@ -1,15 +1,10 @@
 .sidebar-navigation__more-menu {
 	.components-button {
-		color: $gray-600;
+		color: $gray-200;
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $white;
+			color: $gray-100;
 		}
 	}
 }
-
-.sidebar-navigation__rename-modal-form {
-	// Fix for input focus style being cut off by the modal.
-	padding-top: 1px;
-}

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -65,13 +65,19 @@ function useSaveNavigationMenu() {
 		};
 	}, [] );
 
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
+	const {
+		editEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
 
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const handleSave = async ( navigationMenu, edits = {} ) => {
+	const handleSave = async ( navigationMenu, edits ) => {
+		if ( ! edits ) {
+			return;
+		}
+
 		const postId = navigationMenu?.id;
 		// Prepare for revert in case of error.
 		const originalRecord = getEditedEntityRecord(
@@ -83,11 +89,19 @@ function useSaveNavigationMenu() {
 		// Apply the edits.
 		editEntityRecord( 'postType', postType, postId, edits );
 
+		const recordPropertiesToSave = Object.keys( edits );
+
 		// Attempt to persist.
 		try {
-			await saveEditedEntityRecord( 'postType', postType, postId, {
-				throwOnError: true,
-			} );
+			await saveSpecifiedEntityEdits(
+				'postType',
+				postType,
+				postId,
+				recordPropertiesToSave,
+				{
+					throwOnError: true,
+				}
+			);
 			createSuccessNotice( __( 'Renamed Navigation menu' ), {
 				type: 'snackbar',
 			} );

package/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+export default function buildNavigationLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
+		/* translators: %s is the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
+}

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

@@ -3,6 +3,8 @@
 // on apiFetch this query is limited to 100.
 // These parameters must be kept aligned with those in
 // lib/compat/wordpress-6.3/navigation-block-preloading.php
+// and
+// block-library/src/navigation/constants.js
 export const PRELOADED_NAVIGATION_MENUS_QUERY = {
 	per_page: 100,
 	status: [ 'publish', 'draft' ],

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

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 import { decodeEntities } from '@wordpress/html-entities';
 import {
@@ -20,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 ) {
@@ -40,16 +42,43 @@ 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, isResolving: isLoading } =
-		useEntityRecords(
-			'postType',
-			`wp_navigation`,
-			PRELOADED_NAVIGATION_MENUS_QUERY
-		);
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
+
+	const isLoading =
+		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
+
+	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 &&
+		! hasCreatedFallback
+	) {
+		getNavigationFallbackId();
+	}
+
 	const { handleSave, handleDelete, handleDuplicate } =
 		useNavigationMenuHandlers();
 
@@ -78,7 +107,9 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				navigationMenu={ firstNavigationMenu }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
-				handleSave={ () => handleSave( firstNavigationMenu ) }
+				handleSave={ ( edits ) =>
+					handleSave( firstNavigationMenu, edits )
+				}
 			/>
 		);
 	}

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

@@ -30,9 +30,9 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
 export default function SidebarNavigationScreenPage() {
 	const navigator = useNavigator();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const {
-		params: { postId },
-	} = useNavigator();
+	const { params } = useNavigator();
+
+	const postId = Number( params?.postId );
 	const { record } = useEntityRecord( 'postType', 'page', postId );
 
 	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(

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

@@ -76,7 +76,7 @@ function getPageDetails( page ) {
 		: 0;
 	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
 
-	if ( wordsCounted ) {
+	if ( wordsCounted && ! page?.isPostsPage ) {
 		details.push(
 			{
 				label: __( 'Words' ),
@@ -100,7 +100,7 @@ function getPageDetails( page ) {
 
 export default function PageDetails( { id } ) {
 	const { record } = useEntityRecord( 'postType', 'page', id );
-	const { parentTitle, templateTitle } = useSelect(
+	const { parentTitle, templateTitle, isPostsPage } = useSelect(
 		( select ) => {
 			const { getEditedPostContext } = unlock( select( editSiteStore ) );
 			const postContext = getEditedPostContext();
@@ -135,12 +135,16 @@ export default function PageDetails( { id } ) {
 				  )?.title?.rendered
 				: null;
 
+			const { getEntityRecord } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+
 			return {
 				parentTitle: _parentTitle,
 				templateTitle: _templateTitle,
+				isPostsPage: record?.id === siteSettings?.page_for_posts,
 			};
 		},
-		[ record?.parent ]
+		[ record?.parent, record?.id ]
 	);
 	return (
 		<SidebarNavigationScreenDetailsPanel
@@ -150,6 +154,7 @@ export default function PageDetails( { id } ) {
 			{ getPageDetails( {
 				parentTitle,
 				templateTitle,
+				isPostsPage,
 				...record,
 			} ).map( ( { label, value } ) => (
 				<SidebarNavigationScreenDetailsPanelRow key={ label }>

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

@@ -9,42 +9,10 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/primitives';
-
-const publishedIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
-		/>
-	</SVG>
-);
-
-const draftIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
-		/>
-	</SVG>
-);
-
-const pendingIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
-		/>
-	</SVG>
-);
 
 export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
-	let statusIcon = pendingIcon;
+	let statusLabel = status;
 	switch ( status ) {
 		case 'publish':
 			statusLabel = date
@@ -57,7 +25,6 @@ export default function StatusLabel( { status, date, short } ) {
 						{ time: <time dateTime={ date } /> }
 				  )
 				: __( 'Published' );
-			statusIcon = publishedIcon;
 			break;
 		case 'future':
 			const formattedDate = dateI18n(
@@ -77,7 +44,6 @@ export default function StatusLabel( { status, date, short } ) {
 			break;
 		case 'draft':
 			statusLabel = __( 'Draft' );
-			statusIcon = draftIcon;
 			break;
 		case 'pending':
 			statusLabel = __( 'Pending' );
@@ -99,7 +65,7 @@ export default function StatusLabel( { status, date, short } ) {
 				}
 			) }
 		>
-			{ statusIcon } { statusLabel }
+			{ statusLabel }
 		</div>
 	);
 }

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';
 
 /**
@@ -58,13 +58,16 @@ export default function SidebarNavigationScreenPages() {
 		templates?.find( ( template ) => template.slug === 'home' ) ||
 		templates?.find( ( template ) => template.slug === 'index' );
 
+	const getPostsPageTemplate = () =>
+		templates?.find( ( template ) => template.slug === 'home' ) ||
+		templates?.find( ( template ) => template.slug === 'index' );
+
 	const pagesAndTemplates = pages?.concat( dynamicPageTemplates, [
 		homeTemplate,
 	] );
 
 	const { frontPage, postsPage } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
-
 		const siteSettings = getEntityRecord( 'root', 'site' );
 		return {
 			frontPage: siteSettings?.page_on_front,
@@ -106,6 +109,27 @@ export default function SidebarNavigationScreenPages() {
 		setShowAddPage( false );
 	};
 
+	const getPageProps = ( id ) => {
+		let itemIcon = page;
+		const postsPageTemplateId =
+			postsPage && postsPage === id ? getPostsPageTemplate()?.id : null;
+
+		switch ( id ) {
+			case frontPage:
+				itemIcon = home;
+				break;
+			case postsPage:
+				itemIcon = verse;
+				break;
+		}
+
+		return {
+			icon: itemIcon,
+			postType: postsPageTemplateId ? 'wp_template' : 'page',
+			postId: postsPageTemplateId || id,
+		};
+	};
+
 	return (
 		<>
 			{ showAddPage && (
@@ -152,34 +176,20 @@ export default function SidebarNavigationScreenPages() {
 										</Truncate>
 									</PageItem>
 								) }
-								{ reorderedPages?.map( ( item ) => {
-									let itemIcon;
-									switch ( item.id ) {
-										case frontPage:
-											itemIcon = home;
-											break;
-										case postsPage:
-											itemIcon = loop;
-											break;
-										default:
-											itemIcon = page;
-									}
-									return (
-										<PageItem
-											postId={ item.id }
-											key={ item.id }
-											icon={ itemIcon }
-											withChevron
-										>
-											<Truncate numberOfLines={ 1 }>
-												{ decodeEntities(
-													item?.title?.rendered ||
-														__( '(no title)' )
-												) }
-											</Truncate>
-										</PageItem>
-									);
-								} ) }
+								{ reorderedPages?.map( ( { id, title } ) => (
+									<PageItem
+										{ ...getPageProps( id ) }
+										key={ id }
+										withChevron
+									>
+										<Truncate numberOfLines={ 1 }>
+											{ decodeEntities(
+												title?.rendered ||
+													__( '(no title)' )
+											) }
+										</Truncate>
+									</PageItem>
+								) ) }
 							</ItemGroup>
 						) }
 					</>

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

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -13,19 +14,29 @@ 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';
+import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function SidebarNavigationScreenPattern() {
-	const { params } = useNavigator();
-	const { postType, postId } = params;
+	const { categoryType } = getQueryArgs( window.location.href );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
+	const { params } = useNavigator();
+	const { postType } = params;
+	const postId = normalizeRecordKey( params?.postId );
+
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
-	const content = useNavigationMenuContent( postType, postId );
+
+	// The absence of a category type in the query params for template parts
+	// indicates the user has arrived at the template part via the "manage all"
+	// page and the back button should return them to that list page.
+	const backPath =
+		! categoryType && postType === 'wp_template_part'
+			? '/wp_template_part/all'
+			: '/patterns';
 
 	return (
 		<SidebarNavigationScreen
@@ -36,8 +47,7 @@ export default function SidebarNavigationScreenPattern() {
 					icon={ pencil }
 				/>
 			}
-			backPath={ '/library' }
-			content={ content }
+			backPath={ backPath }
 			{ ...patternDetails }
 		/>
 	);

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

@@ -0,0 +1,29 @@
+.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;
+}
+
+.edit-site-sidebar-navigation-screen-pattern__lock-icon {
+	display: inline-flex;
+}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -19,10 +19,11 @@ export default function TemplatePartNavigationMenu( { id } ) {
 		<>
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="12"
+				size="11"
 				upperCase={ true }
+				weight={ 500 }
 			>
-				{ title?.rendered || __( 'Navigation' ) }
+				{ title?.rendered || title || __( 'Navigation' ) }
 			</Heading>
 			<NavigationMenuEditor navigationMenuId={ id } />
 		</>

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js

@@ -22,8 +22,9 @@ export default function TemplatePartNavigationMenus( { menus } ) {
 		<>
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="12"
+				size="11"
 				upperCase={ true }
+				weight={ 500 }
 			>
 				{ __( 'Navigation' ) }
 			</Heading>