@wordpress/editor 14.14.0 → 14.15.0

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

@@ -115,6 +115,10 @@ export function EntitiesSavedStatesExtensible( {
 		'description'
 	);
 
+	const selectItemsToSaveDescription = !! dirtyEntityRecords.length
+		? __( 'Select the items you want to save.' )
+		: undefined;
+
 	return (
 		<div
 			ref={ renderDialog ? saveDialogRef : undefined }
@@ -180,7 +184,7 @@ export function EntitiesSavedStatesExtensible( {
 								),
 								{ strong: <strong /> }
 						  )
-						: __( 'Select the items you want to save.' ) }
+						: selectItemsToSaveDescription }
 				</p>
 			</div>
 

package/src/components/error-boundary/index.native.js

@@ -16,7 +16,7 @@ import {
 	usePreferredColorSchemeStyle,
 	withPreferredColorScheme,
 } from '@wordpress/compose';
-import { warning } from '@wordpress/icons';
+import { cautionFilled } from '@wordpress/icons';
 import { Icon } from '@wordpress/components';
 
 /**
@@ -141,7 +141,7 @@ class ErrorBoundary extends Component {
 					<View style={ styles[ 'error-boundary__container' ] }>
 						<View style={ iconContainerStyle }>
 							<Icon
-								icon={ warning }
+								icon={ cautionFilled }
 								{ ...styles[ 'error-boundary__icon' ] }
 							/>
 						</View>

package/src/components/more-menu/index.js

@@ -113,7 +113,6 @@ export default function MoreMenu() {
 						<ActionItem.Slot
 							name="core/plugin-more-menu"
 							label={ __( 'Plugins' ) }
-							as={ MenuGroup }
 							fillProps={ { onClick: onClose } }
 						/>
 						<MenuGroup label={ __( 'Tools' ) }>

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

@@ -11,6 +11,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useSetAsHomepageAction } from './set-as-homepage';
+import { useSetAsPostsPageAction } from './set-as-posts-page';
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
 	const { defaultActions } = useSelect(
@@ -43,7 +44,8 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 	);
 
 	const setAsHomepageAction = useSetAsHomepageAction();
-	const shouldShowSetAsHomepageAction =
+	const setAsPostsPageAction = useSetAsPostsPageAction();
+	const shouldShowHomepageActions =
 		canManageOptions && ! hasFrontPageTemplate;
 
 	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
@@ -53,10 +55,15 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 
 	return useMemo( () => {
 		let actions = [ ...defaultActions ];
-		if ( shouldShowSetAsHomepageAction ) {
-			actions.push( setAsHomepageAction );
+		if ( shouldShowHomepageActions ) {
+			actions.push( setAsHomepageAction, setAsPostsPageAction );
 		}
 
+		// Ensure "Move to trash" is always the last action.
+		actions = actions.sort( ( a, b ) =>
+			b.id === 'move-to-trash' ? -1 : 0
+		);
+
 		// Filter actions based on provided context. If not provided
 		// all actions are returned. We'll have a single entry for getting the actions
 		// and the consumer should provide the context to filter the actions, if needed.
@@ -123,6 +130,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		defaultActions,
 		onActionPerformed,
 		setAsHomepageAction,
-		shouldShowSetAsHomepageAction,
+		setAsPostsPageAction,
+		shouldShowHomepageActions,
 	] );
 }

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

@@ -74,24 +74,26 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 
 	return (
 		<>
-			<Menu
-				trigger={
-					<Button
-						size="small"
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						disabled={ ! actions.length }
-						accessibleWhenDisabled
-						className="editor-all-actions-button"
-					/>
-				}
-				placement="bottom-end"
-			>
-				<ActionsDropdownMenuGroup
-					actions={ actions }
-					items={ itemsWithPermissions }
-					setActiveModalAction={ setActiveModalAction }
+			<Menu placement="bottom-end">
+				<Menu.TriggerButton
+					render={
+						<Button
+							size="small"
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+							disabled={ ! actions.length }
+							accessibleWhenDisabled
+							className="editor-all-actions-button"
+						/>
+					}
 				/>
+				<Menu.Popover>
+					<ActionsDropdownMenuGroup
+						actions={ actions }
+						items={ itemsWithPermissions }
+						setActiveModalAction={ setActiveModalAction }
+					/>
+				</Menu.Popover>
 			</Menu>
 			{ !! activeModalAction && (
 				<ActionModal

package/src/components/post-actions/set-as-homepage.js

@@ -12,20 +12,11 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
 
-const getItemTitle = ( item ) => {
-	if ( typeof item.title === 'string' ) {
-		return decodeEntities( item.title );
-	}
-	if ( item.title && 'rendered' in item.title ) {
-		return decodeEntities( item.title.rendered );
-	}
-	if ( item.title && 'raw' in item.title ) {
-		return decodeEntities( item.title.raw );
-	}
-	return '';
-};
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../utils/get-item-title';
 
 const SetAsHomepageModal = ( { items, closeModal } ) => {
 	const [ item ] = items;
@@ -47,12 +38,8 @@ const SetAsHomepageModal = ( { items, closeModal } ) => {
 			};
 		}
 	);
-	const currentHomePageTitle = currentHomePage
-		? getItemTitle( currentHomePage )
-		: '';
 
-	const { saveEditedEntityRecord, saveEntityRecord } =
-		useDispatch( coreStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
@@ -60,52 +47,44 @@ const SetAsHomepageModal = ( { items, closeModal } ) => {
 		event.preventDefault();
 
 		try {
-			// Save new home page settings.
-			await saveEditedEntityRecord( 'root', 'site', undefined, {
-				page_on_front: item.id,
-				show_on_front: 'page',
-			} );
-
-			// This second call to a save function is a workaround for a bug in
-			// `saveEditedEntityRecord`. This forces the root site settings to be updated.
-			// See https://github.com/WordPress/gutenberg/issues/67161.
 			await saveEntityRecord( 'root', 'site', {
 				page_on_front: item.id,
 				show_on_front: 'page',
 			} );
 
-			createSuccessNotice( __( 'Homepage updated' ), {
+			createSuccessNotice( __( 'Homepage updated.' ), {
 				type: 'snackbar',
 			} );
 		} catch ( error ) {
-			const typedError = error;
 			const errorMessage =
-				typedError.message && typedError.code !== 'unknown_error'
-					? typedError.message
-					: __( 'An error occurred while setting the homepage' );
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while setting the homepage.' );
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		} finally {
 			closeModal?.();
 		}
 	}
 
-	const modalWarning =
-		'posts' === showOnFront
-			? __(
-					'This will replace the current homepage which is set to display latest posts.'
-			  )
-			: sprintf(
-					// translators: %s: title of the current home page.
-					__( 'This will replace the current homepage: "%s"' ),
-					currentHomePageTitle
-			  );
+	let modalWarning = '';
+	if ( 'posts' === showOnFront ) {
+		modalWarning = __(
+			'This will replace the current homepage which is set to display latest posts.'
+		);
+	} else if ( currentHomePage ) {
+		modalWarning = sprintf(
+			// translators: %s: title of the current home page.
+			__( 'This will replace the current homepage: "%s"' ),
+			getItemTitle( currentHomePage )
+		);
+	}
 
 	const modalText = sprintf(
 		// translators: %1$s: title of the page to be set as the homepage, %2$s: homepage replacement warning message.
 		__( 'Set "%1$s" as the site homepage? %2$s' ),
 		pageTitle,
 		modalWarning
-	);
+	).trim();
 
 	// translators: Button label to confirm setting the specified page as the homepage.
 	const modalButtonLabel = __( 'Set homepage' );
@@ -143,8 +122,13 @@ const SetAsHomepageModal = ( { items, closeModal } ) => {
 
 export const useSetAsHomepageAction = () => {
 	const { pageOnFront, pageForPosts } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
+		const { getEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEntityRecord( 'root', 'site' )
+			: undefined;
 		return {
 			pageOnFront: siteSettings?.page_on_front,
 			pageForPosts: siteSettings?.page_for_posts,

package/src/components/post-actions/set-as-posts-page.js

@@ -0,0 +1,164 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../utils/get-item-title';
+
+const SetAsPostsPageModal = ( { items, closeModal } ) => {
+	const [ item ] = items;
+	const pageTitle = getItemTitle( item );
+	const { currentPostsPage, isPageForPostsSet, isSaving } = useSelect(
+		( select ) => {
+			const { getEntityRecord, isSavingEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const currentPostsPageItem = getEntityRecord(
+				'postType',
+				'page',
+				siteSettings?.page_for_posts
+			);
+			return {
+				currentPostsPage: currentPostsPageItem,
+				isPageForPostsSet: siteSettings?.page_for_posts !== 0,
+				isSaving: isSavingEntityRecord( 'root', 'site' ),
+			};
+		}
+	);
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onSetPageAsPostsPage( event ) {
+		event.preventDefault();
+
+		try {
+			await saveEntityRecord( 'root', 'site', {
+				page_for_posts: item.id,
+				show_on_front: 'page',
+			} );
+
+			createSuccessNotice( __( 'Posts page updated.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while setting the posts page.' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			closeModal?.();
+		}
+	}
+
+	const modalWarning =
+		isPageForPostsSet && currentPostsPage
+			? sprintf(
+					// translators: %s: title of the current posts page.
+					__( 'This will replace the current posts page: "%s"' ),
+					getItemTitle( currentPostsPage )
+			  )
+			: __( 'This page will show the latest posts.' );
+
+	const modalText = sprintf(
+		// translators: %1$s: title of the page to be set as the posts page, %2$s: posts page replacement warning message.
+		__( 'Set "%1$s" as the posts page? %2$s' ),
+		pageTitle,
+		modalWarning
+	);
+
+	// translators: Button label to confirm setting the specified page as the posts page.
+	const modalButtonLabel = __( 'Set posts page' );
+
+	return (
+		<form onSubmit={ onSetPageAsPostsPage }>
+			<VStack spacing="5">
+				<Text>{ modalText }</Text>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+						disabled={ isSaving }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						disabled={ isSaving }
+						accessibleWhenDisabled
+					>
+						{ modalButtonLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+};
+
+export const useSetAsPostsPageAction = () => {
+	const { pageOnFront, pageForPosts } = useSelect( ( select ) => {
+		const { getEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEntityRecord( 'root', 'site' )
+			: undefined;
+
+		return {
+			pageOnFront: siteSettings?.page_on_front,
+			pageForPosts: siteSettings?.page_for_posts,
+		};
+	} );
+
+	return useMemo(
+		() => ( {
+			id: 'set-as-posts-page',
+			label: __( 'Set as posts page' ),
+			isEligible( post ) {
+				if ( post.status !== 'publish' ) {
+					return false;
+				}
+
+				if ( post.type !== 'page' ) {
+					return false;
+				}
+
+				// Don't show the action if the page is already set as the homepage.
+				if ( pageOnFront === post.id ) {
+					return false;
+				}
+
+				// Don't show the action if the page is already set as the page for posts.
+				if ( pageForPosts === post.id ) {
+					return false;
+				}
+
+				return true;
+			},
+			RenderModal: SetAsPostsPageModal,
+		} ),
+		[ pageForPosts, pageOnFront ]
+	);
+};

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

@@ -6,12 +6,13 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -25,6 +26,7 @@ import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
+const { Badge } = unlock( componentsPrivateApis );
 
 /**
  * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.
@@ -92,7 +94,7 @@ export default function PostCardPanel( {
 			labels?.name
 		);
 	} else if ( postTitle ) {
-		title = decodeEntities( postTitle );
+		title = stripHTML( postTitle );
 	}
 
 	return (
@@ -109,11 +111,11 @@ export default function PostCardPanel( {
 					className="editor-post-card-panel__title"
 					as="h2"
 				>
-					{ title }
+					<span className="editor-post-card-panel__title-name">
+						{ title }
+					</span>
 					{ pageTypeBadge && postIds.length === 1 && (
-						<span className="editor-post-card-panel__title-badge">
-							{ pageTypeBadge }
-						</span>
+						<Badge>{ pageTypeBadge }</Badge>
 					) }
 				</Text>
 				<PostActions

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

@@ -9,7 +9,6 @@
 		&.editor-post-card-panel__title {
 			@include heading-medium();
 			margin: 0;
-			padding: 2px 0;
 			display: flex;
 			align-items: center;
 			flex-wrap: wrap;
@@ -34,19 +33,11 @@
 		margin-bottom: $grid-unit-10;
 	}
 
+	.editor-post-card-panel__title-name {
+		padding: 2px 0;
+	}
+
 	.editor-post-card-panel__description {
 		color: $gray-700;
 	}
 }
-
-.editor-post-card-panel__title-badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-	display: inline-block;
-}

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -9,7 +9,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
@@ -260,7 +260,7 @@ export default function MaybeUploadMediaPanel() {
 						variant="primary"
 						onClick={ uploadImages }
 					>
-						{ __( 'Upload' ) }
+						{ _x( 'Upload', 'verb' ) }
 					</Button>
 				) }
 			</div>

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

@@ -26,7 +26,6 @@ import PageAttributesCheck from '../page-attributes/check';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { useStartPatterns } from '../start-page-options';
 
 const {
 	PreferencesModal,
@@ -73,7 +72,6 @@ function PreferencesModalContents( { extraSections = {} } ) {
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const hasStarterPatterns = !! useStartPatterns().length;
 
 	const sections = useMemo(
 		() =>
@@ -114,16 +112,14 @@ function PreferencesModalContents( { extraSections = {} } ) {
 										'Allow right-click contextual menus'
 									) }
 								/>
-								{ hasStarterPatterns && (
-									<PreferenceToggleControl
-										scope="core"
-										featureName="enableChoosePatternModal"
-										help={ __(
-											'Shows starter patterns when creating a new page.'
-										) }
-										label={ __( 'Show starter patterns' ) }
-									/>
-								) }
+								<PreferenceToggleControl
+									scope="core"
+									featureName="enableChoosePatternModal"
+									help={ __(
+										'Shows starter patterns when creating a new page.'
+									) }
+									label={ __( 'Show starter patterns' ) }
+								/>
 							</PreferencesModalSection>
 							<PreferencesModalSection
 								title={ __( 'Document settings' ) }
@@ -341,7 +337,6 @@ function PreferencesModalContents( { extraSections = {} } ) {
 			setIsListViewOpened,
 			setPreference,
 			isLargeViewport,
-			hasStarterPatterns,
 		]
 	);
 

package/src/components/preview-dropdown/index.js

@@ -190,7 +190,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 					) }
 					<ActionItem.Slot
 						name="core/plugin-preview-menu"
-						as={ MenuGroup }
 						fillProps={ { onClick: onClose } }
 					/>
 				</>