@wordpress/editor 14.17.1 → 14.19.0

package/src/components/editor/index.js

@@ -31,12 +31,17 @@ function Editor( {
 	extraSidebarPanels,
 	...props
 } ) {
-	const { post, template, hasLoadedPost } = useSelect(
+	const { post, template, hasLoadedPost, error } = useSelect(
 		( select ) => {
-			const { getEntityRecord, hasFinishedResolution } =
-				select( coreStore );
+			const {
+				getEntityRecord,
+				getResolutionError,
+				hasFinishedResolution,
+			} = select( coreStore );
+
+			const postArgs = [ 'postType', postType, postId ];
 			return {
-				post: getEntityRecord( 'postType', postType, postId ),
+				post: getEntityRecord( ...postArgs ),
 				template: templateId
 					? getEntityRecord(
 							'postType',
@@ -44,11 +49,12 @@ function Editor( {
 							templateId
 					  )
 					: undefined,
-				hasLoadedPost: hasFinishedResolution( 'getEntityRecord', [
-					'postType',
-					postType,
-					postId,
-				] ),
+				hasLoadedPost: hasFinishedResolution(
+					'getEntityRecord',
+					postArgs
+				),
+				error: getResolutionError( 'getEntityRecord', postArgs )
+					?.message,
 			};
 		},
 		[ postType, postId, templateId ]
@@ -57,10 +63,15 @@ function Editor( {
 	return (
 		<>
 			{ hasLoadedPost && ! post && (
-				<Notice status="warning" isDismissible={ false }>
-					{ __(
-						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-					) }
+				<Notice
+					status={ !! error ? 'error' : 'warning' }
+					isDismissible={ false }
+				>
+					{ ! error
+						? __(
+								"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+						  )
+						: error }
 				</Notice>
 			) }
 			{ !! post && (

package/src/components/entities-saved-states/entity-record-item.js

@@ -64,6 +64,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 					}
 					checked={ checked }
 					onChange={ onChange }
+					className="entities-saved-states__change-control"
 				/>
 			</PanelRow>
 			{ hasPostMetaChanges && (

package/src/components/entities-saved-states/entity-type-list.js

@@ -26,7 +26,7 @@ function getEntityDescription( entity, count ) {
 				: __( 'These changes will affect your whole site.' );
 		case 'wp_template':
 			return __(
-				'This change will affect pages and posts that use this template.'
+				'This change will affect other parts of your site that use this template.'
 			);
 		case 'page':
 		case 'post':
@@ -94,7 +94,11 @@ export default function EntityTypeList( {
 	}
 
 	return (
-		<PanelBody title={ entityLabel } initialOpen>
+		<PanelBody
+			title={ entityLabel }
+			initialOpen
+			className="entities-saved-states__panel-body"
+		>
 			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				return (

package/src/components/entities-saved-states/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -32,15 +37,21 @@ function identity( values ) {
  * @param {Object}   props              The component props.
  * @param {Function} props.close        The function to close the dialog.
  * @param {boolean}  props.renderDialog Whether to render the component with modal dialog behavior.
+ * @param {string}   props.variant      Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
  *
  * @return {React.ReactNode} The rendered component.
  */
-export default function EntitiesSavedStates( { close, renderDialog } ) {
+export default function EntitiesSavedStates( {
+	close,
+	renderDialog,
+	variant,
+} ) {
 	const isDirtyProps = useIsDirty();
 	return (
 		<EntitiesSavedStatesExtensible
 			close={ close }
 			renderDialog={ renderDialog }
+			variant={ variant }
 			{ ...isDirtyProps }
 		/>
 	);
@@ -60,6 +71,7 @@ export default function EntitiesSavedStates( { close, renderDialog } ) {
  * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
  * @param {Function} props.setUnselectedEntities Function to set unselected entities.
  * @param {Array}    props.unselectedEntities    Array of unselected entities.
+ * @param {string}   props.variant               Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
  *
  * @return {React.ReactNode} The rendered component.
  */
@@ -74,6 +86,7 @@ export function EntitiesSavedStatesExtensible( {
 	isDirty,
 	setUnselectedEntities,
 	unselectedEntities,
+	variant = 'default',
 } ) {
 	const saveButtonRef = useRef();
 	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
@@ -109,83 +122,100 @@ export function EntitiesSavedStatesExtensible( {
 	const [ saveDialogRef, saveDialogProps ] = useDialog( {
 		onClose: () => dismissPanel(),
 	} );
-	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
-	const dialogDescription = useInstanceId(
+	const dialogLabelId = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'entities-saved-states__panel-label'
+	);
+	const dialogDescriptionId = useInstanceId(
 		EntitiesSavedStatesExtensible,
-		'description'
+		'entities-saved-states__panel-description'
 	);
 
 	const selectItemsToSaveDescription = !! dirtyEntityRecords.length
 		? __( 'Select the items you want to save.' )
 		: undefined;
 
+	const isInline = variant === 'inline';
+
+	const actionButtons = (
+		<>
+			<FlexItem
+				isBlock={ isInline ? false : true }
+				as={ Button }
+				variant={ isInline ? 'tertiary' : 'secondary' }
+				size={ isInline ? undefined : 'compact' }
+				onClick={ dismissPanel }
+			>
+				{ __( 'Cancel' ) }
+			</FlexItem>
+			<FlexItem
+				isBlock={ isInline ? false : true }
+				as={ Button }
+				ref={ saveButtonRef }
+				variant="primary"
+				size={ isInline ? undefined : 'compact' }
+				disabled={ ! saveEnabled }
+				accessibleWhenDisabled
+				onClick={ () =>
+					saveDirtyEntities( {
+						onSave,
+						dirtyEntityRecords,
+						entitiesToSkip: unselectedEntities,
+						close,
+					} )
+				}
+				className="editor-entities-saved-states__save-button"
+			>
+				{ saveLabel }
+			</FlexItem>
+		</>
+	);
+
 	return (
 		<div
 			ref={ renderDialog ? saveDialogRef : undefined }
 			{ ...( renderDialog && saveDialogProps ) }
-			className="entities-saved-states__panel"
+			className={ clsx( 'entities-saved-states__panel', {
+				'is-inline': isInline,
+			} ) }
 			role={ renderDialog ? 'dialog' : undefined }
-			aria-labelledby={ renderDialog ? dialogLabel : undefined }
-			aria-describedby={ renderDialog ? dialogDescription : undefined }
+			aria-labelledby={ renderDialog ? dialogLabelId : undefined }
+			aria-describedby={ renderDialog ? dialogDescriptionId : undefined }
 		>
-			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					size="compact"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					ref={ saveButtonRef }
-					variant="primary"
-					size="compact"
-					disabled={ ! saveEnabled }
-					accessibleWhenDisabled
-					onClick={ () =>
-						saveDirtyEntities( {
-							onSave,
-							dirtyEntityRecords,
-							entitiesToSkip: unselectedEntities,
-							close,
-						} )
-					}
-					className="editor-entities-saved-states__save-button"
-				>
-					{ saveLabel }
-				</FlexItem>
-			</Flex>
+			{ ! isInline && (
+				<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+					{ actionButtons }
+				</Flex>
+			) }
 
 			<div className="entities-saved-states__text-prompt">
-				<div
-					className="entities-saved-states__text-prompt--header-wrapper"
-					id={ renderDialog ? dialogLabel : undefined }
-				>
-					<strong className="entities-saved-states__text-prompt--header">
+				<div className="entities-saved-states__text-prompt--header-wrapper">
+					<strong
+						id={ renderDialog ? dialogLabelId : undefined }
+						className="entities-saved-states__text-prompt--header"
+					>
 						{ __( 'Are you ready to save?' ) }
 					</strong>
-					{ additionalPrompt }
 				</div>
-				<p id={ renderDialog ? dialogDescription : undefined }>
-					{ isDirty
-						? createInterpolateElement(
-								sprintf(
-									/* translators: %d: number of site changes waiting to be saved. */
-									_n(
-										'There is <strong>%d site change</strong> waiting to be saved.',
-										'There are <strong>%d site changes</strong> waiting to be saved.',
+				<div id={ renderDialog ? dialogDescriptionId : undefined }>
+					{ additionalPrompt }
+					<p className="entities-saved-states__text-prompt--changes-count">
+						{ isDirty
+							? createInterpolateElement(
+									sprintf(
+										/* translators: %d: number of site changes waiting to be saved. */
+										_n(
+											'There is <strong>%d site change</strong> waiting to be saved.',
+											'There are <strong>%d site changes</strong> waiting to be saved.',
+											dirtyEntityRecords.length
+										),
 										dirtyEntityRecords.length
 									),
-									dirtyEntityRecords.length
-								),
-								{ strong: <strong /> }
-						  )
-						: selectItemsToSaveDescription }
-				</p>
+									{ strong: <strong /> }
+							  )
+							: selectItemsToSaveDescription }
+					</p>
+				</div>
 			</div>
 
 			{ sortedPartitionedSavables.map( ( list ) => {
@@ -198,6 +228,16 @@ export function EntitiesSavedStatesExtensible( {
 					/>
 				);
 			} ) }
+
+			{ isInline && (
+				<Flex
+					direction="row"
+					justify="flex-end"
+					className="entities-saved-states__panel-footer"
+				>
+					{ actionButtons }
+				</Flex>
+			) }
 		</div>
 	);
 }

package/src/components/entities-saved-states/style.scss

@@ -16,14 +16,49 @@
 	}
 }
 
-.entities-saved-states__description-heading {
-	font-size: $default-font-size;
+.entities-saved-states__panel.is-inline {
+	.entities-saved-states__text-prompt {
+		padding: 0;
+	}
+
+	.entities-saved-states__panel-body {
+		padding-left: 0;
+		padding-right: 0;
+		border: 0;
+
+		> h2 {
+			margin-left: -1 * $grid-unit-20;
+			margin-right: -1 * $grid-unit-20;
+			margin-bottom: 0;
+
+			button {
+				font-size: $font-size-x-small;
+				text-transform: uppercase;
+			}
+		}
+	}
+
+	.entities-saved-states__text-prompt--header-wrapper {
+		display: none;
+	}
+
+	.entities-saved-states__text-prompt--changes-count {
+		margin-top: 0;
+		margin-bottom: $grid-unit-10;
+	}
+
+	.entities-saved-states__panel-footer {
+		margin-top: $grid-unit-20;
+	}
+}
+
+.entities-saved-states__change-control {
+	flex: 1;
 }
 
 .entities-saved-states__changes {
-	color: $gray-700;
-	font-size: $helptext-font-size;
-	margin: $grid-unit-10 $grid-unit-20 0 $grid-unit-20;
+	font-size: $default-font-size;
+	margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30;
 	list-style: disc;
 
 	li {

package/src/components/page-attributes/parent.js

@@ -61,47 +61,63 @@ export const getItemPriority = ( name, searchValue ) => {
 export function PageAttributesParent() {
 	const { editPost } = useDispatch( editorStore );
 	const [ fieldValue, setFieldValue ] = useState( false );
-	const { isHierarchical, parentPostId, parentPostTitle, pageItems } =
-		useSelect(
-			( select ) => {
-				const { getPostType, getEntityRecords, getEntityRecord } =
-					select( coreStore );
-				const { getCurrentPostId, getEditedPostAttribute } =
-					select( editorStore );
-				const postTypeSlug = getEditedPostAttribute( 'type' );
-				const pageId = getEditedPostAttribute( 'parent' );
-				const pType = getPostType( postTypeSlug );
-				const postId = getCurrentPostId();
-				const postIsHierarchical = pType?.hierarchical ?? false;
-				const query = {
-					per_page: 100,
-					exclude: postId,
-					parent_exclude: postId,
-					orderby: 'menu_order',
-					order: 'asc',
-					_fields: 'id,title,parent',
-				};
+	const {
+		isHierarchical,
+		parentPostId,
+		parentPostTitle,
+		pageItems,
+		isLoading,
+	} = useSelect(
+		( select ) => {
+			const {
+				getPostType,
+				getEntityRecords,
+				getEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const { getCurrentPostId, getEditedPostAttribute } =
+				select( editorStore );
+			const postTypeSlug = getEditedPostAttribute( 'type' );
+			const pageId = getEditedPostAttribute( 'parent' );
+			const pType = getPostType( postTypeSlug );
+			const postId = getCurrentPostId();
+			const postIsHierarchical = pType?.hierarchical ?? false;
+			const query = {
+				per_page: 100,
+				exclude: postId,
+				parent_exclude: postId,
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: 'id,title,parent',
+			};
 
-				// Perform a search when the field is changed.
-				if ( !! fieldValue ) {
-					query.search = fieldValue;
-				}
+			// Perform a search when the field is changed.
+			if ( !! fieldValue ) {
+				query.search = fieldValue;
+			}
 
-				const parentPost = pageId
-					? getEntityRecord( 'postType', postTypeSlug, pageId )
-					: null;
+			const parentPost = pageId
+				? getEntityRecord( 'postType', postTypeSlug, pageId )
+				: null;
 
-				return {
-					isHierarchical: postIsHierarchical,
-					parentPostId: pageId,
-					parentPostTitle: parentPost ? getTitle( parentPost ) : '',
-					pageItems: postIsHierarchical
-						? getEntityRecords( 'postType', postTypeSlug, query )
-						: null,
-				};
-			},
-			[ fieldValue ]
-		);
+			return {
+				isHierarchical: postIsHierarchical,
+				parentPostId: pageId,
+				parentPostTitle: parentPost ? getTitle( parentPost ) : '',
+				pageItems: postIsHierarchical
+					? getEntityRecords( 'postType', postTypeSlug, query )
+					: null,
+				isLoading: postIsHierarchical
+					? isResolving( 'getEntityRecords', [
+							'postType',
+							postTypeSlug,
+							query,
+					  ] )
+					: false,
+			};
+		},
+		[ fieldValue ]
+	);
 
 	const parentOptions = useMemo( () => {
 		const getOptionsFromTree = ( tree, level = 0 ) => {
@@ -187,6 +203,7 @@ export function PageAttributesParent() {
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleChange }
 			hideLabelFromVision
+			isLoading={ isLoading }
 		/>
 	);
 }

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

@@ -20,57 +20,39 @@ import { usePostActions } from './actions';
 
 const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
-function useEditedEntityRecordsWithPermissions( postType, postIds ) {
-	const { items, permissions } = useSelect(
+export default function PostActions( { postType, postId, onActionPerformed } ) {
+	const [ activeModalAction, setActiveModalAction ] = useState( null );
+
+	const { item, permissions } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getEntityRecordPermissions } =
 				unlock( select( coreStore ) );
 			return {
-				items: postIds.map( ( postId ) =>
-					getEditedEntityRecord( 'postType', postType, postId )
-				),
-				permissions: postIds.map( ( postId ) =>
-					getEntityRecordPermissions( 'postType', postType, postId )
+				item: getEditedEntityRecord( 'postType', postType, postId ),
+				permissions: getEntityRecordPermissions(
+					'postType',
+					postType,
+					postId
 				),
 			};
 		},
-		[ postIds, postType ]
+		[ postId, postType ]
 	);
-
-	return useMemo( () => {
-		return items.map( ( item, index ) => ( {
+	const itemWithPermissions = useMemo( () => {
+		return {
 			...item,
-			permissions: permissions[ index ],
-		} ) );
-	}, [ items, permissions ] );
-}
-
-export default function PostActions( { postType, postId, onActionPerformed } ) {
-	const [ activeModalAction, setActiveModalAction ] = useState( null );
-	const _postIds = useMemo( () => {
-		if ( Array.isArray( postId ) ) {
-			return postId;
-		}
-		return postId ? [ postId ] : [];
-	}, [ postId ] );
-
-	const itemsWithPermissions = useEditedEntityRecordsWithPermissions(
-		postType,
-		_postIds
-	);
+			permissions,
+		};
+	}, [ item, permissions ] );
 	const allActions = usePostActions( { postType, onActionPerformed } );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
 			return (
-				( ! action.isEligible ||
-					itemsWithPermissions.some( ( itemWithPermissions ) =>
-						action.isEligible( itemWithPermissions )
-					) ) &&
-				( itemsWithPermissions.length < 2 || action.supportsBulk )
+				! action.isEligible || action.isEligible( itemWithPermissions )
 			);
 		} );
-	}, [ allActions, itemsWithPermissions ] );
+	}, [ allActions, itemWithPermissions ] );
 
 	return (
 		<>
@@ -90,7 +72,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 				<Menu.Popover>
 					<ActionsDropdownMenuGroup
 						actions={ actions }
-						items={ itemsWithPermissions }
+						items={ [ itemWithPermissions ] }
 						setActiveModalAction={ setActiveModalAction }
 					/>
 				</Menu.Popover>
@@ -98,7 +80,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 			{ !! activeModalAction && (
 				<ActionModal
 					action={ activeModalAction }
-					items={ itemsWithPermissions }
+					items={ [ itemWithPermissions ] }
 					closeModal={ () => setActiveModalAction( null ) }
 				/>
 			) }

package/src/components/post-author/check.js

@@ -23,11 +23,14 @@ import { AUTHORS_QUERY } from './constants';
 export default function PostAuthorCheck( { children } ) {
 	const { hasAssignAuthorAction, hasAuthors } = useSelect( ( select ) => {
 		const post = select( editorStore ).getCurrentPost();
-		const authors = select( coreStore ).getUsers( AUTHORS_QUERY );
+		const canAssignAuthor = post?._links?.[ 'wp:action-assign-author' ]
+			? true
+			: false;
 		return {
-			hasAssignAuthorAction:
-				post._links?.[ 'wp:action-assign-author' ] ?? false,
-			hasAuthors: authors?.length >= 1,
+			hasAssignAuthorAction: canAssignAuthor,
+			hasAuthors: canAssignAuthor
+				? select( coreStore ).getUsers( AUTHORS_QUERY )?.length >= 1
+				: false,
 		};
 	}, [] );
 

package/src/components/post-author/combobox.js

@@ -17,7 +17,8 @@ export default function PostAuthorCombobox() {
 	const [ fieldValue, setFieldValue ] = useState();
 
 	const { editPost } = useDispatch( editorStore );
-	const { authorId, authorOptions } = useAuthorsQuery( fieldValue );
+	const { authorId, authorOptions, isLoading } =
+		useAuthorsQuery( fieldValue );
 
 	/**
 	 * Handle author selection.
@@ -51,6 +52,7 @@ export default function PostAuthorCombobox() {
 			onChange={ handleSelect }
 			allowReset={ false }
 			hideLabelFromVision
+			isLoading={ isLoading }
 		/>
 	);
 }

package/src/components/post-author/hook.js

@@ -14,9 +14,9 @@ import { store as editorStore } from '../../store';
 import { AUTHORS_QUERY, BASE_QUERY } from './constants';
 
 export function useAuthorsQuery( search ) {
-	const { authorId, authors, postAuthor } = useSelect(
+	const { authorId, authors, postAuthor, isLoading } = useSelect(
 		( select ) => {
-			const { getUser, getUsers } = select( coreStore );
+			const { getUser, getUsers, isResolving } = select( coreStore );
 			const { getEditedPostAttribute } = select( editorStore );
 			const _authorId = getEditedPostAttribute( 'author' );
 			const query = { ...AUTHORS_QUERY };
@@ -30,6 +30,7 @@ export function useAuthorsQuery( search ) {
 				authorId: _authorId,
 				authors: getUsers( query ),
 				postAuthor: getUser( _authorId, BASE_QUERY ),
+				isLoading: isResolving( 'getUsers', [ query ] ),
 			};
 		},
 		[ search ]
@@ -68,5 +69,5 @@ export function useAuthorsQuery( search ) {
 		return [ ...currentAuthor, ...fetchedAuthors ];
 	}, [ authors, postAuthor ] );
 
-	return { authorId, authorOptions, postAuthor };
+	return { authorId, authorOptions, postAuthor, isLoading };
 }

package/src/components/post-card-panel/index.js

@@ -118,11 +118,13 @@ export default function PostCardPanel( {
 						<Badge>{ pageTypeBadge }</Badge>
 					) }
 				</Text>
-				<PostActions
-					postType={ postType }
-					postId={ postId }
-					onActionPerformed={ onActionPerformed }
-				/>
+				{ postIds.length === 1 && (
+					<PostActions
+						postType={ postType }
+						postId={ postIds[ 0 ] }
+						onActionPerformed={ onActionPerformed }
+					/>
+				) }
 			</HStack>
 			{ postIds.length > 1 && (
 				<Text className="editor-post-card-panel__description">

package/src/components/post-featured-image/index.js

@@ -125,6 +125,7 @@ function PostFeaturedImage( {
 				noticeOperations.removeAllNotices();
 				noticeOperations.createErrorNotice( message );
 			},
+			multiple: false,
 		} );
 	}
 
@@ -345,6 +346,7 @@ const applyWithDispatch = withDispatch(
 							noticeOperations.removeAllNotices();
 							noticeOperations.createErrorNotice( message );
 						},
+						multiple: false,
 					} );
 			},
 			onRemoveImage() {