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

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 } = 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
@@ -79,30 +75,6 @@ export const previewField = {
 	enableSorting: false,
 };
 
-function TitleField( { item } ) {
-	const linkProps = {
-		params: {
-			postId: item.id,
-			postType: item.type,
-			canvas: 'edit',
-		},
-	};
-	return (
-		<Link { ...linkProps }>
-			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-		</Link>
-	);
-}
-
-export const titleField = {
-	label: __( 'Template' ),
-	id: 'title',
-	getValue: ( { item } ) => item.title?.rendered,
-	render: TitleField,
-	enableHiding: false,
-	enableGlobalSearch: true,
-};
-
 export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',

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

@@ -7,6 +7,8 @@ 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 { templateTitleField } from '@wordpress/fields';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -22,12 +24,7 @@ import {
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
-import {
-	authorField,
-	descriptionField,
-	previewField,
-	titleField,
-} from './fields';
+import { authorField, descriptionField, previewField } from './fields';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -37,25 +34,9 @@ const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		fields: [ 'template', 'author' ],
+		showMedia: false,
 		layout: {
-			primaryField: 'title',
-			combinedFields: [
-				{
-					id: 'template',
-					label: __( 'Template' ),
-					children: [ 'title', 'description' ],
-					direction: 'vertical',
-				},
-			],
 			styles: {
-				template: {
-					maxWidth: 400,
-					minWidth: 320,
-				},
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -63,18 +44,10 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
-			columnFields: [ 'description' ],
-		},
+		showMedia: true,
 	},
 	[ LAYOUT_LIST ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			primaryField: 'title',
-		},
+		showMedia: false,
 	},
 };
 
@@ -87,14 +60,17 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	fields: defaultLayouts[ LAYOUT_GRID ].fields,
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
+	titleField: 'title',
+	descriptionField: 'description',
+	mediaField: 'preview',
+	fields: [ 'author' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 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( () => {
@@ -102,8 +78,6 @@ export default function PageTemplates() {
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			layout: defaultLayouts[ usedType ].layout,
-			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -114,12 +88,15 @@ export default function PageTemplates() {
 							},
 					  ]
 					: [],
+			...defaultLayouts[ usedType ],
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
 	useEffect( () => {
+		const usedType = layout ?? DEFAULT_VIEW.type;
 		setView( ( currentView ) => ( {
 			...currentView,
+			type: usedType,
 			filters:
 				activeView !== 'all'
 					? [
@@ -131,7 +108,7 @@ export default function PageTemplates() {
 					  ]
 					: [],
 		} ) );
-	}, [ activeView ] );
+	}, [ activeView, layout ] );
 
 	const { records, isResolving: isLoadingData } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
@@ -142,13 +119,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( () => {
@@ -168,7 +146,7 @@ export default function PageTemplates() {
 	const fields = useMemo(
 		() => [
 			previewField,
-			titleField,
+			templateTitleField,
 			descriptionField,
 			{
 				...authorField,
@@ -195,15 +173,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 (
@@ -222,6 +201,10 @@ export default function PageTemplates() {
 				view={ view }
 				onChangeView={ onChangeView }
 				onChangeSelection={ onChangeSelection }
+				isItemClickable={ () => true }
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/wp_template/${ id }?canvas=edit` );
+				} }
 				selection={ selection }
 				defaultLayouts={ defaultLayouts }
 			/>

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

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Icon,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import {
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { sprintf, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
+
+export default function PostEditHeader( { postType, postId } ) {
+	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
+	const { icon, labels } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getPostType } = select( coreStore );
+			const { getPostIcon } = unlock( select( editorStore ) );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				ids[ 0 ]
+			);
+
+			return {
+				icon: getPostIcon( postType, {
+					area: _record?.area,
+				} ),
+				labels: getPostType( postType )?.labels,
+			};
+		},
+		[ ids, postType ]
+	);
+
+	if ( ids.length === 1 ) {
+		return (
+			<PostCardPanel
+				postType={ postType }
+				postId={ parseInt( ids[ 0 ], 10 ) }
+			/>
+		);
+	}
+
+	return (
+		<VStack spacing={ 1 } className="edit-site-post-edit-header">
+			<HStack spacing={ 2 } align="center" justify="normal">
+				<Icon
+					className="edit-site-post-edit-header__icon"
+					icon={ icon }
+				/>
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="edit-site-post-edit-header__title"
+					as="h2"
+				>
+					{ labels?.name &&
+						sprintf(
+							// translators: %i number of selected items %s: Name of the plural post type e.g: "Posts".
+							__( '%i %s' ),
+							ids.length,
+							labels?.name
+						) }
+				</Text>
+			</HStack>
+			<Text className="edit-site-post-edit-header__description">
+				{ sprintf(
+					// translators: %s: Name of the plural post type e.g: "Posts".
+					__( 'Changes will be applied to all selected %s.' ),
+					labels?.name.toLowerCase()
+				) }
+			</Text>
+		</VStack>
+	);
+}

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

@@ -18,9 +18,12 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import Page from '../page';
+import PostEditHeader from '../post-edit/header';
 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 );
+const { usePostFields } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [
 	'title',
@@ -49,7 +52,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 ) => {
@@ -74,7 +77,6 @@ function PostEditForm( { postType, postId } ) {
 					id: 'featured_media',
 					layout: 'regular',
 				},
-				'title',
 				{
 					id: 'status',
 					label: __( 'Status & Visibility' ),
@@ -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,14 +131,38 @@ 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 && (
-				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
-			) }
+			<PostEditHeader postType={ postType } postId={ postId } />
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
-				fields={ fields }
+				fields={ fieldsWithDependency }
 				form={ form }
 				onChange={ onChange }
 			/>

package/src/components/post-edit/style.scss

@@ -14,3 +14,13 @@
 		padding-top: $grid-unit-20;
 	}
 }
+
+.edit-site-post-edit-header {
+	.edit-site-post-edit-header__description {
+		color: $gray-700;
+	}
+
+	.edit-site-post-edit-header__title {
+		@include heading-medium();
+	}
+}

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 );
@@ -54,7 +55,7 @@ const getCustomView = ( editedEntityRecord ) => {
 
 	return {
 		...content,
-		layout: defaultLayouts[ content.type ]?.layout,
+		...defaultLayouts[ content.type ],
 	};
 };
 
@@ -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/post-list/style.scss

@@ -65,42 +65,6 @@
 	}
 }
 
-.edit-site-post-list__title span {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable
-.edit-site-post-list__title
-span,
-.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable
-.edit-site-post-list__title
-span {
-	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	display: block;
-	flex-grow: 0;
-	color: $gray-900;
-
-	&:hover {
-		color: var(--wp-admin-theme-color);
-	}
-	@include link-reset();
-}
-
-.edit-site-post-list__title-badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-}
-
 .edit-site-post-list__status-icon {
 	height: $grid-unit-30;
 	width: $grid-unit-30;

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>
 	);
 }