@wordpress/edit-site 5.29.0 → 5.31.0

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

@@ -30,8 +30,8 @@ import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
 } from '../../utils/constants';
 
 import {
@@ -49,9 +49,6 @@ import { unlock } from '../../lock-unlock';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews
-	? [ LAYOUT_GRID, LAYOUT_TABLE, LAYOUT_LIST ]
-	: [ LAYOUT_GRID, LAYOUT_TABLE ];
 
 function useView( postType ) {
 	const { params } = useLocation();
@@ -222,18 +219,18 @@ export default function PagePages() {
 		view.filters.forEach( ( filter ) => {
 			if (
 				filter.field === 'status' &&
-				filter.operator === OPERATOR_IN
+				filter.operator === OPERATOR_IS_ANY
 			) {
 				filters.status = filter.value;
 			}
 			if (
 				filter.field === 'author' &&
-				filter.operator === OPERATOR_IN
+				filter.operator === OPERATOR_IS_ANY
 			) {
 				filters.author = filter.value;
 			} else if (
 				filter.field === 'author' &&
-				filter.operator === OPERATOR_NOT_IN
+				filter.operator === OPERATOR_IS_NONE
 			) {
 				filters.author_exclude = filter.value;
 			}
@@ -331,13 +328,12 @@ export default function PagePages() {
 				elements: STATUSES,
 				enableSorting: false,
 				filterBy: {
-					operators: [ OPERATOR_IN ],
+					operators: [ OPERATOR_IS_ANY ],
 				},
 			},
 			{
 				header: __( 'Date' ),
 				id: 'date',
-				getValue: ( { item } ) => item.date,
 				render: ( { item } ) => {
 					const formattedDate = dateI18n(
 						getSettings().formats.datetimeAbbreviated,
@@ -355,12 +351,12 @@ export default function PagePages() {
 	const editPostAction = useEditPostAction();
 	const actions = useMemo(
 		() => [
+			editPostAction,
 			viewPostAction,
-			trashPostAction,
 			restorePostAction,
 			permanentlyDeletePostAction,
-			editPostAction,
 			postRevisionsAction,
+			trashPostAction,
 		],
 		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
 	);
@@ -430,7 +426,6 @@ export default function PagePages() {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
-				supportedLayouts={ SUPPORTED_LAYOUTS }
 			/>
 		</Page>
 	);

package/src/components/page-patterns/delete-category-menu-item.js

@@ -90,6 +90,13 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 				onCancel={ () => setIsModalOpen( false ) }
 				confirmButtonText={ __( 'Delete' ) }
 				className="edit-site-patterns__delete-modal"
+				title={ sprintf(
+					// translators: %s: The pattern category's name.
+					__( 'Delete "%s"?' ),
+					decodeEntities( category.label )
+				) }
+				size="medium"
+				__experimentalHideHeader={ false }
 			>
 				{ sprintf(
 					// translators: %s: The pattern category's name.

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

@@ -46,7 +46,7 @@ import {
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	ENUMERATION_TYPE,
-	OPERATOR_IN,
+	OPERATOR_IS,
 } from '../../utils/constants';
 import {
 	exportJSONaction,
@@ -210,6 +210,26 @@ function Title( { item, categoryId } ) {
 	}
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
+			<Flex
+				as="div"
+				gap={ 0 }
+				justify="left"
+				className="edit-site-patterns__pattern-title"
+			>
+				{ item.type === PATTERN_TYPES.theme ? (
+					item.title
+				) : (
+					<Button
+						variant="link"
+						onClick={ onClick }
+						// Required for the grid's roving tab index system.
+						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+						tabIndex="-1"
+					>
+						{ item.title || item.name }
+					</Button>
+				) }
+			</Flex>
 			{ itemIcon && ! isNonUserPattern && (
 				<Tooltip
 					placement="top"
@@ -235,26 +255,6 @@ function Title( { item, categoryId } ) {
 					/>
 				</Tooltip>
 			) }
-			<Flex
-				as="div"
-				gap={ 0 }
-				justify="left"
-				className="edit-site-patterns__pattern-title"
-			>
-				{ item.type === PATTERN_TYPES.theme ? (
-					item.title
-				) : (
-					<Button
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ item.title || item.name }
-					</Button>
-				) }
-			</Flex>
 		</HStack>
 	);
 }
@@ -296,7 +296,6 @@ export default function DataviewsPatterns() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				getValue: ( { item } ) => item.title,
 				render: ( { item } ) => (
 					<Title item={ item } categoryId={ categoryId } />
 				),
@@ -323,7 +322,7 @@ export default function DataviewsPatterns() {
 				type: ENUMERATION_TYPE,
 				elements: SYNC_FILTERS,
 				filterBy: {
-					operators: [ OPERATOR_IN ],
+					operators: [ OPERATOR_IS ],
 					isPrimary: true,
 				},
 				enableSorting: false,
@@ -413,7 +412,7 @@ export default function DataviewsPatterns() {
 					isLoading={ isResolving }
 					view={ view }
 					onChangeView={ onChangeView }
-					deferredRendering={ true }
+					deferredRendering
 					supportedLayouts={ [ LAYOUT_GRID ] }
 				/>
 			</Page>

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

@@ -50,7 +50,8 @@ const templatePartToPattern = ( templatePart ) => ( {
 
 const selectTemplatePartsAsPatterns = createSelector(
 	( select, categoryId, search = '' ) => {
-		const { getEntityRecords, getIsResolving } = select( coreStore );
+		const { getEntityRecords, isResolving: isResolvingSelector } =
+			select( coreStore );
 		const { __experimentalGetDefaultTemplatePartAreas } =
 			select( editorStore );
 		const query = { per_page: -1 };
@@ -78,7 +79,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 			);
 		};
 
-		const isResolving = getIsResolving( 'getEntityRecords', [
+		const isResolving = isResolvingSelector( 'getEntityRecords', [
 			'postType',
 			TEMPLATE_PART_POST_TYPE,
 			query,
@@ -99,7 +100,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 				per_page: -1,
 			}
 		),
-		select( coreStore ).getIsResolving( 'getEntityRecords', [
+		select( coreStore ).isResolving( 'getEntityRecords', [
 			'postType',
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 },
@@ -111,7 +112,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 const selectThemePatterns = createSelector(
 	( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
-		const { getIsResolving } = select( coreStore );
+		const { isResolving: isResolvingSelector } = select( coreStore );
 		const settings = getSettings();
 		const blockPatterns =
 			settings.__experimentalAdditionalBlockPatterns ??
@@ -137,11 +138,14 @@ const selectThemePatterns = createSelector(
 					__unstableSkipMigrationLogs: true,
 				} ),
 			} ) );
-		return { patterns, isResolving: getIsResolving( 'getBlockPatterns' ) };
+		return {
+			patterns,
+			isResolving: isResolvingSelector( 'getBlockPatterns' ),
+		};
 	},
 	( select ) => [
 		select( coreStore ).getBlockPatterns(),
-		select( coreStore ).getIsResolving( 'getBlockPatterns' ),
+		select( coreStore ).isResolving( 'getBlockPatterns' ),
 		unlock( select( editSiteStore ) ).getSettings(),
 	]
 );
@@ -228,8 +232,11 @@ const convertPatternPostToItem = ( patternPost, categories ) => ( {
 
 const selectUserPatterns = createSelector(
 	( select, syncStatus, search = '' ) => {
-		const { getEntityRecords, getIsResolving, getUserPatternCategories } =
-			select( coreStore );
+		const {
+			getEntityRecords,
+			isResolving: isResolvingSelector,
+			getUserPatternCategories,
+		} = select( coreStore );
 
 		const query = { per_page: -1 };
 		const patternPosts = getEntityRecords(
@@ -248,7 +255,7 @@ const selectUserPatterns = createSelector(
 			  )
 			: EMPTY_PATTERN_LIST;
 
-		const isResolving = getIsResolving( 'getEntityRecords', [
+		const isResolving = isResolvingSelector( 'getEntityRecords', [
 			'postType',
 			PATTERN_TYPES.user,
 			query,
@@ -277,7 +284,7 @@ const selectUserPatterns = createSelector(
 		select( coreStore ).getEntityRecords( 'postType', PATTERN_TYPES.user, {
 			per_page: -1,
 		} ),
-		select( coreStore ).getIsResolving( 'getEntityRecords', [
+		select( coreStore ).isResolving( 'getEntityRecords', [
 			'postType',
 			PATTERN_TYPES.user,
 			{ per_page: -1 },

package/src/components/{list/added-by.js → page-templates-template-parts/hooks.js}

@@ -1,28 +1,19 @@
-// @ts-check
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import {
 	commentAuthorAvatar as authorIcon,
 	layout as themeIcon,
 	plugins as pluginIcon,
 	globe as globeIcon,
 } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../utils/constants';
+import { TEMPLATE_ORIGINS } from '../../utils/constants';
 
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
@@ -107,59 +98,3 @@ export function useAddedBy( postType, postId ) {
 		[ postType, postId ]
 	);
 }
-
-/**
- * @param {Object} props
- * @param {string} props.imageUrl
- */
-export function AvatarImage( { imageUrl } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-
-	return (
-		<div
-			className={ classnames( 'edit-site-list-added-by__avatar', {
-				'is-loaded': isImageLoaded,
-			} ) }
-		>
-			<img
-				onLoad={ () => setIsImageLoaded( true ) }
-				alt=""
-				src={ imageUrl }
-			/>
-		</div>
-	);
-}
-
-/**
- * @param {Object}       props
- * @param {TemplateType} props.postType The template post type.
- * @param {number}       props.postId   The template post id.
- */
-export default function AddedBy( { postType, postId } ) {
-	const { text, icon, imageUrl, isCustomized } = useAddedBy(
-		postType,
-		postId
-	);
-
-	return (
-		<HStack alignment="left">
-			{ imageUrl ? (
-				<AvatarImage imageUrl={ imageUrl } />
-			) : (
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>
-				{ text }
-				{ isCustomized && (
-					<span className="edit-site-list-added-by__customized-info">
-						{ postType === TEMPLATE_POST_TYPE
-							? _x( 'Customized', 'template' )
-							: _x( 'Customized', 'template part' ) }
-					</span>
-				) }
-			</span>
-		</HStack>
-	);
-}

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import removeAccents from 'remove-accents';
 
 /**
@@ -34,13 +35,13 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
-import { useAddedBy, AvatarImage } from '../list/added-by';
+import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	ENUMERATION_TYPE,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
@@ -62,10 +63,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
-const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews
-	? [ LAYOUT_TABLE, LAYOUT_GRID, LAYOUT_LIST ]
-	: [ LAYOUT_TABLE, LAYOUT_GRID ];
-
 const defaultConfigPerViewType = {
 	[ LAYOUT_TABLE ]: {
 		primaryField: 'title',
@@ -124,14 +121,30 @@ function Title( { item, viewType } ) {
 }
 
 function AuthorField( { item, viewType } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
 	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
 		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && <AvatarImage imageUrl={ imageUrl } /> }
+			{ withIcon && imageUrl && (
+				<div
+					className={ classnames(
+						'page-templates-author-field__avatar',
+						{
+							'is-loaded': isImageLoaded,
+						}
+					) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
 			{ withIcon && ! imageUrl && (
-				<div className="edit-site-list-added-by__icon">
+				<div className="page-templates-author-field__icon">
 					<Icon icon={ icon } />
 				</div>
 			) }
@@ -192,9 +205,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
-		const usedType = window?.__experimentalAdminViews
-			? layout ?? DEFAULT_VIEW.type
-			: DEFAULT_VIEW.type;
+		const usedType = layout ?? DEFAULT_VIEW.type;
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
@@ -204,8 +215,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 					? [
 							{
 								field: 'author',
-								operator: 'in',
-								value: activeView,
+								operator: 'isAny',
+								value: [ activeView ],
 							},
 					  ]
 					: [],
@@ -220,8 +231,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 					? [
 							{
 								field: 'author',
-								operator: 'in',
-								value: activeView,
+								operator: OPERATOR_IS_ANY,
+								value: [ activeView ],
 							},
 					  ]
 					: [],
@@ -292,7 +303,6 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			_fields.push( {
 				header: __( 'Description' ),
 				id: 'description',
-				getValue: ( { item } ) => item.description,
 				render: ( { item } ) => {
 					return item.description ? (
 						<span className="page-templates-description">
@@ -361,19 +371,19 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			view.filters.forEach( ( filter ) => {
 				if (
 					filter.field === 'author' &&
-					filter.operator === OPERATOR_IN &&
-					!! filter.value
+					filter.operator === OPERATOR_IS_ANY &&
+					filter?.value?.length > 0
 				) {
 					filteredData = filteredData.filter( ( item ) => {
-						return item.author_text === filter.value;
+						return filter.value.includes( item.author_text );
 					} );
 				} else if (
 					filter.field === 'author' &&
-					filter.operator === OPERATOR_NOT_IN &&
-					!! filter.value
+					filter.operator === OPERATOR_IS_NONE &&
+					filter?.value?.length > 0
 				) {
 					filteredData = filteredData.filter( ( item ) => {
-						return item.author_text !== filter.value;
+						return ! filter.value.includes( item.author_text );
 					} );
 				}
 			} );
@@ -399,9 +409,9 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 	const actions = useMemo(
 		() => [
 			resetTemplateAction,
-			deleteTemplateAction,
 			renameTemplateAction,
 			postRevisionsAction,
+			deleteTemplateAction,
 		],
 		[ resetTemplateAction ]
 	);
@@ -457,7 +467,6 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
 				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
-				supportedLayouts={ SUPPORTED_LAYOUTS }
 			/>
 		</Page>
 	);

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

@@ -64,3 +64,51 @@
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}
 }
+
+
+.page-templates-author-field__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: center;
+	display: flex;
+
+	img {
+		width: 20px;
+		height: 20px;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+		border-radius: 100%;
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+.page-templates-author-field__icon {
+	display: flex;
+	flex-shrink: 0;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.edit-site-list__rename-modal {
+	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
+	z-index: z-index(".edit-site-list__rename-modal");
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+}

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

@@ -300,6 +300,7 @@ function ResizableFrame( {
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
+			showHandle={ false } // Do not show the default handle, as we're using a custom one.
 		>
 			<motion.div
 				className="edit-site-resizable-frame__inner-content"

package/src/components/revisions/index.js

@@ -66,7 +66,7 @@ function Revisions( { userConfig, blocks } ) {
 		<EditorCanvasContainer
 			title={ __( 'Revisions' ) }
 			closeButtonLabel={ __( 'Close revisions' ) }
-			enableResizing={ true }
+			enableResizing
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"

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

@@ -77,26 +77,47 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 	if ( isPreviewingTheme() ) {
 		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
 	}
-	return <EntitiesSavedStates close={ onClose } />;
+	return (
+		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+	);
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
-		const { isSaveViewOpened, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
+	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				isSavingEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const { isSaveViewOpened, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isSaveViewOpen: isSaveViewOpened(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+			// The currently selected entity to display.
+			// Typically template or template part in the site editor.
+			return {
+				isSaveViewOpen: isSaveViewOpened(),
+				canvasMode: getCanvasMode(),
+				isDirty: dirtyEntityRecords.length > 0,
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+			};
+		},
+		[]
+	);
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
 
@@ -114,7 +135,8 @@ export default function SavePanel() {
 			</Modal>
 		) : null;
 	}
-
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
 			className={ classnames( 'edit-site-layout__actions', {
@@ -122,19 +144,26 @@ export default function SavePanel() {
 			} ) }
 			ariaLabel={ __( 'Save panel' ) }
 		>
-			{ isSaveViewOpen ? (
-				<_EntitiesSavedStates onClose={ onClose } />
-			) : (
-				<div className="edit-site-editor__toggle-save-panel">
-					<Button
-						variant="secondary"
-						className="edit-site-editor__toggle-save-panel-button"
-						onClick={ () => setIsSaveViewOpened( true ) }
-						aria-expanded={ false }
-					>
-						{ __( 'Open save panel' ) }
-					</Button>
-				</div>
+			<div
+				className={ classnames( 'edit-site-editor__toggle-save-panel', {
+					'screen-reader-text': isSaveViewOpen,
+				} ) }
+			>
+				<Button
+					variant="secondary"
+					className={ classnames(
+						'edit-site-editor__toggle-save-panel-button'
+					) }
+					onClick={ () => setIsSaveViewOpened( true ) }
+					aria-haspopup={ 'dialog' }
+					disabled={ disabled }
+					__experimentalIsFocusable
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+			{ isSaveViewOpen && (
+				<_EntitiesSavedStates onClose={ onClose } renderDialog />
 			) }
 		</NavigableRegion>
 	);