@wordpress/edit-site 6.12.1-next.082ed6819.0 → 6.13.1-next.cd6172eb0.0

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

@@ -7,6 +7,7 @@ import { privateApis as corePrivateApis } from '@wordpress/core-data';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -93,8 +94,8 @@ const DEFAULT_VIEW = {
 };
 
 export default function PageTemplates() {
-	const { params } = useLocation();
-	const { activeView = 'all', layout, postId } = params;
+	const { path, query } = useLocation();
+	const { activeView = 'all', layout, postId } = query;
 	const [ selection, setSelection ] = useState( [ postId ] );
 
 	const defaultView = useMemo( () => {
@@ -118,8 +119,10 @@ export default function PageTemplates() {
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
 	useEffect( () => {
+		const usedType = layout ?? DEFAULT_VIEW.type;
 		setView( ( currentView ) => ( {
 			...currentView,
+			type: usedType,
 			filters:
 				activeView !== 'all'
 					? [
@@ -131,7 +134,7 @@ export default function PageTemplates() {
 					  ]
 					: [],
 		} ) );
-	}, [ activeView ] );
+	}, [ activeView, layout ] );
 
 	const { records, isResolving: isLoadingData } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
@@ -142,13 +145,14 @@ export default function PageTemplates() {
 		( items ) => {
 			setSelection( items );
 			if ( view?.type === LAYOUT_LIST ) {
-				history.push( {
-					...params,
-					postId: items.length === 1 ? items[ 0 ] : undefined,
-				} );
+				history.navigate(
+					addQueryArgs( path, {
+						postId: items.length === 1 ? items[ 0 ] : undefined,
+					} )
+				);
 			}
 		},
-		[ history, params, view?.type ]
+		[ history, path, view?.type ]
 	);
 
 	const authors = useMemo( () => {
@@ -195,15 +199,16 @@ export default function PageTemplates() {
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
-				history.push( {
-					...params,
-					layout: newView.type,
-				} );
+				history.navigate(
+					addQueryArgs( path, {
+						layout: newView.type,
+					} )
+				);
 			}
 
 			setView( newView );
 		},
-		[ view.type, setView, history, params ]
+		[ view.type, setView, history, path ]
 	);
 
 	return (

package/src/components/post-edit/index.js

@@ -19,6 +19,8 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
 
@@ -49,7 +51,7 @@ function PostEditForm( { postType, postId } ) {
 	);
 	const [ multiEdits, setMultiEdits ] = useState( {} );
 	const { editEntityRecord } = useDispatch( coreDataStore );
-	const { fields: _fields } = usePostFields();
+	const { fields: _fields } = usePostFields( { postType } );
 	const fields = useMemo(
 		() =>
 			_fields?.map( ( field ) => {
@@ -85,6 +87,12 @@ function PostEditForm( { postType, postId } ) {
 				'slug',
 				'parent',
 				'comment_status',
+				{
+					label: __( 'Template' ),
+					labelPosition: 'side',
+					id: 'template',
+					layout: 'regular',
+				},
 			].filter(
 				( field ) =>
 					ids.length === 1 ||
@@ -123,6 +131,32 @@ function PostEditForm( { postType, postId } ) {
 		setMultiEdits( {} );
 	}, [ ids ] );
 
+	const { ExperimentalBlockEditorProvider } = unlock(
+		blockEditorPrivateApis
+	);
+	const settings = usePatternSettings();
+
+	/**
+	 * The template field depends on the block editor settings.
+	 * This is a workaround to ensure that the block editor settings are available.
+	 * For more information, see: https://github.com/WordPress/gutenberg/issues/67521
+	 */
+	const fieldsWithDependency = useMemo( () => {
+		return fields.map( ( field ) => {
+			if ( field.id === 'template' ) {
+				return {
+					...field,
+					Edit: ( data ) => (
+						<ExperimentalBlockEditorProvider settings={ settings }>
+							<field.Edit { ...data } />
+						</ExperimentalBlockEditorProvider>
+					),
+				};
+			}
+			return field;
+		} );
+	}, [ fields, settings ] );
+
 	return (
 		<VStack spacing={ 4 }>
 			{ ids.length === 1 && (
@@ -130,7 +164,7 @@ function PostEditForm( { postType, postId } ) {
 			) }
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
-				fields={ fields }
+				fields={ fieldsWithDependency }
 				form={ form }
 				onChange={ onChange }
 			/>

package/src/components/post-list/index.js

@@ -13,6 +13,8 @@ import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { drawerRight } from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -31,7 +33,6 @@ import {
 import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
-import { usePrevious } from '@wordpress/compose';
 
 const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -70,7 +71,8 @@ const getCustomView = ( editedEntityRecord ) => {
  */
 function useView( postType ) {
 	const {
-		params: { activeView = 'all', isCustom = 'false', layout },
+		path,
+		query: { activeView = 'all', isCustom = 'false', layout },
 	} = useLocation();
 	const history = useHistory();
 
@@ -112,16 +114,15 @@ function useView( postType ) {
 
 	const setViewWithUrlUpdate = useCallback(
 		( newView ) => {
-			const { params } = history.getLocationWithParams();
-
-			if ( newView.type === LAYOUT_LIST && ! params?.layout ) {
+			if ( newView.type === LAYOUT_LIST && ! layout ) {
 				// Skip updating the layout URL param if
 				// it is not present and the newView.type is LAYOUT_LIST.
-			} else if ( newView.type !== params?.layout ) {
-				history.push( {
-					...params,
-					layout: newView.type,
-				} );
+			} else if ( newView.type !== layout ) {
+				history.navigate(
+					addQueryArgs( path, {
+						layout: newView.type,
+					} )
+				);
 			}
 
 			setView( newView );
@@ -137,7 +138,14 @@ function useView( postType ) {
 				);
 			}
 		},
-		[ history, isCustom, editEntityRecord, editedEntityRecord?.id ]
+		[
+			history,
+			isCustom,
+			editEntityRecord,
+			editedEntityRecord?.id,
+			layout,
+			path,
+		]
 	);
 
 	// When layout URL param changes, update the view type
@@ -186,20 +194,20 @@ export default function PostList( { postType } ) {
 		quickEdit = false,
 		isCustom,
 		activeView = 'all',
-	} = location.params;
+	} = location.query;
 	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
 	const onChangeSelection = useCallback(
 		( items ) => {
 			setSelection( items );
-			const { params } = history.getLocationWithParams();
-			if ( ( params.isCustom ?? 'false' ) === 'false' ) {
-				history.push( {
-					...params,
-					postId: items.join( ',' ),
-				} );
+			if ( ( location.query.isCustom ?? 'false' ) === 'false' ) {
+				history.navigate(
+					addQueryArgs( location.path, {
+						postId: items.join( ',' ),
+					} )
+				);
 			}
 		},
-		[ history ]
+		[ location.path, location.query.isCustom, history ]
 	);
 
 	const getActiveViewFilters = ( views, match ) => {
@@ -207,7 +215,9 @@ export default function PostList( { postType } ) {
 		return found?.filters ?? [];
 	};
 
-	const { isLoading: isLoadingFields, fields: _fields } = usePostFields();
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields( {
+		postType,
+	} );
 	const fields = useMemo( () => {
 		const activeViewFilters = getActiveViewFilters(
 			defaultViews,
@@ -311,12 +321,13 @@ export default function PostList( { postType } ) {
 
 	useEffect( () => {
 		if ( postIdWasDeleted ) {
-			history.push( {
-				...history.getLocationWithParams().params,
-				postId: undefined,
-			} );
+			history.navigate(
+				addQueryArgs( location.path, {
+					postId: undefined,
+				} )
+			);
 		}
-	}, [ postIdWasDeleted, history ] );
+	}, [ history, postIdWasDeleted, location.path ] );
 
 	const paginationInfo = useMemo(
 		() => ( {
@@ -355,11 +366,7 @@ export default function PostList( { postType } ) {
 	const openModal = () => setShowAddPostModal( true );
 	const closeModal = () => setShowAddPostModal( false );
 	const handleNewPage = ( { type, id } ) => {
-		history.push( {
-			postId: id,
-			postType: type,
-			canvas: 'edit',
-		} );
+		history.navigate( `/${ type }/${ id }?canvas=edit` );
 		closeModal();
 	};
 
@@ -401,11 +408,7 @@ export default function PostList( { postType } ) {
 				onChangeSelection={ onChangeSelection }
 				isItemClickable={ ( item ) => item.status !== 'trash' }
 				onClickItem={ ( { id } ) => {
-					history.push( {
-						postId: id,
-						postType,
-						canvas: 'edit',
-					} );
+					history.navigate( `/${ postType }/${ id }?canvas=edit` );
 				} }
 				getItemId={ getItemId }
 				defaultLayouts={ defaultLayouts }
@@ -419,10 +422,11 @@ export default function PostList( { postType } ) {
 							icon={ drawerRight }
 							label={ __( 'Details' ) }
 							onClick={ () => {
-								history.push( {
-									...location.params,
-									quickEdit: quickEdit ? undefined : true,
-								} );
+								history.navigate(
+									addQueryArgs( location.path, {
+										quickEdit: quickEdit ? undefined : true,
+									} )
+								);
 							} }
 						/>
 					)

package/src/components/posts-app/index.js

@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	UnsavedChangesWarning,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -13,24 +10,18 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Layout from '../layout';
 import { useRegisterPostsAppRoutes } from '../posts-app-routes';
 import { unlock } from '../../lock-unlock';
-import useActiveRoute from '../layout/router';
+import { store as editSiteStore } from '../../store';
 
 const { RouterProvider } = unlock( routerPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
-
-function PostsLayout() {
-	useRegisterPostsAppRoutes();
-	const route = useActiveRoute();
-	return <Layout route={ route } />;
-}
 
 export default function PostsApp() {
+	useRegisterPostsAppRoutes();
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
 	return (
-		<GlobalStylesProvider>
-			<UnsavedChangesWarning />
-			<RouterProvider>
-				<PostsLayout />
-			</RouterProvider>
-		</GlobalStylesProvider>
+		<RouterProvider routes={ routes } pathArg="p">
+			<Layout />
+		</RouterProvider>
 	);
 }

package/src/components/posts-app-routes/index.js

@@ -9,21 +9,10 @@ import { useEffect } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import { store as siteEditorStore } from '../../store';
-import { homeRoute } from './home';
-import { postsListViewQuickEditRoute } from './posts-list-view-quick-edit';
-import { postsListViewRoute } from './posts-list-view';
-import { postsViewQuickEditRoute } from './posts-view-quick-edit';
-import { postsViewRoute } from './posts-view';
-import { postsEditRoute } from './posts-edit';
+import { postsRoute } from './posts';
+import { postItemRoute } from './post-item';
 
-const routes = [
-	postsListViewQuickEditRoute,
-	postsListViewRoute,
-	postsViewQuickEditRoute,
-	postsViewRoute,
-	postsEditRoute,
-	homeRoute,
-];
+const routes = [ postItemRoute, postsRoute ];
 
 export function useRegisterPostsAppRoutes() {
 	const registry = useRegistry();

package/src/components/posts-app-routes/{posts-edit.js → post-item.js}

@@ -6,25 +6,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PostList from '../post-list';
+import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import Editor from '../editor';
 
-export const postsEditRoute = {
-	name: 'posts-edit',
-	match: ( params ) => {
-		return params.postType === 'post' && params.canvas === 'edit';
-	},
+export const postItemRoute = {
+	name: 'post-item',
+	path: '/post/:postId',
 	areas: {
 		sidebar: (
 			<SidebarNavigationScreen
 				title={ __( 'Posts' ) }
 				isRoot
-				content={ <DataViewsSidebarContent /> }
+				content={ <DataViewsSidebarContent postType="post" /> }
 			/>
 		),
-		content: <PostList postType="post" />,
 		mobile: <Editor isPostsList />,
 		preview: <Editor isPostsList />,
 	},

package/src/components/posts-app-routes/posts.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePostsView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? <Editor /> : <PostList postType="post" />;
+}
+
+export const postsRoute = {
+	name: 'posts',
+	path: '/',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent postType="post" /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		preview( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? <Editor isPostsList /> : undefined;
+		},
+		mobile: <MobilePostsView />,
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+			return hasQuickEdit ? (
+				<PostEdit postType="post" postId={ query.postId } />
+			) : undefined;
+		},
+	},
+	widths: {
+		content( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? 380 : undefined;
+		},
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+			return hasQuickEdit ? 380 : undefined;
+		},
+	},
+};

package/src/components/resizable-frame/index.js

@@ -20,6 +20,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { addQueryArgs } from '@wordpress/url';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -88,8 +89,8 @@ function ResizableFrame( {
 	innerContentStyle,
 } ) {
 	const history = useHistory();
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { path, query } = useLocation();
+	const { canvas = 'view' } = query;
 	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
@@ -158,12 +159,10 @@ function ResizableFrame( {
 			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
-			history.push(
-				{
-					...params,
+			history.navigate(
+				addQueryArgs( path, {
 					canvas: 'edit',
-				},
-				undefined,
+				} ),
 				{
 					transition: 'canvas-mode-edit-transition',
 				}

package/src/components/save-panel/index.js

@@ -31,7 +31,7 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
-const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
 	let activateSaveLabel;
 	if ( isDirtyProps.isDirty ) {
@@ -75,14 +75,20 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 				onSave,
 				saveEnabled: true,
 				saveLabel: activateSaveLabel,
+				renderDialog,
 			} }
 		/>
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog } ) => {
 	if ( isPreviewingTheme() ) {
-		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
+		return (
+			<EntitiesSavedStatesForPreview
+				onClose={ onClose }
+				renderDialog={ renderDialog }
+			/>
+		);
 	}
 	return (
 		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
@@ -90,8 +96,8 @@ const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 };
 
 export default function SavePanel() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
 	const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => {
 		const {
 			__experimentalGetDirtyEntityRecords,

package/src/components/sidebar-dataviews/add-new-view.js

@@ -14,6 +14,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
 import { plus } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -22,10 +23,11 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function AddNewItemModalContent( { type, setIsAdding } ) {
 	const history = useHistory();
+	const { path } = useLocation();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
@@ -64,14 +66,12 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						content: JSON.stringify( defaultViews[ 0 ].view ),
 					}
 				);
-				const {
-					params: { postType },
-				} = history.getLocationWithParams();
-				history.push( {
-					postType,
-					activeView: savedRecord.id,
-					isCustom: 'true',
-				} );
+				history.navigate(
+					addQueryArgs( path, {
+						activeView: savedRecord.id,
+						isCustom: 'true',
+					} )
+				);
 				setIsSaving( false );
 				setIsAdding( false );
 			} }

package/src/components/sidebar-dataviews/dataview-item.js

@@ -9,11 +9,11 @@ import clsx from 'clsx';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { VIEW_LAYOUTS } from '@wordpress/dataviews';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
@@ -28,9 +28,7 @@ export default function DataViewItem( {
 	isCustom,
 	suffix,
 } ) {
-	const {
-		params: { postType },
-	} = useLocation();
+	const { path } = useLocation();
 
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
@@ -39,12 +37,11 @@ export default function DataViewItem( {
 	if ( activeView === 'all' ) {
 		activeView = undefined;
 	}
-	const linkInfo = useLink( {
-		postType,
+	const query = {
 		layout: type,
 		activeView,
 		isCustom: isCustom ? 'true' : undefined,
-	} );
+	};
 	return (
 		<HStack
 			justify="flex-start"
@@ -54,7 +51,7 @@ export default function DataViewItem( {
 		>
 			<SidebarNavigationItem
 				icon={ iconToUse }
-				{ ...linkInfo }
+				to={ addQueryArgs( path, query ) }
 				aria-current={ isActive ? 'true' : undefined }
 			>
 				{ title }

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

@@ -14,9 +14,9 @@ import CustomDataViewsList from './custom-dataviews-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function DataViewsSidebarContent() {
+export default function DataViewsSidebarContent( { postType } ) {
 	const {
-		params: { postType, activeView = 'all', isCustom = 'false' },
+		query: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
 	const defaultViews = useDefaultViews( { postType } );
 	if ( ! postType ) {

package/src/components/sidebar-dataviews/style.scss

@@ -19,11 +19,11 @@
 	&:focus,
 	&[aria-current] {
 		color: $gray-200;
-		background: $gray-800;
 	}
 
 	&.is-selected {
-		background: var(--wp-admin-theme-color);
+		background: $gray-800;
+		font-weight: $font-weight-medium;
 		color: $white;
 	}
 }