@wordpress/edit-site 5.23.0 → 5.24.0

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

@@ -21,7 +21,7 @@ import Link from '../routes/link';
 import { DataViews, viewTypeSupportsMap } from '../dataviews';
 import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
-	useTrashPostAction,
+	trashPostAction,
 	usePermanentlyDeletePostAction,
 	useRestorePostAction,
 	postRevisionsAction,
@@ -31,6 +31,7 @@ import {
 import SideEditor from './side-editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
 const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
@@ -38,6 +39,7 @@ const defaultConfigPerViewType = {
 	list: {},
 	grid: {
 		mediaField: 'featured-image',
+		primaryField: 'title',
 	},
 };
 
@@ -120,10 +122,16 @@ export default function PagePages() {
 	const queryArgs = useMemo( () => {
 		const filters = {};
 		view.filters.forEach( ( filter ) => {
-			if ( filter.field === 'status' && filter.operator === 'in' ) {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IN
+			) {
 				filters.status = filter.value;
 			}
-			if ( filter.field === 'author' && filter.operator === 'in' ) {
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IN
+			) {
 				filters.author = filter.value;
 			}
 		} );
@@ -219,15 +227,7 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
-				render: ( { item } ) => {
-					const author = item._embedded?.author[ 0 ];
-					return (
-						<a href={ `user-edit.php?user_id=${ author.id }` }>
-							{ author.name }
-						</a>
-					);
-				},
-				filters: [ 'in' ],
+				type: ENUMERATION_TYPE,
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
@@ -240,7 +240,7 @@ export default function PagePages() {
 				getValue: ( { item } ) =>
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
-				filters: [ 'in' ],
+				type: ENUMERATION_TYPE,
 				elements: STATUSES,
 				enableSorting: false,
 			},
@@ -260,7 +260,6 @@ export default function PagePages() {
 		[ authors ]
 	);
 
-	const trashPostAction = useTrashPostAction();
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
 	const restorePostAction = useRestorePostAction();
 	const editPostAction = useEditPostAction();
@@ -273,12 +272,7 @@ export default function PagePages() {
 			editPostAction,
 			postRevisionsAction,
 		],
-		[
-			trashPostAction,
-			permanentlyDeletePostAction,
-			restorePostAction,
-			editPostAction,
-		]
+		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
 	);
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
@@ -309,6 +303,7 @@ export default function PagePages() {
 					fields={ fields }
 					actions={ actions }
 					data={ pages || EMPTY_ARRAY }
+					getItemId={ ( item ) => item.id }
 					isLoading={ isLoadingPages || isLoadingAuthors }
 					view={ view }
 					onChangeView={ onChangeView }

package/src/components/page-patterns/use-patterns.js

@@ -159,7 +159,7 @@ const selectPatterns = createSelector(
 			// User patterns can have their sync statuses checked directly
 			// Non-user patterns are all unsynced for the time being.
 			patterns = patterns.filter( ( pattern ) => {
-				return pattern.id
+				return pattern.type === PATTERN_TYPES.user
 					? pattern.syncStatus === syncStatus
 					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
 			} );

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

@@ -12,11 +12,17 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -26,14 +32,29 @@ import Link from '../routes/link';
 import { useAddedBy, AvatarImage } from '../list/added-by';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { DataViews } from '../dataviews';
+import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
 import {
 	useResetTemplateAction,
 	deleteTemplateAction,
 	renameTemplateAction,
 } from './template-actions';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
 
 const EMPTY_ARRAY = [];
 
+const defaultConfigPerViewType = {
+	list: {},
+	grid: {
+		mediaField: 'preview',
+		primaryField: 'title',
+	},
+};
+
 const DEFAULT_VIEW = {
 	type: 'list',
 	search: '',
@@ -41,8 +62,9 @@ const DEFAULT_VIEW = {
 	perPage: 20,
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
-	hiddenFields: [],
+	hiddenFields: [ 'preview' ],
 	layout: {},
+	filters: [],
 };
 
 function normalizeSearchInput( input = '' ) {
@@ -81,7 +103,7 @@ function TemplateTitle( { item } ) {
 function AuthorField( { item } ) {
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
 	return (
-		<HStack alignment="left">
+		<HStack alignment="left" spacing={ 1 }>
 			{ imageUrl ? (
 				<AvatarImage imageUrl={ imageUrl } />
 			) : (
@@ -94,12 +116,116 @@ function AuthorField( { item } ) {
 	);
 }
 
+function TemplatePreview( { content, viewType } ) {
+	const settings = usePatternSettings();
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const blocks = useMemo( () => {
+		return parse( content );
+	}, [ content ] );
+	if ( ! blocks?.length ) {
+		return null;
+	}
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<div
+				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
+				style={ { backgroundColor } }
+			>
+				<BlockPreview blocks={ blocks } />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+}
+
 export default function DataviewsTemplates() {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { records: allTemplates, isResolving: isLoadingData } =
 		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
 		} );
+
+	const authors = useMemo( () => {
+		if ( ! allTemplates ) {
+			return EMPTY_ARRAY;
+		}
+		const authorsSet = new Set();
+		allTemplates.forEach( ( template ) => {
+			authorsSet.add( template.author_text );
+		} );
+		return Array.from( authorsSet ).map( ( author ) => ( {
+			value: author,
+			label: author,
+		} ) );
+	}, [ allTemplates ] );
+
+	const fields = useMemo(
+		() => [
+			{
+				header: __( 'Preview' ),
+				id: 'preview',
+				render: ( { item, view: { type: viewType } } ) => {
+					return (
+						<TemplatePreview
+							content={ item.content.raw }
+							viewType={ viewType }
+						/>
+					);
+				},
+				minWidth: 120,
+				maxWidth: 120,
+				enableSorting: false,
+			},
+			{
+				header: __( 'Template' ),
+				id: 'title',
+				getValue: ( { item } ) => item.title?.rendered || item.slug,
+				render: ( { item } ) => <TemplateTitle item={ item } />,
+				maxWidth: 400,
+				enableHiding: false,
+			},
+			{
+				header: __( 'Description' ),
+				id: 'description',
+				getValue: ( { item } ) => item.description,
+				render: ( { item } ) => {
+					return item.description ? (
+						decodeEntities( item.description )
+					) : (
+						<>
+							<Text variant="muted" aria-hidden="true">
+								&#8212;
+							</Text>
+							<VisuallyHidden>
+								{ __( 'No description.' ) }
+							</VisuallyHidden>
+						</>
+					);
+				},
+				maxWidth: 200,
+				enableSorting: false,
+			},
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				getValue: ( { item } ) => item.author_text,
+				render: ( { item } ) => {
+					return <AuthorField item={ item } />;
+				},
+				enableHiding: false,
+				type: ENUMERATION_TYPE,
+				elements: authors,
+			},
+		],
+		[ authors ]
+	);
+
 	const { shownTemplates, paginationInfo } = useMemo( () => {
 		if ( ! allTemplates ) {
 			return {
@@ -123,19 +249,40 @@ export default function DataviewsTemplates() {
 				);
 			} );
 		}
+
+		// Handle filters.
+		if ( view.filters.length > 0 ) {
+			view.filters.forEach( ( filter ) => {
+				if (
+					filter.field === 'author' &&
+					filter.operator === OPERATOR_IN &&
+					!! filter.value
+				) {
+					filteredTemplates = filteredTemplates.filter( ( item ) => {
+						return item.author_text === filter.value;
+					} );
+				}
+			} );
+		}
+
 		// Handle sorting.
-		// TODO: Explore how this can be more dynamic..
 		if ( view.sort ) {
-			if ( view.sort.field === 'title' ) {
+			const stringSortingFields = [ 'title', 'author' ];
+			const fieldId = view.sort.field;
+			if ( stringSortingFields.includes( fieldId ) ) {
+				const fieldToSort = fields.find( ( field ) => {
+					return field.id === fieldId;
+				} );
 				filteredTemplates.sort( ( a, b ) => {
-					const titleA = a.title?.rendered || a.slug;
-					const titleB = b.title?.rendered || b.slug;
+					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
+					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
 					return view.sort.direction === 'asc'
-						? titleA.localeCompare( titleB )
-						: titleB.localeCompare( titleA );
+						? valueA.localeCompare( valueB )
+						: valueB.localeCompare( valueA );
 				} );
 			}
 		}
+
 		// Handle pagination.
 		const start = ( view.page - 1 ) * view.perPage;
 		const totalItems = filteredTemplates?.length || 0;
@@ -150,44 +297,8 @@ export default function DataviewsTemplates() {
 				totalPages: Math.ceil( totalItems / view.perPage ),
 			},
 		};
-	}, [ allTemplates, view ] );
-	const fields = useMemo(
-		() => [
-			{
-				header: __( 'Template' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => <TemplateTitle item={ item } />,
-				maxWidth: 400,
-				enableHiding: false,
-			},
-			{
-				header: __( 'Description' ),
-				id: 'description',
-				getValue: ( { item } ) => item.description,
-				render: ( { item } ) => {
-					return (
-						item.description && (
-							<Text variant="muted">
-								{ decodeEntities( item.description ) }
-							</Text>
-						)
-					);
-				},
-				maxWidth: 200,
-				enableSorting: false,
-			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: () => {},
-				render: ( { item } ) => <AuthorField item={ item } />,
-				enableHiding: false,
-				enableSorting: false,
-			},
-		],
-		[]
-	);
+	}, [ allTemplates, view, fields ] );
+
 	const resetTemplateAction = useResetTemplateAction();
 	const actions = useMemo(
 		() => [
@@ -199,10 +310,19 @@ export default function DataviewsTemplates() {
 	);
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
-			const updatedView =
+			let updatedView =
 				typeof viewUpdater === 'function'
 					? viewUpdater( view )
 					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
 			setView( updatedView );
 		},
 		[ view, setView ]
@@ -214,10 +334,11 @@ export default function DataviewsTemplates() {
 				fields={ fields }
 				actions={ actions }
 				data={ shownTemplates }
+				getItemId={ ( item ) => item.id }
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				supportedLayouts={ [ 'list' ] }
+				supportedLayouts={ [ 'list', 'grid' ] }
 			/>
 		</Page>
 	);

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

@@ -0,0 +1,13 @@
+.page-templates-preview-field {
+	&.is-viewtype-list {
+		.block-editor-block-preview__container {
+			height: 120px;
+		}
+	}
+
+	&.is-viewtype-grid {
+		.block-editor-block-preview__container {
+			height: auto;
+		}
+	}
+}

package/src/components/preferences-modal/index.js

@@ -34,7 +34,7 @@ export default function EditSitePreferencesModal() {
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setPreference( 'core/edit-site', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();

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

@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
 
@@ -11,7 +11,10 @@ import { displayShortcut } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
 
 export default function SaveButton( {
 	className = 'edit-site-save-button__button',
@@ -21,24 +24,34 @@ export default function SaveButton( {
 	icon,
 	__next40pxDefaultSize = false,
 } ) {
-	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
-		const {
-			__experimentalGetDirtyEntityRecords,
-			isSavingEntityRecord,
-			isResolving,
-		} = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const { isSaveViewOpened } = select( editSiteStore );
-		const isActivatingTheme = isResolving( 'activateTheme' );
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-			isSaving:
-				dirtyEntityRecords.some( ( record ) =>
-					isSavingEntityRecord( record.kind, record.name, record.key )
-				) || isActivatingTheme,
-			isSaveViewOpen: isSaveViewOpened(),
-		};
-	}, [] );
+	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
+		useSelect( ( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				isSavingEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const { isSaveViewOpened } = select( editSiteStore );
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const previewingTheme = select( coreStore ).getTheme(
+				currentlyPreviewingTheme()
+			);
+
+			return {
+				isDirty: dirtyEntityRecords.length > 0,
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+				isSaveViewOpen: isSaveViewOpened(),
+				previewingThemeName: previewingTheme?.name?.rendered,
+			};
+		}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	const activateSaveEnabled = isPreviewingTheme() || isDirty;
@@ -47,13 +60,13 @@ export default function SaveButton( {
 	const getLabel = () => {
 		if ( isPreviewingTheme() ) {
 			if ( isSaving ) {
-				return __( 'Activating' );
+				return sprintf( 'Activating %s', previewingThemeName );
 			} else if ( disabled ) {
 				return __( 'Saved' );
 			} else if ( isDirty ) {
-				return __( 'Activate & Save' );
+				return sprintf( 'Activate %s & Save', previewingThemeName );
 			}
-			return __( 'Activate' );
+			return sprintf( 'Activate %s', previewingThemeName );
 		}
 
 		if ( isSaving ) {
@@ -85,7 +98,7 @@ export default function SaveButton( {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
 			showTooltip={ showTooltip }
 			icon={ icon }

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

@@ -106,6 +106,15 @@ export default function SaveHub() {
 		label = __( 'Saving' );
 	}
 
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
 	const saveCurrentEntity = async () => {
 		if ( ! dirtyCurrentEntity ) return;
 
@@ -135,6 +144,12 @@ export default function SaveHub() {
 
 			createSuccessNotice( __( 'Site updated.' ), {
 				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'View site' ),
+						url: homeUrl,
+					},
+				],
 				id: saveNoticeId,
 			} );
 		} catch ( error ) {

package/src/components/save-hub/style.scss

@@ -18,4 +18,11 @@
 	&[aria-disabled="true"]:hover {
 		color: inherit;
 	}
+
+	&:not(.is-primary) {
+		&.is-busy,
+		&.is-busy[aria-disabled="true"]:hover {
+			color: $gray-900;
+		}
+	}
 }

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -116,10 +116,12 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 					<DropdownMenu
 						icon={ moreVertical }
 						label={ __( 'Actions' ) }
+						className="edit-site-sidebar-dataviews-dataview-item__dropdown-menu"
 						toggleProps={ {
 							style: {
 								color: 'inherit',
 							},
+							size: 'small',
 						} }
 					>
 						{ ( { onClose } ) => (

package/src/components/sidebar-dataviews/default-views.js

@@ -4,6 +4,11 @@
 import { __ } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IN } from '../dataviews/constants';
+
 const DEFAULT_PAGE_BASE = {
 	type: 'list',
 	search: '',
@@ -33,7 +38,7 @@ const DEFAULT_VIEWS = {
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [
-					{ field: 'status', operator: 'in', value: 'draft' },
+					{ field: 'status', operator: OPERATOR_IN, value: 'draft' },
 				],
 			},
 		},
@@ -44,7 +49,7 @@ const DEFAULT_VIEWS = {
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [
-					{ field: 'status', operator: 'in', value: 'trash' },
+					{ field: 'status', operator: OPERATOR_IN, value: 'trash' },
 				],
 			},
 		},

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

@@ -8,6 +8,13 @@
 }
 
 .edit-site-sidebar-dataviews-dataview-item {
+	border-radius: $radius-block-ui;
+	padding-right: $grid-unit-10;
+
+	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
+		min-width: initial;
+	}
+
 	&:hover,
 	&:focus,
 	&[aria-current] {