@wordpress/edit-site 6.13.0 → 6.13.1-next.cd6172eb0.0

package/src/components/editor/index.js

@@ -54,6 +54,7 @@ import {
 	useResolveEditedEntity,
 	useSyncDeprecatedEntityIntoState,
 } from './use-resolve-edited-entity';
+import { addQueryArgs } from '@wordpress/url';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -83,10 +84,44 @@ const siteIconVariants = {
 	},
 };
 
+function getListPathForPostType( postType ) {
+	switch ( postType ) {
+		case 'navigation':
+			return '/navigation';
+		case 'wp_block':
+			return '/pattern?postType=wp_block';
+		case 'wp_template_part':
+			return '/pattern?postType=wp_template_part';
+		case 'wp_template':
+			return '/template';
+		case 'page':
+			return '/page';
+		case 'post':
+			return '/';
+	}
+	throw 'Unknown post type';
+}
+
+function getNavigationPath( location, postType ) {
+	const { path, name } = location;
+	if (
+		[
+			'pattern-item',
+			'template-part-item',
+			'page-item',
+			'template-item',
+			'post-item',
+		].includes( name )
+	) {
+		return getListPathForPostType( postType );
+	}
+	return addQueryArgs( path, { canvas: undefined } );
+}
+
 export default function EditSiteEditor( { isPostsList = false } ) {
 	const disableMotion = useReducedMotion();
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const location = useLocation();
+	const { canvas = 'view' } = location.query;
 	const isLoading = useIsSiteEditorLoading();
 	useAdaptEditorToCanvas( canvas );
 	const entity = useResolveEditedEntity();
@@ -157,9 +192,11 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 				case 'move-to-trash':
 				case 'delete-post':
 					{
-						history.push( {
-							postType: items[ 0 ].type,
-						} );
+						history.navigate(
+							getListPathForPostType(
+								postWithTemplate ? context.postType : postType
+							)
+						);
 					}
 					break;
 				case 'duplicate-post':
@@ -182,11 +219,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 									{
 										label: __( 'Edit' ),
 										onClick: () => {
-											history.push( {
-												postId: newItem.id,
-												postType: newItem.type,
-												canvas: 'edit',
-											} );
+											history.navigate(
+												`/${ newItem.type }/${ newItem.id }?canvas=edit`
+											);
 										},
 									},
 								],
@@ -196,7 +231,13 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					break;
 			}
 		},
-		[ history, createSuccessNotice ]
+		[
+			postType,
+			context?.postType,
+			postWithTemplate,
+			history,
+			createSuccessNotice,
+		]
 	);
 
 	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
@@ -268,26 +309,20 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 												// come here through `posts list` and are in focus mode editing a template, template part etc..
 												if (
 													isPostsList &&
-													params?.focusMode
+													location.query?.focusMode
 												) {
-													history.push(
-														{
-															page: 'gutenberg-posts-dashboard',
-															postType: 'post',
-														},
-														undefined,
-														{
-															transition:
-																'canvas-mode-view-transition',
-														}
-													);
+													history.navigate( '/', {
+														transition:
+															'canvas-mode-view-transition',
+													} );
 												} else {
-													history.push(
-														{
-															...params,
-															canvas: undefined,
-														},
-														undefined,
+													history.navigate(
+														getNavigationPath(
+															location,
+															postWithTemplate
+																? context.postType
+																: postType
+														),
 														{
 															transition:
 																'canvas-mode-view-transition',

package/src/components/editor/use-editor-title.js

@@ -22,6 +22,10 @@ function useEditorTitle( postType, postId ) {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
 
+			if ( ! postId ) {
+				return { isLoaded: false };
+			}
+
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,

package/src/components/editor/use-resolve-edited-entity.js

@@ -30,8 +30,23 @@ const postTypesWithoutParentTemplate = [
 const authorizedPostTypes = [ 'page', 'post' ];
 
 export function useResolveEditedEntity() {
-	const { params = {} } = useLocation();
-	const { postId, postType } = params;
+	const { name, params = {}, query } = useLocation();
+	const { postId = query?.postId } = params; // Fallback to query param for postId for list view routes.
+	let postType;
+	if ( name === 'navigation-item' ) {
+		postType = NAVIGATION_POST_TYPE;
+	} else if ( name === 'pattern-item' ) {
+		postType = PATTERN_TYPES.user;
+	} else if ( name === 'template-part-item' ) {
+		postType = TEMPLATE_PART_POST_TYPE;
+	} else if ( name === 'template-item' || name === 'templates' ) {
+		postType = TEMPLATE_POST_TYPE;
+	} else if ( name === 'page-item' || name === 'pages' ) {
+		postType = 'page';
+	} else if ( name === 'post-item' || name === 'posts' ) {
+		postType = 'post';
+	}
+
 	const homePage = useSelect( ( select ) => {
 		const { getHomePage } = unlock( select( coreDataStore ) );
 		return getHomePage();

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -27,7 +27,13 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
-import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
+import {
+	moreVertical,
+	next,
+	previous,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -486,37 +492,30 @@ function FontCollection( { slug } ) {
 
 					{ ! selectedFont && (
 						<HStack
-							spacing={ 4 }
-							justify="center"
+							expanded={ false }
 							className="font-library-modal__footer"
+							justify="end"
+							spacing={ 6 }
 						>
-							<Button
-								label={ __( 'Previous page' ) }
-								size="compact"
-								onClick={ () => setPage( page - 1 ) }
-								disabled={ page === 1 }
-								showTooltip
-								accessibleWhenDisabled
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								tooltipPosition="top"
-							/>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
-								spacing={ 2 }
+								spacing={ 1 }
 								className="font-library-modal__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
-										// translators: %s: Total number of pages.
+										// translators: 1: Current page number, 2: Total number of pages.
 										_x(
-											'Page <CurrentPageControl /> of %s',
+											'<div>Page</div>%1$s<div>of %2$s</div>',
 											'paging'
 										),
+										'<CurrentPage />',
 										totalPages
 									),
 									{
-										CurrentPageControl: (
+										div: <div aria-hidden />,
+										CurrentPage: (
 											<SelectControl
 												aria-label={ __(
 													'Current page'
@@ -535,22 +534,36 @@ function FontCollection( { slug } ) {
 														parseInt( newPage )
 													)
 												}
-												size="compact"
+												size="small"
 												__nextHasNoMarginBottom
+												variant="minimal"
 											/>
 										),
 									}
 								) }
 							</HStack>
-							<Button
-								label={ __( 'Next page' ) }
-								size="compact"
-								onClick={ () => setPage( page + 1 ) }
-								disabled={ page === totalPages }
-								accessibleWhenDisabled
-								icon={ isRTL() ? chevronLeft : chevronRight }
-								tooltipPosition="top"
-							/>
+							<HStack expanded={ false } spacing={ 1 }>
+								<Button
+									onClick={ () => setPage( page - 1 ) }
+									disabled={ page === 1 }
+									accessibleWhenDisabled
+									label={ __( 'Previous page' ) }
+									icon={ isRTL() ? next : previous }
+									showTooltip
+									size="compact"
+									tooltipPosition="top"
+								/>
+								<Button
+									onClick={ () => setPage( page + 1 ) }
+									disabled={ page === totalPages }
+									accessibleWhenDisabled
+									label={ __( 'Next page' ) }
+									icon={ isRTL() ? previous : next }
+									showTooltip
+									size="compact"
+									tooltipPosition="top"
+								/>
+							</HStack>
 						</HStack>
 					) }
 				</>

package/src/components/global-styles/font-library-modal/style.scss

@@ -64,9 +64,15 @@ $footer-height: 70px;
 
 .font-library-modal__page-selection {
 	font-size: 11px;
-	text-transform: uppercase;
 	font-weight: 500;
-	color: $gray-900;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
 }
 
 // TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
@@ -124,7 +130,7 @@ $footer-height: 70px;
 		white-space: nowrap;
 		flex-shrink: 0;
 		transition: opacity 0.3s ease-in-out;
-		@include reduce-motion("transition");
+		@include reduce-motion( "transition" );
 	}
 }
 
@@ -147,7 +153,6 @@ $footer-height: 70px;
 	}
 }
 
-
 .font-library-modal__upload-area {
 	align-items: center;
 	display: flex;
@@ -200,7 +205,9 @@ button.font-library-modal__upload-area {
 }
 
 .font-library-modal__select-all {
-	padding: $grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 + $border-width;
+	padding:
+		$grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 +
+		$border-width;
 
 	.components-checkbox-control__label {
 		padding-left: $grid-unit-20;

package/src/components/global-styles/style.scss

@@ -226,6 +226,10 @@
 	// The &#{&} is a workaround for the specificity of the Card component.
 	&#{&},
 	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
+		box-shadow: none;
 		border-radius: $radius-small;
+		.block-editor-iframe__container {
+			border: 1px solid $gray-200;
+		}
 	}
 }

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

@@ -28,8 +28,8 @@ const { interfaceStore } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
-	const { params } = useLocation();
-	const { canvas = 'view', path } = params;
+	const { query } = useLocation();
+	const { canvas = 'view', name } = query;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
@@ -133,14 +133,14 @@ export default function GlobalStylesSidebar() {
 	const previousActiveAreaRef = useRef( null );
 
 	useEffect( () => {
-		if ( path?.startsWith( '/wp_global_styles' ) && canvas === 'edit' ) {
+		if ( name === 'styles' && canvas === 'edit' ) {
 			previousActiveAreaRef.current =
 				getActiveComplementaryArea( 'core' );
 			enableComplementaryArea( 'core', 'edit-site/global-styles' );
 		} else if ( previousActiveAreaRef.current ) {
 			enableComplementaryArea( 'core', previousActiveAreaRef.current );
 		}
-	}, [ path, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
+	}, [ name, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
 
 	return (
 		<DefaultSidebar

package/src/components/layout/index.js

@@ -10,6 +10,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
+	SlotFillProvider,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -17,16 +18,20 @@ import {
 	useResizeObserver,
 	usePrevious,
 } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
+	UnsavedChangesWarning,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { PluginArea } from '@wordpress/plugins';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -44,14 +49,14 @@ import SavePanel from '../save-panel';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-const { NavigableRegion } = unlock( editorPrivateApis );
+const { NavigableRegion, GlobalStylesProvider } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout( { route } ) {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+function Layout() {
+	const { query, name: routeKey, areas, widths } = useLocation();
+	const { canvas = 'view' } = query;
 	useCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
@@ -61,7 +66,6 @@ export default function Layout( { route } ) {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { name: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
 		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
@@ -78,6 +82,7 @@ export default function Layout( { route } ) {
 
 	return (
 		<>
+			<UnsavedChangesWarning />
 			<CommandMenu />
 			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
@@ -231,3 +236,28 @@ export default function Layout( { route } ) {
 		</>
 	);
 }
+
+export default function LayoutWithGlobalStylesProvider( props ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
+	return (
+		<SlotFillProvider>
+			<GlobalStylesProvider>
+				{ /** This needs to be within the SlotFillProvider */ }
+				<PluginArea onError={ onPluginAreaError } />
+				<Layout { ...props } />
+			</GlobalStylesProvider>
+		</SlotFillProvider>
+	);
+}

package/src/components/page-patterns/delete-category-menu-item.js

@@ -59,10 +59,9 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 			);
 
 			onClose?.();
-			history.push( {
-				postType: PATTERN_TYPES.user,
-				categoryId: PATTERN_DEFAULT_CATEGORY,
-			} );
+			history.navigate(
+				`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'

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

@@ -21,6 +21,7 @@ import {
 import { Icon, lockSmall } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -32,10 +33,10 @@ import {
 	OPERATOR_IS,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import { useLink } from '../routes/link';
 import { useAddedBy } from '../page-templates/hooks';
 import { defaultGetTitle } from './search-items';
 
+const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
@@ -59,11 +60,11 @@ function PreviewField( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: isUserPattern || isTemplatePart ? item.id : item.name,
-		canvas: 'edit',
-	} );
+	const { onClick } = useLink(
+		`/${ item.type }/${
+			isUserPattern || isTemplatePart ? item.id : item.name
+		}?canvas=edit`
+	);
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??
@@ -114,11 +115,11 @@ export const previewField = {
 function TitleField( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: isUserPattern || isTemplatePart ? item.id : item.name,
-		canvas: 'edit',
-	} );
+	const { onClick } = useLink(
+		`/${ item.type }/${
+			isUserPattern || isTemplatePart ? item.id : item.name
+		}?canvas=edit`
+	);
 	const title = decodeEntities( defaultGetTitle( item ) );
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>

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

@@ -72,17 +72,16 @@ const DEFAULT_VIEW = {
 
 export default function DataviewsPatterns() {
 	const {
-		params: { postType, categoryId: categoryIdFromURL },
+		query: { postType = 'wp_block', categoryId: categoryIdFromURL },
 	} = useLocation();
-	const type = postType || PATTERN_TYPES.user;
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const previousCategoryId = usePrevious( categoryId );
-	const previousPostType = usePrevious( type );
+	const previousPostType = usePrevious( postType );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
-	const { patterns, isResolving } = usePatterns( type, categoryId, {
+	const { patterns, isResolving } = usePatterns( postType, categoryId, {
 		search: view.search,
 		syncStatus: viewSyncStatus,
 	} );
@@ -108,9 +107,9 @@ export default function DataviewsPatterns() {
 	const fields = useMemo( () => {
 		const _fields = [ previewField, titleField ];
 
-		if ( type === PATTERN_TYPES.user ) {
+		if ( postType === PATTERN_TYPES.user ) {
 			_fields.push( patternStatusField );
-		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
+		} else if ( postType === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
 				...templatePartAuthorField,
 				elements: authors,
@@ -118,24 +117,27 @@ export default function DataviewsPatterns() {
 		}
 
 		return _fields;
-	}, [ type, authors ] );
+	}, [ postType, authors ] );
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
-		if ( previousCategoryId !== categoryId || previousPostType !== type ) {
+		if (
+			previousCategoryId !== categoryId ||
+			previousPostType !== postType
+		) {
 			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
 		}
-	}, [ categoryId, previousCategoryId, previousPostType, type ] );
+	}, [ categoryId, previousCategoryId, previousPostType, postType ] );
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.
 		// However, the author filter in template parts is done client-side.
 		const viewWithoutFilters = { ...view };
 		delete viewWithoutFilters.search;
-		if ( type !== TEMPLATE_PART_POST_TYPE ) {
+		if ( postType !== TEMPLATE_PART_POST_TYPE ) {
 			viewWithoutFilters.filters = [];
 		}
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
-	}, [ patterns, view, fields, type ] );
+	}, [ patterns, view, fields, postType ] );
 
 	const dataWithPermissions = useAugmentPatternsWithPermissions( data );
 
@@ -150,11 +152,11 @@ export default function DataviewsPatterns() {
 	const editAction = useEditPostAction();
 
 	const actions = useMemo( () => {
-		if ( type === TEMPLATE_PART_POST_TYPE ) {
+		if ( postType === TEMPLATE_PART_POST_TYPE ) {
 			return [ editAction, ...templatePartActions ].filter( Boolean );
 		}
 		return [ editAction, ...patternActions ].filter( Boolean );
-	}, [ editAction, type, templatePartActions, patternActions ] );
+	}, [ editAction, postType, templatePartActions, patternActions ] );
 	const id = useId();
 	const settings = usePatternSettings();
 	// Wrap everything in a block editor provider.
@@ -169,7 +171,7 @@ export default function DataviewsPatterns() {
 			>
 				<PatternsHeader
 					categoryId={ categoryId }
-					type={ type }
+					type={ postType }
 					titleId={ `${ id }-title` }
 					descriptionId={ `${ id }-description` }
 				/>

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

@@ -16,16 +16,16 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { default as Link, useLink } from '../routes/link';
 import { useAddedBy } from './hooks';
-
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
+const { useLink, Link } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewField( { item } ) {
@@ -34,11 +34,7 @@ function PreviewField( { item } ) {
 	const blocks = useMemo( () => {
 		return parse( item.content.raw );
 	}, [ item.content.raw ] );
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		canvas: 'edit',
-	} );
+	const { onClick } = useLink( `/${ item.type }/${ item.id }?canvas=edit` );
 
 	const isEmpty = ! blocks?.length;
 	// Wrap everything in a block editor provider to ensure 'styles' that are needed
@@ -80,15 +76,8 @@ export const previewField = {
 };
 
 function TitleField( { item } ) {
-	const linkProps = {
-		params: {
-			postId: item.id,
-			postType: item.type,
-			canvas: 'edit',
-		},
-	};
 	return (
-		<Link { ...linkProps }>
+		<Link to={ `/${ item.type }/${ item.id }?canvas=edit` }>
 			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
 		</Link>
 	);