@wordpress/edit-site 5.14.0 → 5.16.0

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

@@ -1,3 +1,23 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
+
+	&:last-of-type {
+		border-bottom: 0;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+	margin-top: $grid-unit-20;
+
+	p {
+		color: $gray-600;
+	}
+
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
 }

package/src/components/sidebar-navigation-screen-patterns/use-my-patterns.js

@@ -6,18 +6,19 @@ import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 export default function useMyPatterns() {
-	const myPatterns = useSelect( ( select ) =>
-		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
-			per_page: -1,
-		} )
+	const myPatternsCount = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+				per_page: -1,
+			} )?.length ?? 0
 	);
 
 	return {
 		myPatterns: {
-			count: myPatterns?.length || 0,
+			count: myPatternsCount,
 			name: 'my-patterns',
 			label: __( 'My patterns' ),
 		},
-		hasPatterns: !! myPatterns?.length,
+		hasPatterns: myPatternsCount > 0,
 	};
 }

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,6 +12,10 @@ import useThemePatterns from './use-theme-patterns';
 
 export default function usePatternCategories() {
 	const defaultCategories = useDefaultPatternCategories();
+	defaultCategories.push( {
+		name: 'uncategorized',
+		label: __( 'Uncategorized' ),
+	} );
 	const themePatterns = useThemePatterns();
 
 	const patternCategories = useMemo( () => {
@@ -31,6 +36,10 @@ export default function usePatternCategories() {
 					categoryMap[ category ].count += 1;
 				}
 			} );
+			// If the pattern has no categories, add it to uncategorized.
+			if ( ! pattern.categories?.length ) {
+				categoryMap.uncategorized.count += 1;
+			}
 		} );
 
 		// Filter categories so we only have those containing patterns.

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -2,19 +2,41 @@
  * WordPress dependencies
  */
 import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
-const getTemplatePartAreas = ( items ) => {
+const useTemplatePartsGroupedByArea = ( items ) => {
 	const allItems = items || [];
 
-	const groupedByArea = allItems.reduce(
-		( accumulator, item ) => {
-			const key = accumulator[ item.area ] ? item.area : 'uncategorized';
-			accumulator[ key ].push( item );
-			return accumulator;
-		},
-		{ header: [], footer: [], sidebar: [], uncategorized: [] }
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
 	);
 
+	// Create map of template areas ensuring that default areas are displayed before
+	// any custom registered template part areas.
+	const knownAreas = {
+		header: {},
+		footer: {},
+		sidebar: {},
+		uncategorized: {},
+	};
+
+	templatePartAreas.forEach(
+		( templatePartArea ) =>
+			( knownAreas[ templatePartArea.area ] = {
+				...templatePartArea,
+				templateParts: [],
+			} )
+	);
+
+	const groupedByArea = allItems.reduce( ( accumulator, item ) => {
+		const key = accumulator[ item.area ] ? item.area : 'uncategorized';
+		accumulator[ key ].templateParts.push( item );
+		return accumulator;
+	}, knownAreas );
+
 	return groupedByArea;
 };
 
@@ -28,6 +50,6 @@ export default function useTemplatePartAreas() {
 	return {
 		hasTemplateParts: templateParts ? !! templateParts.length : false,
 		isLoading,
-		templatePartAreas: getTemplatePartAreas( templateParts ),
+		templatePartAreas: useTemplatePartsGroupedByArea( templateParts ),
 	};
 }

package/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js

@@ -36,7 +36,8 @@ export default function useThemePatterns() {
 					( pattern ) =>
 						! CORE_PATTERN_SOURCES.includes( pattern.source )
 				)
-				.filter( filterOutDuplicatesByName ),
+				.filter( filterOutDuplicatesByName )
+				.filter( ( pattern ) => pattern.inserter !== false ),
 		[ blockPatterns, restBlockPatterns ]
 	);
 

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

@@ -7,7 +7,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -18,7 +17,6 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 
 const TemplateItem = ( { postType, postId, ...props } ) => {
@@ -31,11 +29,6 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -51,10 +44,9 @@ export default function SidebarNavigationScreenTemplates() {
 	);
 
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
-	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+	const canCreate = ! isMobileViewport;
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Templates' ) }
 			description={ __(
 				'Express the layout of your site with templates'

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

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { store as editSiteStore } from '../../store';
 
 const config = {
 	wp_template: {
@@ -29,8 +31,16 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
 	return (
 		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }

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

@@ -21,6 +21,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -31,33 +32,41 @@ import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink, homeUrl } = useSelect( ( select ) => {
-		const { getCanvasMode, getSettings } = unlock(
-			select( editSiteStore )
-		);
+const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
+	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
+		( select ) => {
+			const { getCanvasMode, getSettings } = unlock(
+				select( editSiteStore )
+			);
 
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
+			const {
+				getSite,
+				getUnstableBase, // Site index.
+			} = select( coreStore );
 
-		return {
-			canvasMode: getCanvasMode(),
-			dashboardLink:
-				getSettings().__experimentalDashboardLink || 'index.php',
-			homeUrl: getUnstableBase()?.home,
-		};
-	}, [] );
+			return {
+				canvasMode: getCanvasMode(),
+				dashboardLink:
+					getSettings().__experimentalDashboardLink || 'index.php',
+				homeUrl: getUnstableBase()?.home,
+				siteTitle: getSite()?.title,
+			};
+		},
+		[]
+	);
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
 	const disableMotion = useReducedMotion();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		setCanvasMode,
+		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
+	} = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const isBackToDashboardButton = canvasMode === 'view';
 	const siteIconButtonProps = isBackToDashboardButton
 		? {
 				href: dashboardLink,
-				label: __( 'Go back to the Dashboard' ),
+				label: __( 'Go to the Dashboard' ),
 		  }
 		: {
 				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
@@ -67,22 +76,20 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					event.preventDefault();
 					if ( canvasMode === 'edit' ) {
 						clearSelectedBlock();
+						setPreviewDeviceType( 'desktop' );
 						setCanvasMode( 'view' );
 					}
 				},
 		  };
 
-	const siteTitle = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
-		[]
-	);
-
 	return (
 		<motion.div
 			ref={ ref }
-			{ ...props }
-			className={ classnames( 'edit-site-site-hub', props.className ) }
+			{ ...restProps }
+			className={ classnames(
+				'edit-site-site-hub',
+				restProps.className
+			) }
 			initial={ false }
 			transition={ {
 				type: 'tween',
@@ -101,7 +108,12 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					spacing="0"
 				>
 					<motion.div
-						className="edit-site-site-hub__view-mode-toggle-container"
+						className={ classnames(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
 						layout
 						transition={ {
 							type: 'tween',
@@ -145,7 +157,10 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							exit={ {
 								opacity: 0,
 							} }
-							className="edit-site-site-hub__site-title"
+							className={ classnames(
+								'edit-site-site-hub__site-title',
+								{ 'is-transparent': isTransparent }
+							) }
 							transition={ {
 								type: 'tween',
 								duration: disableMotion ? 0 : 0.2,
@@ -160,7 +175,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						<Button
 							href={ homeUrl }
 							target="_blank"
-							label={ __( 'View site' ) }
+							label={ __( 'View site (opens in a new tab)' ) }
 							aria-label={ __(
 								'View site (opens in a new tab)'
 							) }
@@ -171,10 +186,14 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button
-						className="edit-site-site-hub_toggle-command-center"
+						className={ classnames(
+							'edit-site-site-hub_toggle-command-center',
+							{ 'is-transparent': isTransparent }
+						) }
 						icon={ search }
 						onClick={ () => openCommandCenter() }
 						label={ __( 'Open command palette' ) }
+						shortcut={ displayShortcut.primary( 'k' ) }
 					/>
 				) }
 			</HStack>

package/src/components/site-hub/style.scss

@@ -8,15 +8,23 @@
 		gap: 0;
 	}
 
+	.edit-site-site-hub__site-title,
+	.edit-site-site-hub_toggle-command-center {
+		transition: opacity ease 0.1s;
+
+		&.is-transparent {
+			opacity: 0 !important;
+		}
+	}
+
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
+		margin-right: var(--wp-admin-border-width-focus);
 		@include break-mobile() {
 			opacity: 0;
 			transition: opacity 0.2s ease-in-out;
 		}
 		&:focus {
-			outline: none;
-			box-shadow: none;
 			opacity: 1;
 		}
 		svg {
@@ -39,6 +47,10 @@
 	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
+
+	&.has-transparent-background {
+		background: transparent;
+	}
 }
 
 .edit-site-site-hub__text-content {

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

@@ -11,11 +11,17 @@ 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: { postId, postType } = {} } = useLocation();
+	const { params } = useLocation();
+
+	const { postType } = params;
+
+	const postId = normalizeRecordKey( params?.postId );
+
 	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
 		const { getSite, getUnstableBase } = select( coreDataStore );
 		const siteData = getSite();
@@ -66,7 +72,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: homepageId },
+				context: { postType: 'page', postId: Number( homepageId ) },
 			} );
 		} else if ( ! isRequestingSite ) {
 			setPage( {

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -58,10 +58,7 @@ export default function useSyncCanvasModeWithURL() {
 
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
-		if (
-			canvasInUrl === undefined &&
-			currentCanvasMode.current !== 'view'
-		) {
+		if ( canvasInUrl !== 'edit' && currentCanvasMode.current !== 'view' ) {
 			setCanvasMode( 'view' );
 		} else if (
 			canvasInUrl === 'edit' &&

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -36,6 +36,12 @@ export function getPathFromURL( urlParams ) {
 	return path;
 }
 
+function isSubset( subset, superset ) {
+	return Object.entries( subset ).every( ( [ key, value ] ) => {
+		return superset[ key ] === value;
+	} );
+}
+
 export default function useSyncPathWithURL() {
 	const history = useHistory();
 	const { params: urlParams } = useLocation();
@@ -44,76 +50,77 @@ export default function useSyncPathWithURL() {
 		params: navigatorParams,
 		goTo,
 	} = useNavigator();
-	const currentUrlParams = useRef( urlParams );
-	const currentPath = useRef( navigatorLocation.path );
 	const isMounting = useRef( true );
 
-	useEffect( () => {
-		// The navigatorParams are only initially filled properly when the
-		// navigator screens mount. so we ignore the first synchronisation.
-		if ( isMounting.current ) {
-			isMounting.current = false;
-			return;
-		}
-
-		function updateUrlParams( newUrlParams ) {
-			if (
-				Object.entries( newUrlParams ).every( ( [ key, value ] ) => {
-					return currentUrlParams.current[ key ] === value;
-				} )
-			) {
+	useEffect(
+		() => {
+			// The navigatorParams are only initially filled properly when the
+			// navigator screens mount. so we ignore the first synchronisation.
+			if ( isMounting.current ) {
+				isMounting.current = false;
 				return;
 			}
-			const updatedParams = {
-				...currentUrlParams.current,
-				...newUrlParams,
-			};
-			currentUrlParams.current = updatedParams;
-			history.push( updatedParams );
-		}
 
-		if ( navigatorParams?.postType && navigatorParams?.postId ) {
-			updateUrlParams( {
-				postType: navigatorParams?.postType,
-				postId: navigatorParams?.postId,
-				path: undefined,
-			} );
-		} else if (
-			navigatorLocation.path.startsWith( '/page/' ) &&
-			navigatorParams?.postId
-		) {
-			updateUrlParams( {
-				postType: 'page',
-				postId: navigatorParams?.postId,
-				path: undefined,
-			} );
-		} else if ( navigatorLocation.path === '/patterns' ) {
-			updateUrlParams( {
-				postType: undefined,
-				postId: undefined,
-				canvas: undefined,
-				path: navigatorLocation.path,
-			} );
-		} else {
-			updateUrlParams( {
-				postType: undefined,
-				postId: undefined,
-				categoryType: undefined,
-				categoryId: undefined,
-				path:
-					navigatorLocation.path === '/'
-						? undefined
-						: navigatorLocation.path,
-			} );
-		}
-	}, [ navigatorLocation?.path, navigatorParams, history ] );
+			function updateUrlParams( newUrlParams ) {
+				if ( isSubset( newUrlParams, urlParams ) ) {
+					return;
+				}
+				const updatedParams = {
+					...urlParams,
+					...newUrlParams,
+				};
+				history.push( updatedParams );
+			}
 
-	useEffect( () => {
-		currentUrlParams.current = urlParams;
-		const path = getPathFromURL( urlParams );
-		if ( currentPath.current !== path ) {
-			currentPath.current = path;
-			goTo( path );
-		}
-	}, [ urlParams, goTo ] );
+			if ( navigatorParams?.postType && navigatorParams?.postId ) {
+				updateUrlParams( {
+					postType: navigatorParams?.postType,
+					postId: navigatorParams?.postId,
+					path: undefined,
+				} );
+			} else if (
+				navigatorLocation.path.startsWith( '/page/' ) &&
+				navigatorParams?.postId
+			) {
+				updateUrlParams( {
+					postType: 'page',
+					postId: navigatorParams?.postId,
+					path: undefined,
+				} );
+			} else if ( navigatorLocation.path === '/patterns' ) {
+				updateUrlParams( {
+					postType: undefined,
+					postId: undefined,
+					canvas: undefined,
+					path: navigatorLocation.path,
+				} );
+			} else {
+				updateUrlParams( {
+					postType: undefined,
+					postId: undefined,
+					categoryType: undefined,
+					categoryId: undefined,
+					path:
+						navigatorLocation.path === '/'
+							? undefined
+							: navigatorLocation.path,
+				} );
+			}
+		},
+		// Trigger only when navigator changes to prevent infinite loops.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ navigatorLocation?.path, navigatorParams ]
+	);
+
+	useEffect(
+		() => {
+			const path = getPathFromURL( urlParams );
+			if ( navigatorLocation.path !== path ) {
+				goTo( path );
+			}
+		},
+		// Trigger only when URL changes to prevent infinite loops.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ urlParams ]
+	);
 }

package/src/components/table/style.scss

@@ -1,5 +1,6 @@
 .edit-site-table-wrapper {
 	width: 100%;
+	padding: $grid-unit-40;
 }
 
 .edit-site-table {

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

@@ -13,6 +13,7 @@ import {
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -58,7 +59,7 @@ export default function TemplateActions( {
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" reverted.' ),
-					template.title.rendered
+					decodeEntities( template.title.rendered )
 				),
 				{
 					type: 'snackbar',