@wordpress/editor 14.3.0 → 14.4.0

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

@@ -18,6 +18,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 
 /**
@@ -230,7 +231,7 @@ const trashPostAction = {
 	},
 };
 
-function useCanUserEligibilityCheckPostType( capability, resource, action ) {
+function useCanUserEligibilityCheckPostType( capability, postType, action ) {
 	const registry = useRegistry();
 	return useMemo(
 		() => ( {
@@ -238,20 +239,22 @@ function useCanUserEligibilityCheckPostType( capability, resource, action ) {
 			isEligible( item ) {
 				return (
 					action.isEligible( item ) &&
-					registry
-						.select( coreStore )
-						.canUser( capability, resource, item.id )
+					registry.select( coreStore ).canUser( capability, {
+						kind: 'postType',
+						name: postType,
+						id: item.id,
+					} )
 				);
 			},
 		} ),
-		[ action, registry, capability, resource ]
+		[ action, registry, capability, postType ]
 	);
 }
 
-function useTrashPostAction( resource ) {
+function useTrashPostAction( postType ) {
 	return useCanUserEligibilityCheckPostType(
 		'delete',
-		resource,
+		postType,
 		trashPostAction
 	);
 }
@@ -347,10 +350,10 @@ const permanentlyDeletePostAction = {
 	},
 };
 
-function usePermanentlyDeletePostAction( resource ) {
+function usePermanentlyDeletePostAction( postType ) {
 	return useCanUserEligibilityCheckPostType(
 		'delete',
-		resource,
+		postType,
 		permanentlyDeletePostAction
 	);
 }
@@ -462,10 +465,10 @@ const restorePostAction = {
 	},
 };
 
-function useRestorePostAction( resource ) {
+function useRestorePostAction( postType ) {
 	return useCanUserEligibilityCheckPostType(
 		'update',
-		resource,
+		postType,
 		restorePostAction
 	);
 }
@@ -623,22 +626,129 @@ const renamePostAction = {
 	},
 };
 
-function useRenamePostAction( resource ) {
+function useRenamePostAction( postType ) {
 	return useCanUserEligibilityCheckPostType(
 		'update',
-		resource,
+		postType,
 		renamePostAction
 	);
 }
 
+function ReorderModal( { items, closeModal, onActionPerformed } ) {
+	const [ item ] = items;
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const [ orderInput, setOrderInput ] = useState( item.menu_order );
+
+	async function onOrder( event ) {
+		event.preventDefault();
+		if (
+			! Number.isInteger( Number( orderInput ) ) ||
+			orderInput?.trim?.() === ''
+		) {
+			return;
+		}
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, {
+				menu_order: orderInput,
+			} );
+			closeModal();
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Order updated' ), {
+				type: 'snackbar',
+			} );
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the order' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+	const saveIsDisabled =
+		! Number.isInteger( Number( orderInput ) ) ||
+		orderInput?.trim?.() === '';
+	return (
+		<form onSubmit={ onOrder }>
+			<VStack spacing="5">
+				<div>
+					{ __(
+						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
+					) }
+				</div>
+				<NumberControl
+					__next40pxDefaultSize
+					label={ __( 'Order' ) }
+					help={ __( 'Set the page order.' ) }
+					value={ orderInput }
+					onChange={ setOrderInput }
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ saveIsDisabled }
+						__experimentalIsFocusable
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+function useReorderPagesAction( postType ) {
+	const supportsPageAttributes = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			const postTypeObject = getPostType( postType );
+
+			return !! postTypeObject?.supports?.[ 'page-attributes' ];
+		},
+		[ postType ]
+	);
+
+	return useMemo(
+		() =>
+			supportsPageAttributes && {
+				id: 'order-pages',
+				label: __( 'Order' ),
+				isEligible( { status } ) {
+					return status !== 'trash';
+				},
+				RenderModal: ReorderModal,
+			},
+		[ supportsPageAttributes ]
+	);
+}
+
 const useDuplicatePostAction = ( postType ) => {
-	const { userCanCreatePost } = useSelect(
+	const userCanCreatePost = useSelect(
 		( select ) => {
-			const { getPostType, canUser } = select( coreStore );
-			const resource = getPostType( postType )?.rest_base || '';
-			return {
-				userCanCreatePost: canUser( 'create', resource ),
-			};
+			return select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: postType,
+			} );
 		},
 		[ postType ]
 	);
@@ -824,11 +934,16 @@ export const duplicateTemplatePartAction = {
 		const blocks = useMemo( () => {
 			return (
 				item.blocks ??
-				parse( item.content.raw, {
-					__unstableSkipMigrationLogs: true,
-				} )
+				parse(
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				)
 			);
-		}, [ item?.content?.raw, item.blocks ] );
+		}, [ item.content, item.blocks ] );
 		const { createSuccessNotice } = useDispatch( noticesStore );
 		function onTemplatePartSuccess() {
 			createSuccessNotice(
@@ -863,7 +978,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		defaultActions,
 		postTypeObject,
 		userCanCreatePostType,
-		resource,
 		cachedCanUserResolvers,
 	} = useSelect(
 		( select ) => {
@@ -871,12 +985,13 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				select( coreStore );
 			const { getEntityActions } = unlock( select( editorStore ) );
 			const _postTypeObject = getPostType( postType );
-			const _resource = _postTypeObject?.rest_base || '';
 			return {
 				postTypeObject: _postTypeObject,
 				defaultActions: getEntityActions( 'postType', postType ),
-				userCanCreatePostType: canUser( 'create', _resource ),
-				resource: _resource,
+				userCanCreatePostType: canUser( 'create', {
+					kind: 'postType',
+					name: postType,
+				} ),
 				cachedCanUserResolvers: getCachedResolvers()?.canUser,
 			};
 		},
@@ -884,11 +999,12 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 	);
 
 	const duplicatePostAction = useDuplicatePostAction( postType );
-	const trashPostActionForPostType = useTrashPostAction( resource );
+	const trashPostActionForPostType = useTrashPostAction( postType );
 	const permanentlyDeletePostActionForPostType =
-		usePermanentlyDeletePostAction( resource );
-	const renamePostActionForPostType = useRenamePostAction( resource );
-	const restorePostActionForPostType = useRestorePostAction( resource );
+		usePermanentlyDeletePostAction( postType );
+	const renamePostActionForPostType = useRenamePostAction( postType );
+	const restorePostActionForPostType = useRestorePostAction( postType );
+	const reorderPagesAction = useReorderPagesAction( postType );
 	const isTemplateOrTemplatePart = [
 		TEMPLATE_POST_TYPE,
 		TEMPLATE_PART_POST_TYPE,
@@ -915,6 +1031,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
 			supportsTitle && renamePostActionForPostType,
+			reorderPagesAction,
 			! isTemplateOrTemplatePart && restorePostActionForPostType,
 			! isTemplateOrTemplatePart &&
 				! isPattern &&
@@ -946,7 +1063,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 							existingCallback( items, {
 								...argsObject,
 								onActionPerformed: ( _items ) => {
-									if ( argsObject.onActionPerformed ) {
+									if ( argsObject?.onActionPerformed ) {
 										argsObject.onActionPerformed( _items );
 									}
 									onActionPerformed(
@@ -994,6 +1111,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		isPattern,
 		postTypeObject?.viewable,
 		duplicatePostAction,
+		reorderPagesAction,
 		trashPostActionForPostType,
 		restorePostActionForPostType,
 		renamePostActionForPostType,

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

@@ -36,8 +36,14 @@ export default function PostCardPanel( { actions } ) {
 				getCurrentPostId,
 				__experimentalGetTemplateInfo,
 			} = select( editorStore );
+			const { canUser } = select( coreStore );
 			const { getEditedEntityRecord } = select( coreStore );
-			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEditedEntityRecord( 'root', 'site' )
+				: undefined;
 			const _type = getCurrentPostType();
 			const _id = getCurrentPostId();
 			const _record = getEditedEntityRecord( 'postType', _type, _id );
@@ -98,7 +104,7 @@ export default function PostCardPanel( { actions } ) {
 					{ title ? decodeEntities( title ) : __( 'No Title' ) }
 					{ isFrontPage && (
 						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Front Page' ) }
+							{ __( 'Homepage' ) }
 						</span>
 					) }
 					{ isPostsPage && (

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	RadioControl,
 	__experimentalText as Text,
@@ -18,7 +18,7 @@ const COMMENT_OPTIONS = [
 	{
 		label: (
 			<>
-				{ __( 'Open' ) }
+				{ _x( 'Open', 'Adjective: e.g. "Comments are open"' ) }
 				<Text variant="muted" size={ 12 }>
 					{ __( 'Visitors can add new comments and replies.' ) }
 				</Text>

package/src/components/post-content-information/index.js

@@ -25,8 +25,14 @@ export default function PostContentInformation() {
 	const { postContent } = useSelect( ( select ) => {
 		const { getEditedPostAttribute, getCurrentPostType, getCurrentPostId } =
 			select( editorStore );
+		const { canUser } = select( coreStore );
 		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEntityRecord( 'root', 'site' )
+			: undefined;
 		const postType = getCurrentPostType();
 		const _id = getCurrentPostId();
 		const isPostsPage = +_id === siteSettings?.page_for_posts;

package/src/components/post-discussion/panel.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	Dropdown,
 	Button,
@@ -62,9 +62,11 @@ function PostDiscussionToggle( { isOpen, onClick } ) {
 	let label;
 	if ( commentStatus === 'open' ) {
 		if ( pingStatus === 'open' ) {
-			label = __( 'Open' );
+			label = _x( 'Open', 'Adjective: e.g. "Comments are open"' );
 		} else {
-			label = trackbacksSupported ? __( 'Comments only' ) : __( 'Open' );
+			label = trackbacksSupported
+				? __( 'Comments only' )
+				: _x( 'Open', 'Adjective: e.g. "Comments are open"' );
 		}
 	} else if ( pingStatus === 'open' ) {
 		label = commentsSupported ? __( 'Pings only' ) : __( 'Pings enabled' );

package/src/components/post-excerpt/panel.js

@@ -148,7 +148,8 @@ function PrivateExcerpt() {
 						isPattern ||
 						( template &&
 							template.source === TEMPLATE_ORIGINS.custom &&
-							! template.has_theme_file ) ),
+							! template.has_theme_file &&
+							template.is_custom ) ),
 			};
 		}, [] );
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );

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

@@ -170,13 +170,16 @@ function PostFeaturedImage( {
 									aria-label={
 										! featuredImageId
 											? null
-											: __( 'Edit or replace the image' )
+											: __(
+													'Edit or replace the featured image'
+											  )
 									}
 									aria-describedby={
 										! featuredImageId
 											? null
 											: `editor-post-featured-image-${ featuredImageId }-describedby`
 									}
+									aria-haspopup="dialog"
 								>
 									{ !! featuredImageId && media && (
 										<img
@@ -197,6 +200,7 @@ function PostFeaturedImage( {
 										<Button
 											className="editor-post-featured-image__action"
 											onClick={ open }
+											aria-haspopup="dialog"
 										>
 											{ __( 'Replace' ) }
 										</Button>

package/src/components/post-last-revision/index.js

@@ -64,6 +64,7 @@ export function PrivatePostLastRevision() {
 					className="editor-private-post-last-revision__button"
 					text={ revisionsCount }
 					variant="tertiary"
+					size="compact"
 				/>
 			</PostPanelRow>
 		</PostLastRevisionCheck>

package/src/components/post-panel-row/style.scss

@@ -28,7 +28,6 @@
 		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
-		height: auto;
 		min-height: $button-size-compact;
 	}
 

package/src/components/post-publish-button/index.js

@@ -11,7 +11,6 @@ import { compose } from '@wordpress/compose';
  */
 import PublishButtonLabel from './label';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 const noop = () => {};
 
@@ -46,24 +45,14 @@ export class PostPublishButton extends Component {
 
 	createOnClick( callback ) {
 		return ( ...args ) => {
-			const {
-				hasNonPostEntityChanges,
-				hasPostMetaChanges,
-				setEntitiesSavedStatesCallback,
-				isPublished,
-			} = this.props;
+			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
+				this.props;
 			// If a post with non-post entities is published, but the user
 			// elects to not save changes to the non-post entities, those
 			// entities will still be dirty when the Publish button is clicked.
 			// We also need to check that the `setEntitiesSavedStatesCallback`
 			// prop was passed. See https://github.com/WordPress/gutenberg/pull/37383
-			//
-			// TODO: Explore how to manage `hasPostMetaChanges` and pre-publish workflow properly.
-			if (
-				( hasNonPostEntityChanges ||
-					( hasPostMetaChanges && isPublished ) ) &&
-				setEntitiesSavedStatesCallback
-			) {
+			if ( hasNonPostEntityChanges && setEntitiesSavedStatesCallback ) {
 				// The modal for multiple entity saving will open,
 				// hold the callback for saving/publishing the post
 				// so that we can call it if the post entity is checked.
@@ -226,8 +215,7 @@ export default compose( [
 			isSavingNonPostEntityChanges,
 			getEditedPostAttribute,
 			getPostEdits,
-			hasPostMetaChanges,
-		} = unlock( select( editorStore ) );
+		} = select( editorStore );
 		return {
 			isSaving: isSavingPost(),
 			isAutoSaving: isAutosavingPost(),
@@ -244,7 +232,6 @@ export default compose( [
 			postStatus: getEditedPostAttribute( 'status' ),
 			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
-			hasPostMetaChanges: hasPostMetaChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
 	} ),

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -18,7 +18,10 @@ function MaybeCategoryPanel() {
 		const postType = select( editorStore ).getCurrentPostType();
 		const { canUser, getEntityRecord, getTaxonomy } = select( coreStore );
 		const categoriesTaxonomy = getTaxonomy( 'category' );
-		const defaultCategoryId = canUser( 'read', 'settings' )
+		const defaultCategoryId = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
 			? getEntityRecord( 'root', 'site' )?.default_category
 			: undefined;
 		const defaultCategory = defaultCategoryId

package/src/components/post-publish-panel/maybe-tags-panel.js

@@ -28,7 +28,7 @@ const TagsPanel = () => {
 					'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'
 				) }
 			</p>
-			<FlatTermSelector slug="post_tag" />
+			<FlatTermSelector slug="post_tag" __nextHasNoMarginBottom />
 		</PanelBody>
 	);
 };

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

@@ -16,6 +16,13 @@ import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
+import {
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,13 +38,13 @@ import PostSticky from '../post-sticky';
 import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
-const labels = {
-	'auto-draft': __( 'Draft' ),
-	draft: __( 'Draft' ),
-	pending: __( 'Pending' ),
-	private: __( 'Private' ),
-	future: __( 'Scheduled' ),
-	publish: __( 'Published' ),
+const postStatusesInfo = {
+	'auto-draft': { label: __( 'Draft' ), icon: drafts },
+	draft: { label: __( 'Draft' ), icon: drafts },
+	pending: { label: __( 'Pending' ), icon: pending },
+	private: { label: __( 'Private' ), icon: notAllowed },
+	future: { label: __( 'Scheduled' ), icon: scheduled },
+	publish: { label: __( 'Published' ), icon: published },
 };
 
 export const STATUS_OPTIONS = [
@@ -200,13 +207,14 @@ export default function PostStatus() {
 							variant="tertiary"
 							size="compact"
 							onClick={ onToggle }
+							icon={ postStatusesInfo[ status ]?.icon }
 							aria-label={ sprintf(
 								// translators: %s: Current post status.
 								__( 'Change post status: %s' ),
-								labels[ status ]
+								postStatusesInfo[ status ]?.label
 							) }
 						>
-							{ labels[ status ] }
+							{ postStatusesInfo[ status ]?.label }
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (
@@ -290,7 +298,7 @@ export default function PostStatus() {
 				/>
 			) : (
 				<div className="editor-post-status is-read-only">
-					{ labels[ status ] }
+					{ postStatusesInfo[ status ]?.label }
 				</div>
 			) }
 		</PostPanelRow>

package/src/components/post-taxonomies/flat-term-selector.js

@@ -5,6 +5,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEffect, useMemo, useState } from '@wordpress/element';
 import { FormTokenField, withFilters } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
@@ -55,16 +56,28 @@ const termNamesToIds = ( names, terms ) => {
 /**
  * Renders a flat term selector component.
  *
- * @param {Object} props      The component props.
- * @param {string} props.slug The slug of the taxonomy.
+ * @param {Object}  props                         The component props.
+ * @param {string}  props.slug                    The slug of the taxonomy.
+ * @param {boolean} props.__nextHasNoMarginBottom Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
  *
  * @return {JSX.Element} The rendered flat term selector component.
  */
-export function FlatTermSelector( { slug } ) {
+export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.editor.PostTaxonomiesFlatTermSelector',
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	const {
 		terms,
 		termIds,
@@ -86,7 +99,7 @@ export function FlatTermSelector( { slug } ) {
 
 			const query = {
 				...DEFAULT_QUERY,
-				include: _termIds.join( ',' ),
+				include: _termIds?.join( ',' ),
 				per_page: -1,
 			};
 
@@ -103,7 +116,7 @@ export function FlatTermSelector( { slug } ) {
 					: false,
 				taxonomy: _taxonomy,
 				termIds: _termIds,
-				terms: _termIds.length
+				terms: _termIds?.length
 					? getEntityRecords( 'taxonomy', slug, query )
 					: EMPTY_ARRAY,
 				hasResolvedTerms: hasFinishedResolution( 'getEntityRecords', [
@@ -290,6 +303,7 @@ export function FlatTermSelector( { slug } ) {
 					removed: termRemovedLabel,
 					remove: removeTermLabel,
 				} }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
 		</>

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

@@ -32,10 +32,17 @@ export function PostTaxonomies( { taxonomyWrapper = identity } ) {
 		const TaxonomyComponent = taxonomy.hierarchical
 			? HierarchicalTermSelector
 			: FlatTermSelector;
+		const taxonomyComponentProps = {
+			slug: taxonomy.slug,
+			...( taxonomy.hierarchical
+				? {}
+				: { __nextHasNoMarginBottom: true } ),
+		};
+
 		return (
 			<Fragment key={ `taxonomy-${ taxonomy.slug }` }>
 				{ taxonomyWrapper(
-					<TaxonomyComponent slug={ taxonomy.slug } />,
+					<TaxonomyComponent { ...taxonomyComponentProps } />,
 					taxonomy
 				) }
 			</Fragment>

package/src/components/post-template/block-theme.js

@@ -53,7 +53,11 @@ export default function BlockThemeControl( { id } ) {
 
 	const canCreateTemplate = useSelect(
 		( select ) =>
-			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+			!! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		[]
 	);
 
 	if ( ! hasResolved ) {