@wordpress/edit-site 7.3.2-next.v.202608281122.0 → 7.4.0

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

@@ -1,56 +1,42 @@
 import { Page } from '@wordpress/admin-ui';
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
-import {
-	privateApis as corePrivateApis,
-	store as coreStore,
-} from '@wordpress/core-data';
+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';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { useEvent } from '@wordpress/compose';
-import { useView } from '@wordpress/views';
-import { Modal } from '@wordpress/components';
-import { store as noticesStore } from '@wordpress/notices';
+import { useView, useViewConfig } from '@wordpress/views';
 import AddNewTemplate from '../add-new-template';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import {
-	useEditPostAction,
-	useSetActiveTemplateAction,
-} from '../dataviews-actions';
-import {
-	authorField,
-	descriptionField,
-	previewField,
-	activeField,
-	slugField,
-	useThemeField,
-} from './fields';
-import {
-	defaultLayouts,
-	DEFAULT_VIEW,
-	getActiveViewOverridesForTab,
-} from './view-utils';
+import { useEditPostAction } from '../dataviews-actions';
+import { previewField } from './fields';
 
-const { usePostActions, usePostFields, templateTitleField } =
-	unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
+const VIEW_CONFIG_FIELDS = [ 'default_view', 'default_layouts', 'view_list' ];
+
 export default function PageTemplates() {
 	const { path, query } = useLocation();
-	const { activeView = 'active', postId } = query;
+	const { activeView = 'all', postId } = query;
 	const [ selection, setSelection ] = useState( [ postId ] );
-	const [ selectedRegisteredTemplate, setSelectedRegisteredTemplate ] =
-		useState( false );
-	const defaultView = DEFAULT_VIEW;
+
+	const {
+		default_view: defaultView,
+		default_layouts: defaultLayouts,
+		view_list: viewList,
+	} = useViewConfig( {
+		kind: 'postType',
+		name: TEMPLATE_POST_TYPE,
+		fields: VIEW_CONFIG_FIELDS,
+	} );
 	const activeViewOverrides = useMemo(
-		() => getActiveViewOverridesForTab( activeView ),
-		[ activeView ]
+		() => viewList?.find( ( v ) => v.slug === activeView )?.view ?? {},
+		[ viewList, activeView ]
 	);
 	const { view, updateView, isModified, resetToDefault } = useView( {
 		kind: 'postType',
@@ -58,6 +44,7 @@ export default function PageTemplates() {
 		slug: 'default',
 		defaultView,
 		activeViewOverrides,
+		defaultLayouts,
 		queryParams: {
 			page: query.pageNumber,
 			search: query.search,
@@ -73,129 +60,10 @@ export default function PageTemplates() {
 		},
 	} );
 
-	const { activeTemplatesOption, activeTheme, defaultTemplateTypes } =
-		useSelect( ( select ) => {
-			const { getEntityRecord, getCurrentTheme } = select( coreStore );
-			return {
-				activeTemplatesOption: getEntityRecord( 'root', 'site' )
-					?.active_templates,
-				activeTheme: getCurrentTheme(),
-				defaultTemplateTypes:
-					select( coreStore ).getCurrentTheme()
-						?.default_template_types,
-			};
-		} );
-	// 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 } =
+	const { records, isResolving: isLoadingData } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
-			combinedTemplates: false,
-		} );
-	const { records: staticRecords, isResolving: isLoadingStaticData } =
-		useEntityRecordsWithPermissions( 'root', 'registeredTemplate', {
-			// This should not be needed, the endpoint returns all registered
-			// templates, but it's not possible right now to turn off pagination
-			// for entity configs.
-			per_page: -1,
 		} );
-
-	const activeTemplates = useMemo( () => {
-		const _active = [ ...staticRecords ];
-		if ( activeTemplatesOption ) {
-			for ( const activeSlug in activeTemplatesOption ) {
-				const activeId = activeTemplatesOption[ activeSlug ];
-				// Replace the template in the array.
-				const template = userRecords.find(
-					( userRecord ) =>
-						userRecord.id === activeId &&
-						userRecord.theme === activeTheme.stylesheet
-				);
-				if ( template ) {
-					const index = _active.findIndex(
-						( { slug } ) => slug === template.slug
-					);
-					if ( index !== -1 ) {
-						_active[ index ] = template;
-					} else {
-						_active.push( template );
-					}
-				}
-			}
-		}
-		return _active;
-	}, [ userRecords, staticRecords, activeTemplatesOption, activeTheme ] );
-
-	let isLoadingData;
-	if ( activeView === 'active' ) {
-		isLoadingData = isLoadingUserRecords || isLoadingStaticData;
-	} else if ( activeView === 'user' ) {
-		isLoadingData = isLoadingUserRecords;
-	} else {
-		isLoadingData = isLoadingStaticData;
-	}
-
-	const records = useMemo( () => {
-		function isCustom( record ) {
-			// For registered templates, the is_custom field is defined.
-			return (
-				record.is_custom ??
-				// For user templates it's custom if the is_wp_suggestion meta
-				// field is not set and the slug is not found in the default
-				// template types.
-				( ! record.meta?.is_wp_suggestion &&
-					! defaultTemplateTypes.some(
-						( type ) => type.slug === record.slug
-					) )
-			);
-		}
-
-		let _records;
-		if ( activeView === 'active' ) {
-			// Don't show active custom templates in the active view.
-			_records = activeTemplates.filter(
-				( record ) => ! isCustom( record )
-			);
-		} else if ( activeView === 'user' ) {
-			_records = userRecords;
-		} else {
-			_records = staticRecords;
-		}
-		return _records.map( ( record ) => ( {
-			...record,
-			_isActive: activeTemplates.some(
-				( template ) => template.id === record.id
-			),
-			_isCustom: isCustom( record ),
-		} ) );
-	}, [
-		activeTemplates,
-		defaultTemplateTypes,
-		userRecords,
-		staticRecords,
-		activeView,
-	] );
-
-	const users = useSelect(
-		( select ) => {
-			const { getUser } = select( coreStore );
-			return records.reduce( ( acc, record ) => {
-				if ( record.author_text ) {
-					if ( ! acc[ record.author_text ] ) {
-						acc[ record.author_text ] = record.author_text;
-					}
-				} else if ( record.author ) {
-					if ( ! acc[ record.author ] ) {
-						acc[ record.author ] = getUser( record.author );
-					}
-				}
-				return acc;
-			}, {} );
-		},
-		[ records ]
-	);
-
 	const history = useHistory();
 	const onChangeSelection = useCallback(
 		( items ) => {
@@ -211,95 +79,23 @@ export default function PageTemplates() {
 		[ history, path, view?.type ]
 	);
 
-	const postTypeFields = usePostFields( {
-		postType: TEMPLATE_POST_TYPE,
-	} );
-	const dateField = postTypeFields.find( ( field ) => field.id === 'date' );
-	const themeField = useThemeField();
+	const postFields = usePostFields( { postType: TEMPLATE_POST_TYPE } );
 	const fields = useMemo( () => {
-		const _fields = [
-			previewField,
-			templateTitleField,
-			descriptionField,
-			activeField,
-			slugField,
-		];
-		if ( activeView === 'user' ) {
-			_fields.push( themeField );
-			if ( dateField ) {
-				_fields.push( dateField );
-			}
-		}
-		const elements = [];
-		for ( const author in users ) {
-			elements.push( {
-				value: users[ author ]?.id ?? author,
-				label: users[ author ]?.name ?? author,
-			} );
-		}
-		_fields.push( {
-			...authorField,
-			elements,
-		} );
-		return _fields;
-	}, [ users, activeView, themeField, dateField ] );
+		return [ previewField, ...( postFields || [] ) ];
+	}, [ postFields ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );
 	}, [ records, view, fields ] );
 
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const _title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						history.navigate( `/template?activeView=user` );
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post or template, e.g: "Hello world".
-								__( '"%s" successfully created.' ),
-								decodeEntities( _title ) || __( '(no title)' )
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											history.navigate(
-												`/${ newItem.type }/${ newItem.id }?canvas=edit`
-											);
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ history, createSuccessNotice ]
-	);
 	const postTypeActions = usePostActions( {
 		postType: TEMPLATE_POST_TYPE,
 		context: 'list',
-		onActionPerformed,
 	} );
 	const editAction = useEditPostAction();
-	const setActiveTemplateAction = useSetActiveTemplateAction();
 	const actions = useMemo(
-		() =>
-			activeView === 'user'
-				? [ setActiveTemplateAction, editAction, ...postTypeActions ]
-				: [ setActiveTemplateAction, ...postTypeActions ],
-		[ postTypeActions, setActiveTemplateAction, editAction, activeView ]
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
 
 	const onChangeView = useEvent( ( newView ) => {
@@ -310,10 +106,6 @@ export default function PageTemplates() {
 		}
 	} );
 
-	const duplicateAction = actions.find(
-		( action ) => action.id === 'duplicate-post'
-	);
-
 	return (
 		<Page
 			className="edit-site-page-templates"
@@ -332,14 +124,8 @@ export default function PageTemplates() {
 				onChangeView={ onChangeView }
 				onChangeSelection={ onChangeSelection }
 				isItemClickable={ () => true }
-				onClickItem={ ( item ) => {
-					if ( typeof item.id === 'string' ) {
-						setSelectedRegisteredTemplate( item );
-					} else {
-						history.navigate(
-							`/${ item.type }/${ item.id }?canvas=edit`
-						);
-					}
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/wp_template/${ id }?canvas=edit` );
 				} }
 				selection={ selection }
 				defaultLayouts={ defaultLayouts }
@@ -352,18 +138,6 @@ export default function PageTemplates() {
 						: false
 				}
 			/>
-			{ selectedRegisteredTemplate && duplicateAction && (
-				<Modal
-					title={ __( 'Duplicate' ) }
-					onRequestClose={ () => setSelectedRegisteredTemplate() }
-					size="small"
-				>
-					<duplicateAction.RenderModal
-						items={ [ selectedRegisteredTemplate ] }
-						closeModal={ () => setSelectedRegisteredTemplate() }
-					/>
-				</Modal>
-			) }
 		</Page>
 	);
 }

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

@@ -7,7 +7,7 @@ import {
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
-import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { DataViews } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useEvent, usePrevious } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
@@ -176,27 +176,14 @@ export default function PostList( { postType } ) {
 	const { notesCount, isLoading: isLoadingNotesCount } =
 		useNotesCount( postIds );
 
-	// The REST API sort the authors by ID, but we want to sort them by name.
-	const data = useMemo( () => {
-		let processedRecords = records;
-
-		if ( view?.sort?.field === 'author' ) {
-			processedRecords = filterSortAndPaginate(
-				records,
-				{ sort: { ...view.sort } },
-				fields
-			).data;
-		}
-
-		if ( processedRecords ) {
-			return processedRecords.map( ( record ) => ( {
+	const data = useMemo(
+		() =>
+			records?.map( ( record ) => ( {
 				...record,
 				notesCount: notesCount[ record.id ] ?? 0,
-			} ) );
-		}
-
-		return processedRecords;
-	}, [ records, fields, view?.sort, notesCount ] );
+			} ) ),
+		[ records, notesCount ]
+	);
 
 	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];

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

@@ -98,11 +98,13 @@ export default function SidebarGlobalStyles() {
 			title={ __( 'Styles' ) }
 			headingLevel={ 2 }
 		>
-			<GlobalStylesUIWrapper
-				path={ section }
-				onPathChange={ onChangeSection }
-				settings={ settings }
-			/>
+			<div className="edit-site-styles__content">
+				<GlobalStylesUIWrapper
+					path={ section }
+					onPathChange={ onChangeSection }
+					settings={ settings }
+				/>
+			</div>
 		</Page>
 	);
 }

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

@@ -31,6 +31,12 @@
 	}
 }
 
+.edit-site-styles__content {
+	flex-grow: 1;
+	min-height: 0;
+	background-color: var(--wpds-color-background-surface-neutral-strong);
+}
+
 // Show button text labels when preference is enabled.
 .show-icon-labels {
 	.edit-site-styles__header-actions {

package/src/components/sidebar-identity/index.jsx

@@ -5,6 +5,11 @@ import { store as coreStore } from '@wordpress/core-data';
 import { DataForm } from '@wordpress/dataviews';
 import { MediaEdit } from '@wordpress/fields';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useViewConfig } from '@wordpress/views';
+
+// The screen only renders a form, so it requests the `form` of the entity
+// view configuration alone.
+const VIEW_CONFIG_FIELDS = [ 'form' ];
 
 const fields = [
 	{
@@ -53,14 +58,6 @@ const fields = [
 	},
 ];
 
-const form = {
-	layout: {
-		type: 'regular',
-		labelPosition: 'top',
-	},
-	fields: [ 'title', 'description', 'site_logo', 'site_icon' ],
-};
-
 export default function SidebarIdentity() {
 	const data = useSelect(
 		( select ) =>
@@ -68,23 +65,30 @@ export default function SidebarIdentity() {
 		[]
 	);
 	const { editEntityRecord } = useDispatch( coreStore );
+	const { form } = useViewConfig( {
+		kind: 'root',
+		name: 'site',
+		fields: VIEW_CONFIG_FIELDS,
+	} );
 
 	const onChange = ( edits ) => {
 		editEntityRecord( 'root', 'site', undefined, edits );
 	};
 
+	if ( ! form ) {
+		return null;
+	}
+
 	return (
-		<Page
-			title={ _x( 'Identity', 'site identity' ) }
-			headingLevel={ 2 }
-			hasPadding
-		>
-			<DataForm
-				data={ data }
-				fields={ fields }
-				form={ form }
-				onChange={ onChange }
-			/>
+		<Page title={ _x( 'Identity', 'site identity' ) } headingLevel={ 2 }>
+			<div className="edit-site-sidebar-identity__form">
+				<DataForm
+					data={ data }
+					fields={ fields }
+					form={ form }
+					onChange={ onChange }
+				/>
+			</div>
 		</Page>
 	);
 }

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

@@ -0,0 +1,7 @@
+.edit-site-sidebar-identity__form {
+	flex-grow: 1;
+	min-height: 0;
+	overflow: auto;
+	background-color: var(--wpds-color-background-surface-neutral-strong);
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+}

package/src/components/sidebar-navigation-item/index.jsx

@@ -65,13 +65,7 @@ function SidebarNavigationItemContent( {
 			{ ...props }
 		>
 			<Stack direction="row" align="center" justify="start" gap="sm">
-				{ icon && (
-					<Icon
-						style={ { fill: 'currentcolor' } }
-						icon={ icon }
-						size={ 24 }
-					/>
-				) }
+				{ icon && <Icon icon={ icon } size={ 24 } /> }
 				<FlexBlock>{ children }</FlexBlock>
 				{ withChevron && (
 					<Icon

package/src/components/sidebar-navigation-screen-templates-browse/content.jsx

@@ -1,87 +1,52 @@
-import { useEntityRecords } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { addQueryArgs } from '@wordpress/url';
-import { commentAuthorAvatar, published } from '@wordpress/icons';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useAddedBy } from '../page-templates/hooks';
-import { unlock } from '../../lock-unlock';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-const EMPTY_ARRAY = [];
-
-function TemplateDataviewItem( { template, isActive } ) {
-	const { text, icon } = useAddedBy( template.type, template.id );
-
-	return (
-		<SidebarNavigationItem
-			to={ addQueryArgs( '/template', { activeView: text } ) }
-			icon={ icon }
-			aria-current={ isActive }
-		>
-			{ text }
-		</SidebarNavigationItem>
-	);
-}
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import {
+	commentAuthorAvatar,
+	layout,
+	plugins as pluginIcon,
+	globe,
+} from '@wordpress/icons';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import DataViewsSidebarContent from '../sidebar-dataviews';
 
+const SOURCE_TO_ICON = {
+	user: commentAuthorAvatar,
+	theme: layout,
+	plugin: pluginIcon,
+	site: globe,
+};
 export default function DataviewsTemplatesSidebarContent() {
-	const {
-		query: { activeView = 'active' },
-	} = useLocation();
-	const { records } = useEntityRecords( 'root', 'registeredTemplate', {
-		// This should not be needed, the endpoint returns all registered
-		// templates, but it's not possible right now to turn off pagination for
-		// entity configs.
-		per_page: -1,
-	} );
-	const firstItemPerAuthorText = useMemo( () => {
-		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
-			const author = template.author_text;
-			if ( author && ! acc[ author ] ) {
-				acc[ author ] = template;
-			}
-			return acc;
-		}, {} );
-		return (
-			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
-			EMPTY_ARRAY
+	const authorSourceMap = useSelect( ( select ) => {
+		const templates = select( coreStore ).getEntityRecords(
+			'postType',
+			TEMPLATE_POST_TYPE,
+			{ per_page: -1 }
 		);
-	}, [ records ] );
+		if ( ! templates ) {
+			return {};
+		}
+		const map = {};
+		for ( const template of templates ) {
+			if (
+				template.author_text &&
+				template.original_source &&
+				! map[ template.author_text ]
+			) {
+				map[ template.author_text ] = template.original_source;
+			}
+		}
+		return map;
+	}, [] );
+
+	const resolveIcon = ( view ) => {
+		const source = authorSourceMap[ view.slug ];
+		return SOURCE_TO_ICON[ source ] ?? layout;
+	};
 
 	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
-			<SidebarNavigationItem
-				to="/template"
-				icon={ published }
-				aria-current={ activeView === 'active' }
-			>
-				{ __( 'Active templates' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItem
-				to={ addQueryArgs( '/template', { activeView: 'user' } ) }
-				icon={ commentAuthorAvatar }
-				aria-current={ activeView === 'user' }
-			>
-				{
-					// Let's avoid calling them "custom templates" to avoid
-					// confusion. "Created" is closest to meaning database
-					// templates, created by users.
-					// https://developer.wordpress.org/themes/classic-themes/templates/page-template-files/#creating-custom-page-templates-for-global-use
-					__( 'Created templates' )
-				}
-			</SidebarNavigationItem>
-			{ firstItemPerAuthorText.map( ( template ) => {
-				return (
-					<TemplateDataviewItem
-						key={ template.author_text }
-						template={ template }
-						isActive={ activeView === template.author_text }
-					/>
-				);
-			} ) }
-		</ItemGroup>
+		<DataViewsSidebarContent
+			postType={ TEMPLATE_POST_TYPE }
+			resolveIcon={ resolveIcon }
+		/>
 	);
 }

package/src/components/sidebar-navigation-screen-templates-browse/index.jsx

@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import DataviewsTemplatesSidebarContent from './content';
-import DataviewsTemplatesSidebarContentLegacy from './content-legacy';
 
 export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	return (
@@ -11,13 +10,7 @@ export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 				'Manage the templates that define the structure of your pages, or reset any customizations made to those supplied by your theme.'
 			) }
 			backPath={ backPath }
-			content={
-				window?.__experimentalTemplateActivate ? (
-					<DataviewsTemplatesSidebarContent />
-				) : (
-					<DataviewsTemplatesSidebarContentLegacy />
-				)
-			}
+			content={ <DataviewsTemplatesSidebarContent /> }
 		/>
 	);
 }