@wordpress/editor 14.18.0 → 14.19.0

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/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-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() {

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

@@ -4,12 +4,18 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
 /**
  * Internal dependencies
  */
@@ -19,11 +25,6 @@ import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../lock-unlock';
 import CreateNewTemplate from './create-new-template';
 
-const POPOVER_PROPS = {
-	className: 'editor-post-template__dropdown',
-	placement: 'bottom-start',
-};
-
 export default function BlockThemeControl( { id } ) {
 	const {
 		isTemplateHidden,
@@ -52,7 +53,9 @@ export default function BlockThemeControl( { id } ) {
 		id
 	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
+	const { setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 
 	const canCreateTemplate = useSelect(
 		( select ) =>
@@ -63,6 +66,21 @@ export default function BlockThemeControl( { id } ) {
 		[]
 	);
 
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			className: 'editor-post-template__dropdown',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
@@ -90,60 +108,62 @@ export default function BlockThemeControl( { id } ) {
 		}
 	};
 	return (
-		<DropdownMenu
-			popoverProps={ POPOVER_PROPS }
-			focusOnMount
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				tooltipPosition: 'middle left',
-			} }
-			label={ __( 'Template options' ) }
-			text={ decodeEntities( template.title ) }
-			icon={ null }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup>
-						{ canCreateTemplate && (
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
+			<DropdownMenu
+				popoverProps={ popoverProps }
+				focusOnMount
+				toggleProps={ {
+					size: 'compact',
+					variant: 'tertiary',
+					tooltipPosition: 'middle left',
+				} }
+				label={ __( 'Template options' ) }
+				text={ decodeEntities( template.title ) }
+				icon={ null }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup>
+							{ canCreateTemplate && (
+								<MenuItem
+									onClick={ () => {
+										onNavigateToEntityRecord( {
+											postId: template.id,
+											postType: 'wp_template',
+										} );
+										onClose();
+										mayShowTemplateEditNotice();
+									} }
+								>
+									{ __( 'Edit template' ) }
+								</MenuItem>
+							) }
+
+							<SwapTemplateButton onClick={ onClose } />
+							<ResetDefaultTemplate onClick={ onClose } />
+							{ canCreateTemplate && (
+								<CreateNewTemplate onClick={ onClose } />
+							) }
+						</MenuGroup>
+						<MenuGroup>
 							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
 								onClick={ () => {
-									onNavigateToEntityRecord( {
-										postId: template.id,
-										postType: 'wp_template',
-									} );
-									onClose();
-									mayShowTemplateEditNotice();
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
-								{ __( 'Edit template' ) }
+								{ __( 'Show template' ) }
 							</MenuItem>
-						) }
-
-						<SwapTemplateButton onClick={ onClose } />
-						<ResetDefaultTemplate onClick={ onClose } />
-						{ canCreateTemplate && (
-							<CreateNewTemplate onClick={ onClose } />
-						) }
-					</MenuGroup>
-					<MenuGroup>
-						<MenuItem
-							icon={ ! isTemplateHidden ? check : undefined }
-							isSelected={ ! isTemplateHidden }
-							role="menuitemcheckbox"
-							onClick={ () => {
-								setRenderingMode(
-									isTemplateHidden
-										? 'template-locked'
-										: 'post-only'
-								);
-							} }
-						>
-							{ __( 'Show template' ) }
-						</MenuItem>
-					</MenuGroup>
-				</>
-			) }
-		</DropdownMenu>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</PostPanelRow>
 	);
 }

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

@@ -16,11 +16,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { store as editorStore } from '../../store';
 import CreateNewTemplateModal from './create-new-template-modal';
 import { useAllowSwitchingTemplates } from './hooks';
-
-const POPOVER_PROPS = {
-	className: 'editor-post-template__dropdown',
-	placement: 'bottom-start',
-};
+import PostPanelRow from '../post-panel-row';
 
 function PostTemplateToggle( { isOpen, onClick } ) {
 	const templateTitle = useSelect( ( select ) => {
@@ -216,17 +212,37 @@ function PostTemplateDropdownContent( { onClose } ) {
 }
 
 function ClassicThemeControl() {
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			className: 'editor-post-template__dropdown',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
 	return (
-		<Dropdown
-			popoverProps={ POPOVER_PROPS }
-			focusOnMount
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />
-			) }
-			renderContent={ ( { onClose } ) => (
-				<PostTemplateDropdownContent onClose={ onClose } />
-			) }
-		/>
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostTemplateToggle
+						isOpen={ isOpen }
+						onClick={ onToggle }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PostTemplateDropdownContent onClose={ onClose } />
+				) }
+			/>
+		</PostPanelRow>
 	);
 }
 

package/src/components/post-template/create-new-template-modal.js

@@ -126,6 +126,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 						placeholder={ DEFAULT_TITLE }
 						disabled={ isBusy }
 						help={ __(
+							// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 						) }
 					/>

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

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -11,7 +10,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
-import PostPanelRow from '../post-panel-row';
 
 /**
  * Displays the template controls based on the current editor settings and user permissions.
@@ -65,19 +63,11 @@ export default function PostTemplatePanel() {
 	}, [] );
 
 	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
-		return (
-			<PostPanelRow label={ __( 'Template' ) }>
-				<ClassicThemeControl />
-			</PostPanelRow>
-		);
+		return <ClassicThemeControl />;
 	}
 
 	if ( isBlockTheme && !! templateId ) {
-		return (
-			<PostPanelRow label={ __( 'Template' ) }>
-				<BlockThemeControl id={ templateId } />
-			</PostPanelRow>
-		);
+		return <BlockThemeControl id={ templateId } />;
 	}
 	return null;
 }