@wordpress/edit-site 6.31.1-next.f56bd8138.0 → 6.32.1-next.47f435fc9.0

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

@@ -20,7 +20,11 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
-import { privateApis as corePrivateApis } from '@wordpress/core-data';
+import {
+	privateApis as corePrivateApis,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -160,6 +164,23 @@ export const activeField = {
 	},
 };
 
+export const useThemeField = () => {
+	const activeTheme = useSelect( ( select ) =>
+		select( coreStore ).getCurrentTheme()
+	);
+	return {
+		label: __( 'Compatible Theme' ),
+		id: 'theme',
+		getValue: ( { item } ) => item.theme,
+		render: function Render( { item } ) {
+			if ( item.theme === activeTheme.stylesheet ) {
+				return <Badge intent="success">{ item.theme }</Badge>;
+			}
+			return <Badge intent="error">{ item.theme }</Badge>;
+		},
+	};
+};
+
 export const slugField = {
 	label: __( 'Template Type' ),
 	id: 'slug',

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

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { useState, useMemo, useCallback } from '@wordpress/element';
 import {
 	privateApis as corePrivateApis,
 	store as coreStore,
@@ -13,19 +14,14 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { addQueryArgs } from '@wordpress/url';
 import { useSelect } from '@wordpress/data';
 import { useEvent } from '@wordpress/compose';
+import { useView } from '@wordpress/views';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import Page from '../page';
 import AddNewTemplate from '../add-new-template';
-import {
-	TEMPLATE_POST_TYPE,
-	OPERATOR_IS_ANY,
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	LAYOUT_LIST,
-} from '../../utils/constants';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import {
 	useEditPostAction,
@@ -37,99 +33,56 @@ import {
 	previewField,
 	activeField,
 	slugField,
+	useThemeField,
 } from './fields';
+import { defaultLayouts, getDefaultView } from './view-utils';
 
 const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
-const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		showMedia: false,
-	},
-	[ LAYOUT_GRID ]: {
-		showMedia: true,
-	},
-	[ LAYOUT_LIST ]: {
-		showMedia: false,
-	},
-};
-
-const DEFAULT_VIEW = {
-	type: LAYOUT_GRID,
-	search: '',
-	page: 1,
-	perPage: 20,
-	sort: {
-		field: 'title',
-		direction: 'asc',
-	},
-	titleField: 'title',
-	descriptionField: 'description',
-	mediaField: 'preview',
-	fields: [ 'author', 'active', 'slug' ],
-	filters: [],
-	...defaultLayouts[ LAYOUT_GRID ],
-};
-
 export default function PageTemplates() {
 	const { path, query } = useLocation();
-	const { activeView = 'active', layout, postId } = query;
+	const { activeView = 'active', postId } = query;
 	const [ selection, setSelection ] = useState( [ postId ] );
 	const defaultView = useMemo( () => {
-		const usedType = layout ?? DEFAULT_VIEW.type;
+		return getDefaultView( activeView );
+	}, [ activeView ] );
+	const { view, updateView, isModified, resetToDefault } = useView( {
+		kind: 'postType',
+		name: TEMPLATE_POST_TYPE,
+		slug: activeView,
+		defaultView,
+		queryParams: {
+			page: query.pageNumber,
+			search: query.search,
+		},
+		onChangeQueryParams: ( newQueryParams ) => {
+			history.navigate(
+				addQueryArgs( path, {
+					...query,
+					pageNumber: newQueryParams.page,
+					search: newQueryParams.search || undefined,
+				} )
+			);
+		},
+	} );
+
+	const { activeTemplatesOption, activeTheme } = useSelect( ( select ) => {
+		const { getEntityRecord, getCurrentTheme } = select( coreStore );
 		return {
-			...DEFAULT_VIEW,
-			type: usedType,
-			filters: ! [ 'active', 'user' ].includes( activeView )
-				? [
-						{
-							field: 'author',
-							operator: 'isAny',
-							value: [ activeView ],
-						},
-				  ]
-				: [],
-			...defaultLayouts[ usedType ],
+			activeTemplatesOption: getEntityRecord( 'root', 'site' )
+				?.active_templates,
+			activeTheme: getCurrentTheme(),
 		};
-	}, [ layout, activeView ] );
-	const [ view, setView ] = useState( defaultView );
-
-	// Sync the layout from the URL to the view state.
-	useEffect( () => {
-		setView( ( currentView ) => ( {
-			...currentView,
-			type: layout ?? DEFAULT_VIEW.type,
-		} ) );
-	}, [ setView, layout ] );
-
-	// Sync the active view from the URL to the view state.
-	useEffect( () => {
-		setView( ( currentView ) => ( {
-			...currentView,
-			filters: ! [ 'active', 'user' ].includes( activeView )
-				? [
-						{
-							field: 'author',
-							operator: OPERATOR_IS_ANY,
-							value: [ activeView ],
-						},
-				  ]
-				: [],
-		} ) );
-	}, [ setView, activeView ] );
-
-	const activeTemplatesOption = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', 'site' )
-				?.active_templates
-	);
+	} );
 	// Todo: this will have to be better so that we're not fetching all the
 	// records all the time. Active templates query will need to move server
 	// side.
 	const { records: userRecords, isResolving: isLoadingUserRecords } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
+			combinedTemplates: false,
 		} );
 	const { records: staticRecords, isResolving: isLoadingStaticData } =
 		useEntityRecordsWithPermissions( 'postType', 'wp_registered_template', {
@@ -154,7 +107,9 @@ export default function PageTemplates() {
 				} else {
 					// Replace the template in the array.
 					const template = userRecords.find(
-						( { id } ) => id === activeId
+						( userRecord ) =>
+							userRecord.id === activeId &&
+							userRecord.theme === activeTheme.stylesheet
 					);
 					if ( template ) {
 						const index = _active.findIndex(
@@ -170,7 +125,7 @@ export default function PageTemplates() {
 			}
 		}
 		return _active;
-	}, [ userRecords, staticRecords, activeTemplatesOption ] );
+	}, [ userRecords, staticRecords, activeTemplatesOption, activeTheme ] );
 
 	let _records;
 	let isLoadingData;
@@ -188,15 +143,11 @@ export default function PageTemplates() {
 	const records = useMemo( () => {
 		return _records.map( ( record ) => ( {
 			...record,
-			_isActive:
-				typeof record.id === 'string'
-					? activeTemplatesOption[ record.slug ] === record.id ||
-					  activeTemplatesOption[ record.slug ] === undefined
-					: Object.values( activeTemplatesOption ).includes(
-							record.id
-					  ),
+			_isActive: activeTemplates.find(
+				( template ) => template.id === record.id
+			),
 		} ) );
-	}, [ _records, activeTemplatesOption ] );
+	}, [ _records, activeTemplates ] );
 
 	const users = useSelect(
 		( select ) => {
@@ -221,7 +172,7 @@ export default function PageTemplates() {
 	const onChangeSelection = useCallback(
 		( items ) => {
 			setSelection( items );
-			if ( view?.type === LAYOUT_LIST ) {
+			if ( view?.type === 'list' ) {
 				history.navigate(
 					addQueryArgs( path, {
 						postId: items.length === 1 ? items[ 0 ] : undefined,
@@ -232,6 +183,7 @@ export default function PageTemplates() {
 		[ history, path, view?.type ]
 	);
 
+	const themeField = useThemeField();
 	const fields = useMemo( () => {
 		const _fields = [
 			previewField,
@@ -240,6 +192,9 @@ export default function PageTemplates() {
 			activeField,
 			slugField,
 		];
+		if ( activeView === 'user' ) {
+			_fields.push( themeField );
+		}
 		const elements = [];
 		for ( const author in users ) {
 			elements.push( {
@@ -252,7 +207,7 @@ export default function PageTemplates() {
 			elements,
 		} );
 		return _fields;
-	}, [ users ] );
+	}, [ users, activeView ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );
@@ -273,21 +228,33 @@ export default function PageTemplates() {
 	);
 
 	const onChangeView = useEvent( ( newView ) => {
-		setView( newView );
-		if ( newView.type !== layout ) {
-			history.navigate(
-				addQueryArgs( path, {
-					layout: newView.type,
-				} )
-			);
+		if ( newView.type !== view.type ) {
+			// Retrigger the routing areas resolution.
+			history.invalidate();
 		}
+		updateView( newView );
 	} );
 
 	return (
 		<Page
 			className="edit-site-page-templates"
 			title={ __( 'Templates' ) }
-			actions={ <AddNewTemplate /> }
+			actions={
+				<>
+					{ isModified && (
+						<Button
+							__next40pxDefaultSize
+							onClick={ () => {
+								resetToDefault();
+								history.invalidate();
+							} }
+						>
+							{ __( 'Reset view' ) }
+						</Button>
+					) }
+					<AddNewTemplate />
+				</>
+			}
 		>
 			<DataViews
 				key={ activeView }

package/src/components/page-templates/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .page-templates-preview-field {
 	display: flex;
 	justify-content: center;

package/src/components/page-templates/view-utils.js

@@ -0,0 +1,41 @@
+export const defaultLayouts = {
+	table: {
+		showMedia: false,
+	},
+	grid: {
+		showMedia: true,
+	},
+	list: {
+		showMedia: false,
+	},
+};
+
+const DEFAULT_VIEW = {
+	type: 'grid',
+	perPage: 20,
+	sort: {
+		field: 'title',
+		direction: 'asc',
+	},
+	titleField: 'title',
+	descriptionField: 'description',
+	mediaField: 'preview',
+	fields: [ 'author', 'active', 'slug', 'theme' ],
+	filters: [],
+	...defaultLayouts.grid,
+};
+
+export function getDefaultView( activeView ) {
+	return {
+		...DEFAULT_VIEW,
+		filters: ! [ 'active', 'user' ].includes( activeView )
+			? [
+					{
+						field: 'author',
+						operator: 'isAny',
+						value: [ activeView ],
+					},
+			  ]
+			: [],
+	};
+}

package/src/components/pagination/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-pagination .components-button.is-tertiary {
 	width: $button-size-compact;
 	height: $button-size-compact;

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

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
 import { DataForm } from '@wordpress/dataviews';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -17,7 +18,6 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-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';
@@ -29,7 +29,7 @@ const fieldsWithBulkEditSupport = [
 	'status',
 	'date',
 	'author',
-	'comment_status',
+	'discussion',
 ];
 
 function PostEditForm( { postType, postId } ) {
@@ -94,7 +94,11 @@ function PostEditForm( { postType, postId } ) {
 				'date',
 				'slug',
 				'parent',
-				'comment_status',
+				{
+					id: 'discussion',
+					label: __( 'Discussion' ),
+					children: [ 'comment_status', 'ping_status' ],
+				},
 				{
 					label: __( 'Template' ),
 					id: 'template',
@@ -106,7 +110,9 @@ function PostEditForm( { postType, postId } ) {
 			].filter(
 				( field ) =>
 					ids.length === 1 ||
-					fieldsWithBulkEditSupport.includes( field )
+					fieldsWithBulkEditSupport.includes(
+						typeof field === 'string' ? field : field.id
+					)
 			),
 		} ),
 		[ ids ]

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

@@ -1,11 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-post-edit {
 	padding: $grid-unit-30;
-
-	&.is-empty .edit-site-page-content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
 }
 
 .dataforms-layouts-panel__field-dropdown {