@wordpress/editor 14.13.1-next.cd6172eb0.0 → 14.14.0

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

@@ -3,9 +3,12 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { select } from '@wordpress/data';
-import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { doAction } from '@wordpress/hooks';
 
@@ -26,10 +29,10 @@ function getContent() {
 	} catch ( error ) {}
 }
 
-function CopyButton( { text, children } ) {
+function CopyButton( { text, children, variant = 'secondary' } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant={ variant } ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -54,23 +57,34 @@ class ErrorBoundary extends Component {
 
 	render() {
 		const { error } = this.state;
+		const { canCopyContent = false } = this.props;
 		if ( ! error ) {
 			return this.props.children;
 		}
 
-		const actions = [
-			<CopyButton key="copy-post" text={ getContent }>
-				{ __( 'Copy Post Text' ) }
-			</CopyButton>,
-			<CopyButton key="copy-error" text={ error.stack }>
-				{ __( 'Copy Error' ) }
-			</CopyButton>,
-		];
-
 		return (
-			<Warning className="editor-error-boundary" actions={ actions }>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<HStack
+				className="editor-error-boundary"
+				alignment="baseline"
+				spacing={ 4 }
+				justify="space-between"
+				expanded={ false }
+				wrap
+			>
+				<Text as="p">
+					{ __( 'The editor has encountered an unexpected error.' ) }
+				</Text>
+				<HStack expanded={ false }>
+					{ canCopyContent && (
+						<CopyButton text={ getContent }>
+							{ __( 'Copy contents' ) }
+						</CopyButton>
+					) }
+					<CopyButton variant="primary" text={ error?.stack }>
+						{ __( 'Copy error' ) }
+					</CopyButton>
+				</HStack>
+			</HStack>
 		);
 	}
 }

package/src/components/error-boundary/style.scss

@@ -1,7 +1,11 @@
 .editor-error-boundary {
+	font-family: $default-font;
 	margin: auto;
 	max-width: 780px;
-	padding: 20px;
+	padding: 1em;
 	margin-top: 60px;
 	box-shadow: $elevation-large;
+	border: $border-width solid $gray-900;
+	border-radius: $radius-small;
+	background-color: $white;
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -20,66 +20,87 @@ import { usePostActions } from './actions';
 
 const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
-export default function PostActions( { postType, postId, onActionPerformed } ) {
-	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { item, permissions } = useSelect(
+function useEditedEntityRecordsWithPermissions( postType, postIds ) {
+	const { items, permissions } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getEntityRecordPermissions } =
 				unlock( select( coreStore ) );
 			return {
-				item: getEditedEntityRecord( 'postType', postType, postId ),
-				permissions: getEntityRecordPermissions(
-					'postType',
-					postType,
-					postId
+				items: postIds.map( ( postId ) =>
+					getEditedEntityRecord( 'postType', postType, postId )
+				),
+				permissions: postIds.map( ( postId ) =>
+					getEntityRecordPermissions( 'postType', postType, postId )
 				),
 			};
 		},
-		[ postId, postType ]
+		[ postIds, postType ]
 	);
-	const itemWithPermissions = useMemo( () => {
-		return {
+
+	return useMemo( () => {
+		return items.map( ( item, index ) => ( {
 			...item,
-			permissions,
-		};
-	}, [ item, permissions ] );
+			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
+	);
 	const allActions = usePostActions( { postType, onActionPerformed } );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
 			return (
-				! action.isEligible || action.isEligible( itemWithPermissions )
+				( ! action.isEligible ||
+					itemsWithPermissions.some( ( itemWithPermissions ) =>
+						action.isEligible( itemWithPermissions )
+					) ) &&
+				( itemsWithPermissions.length < 2 || action.supportsBulk )
 			);
 		} );
-	}, [ allActions, itemWithPermissions ] );
+	}, [ allActions, itemsWithPermissions ] );
 
 	return (
-		<Menu
-			open={ isActionsMenuOpen }
-			trigger={
-				<Button
-					size="small"
-					icon={ moreVertical }
-					label={ __( 'Actions' ) }
-					disabled={ ! actions.length }
-					accessibleWhenDisabled
-					className="editor-all-actions-button"
-					onClick={ () =>
-						setIsActionsMenuOpen( ! isActionsMenuOpen )
-					}
+		<>
+			<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 }
 				/>
-			}
-			onOpenChange={ setIsActionsMenuOpen }
-			placement="bottom-end"
-		>
-			<ActionsDropdownMenuGroup
-				actions={ actions }
-				item={ itemWithPermissions }
-				onClose={ () => {
-					setIsActionsMenuOpen( false );
-				} }
-			/>
-		</Menu>
+			</Menu>
+			{ !! activeModalAction && (
+				<ActionModal
+					action={ activeModalAction }
+					items={ itemsWithPermissions }
+					closeModal={ () => setActiveModalAction( null ) }
+				/>
+			) }
+		</>
 	);
 }
 
@@ -88,79 +109,52 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 // and the dataviews package should not be using the editor packages directly,
 // so duplicating the code here seems like the least bad option.
 
-// Copied as is from packages/dataviews/src/item-actions.js
 function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<Menu.Item onClick={ onClick } hideOnClick={ ! action.RenderModal }>
+		<Menu.Item onClick={ onClick }>
 			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
 		</Menu.Item>
 	);
 }
 
-// Copied as is from packages/dataviews/src/item-actions.js
-// With an added onClose prop.
-function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const actionTriggerProps = {
-		action,
-		onClick: () => setIsModalOpen( true ),
-		items: [ item ],
-	};
-	const { RenderModal, hideModalHeader } = action;
+export function ActionModal( { action, items, closeModal } ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<>
-			<ActionTrigger { ...actionTriggerProps } />
-			{ isModalOpen && (
-				<Modal
-					title={ action.modalHeader || action.label }
-					__experimentalHideHeader={ !! hideModalHeader }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase(
-						action.id
-					) }` }
-					focusOnMount="firstContentElement"
-					size="medium"
-				>
-					<RenderModal
-						items={ [ item ] }
-						closeModal={ () => {
-							setIsModalOpen( false );
-							onClose();
-						} }
-					/>
-				</Modal>
-			) }
-		</>
+		<Modal
+			title={ action.modalHeader || label }
+			__experimentalHideHeader={ !! action.hideModalHeader }
+			onRequestClose={ closeModal ?? ( () => {} ) }
+			focusOnMount="firstContentElement"
+			size="medium"
+			overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase(
+				action.id
+			) }` }
+		>
+			<action.RenderModal items={ items } closeModal={ closeModal } />
+		</Modal>
 	);
 }
 
-// Copied as is from packages/dataviews/src/item-actions.js
-// With an added onClose prop.
-function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
+function ActionsDropdownMenuGroup( { actions, items, setActiveModalAction } ) {
+	const registry = useRegistry();
 	return (
 		<Menu.Group>
 			{ actions.map( ( action ) => {
-				if ( action.RenderModal ) {
-					return (
-						<ActionWithModal
-							key={ action.id }
-							action={ action }
-							item={ item }
-							ActionTrigger={ DropdownMenuItemTrigger }
-							onClose={ onClose }
-						/>
-					);
-				}
 				return (
 					<DropdownMenuItemTrigger
 						key={ action.id }
 						action={ action }
-						onClick={ () => action.callback( [ item ] ) }
-						items={ [ item ] }
+						onClick={ () => {
+							if ( 'RenderModal' in action ) {
+								setActiveModalAction( action );
+								return;
+							}
+							action.callback( items, { registry } );
+						} }
+						items={ items }
 					/>
 				);
 			} ) }

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

@@ -4,11 +4,13 @@
 import {
 	Icon,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -24,50 +26,77 @@ import PostActions from '../post-actions';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
 
+/**
+ * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.
+ *
+ * @param {Object}          props                     - Component props.
+ * @param {string}          [props.postType]          - The post type string.
+ * @param {string|string[]} [props.postId]            - The post id or list of post ids.
+ * @param {Function}        [props.onActionPerformed] - A callback function for when a quick action is performed.
+ * @return {React.ReactNode} The rendered component.
+ */
 export default function PostCardPanel( {
 	postType,
 	postId,
 	onActionPerformed,
 } ) {
-	const { title, icon } = useSelect(
+	const postIds = useMemo(
+		() => ( Array.isArray( postId ) ? postId : [ postId ] ),
+		[ postId ]
+	);
+	const { postTitle, icon, labels } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord } = select( coreStore );
+			const { getEditedEntityRecord, getEntityRecord, getPostType } =
+				select( coreStore );
+			const { getPostIcon } = unlock( select( editorStore ) );
+			let _title = '';
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
-				postId
+				postIds[ 0 ]
 			);
+			if ( postIds.length === 1 ) {
+				const { default_template_types: templateTypes = [] } =
+					getEntityRecord( 'root', '__unstableBase' ) ?? {};
 
-			const { default_template_types: templateTypes = [] } =
-				select( coreStore ).getEntityRecord(
-					'root',
-					'__unstableBase'
-				) ?? {};
-
-			const _templateInfo = [
-				TEMPLATE_POST_TYPE,
-				TEMPLATE_PART_POST_TYPE,
-			].includes( postType )
-				? getTemplateInfo( {
-						template: _record,
-						templateTypes,
-				  } )
-				: {};
+				const _templateInfo = [
+					TEMPLATE_POST_TYPE,
+					TEMPLATE_PART_POST_TYPE,
+				].includes( postType )
+					? getTemplateInfo( {
+							template: _record,
+							templateTypes,
+					  } )
+					: {};
+				_title = _templateInfo?.title || _record?.title;
+			}
 
 			return {
-				title: _templateInfo?.title || _record?.title,
-				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
+				postTitle: _title,
+				icon: getPostIcon( postType, {
 					area: _record?.area,
 				} ),
+				labels: getPostType( postType )?.labels,
 			};
 		},
-		[ postId, postType ]
+		[ postIds, postType ]
 	);
 
-	const pageTypeBadge = usePageTypeBadge();
+	const pageTypeBadge = usePageTypeBadge( postId );
+	let title = __( 'No title' );
+	if ( labels?.name && postIds.length > 1 ) {
+		title = sprintf(
+			// translators: %i number of selected items %s: Name of the plural post type e.g: "Posts".
+			__( '%i %s' ),
+			postId.length,
+			labels?.name
+		);
+	} else if ( postTitle ) {
+		title = decodeEntities( postTitle );
+	}
 
 	return (
-		<div className="editor-post-card-panel">
+		<VStack spacing={ 1 } className="editor-post-card-panel">
 			<HStack
 				spacing={ 2 }
 				className="editor-post-card-panel__header"
@@ -78,12 +107,10 @@ export default function PostCardPanel( {
 					numberOfLines={ 2 }
 					truncate
 					className="editor-post-card-panel__title"
-					weight={ 500 }
 					as="h2"
-					lineHeight="20px"
 				>
-					{ title ? decodeEntities( title ) : __( 'No title' ) }
-					{ pageTypeBadge && (
+					{ title }
+					{ pageTypeBadge && postIds.length === 1 && (
 						<span className="editor-post-card-panel__title-badge">
 							{ pageTypeBadge }
 						</span>
@@ -95,6 +122,15 @@ export default function PostCardPanel( {
 					onActionPerformed={ onActionPerformed }
 				/>
 			</HStack>
-		</div>
+			{ postIds.length > 1 && (
+				<Text className="editor-post-card-panel__description">
+					{ sprintf(
+						// translators: %s: Name of the plural post type e.g: "Posts".
+						__( 'Changes will be applied to all selected %s.' ),
+						labels?.name.toLowerCase()
+					) }
+				</Text>
+			) }
+		</VStack>
 	);
 }

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

@@ -7,6 +7,7 @@
 		width: 100%;
 
 		&.editor-post-card-panel__title {
+			@include heading-medium();
 			margin: 0;
 			padding: 2px 0;
 			display: flex;
@@ -32,6 +33,10 @@
 	&.has-description &__header {
 		margin-bottom: $grid-unit-10;
 	}
+
+	.editor-post-card-panel__description {
+		color: $gray-700;
+	}
 }
 
 .editor-post-card-panel__title-badge {

package/src/components/post-publish-panel/prepublish.js

@@ -75,7 +75,7 @@ function PostPublishPanelPrepublish( { children } ) {
 	if ( ! hasPublishAction ) {
 		prePublishTitle = __( 'Are you ready to submit for review?' );
 		prePublishBodyText = __(
-			'When you’re ready, submit your work for review, and an Editor will be able to approve it for you.'
+			'Your work will be reviewed and then approved.'
 		);
 	} else if ( isBeingScheduled ) {
 		prePublishTitle = __( 'Are you ready to schedule?' );

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -466,7 +466,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
           </strong>
         </div>
         <p>
-          When you’re ready, submit your work for review, and an Editor will be able to approve it for you.
+          Your work will be reviewed and then approved.
         </p>
         <div
           class="components-site-card"
@@ -619,7 +619,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
           </strong>
         </div>
         <p>
-          When you’re ready, submit your work for review, and an Editor will be able to approve it for you.
+          Your work will be reviewed and then approved.
         </p>
         <div
           class="components-site-card"

package/src/dataviews/store/private-actions.ts

@@ -4,12 +4,6 @@
 import { store as coreStore } from '@wordpress/core-data';
 import type { Action, Field } from '@wordpress/dataviews';
 import { doAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 import type { PostType } from '@wordpress/fields';
 import {
 	viewPost,
@@ -35,8 +29,17 @@ import {
 	authorField,
 	titleField,
 	templateField,
+	templateTitleField,
+	pageTitleField,
+	patternTitleField,
 } from '@wordpress/fields';
 
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
 export function registerEntityAction< Item >(
 	kind: string,
 	name: string,
@@ -164,16 +167,28 @@ export const registerPostTypeSchema =
 			postTypeConfig.supports?.thumbnail &&
 				currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
 				featuredImageField,
-			titleField,
 			postTypeConfig.supports?.author && authorField,
 			statusField,
 			dateField,
 			slugField,
 			postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 			postTypeConfig.supports?.comments && commentStatusField,
-			passwordField,
 			templateField,
+			passwordField,
 		].filter( Boolean );
+		if ( postTypeConfig.supports?.title ) {
+			let _titleField;
+			if ( postType === 'page' ) {
+				_titleField = pageTitleField;
+			} else if ( postType === 'wp_template' ) {
+				_titleField = templateTitleField;
+			} else if ( postType === 'wp_block' ) {
+				_titleField = patternTitleField;
+			} else {
+				_titleField = titleField;
+			}
+			fields.push( _titleField );
+		}
 
 		registry.batch( () => {
 			actions.forEach( ( action ) => {

package/src/utils/pageTypeBadge.js

@@ -5,19 +5,14 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../store';
-
 /**
  * Custom hook to get the page type badge for the current post on edit site view.
+ *
+ * @param {number|string} postId postId of the current post being edited.
  */
-export default function usePageTypeBadge() {
+export default function usePageTypeBadge( postId ) {
 	const { isFrontPage, isPostsPage } = useSelect( ( select ) => {
-		const { getCurrentPostId } = select( editorStore );
 		const { canUser, getEditedEntityRecord } = select( coreStore );
-		const postId = getCurrentPostId();
 		const siteSettings = canUser( 'read', {
 			kind: 'root',
 			name: 'site',
@@ -25,9 +20,11 @@ export default function usePageTypeBadge() {
 			? getEditedEntityRecord( 'root', 'site' )
 			: undefined;
 
+		const _postId = parseInt( postId, 10 );
+
 		return {
-			isFrontPage: siteSettings?.page_on_front === postId,
-			isPostsPage: siteSettings?.page_for_posts === postId,
+			isFrontPage: siteSettings?.page_on_front === _postId,
+			isPostsPage: siteSettings?.page_for_posts === _postId,
 		};
 	} );