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

package/src/components/add-new-pattern/index.js

@@ -69,23 +69,16 @@ export default function AddNewPattern() {
 
 	function handleCreatePattern( { pattern } ) {
 		setShowPatternModal( false );
-
-		history.push( {
-			postId: pattern.id,
-			postType: PATTERN_TYPES.user,
-			canvas: 'edit',
-		} );
+		history.navigate(
+			`/${ PATTERN_TYPES.user }/${ pattern.id }?canvas=edit`
+		);
 	}
 
 	function handleCreateTemplatePart( templatePart ) {
 		setShowTemplatePartModal( false );
-
-		// Navigate to the created template part editor.
-		history.push( {
-			postId: templatePart.id,
-			postType: TEMPLATE_PART_POST_TYPE,
-			canvas: 'edit',
-		} );
+		history.navigate(
+			`/${ TEMPLATE_PART_POST_TYPE }/${ templatePart.id }?canvas=edit`
+		);
 	}
 
 	function handleError() {
@@ -203,10 +196,9 @@ export default function AddNewPattern() {
 							! currentCategoryId &&
 							categoryId !== 'my-patterns'
 						) {
-							history.push( {
-								postType: PATTERN_TYPES.user,
-								categoryId: PATTERN_DEFAULT_CATEGORY,
-							} );
+							history.navigate(
+								`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`
+							);
 						}
 
 						createSuccessNotice(

package/src/components/add-new-post/index.js

@@ -45,7 +45,7 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 				{
 					status: 'draft',
 					title,
-					slug: title || __( 'No title' ),
+					slug: title ?? undefined,
 					content:
 						!! postTypeObject.template &&
 						postTypeObject.template.length

package/src/components/add-new-template/index.js

@@ -203,11 +203,9 @@ function NewTemplateModal( { onClose } ) {
 			);
 
 			// Navigate to the created template editor.
-			history.push( {
-				postId: newTemplate.id,
-				postType: TEMPLATE_POST_TYPE,
-				canvas: 'edit',
-			} );
+			history.navigate(
+				`/${ TEMPLATE_POST_TYPE }/${ newTemplate.id }?canvas=edit`
+			);
 
 			createSuccessNotice(
 				sprintf(

package/src/components/app/index.js

@@ -1,63 +1,62 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
-import {
-	UnsavedChangesWarning,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { PluginArea } from '@wordpress/plugins';
+import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
 
 const { RouterProvider } = unlock( routerPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function AppLayout() {
 	useCommonCommands();
 	useSetCommandContext();
-	useRegisterSiteEditorRoutes();
-	const route = useActiveRoute();
 
-	return <Layout route={ route } />;
+	return <Layout />;
 }
 
 export default function App() {
-	const { createErrorNotice } = useDispatch( noticesStore );
+	useRegisterSiteEditorRoutes();
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
+	const beforeNavigate = useCallback( ( { path, query } ) => {
+		if ( ! isPreviewingTheme() ) {
+			return { path, query };
+		}
 
-	function onPluginAreaError( name ) {
-		createErrorNotice(
-			sprintf(
-				/* translators: %s: plugin name */
-				__(
-					'The "%s" plugin has encountered an error and cannot be rendered.'
-				),
-				name
-			)
-		);
-	}
+		return {
+			path,
+			query: {
+				...query,
+				wp_theme_preview:
+					'wp_theme_preview' in query
+						? query.wp_theme_preview
+						: currentlyPreviewingTheme(),
+			},
+		};
+	}, [] );
 
 	return (
-		<SlotFillProvider>
-			<GlobalStylesProvider>
-				<UnsavedChangesWarning />
-				<RouterProvider>
-					<AppLayout />
-					<PluginArea onError={ onPluginAreaError } />
-				</RouterProvider>
-			</GlobalStylesProvider>
-		</SlotFillProvider>
+		<RouterProvider
+			routes={ routes }
+			pathArg="p"
+			beforeNavigate={ beforeNavigate }
+		>
+			<AppLayout />
+		</RouterProvider>
 	);
 }

package/src/components/block-editor/use-editor-iframe-props.js

@@ -12,6 +12,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -21,9 +22,9 @@ import { unlock } from '../../lock-unlock';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useEditorIframeProps() {
-	const { params } = useLocation();
+	const { query, path } = useLocation();
 	const history = useHistory();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view' } = query;
 	const currentPostIsTrashed = useSelect( ( select ) => {
 		return (
 			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -55,13 +56,13 @@ export default function useEditorIframeProps() {
 				! currentPostIsTrashed
 			) {
 				event.preventDefault();
-				history.push( { ...params, canvas: 'edit' }, undefined, {
+				history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
 					transition: 'canvas-mode-edit-transition',
 				} );
 			}
 		},
 		onClick: () =>
-			history.push( { ...params, canvas: 'edit' }, undefined, {
+			history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
 				transition: 'canvas-mode-edit-transition',
 			} ),
 		onClickCapture: ( event ) => {

package/src/components/block-editor/use-navigate-to-entity-record.js

@@ -16,7 +16,9 @@ export default function useNavigateToEntityRecord() {
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
-			history.push( { ...params, focusMode: true, canvas: 'edit' } );
+			history.navigate(
+				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
+			);
 		},
 		[ history ]
 	);

package/src/components/block-editor/use-site-editor-settings.js

@@ -22,11 +22,11 @@ function useNavigateToPreviousEntityRecord() {
 	const history = useHistory();
 	const goBack = useMemo( () => {
 		const isFocusMode =
-			location.params.focusMode ||
-			( location.params.postId &&
-				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
+			location.query.focusMode ||
+			( location?.params?.postId &&
+				FOCUSABLE_ENTITIES.includes( location?.params?.postType ) );
 		const didComeFromEditorCanvas =
-			previousLocation?.params.canvas === 'edit';
+			previousLocation?.query.canvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;
 		// `previousLocation` changes when the component updates for any reason, not
@@ -37,8 +37,8 @@ function useNavigateToPreviousEntityRecord() {
 }
 
 export function useSpecificEditorSettings() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
 	const { settings } = useSelect( ( select ) => {
 		const { getSettings } = select( editSiteStore );

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

@@ -31,11 +31,7 @@ export const useEditPostAction = () => {
 			},
 			callback( items ) {
 				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
+				history.navigate( `/${ post.type }/${ post.id }?canvas=edit` );
 			},
 		} ),
 		[ history ]

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/preview-colors.js

@@ -10,7 +10,7 @@ import {
  * Internal dependencies
  */
 import PresetColors from './preset-colors';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const firstFrameVariants = {
 	start: {
@@ -25,7 +25,7 @@ const firstFrameVariants = {
 
 const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ label }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -51,7 +51,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					</HStack>
 				</motion.div>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

package/src/components/global-styles/preview-styles.js

@@ -15,7 +15,7 @@ import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
 import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
@@ -67,7 +67,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 	const { paletteColors } = useStylesPreviewColors();
 
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ label }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -178,7 +178,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 					</VStack>
 				</motion.div>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

package/src/components/global-styles/preview-typography.js

@@ -7,11 +7,11 @@ import { __experimentalHStack as HStack } from '@wordpress/components';
  * Internal dependencies
  */
 import TypographyExample from './typography-example';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ variation.title }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -32,7 +32,7 @@ const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
 					/>
 				</HStack>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };