@wordpress/edit-site 5.16.0 → 5.17.0

package/src/components/page-patterns/use-patterns.js

@@ -28,7 +28,9 @@ const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
 
 const templatePartToPattern = ( templatePart ) => ( {
-	blocks: parse( templatePart.content.raw ),
+	blocks: parse( templatePart.content.raw, {
+		__unstableSkipMigrationLogs: true,
+	} ),
 	categories: [ templatePart.area ],
 	description: templatePart.description || '',
 	isCustom: templatePart.source === 'custom',
@@ -107,7 +109,9 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			...pattern,
 			keywords: pattern.keywords || [],
 			type: 'pattern',
-			blocks: parse( pattern.content ),
+			blocks: parse( pattern.content, {
+				__unstableSkipMigrationLogs: true,
+			} ),
 		} ) );
 
 	if ( categoryId ) {
@@ -126,7 +130,9 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
-	blocks: parse( reusableBlock.content.raw ),
+	blocks: parse( reusableBlock.content.raw, {
+		__unstableSkipMigrationLogs: true,
+	} ),
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,

package/src/components/sidebar-edit-mode/default-sidebar.js

@@ -35,6 +35,7 @@ export default function DefaultSidebar( {
 				scope="core/edit-site"
 				identifier={ identifier }
 				title={ title }
+				smallScreenTitle={ title }
 				icon={ icon }
 				closeLabel={ closeLabel }
 				header={ header }

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

@@ -8,6 +8,7 @@ import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
 import { Button, __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -15,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editSiteStore } from '../../../store';
 
 export default function EditTemplate() {
-	const { context, hasResolved, title, blocks } = useSelect( ( select ) => {
+	const { context, hasResolved, template } = useSelect( ( select ) => {
 		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
 			select( editSiteStore );
 		const { getEditedEntityRecord, hasFinishedResolution } =
@@ -26,15 +27,13 @@ export default function EditTemplate() {
 			getEditedPostType(),
 			getEditedPostId(),
 		];
-		const template = getEditedEntityRecord( ...queryArgs );
 		return {
 			context: _context,
 			hasResolved: hasFinishedResolution(
 				'getEditedEntityRecord',
 				queryArgs
 			),
-			title: template?.title,
-			blocks: template?.blocks,
+			template: getEditedEntityRecord( ...queryArgs ),
 		};
 	}, [] );
 
@@ -45,13 +44,22 @@ export default function EditTemplate() {
 		[ context ]
 	);
 
+	const blocks = useMemo(
+		() =>
+			template.blocks ??
+			( template.content && typeof template.content !== 'function'
+				? parse( template.content )
+				: [] ),
+		[ template.blocks, template.content ]
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
 		<VStack>
-			<div>{ decodeEntities( title ) }</div>
+			<div>{ decodeEntities( template.title ) }</div>
 			<div className="edit-site-page-panels__edit-template-preview">
 				<BlockContextProvider value={ blockContext }>
 					<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />

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

@@ -222,7 +222,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
 	// If there are no revisions, do not render a footer.
-	const hasRevisions = revisionsCount >= 2;
+	const hasRevisions = revisionsCount > 0;
 	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
 		hasRevisions && ! isLoadingRevisions && modifiedDateTime;

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

@@ -22,10 +22,9 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
 export const postType = `wp_navigation`;
 
 export default function SidebarNavigationScreenNavigationMenu() {
-	const { params } = useNavigator();
-
-	// See https://github.com/WordPress/gutenberg/pull/52120.
-	const postId = Number( params?.postId );
+	const {
+		params: { postId },
+	} = useNavigator();
 
 	const { record: navigationMenu, isResolving } = useEntityRecord(
 		'postType',

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

@@ -135,7 +135,8 @@ function useDuplicateNavigationMenu() {
 		useDispatch( noticesStore );
 
 	const handleDuplicate = async ( navigationMenu ) => {
-		const menuTitle = navigationMenu?.title || navigationMenu?.slug;
+		const menuTitle =
+			navigationMenu?.title?.rendered || navigationMenu?.slug;
 
 		try {
 			const savedRecord = await saveEntityRecord(

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

@@ -126,16 +126,17 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
-						{ block.attributes?.id && (
-							<MenuItem
-								onClick={ () => {
-									onGoToPage( block );
-									onClose();
-								} }
-							>
-								{ goToLabel }
-							</MenuItem>
-						) }
+						{ block.attributes?.type === 'page' &&
+							block.attributes?.id && (
+								<MenuItem
+									onClick={ () => {
+										onGoToPage( block );
+										onClose();
+									} }
+								>
+									{ goToLabel }
+								</MenuItem>
+							) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

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 } = useNavigator();
-
-	const postId = Number( params?.postId );
+	const {
+		params: { postId },
+	} = useNavigator();
 	const { record } = useEntityRecord( 'postType', 'page', postId );
 
 	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(

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

@@ -157,7 +157,7 @@ export default function SidebarNavigationScreenPages() {
 					<>
 						{ ( isLoadingPages || isLoadingTemplates ) && (
 							<ItemGroup>
-								<Item>{ __( 'Loading pages' ) }</Item>
+								<Item>{ __( 'Loading pages…' ) }</Item>
 							</ItemGroup>
 						) }
 						{ ! ( isLoadingPages || isLoadingTemplates ) && (

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

@@ -16,16 +16,13 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import usePatternDetails from './use-pattern-details';
 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 { categoryType } = getQueryArgs( window.location.href );
+	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
-	const { params } = useNavigator();
-	const { postType } = params;
-	const postId = normalizeRecordKey( params?.postId );
-
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -24,11 +24,8 @@ import {
 	SidebarNavigationScreenDetailsPanelLabel,
 	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
-import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function usePatternDetails( postType, postId ) {
-	postId = normalizeRecordKey( postId );
-
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
 		postId

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

@@ -132,7 +132,7 @@ export default function SidebarNavigationScreenPatterns() {
 			footer={ footer }
 			content={
 				<>
-					{ isLoading && __( 'Loading patterns' ) }
+					{ isLoading && __( 'Loading patterns…' ) }
 					{ ! isLoading && (
 						<>
 							{ ! hasTemplateParts && ! hasPatterns && (

package/src/components/sidebar-navigation-screen-template/home-template-details.js

@@ -198,8 +198,10 @@ export default function HomeTemplateDetails() {
 				<SidebarNavigationScreenDetailsPanelRow>
 					<CheckboxControl
 						className="edit-site-sidebar-navigation-screen__input-control"
-						label="Allow comments on new posts"
-						help="Changes will apply to new posts only. Individual posts may override these settings."
+						label={ __( 'Allow comments on new posts' ) }
+						help={ __(
+							'Changes will apply to new posts only. Individual posts may override these settings.'
+						) }
 						checked={ commentsOnNewPostsValue }
 						onChange={ setAllowCommentsOnNewPosts }
 					/>

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

@@ -63,7 +63,7 @@ export default function SidebarNavigationScreenTemplates() {
 			}
 			content={
 				<>
-					{ isLoading && __( 'Loading templates' ) }
+					{ isLoading && __( 'Loading templates…' ) }
 					{ ! isLoading && (
 						<ItemGroup>
 							{ ! templates?.length && (

package/src/components/site-hub/index.js

@@ -76,7 +76,7 @@ const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
 					event.preventDefault();
 					if ( canvasMode === 'edit' ) {
 						clearSelectedBlock();
-						setPreviewDeviceType( 'desktop' );
+						setPreviewDeviceType( 'Desktop' );
 						setCanvasMode( 'view' );
 					}
 				},

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -11,17 +11,11 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import normalizeRecordKey from '../../utils/normalize-record-key';
 
 const { useLocation } = unlock( routerPrivateApis );
 
 export default function useInitEditedEntityFromURL() {
-	const { params } = useLocation();
-
-	const { postType } = params;
-
-	const postId = normalizeRecordKey( params?.postId );
-
+	const { params: { postId, postType } = {} } = useLocation();
 	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
 		const { getSite, getUnstableBase } = select( coreDataStore );
 		const siteData = getSite();
@@ -72,7 +66,7 @@ export default function useInitEditedEntityFromURL() {
 		// In all other cases, we need to set the home page in the site editor view.
 		if ( homepageId ) {
 			setPage( {
-				context: { postType: 'page', postId: Number( homepageId ) },
+				context: { postType: 'page', postId: homepageId },
 			} );
 		} else if ( ! isRequestingSite ) {
 			setPage( {

package/src/components/template-actions/index.js

@@ -124,11 +124,7 @@ function DeleteMenuItem( { onRemove, isTemplate } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	return (
 		<>
-			<MenuItem
-				isDestructive
-				isTertiary
-				onClick={ () => setIsModalOpen( true ) }
-			>
+			<MenuItem isDestructive onClick={ () => setIsModalOpen( true ) }>
 				{ __( 'Delete' ) }
 			</MenuItem>
 			<ConfirmDialog

package/src/components/use-edited-entity-record/index.js

@@ -10,7 +10,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function useEditedEntityRecord( postType, postId ) {
 	const { record, title, description, isLoaded, icon } = useSelect(
@@ -22,11 +21,7 @@ export default function useEditedEntityRecord( postType, postId ) {
 			const { __experimentalGetTemplateInfo: getTemplateInfo } =
 				select( editorStore );
 			const usedPostType = postType ?? getEditedPostType();
-
-			let usedPostId = postId ?? getEditedPostId();
-
-			usedPostId = normalizeRecordKey( usedPostId, usedPostType );
-
+			const usedPostId = postId ?? getEditedPostId();
 			const _record = getEditedEntityRecord(
 				'postType',
 				usedPostType,

package/src/hooks/commands/use-common-commands.js

@@ -4,7 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { trash, backup, help, styles, external } from '@wordpress/icons';
+import { trash, backup, help, styles, external, brush } from '@wordpress/icons';
 import { useCommandLoader, useCommand } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -23,6 +23,143 @@ import getIsListPage from '../../utils/get-is-list-page';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
+function useGlobalStylesOpenStylesCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+	const { set } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	const history = useHistory();
+	const isDistractionFree = useSelect( ( select ) => {
+		return select( preferencesStore ).get(
+			editSiteStore.name,
+			'distractionFree'
+		);
+	}, [] );
+
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! isBlockBasedTheme ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-styles',
+				label: __( 'Open styles' ),
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					if ( isDistractionFree ) {
+						set( editSiteStore.name, 'distractionFree', false );
+						createInfoNotice(
+							__( 'Distraction free mode turned off.' ),
+							{
+								type: 'snackbar',
+							}
+						);
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+				},
+				icon: styles,
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setCanvasMode,
+		isEditorPage,
+		createInfoNotice,
+		getCanvasMode,
+		isDistractionFree,
+		isBlockBasedTheme,
+		set,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+function useGlobalStylesToggleWelcomeGuideCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+	const { set } = useDispatch( preferencesStore );
+
+	const history = useHistory();
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! isBlockBasedTheme ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/toggle-styles-welcome-guide',
+				label: __( 'Learn about styles' ),
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+					set( 'core/edit-site', 'welcomeGuideStyles', true );
+					// sometimes there's a focus loss that happens after some time
+					// that closes the modal, we need to force reopening it.
+					setTimeout( () => {
+						set( 'core/edit-site', 'welcomeGuideStyles', true );
+					}, 500 );
+				},
+				icon: help,
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setCanvasMode,
+		isEditorPage,
+		getCanvasMode,
+		isBlockBasedTheme,
+		set,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 function useGlobalStylesResetCommands() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const commands = useMemo( () => {
@@ -81,8 +218,8 @@ function useGlobalStylesOpenCssCommands() {
 		return [
 			{
 				name: 'core/edit-site/open-styles-css',
-				label: __( 'Open CSS' ),
-				icon: styles,
+				label: __( 'Customize CSS' ),
+				icon: brush,
 				callback: ( { close } ) => {
 					close();
 					if ( ! isEditorPage ) {
@@ -135,7 +272,7 @@ function useGlobalStylesOpenRevisionsCommands() {
 		return [
 			{
 				name: 'core/edit-site/open-global-styles-revisions',
-				label: __( 'Open styles revisions' ),
+				label: __( 'Style revisions' ),
 				icon: backup,
 				callback: ( { close } ) => {
 					close();
@@ -170,80 +307,14 @@ function useGlobalStylesOpenRevisionsCommands() {
 }
 
 export function useCommonCommands() {
-	const { openGeneralSidebar, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const { set } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-	const history = useHistory();
-	const { homeUrl, isDistractionFree } = useSelect( ( select ) => {
+	const homeUrl = useSelect( ( select ) => {
 		const {
 			getUnstableBase, // Site index.
 		} = select( coreStore );
 
-		return {
-			homeUrl: getUnstableBase()?.home,
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
-		};
+		return getUnstableBase()?.home;
 	}, [] );
 
-	useCommand( {
-		name: 'core/edit-site/open-styles',
-		label: __( 'Open styles' ),
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			if ( isDistractionFree ) {
-				set( editSiteStore.name, 'distractionFree', false );
-				createInfoNotice( __( 'Distraction free mode turned off.' ), {
-					type: 'snackbar',
-				} );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-		},
-		icon: styles,
-	} );
-
-	useCommand( {
-		name: 'core/edit-site/toggle-styles-welcome-guide',
-		label: __( 'Learn about styles' ),
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-			set( 'core/edit-site', 'welcomeGuideStyles', true );
-			// sometimes there's a focus loss that happens after some time
-			// that closes the modal, we need to force reopening it.
-			setTimeout( () => {
-				set( 'core/edit-site', 'welcomeGuideStyles', true );
-			}, 500 );
-		},
-		icon: help,
-	} );
-
 	useCommand( {
 		name: 'core/edit-site/view-site',
 		label: __( 'View site' ),
@@ -254,6 +325,16 @@ export function useCommonCommands() {
 		icon: external,
 	} );
 
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles',
+		hook: useGlobalStylesOpenStylesCommands,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/toggle-styles-welcome-guide',
+		hook: useGlobalStylesToggleWelcomeGuideCommands,
+	} );
+
 	useCommandLoader( {
 		name: 'core/edit-site/reset-global-styles',
 		hook: useGlobalStylesResetCommands,