@wordpress/editor 14.18.0 → 14.19.1

package/src/components/document-outline/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -83,16 +83,13 @@ function EmptyOutlineIllustration() {
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
 const computeOutlineHeadings = ( blocks = [] ) => {
-	return blocks.flatMap( ( block = {} ) => {
-		if ( block.name === 'core/heading' ) {
-			return {
-				...block,
-				level: block.attributes.level,
-				isEmpty: isEmptyHeading( block ),
-			};
-		}
-		return computeOutlineHeadings( block.innerBlocks );
-	} );
+	return blocks
+		.filter( ( block ) => block.name === 'core/heading' )
+		.map( ( block ) => ( {
+			...block,
+			level: block.attributes.level,
+			isEmpty: isEmptyHeading( block ),
+		} ) );
 };
 
 const isEmptyHeading = ( heading ) =>
@@ -113,22 +110,48 @@ export default function DocumentOutline( {
 	hasOutlineItemsDisabled,
 } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { blocks, title, isTitleSupported } = useSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
+	const { title, isTitleSupported } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
 		return {
 			title: getEditedPostAttribute( 'title' ),
-			blocks: getBlocks(),
 			isTitleSupported: postType?.supports?.title ?? false,
 		};
 	} );
+	const blocks = useSelect( ( select ) => {
+		const { getClientIdsWithDescendants, getBlock } =
+			select( blockEditorStore );
+		const clientIds = getClientIdsWithDescendants();
+		// Note: Don't modify data inside the `Array.map` callback,
+		// all compulations should happen in `computeOutlineHeadings`.
+		return clientIds.map( ( id ) => getBlock( id ) );
+	} );
+	const contentBlocks = useSelect( ( select ) => {
+		// When rendering in `post-only` mode all blocks are considered content blocks.
+		if ( select( editorStore ).getRenderingMode() === 'post-only' ) {
+			return undefined;
+		}
+
+		const { getBlocksByName, getClientIdsOfDescendants } =
+			select( blockEditorStore );
+		const [ postContentClientId ] = getBlocksByName( 'core/post-content' );
+
+		// Do nothing if there's no post content block.
+		if ( ! postContentClientId ) {
+			return undefined;
+		}
+
+		return getClientIdsOfDescendants( postContentClientId );
+	}, [] );
 
 	const prevHeadingLevelRef = useRef( 1 );
 
-	const headings = computeOutlineHeadings( blocks );
+	const headings = useMemo(
+		() => computeOutlineHeadings( blocks ),
+		[ blocks ]
+	);
+
 	if ( headings.length < 1 ) {
 		return (
 			<div className="editor-document-outline has-no-headings">
@@ -154,6 +177,12 @@ export default function DocumentOutline( {
 	);
 	const hasMultipleH1 = countByLevel[ 1 ] > 1;
 
+	function isContentBlock( clientId ) {
+		return Array.isArray( contentBlocks )
+			? contentBlocks.includes( clientId )
+			: true;
+	}
+
 	return (
 		<div className="document-outline">
 			<ul>
@@ -187,7 +216,10 @@ export default function DocumentOutline( {
 							key={ item.clientId }
 							level={ `H${ item.level }` }
 							isValid={ isValid }
-							isDisabled={ hasOutlineItemsDisabled }
+							isDisabled={
+								hasOutlineItemsDisabled ||
+								! isContentBlock( item.clientId )
+							}
 							href={ `#block-${ item.clientId }` }
 							onSelect={ () => {
 								selectBlock( item.clientId );

package/src/components/document-outline/item.js

@@ -6,32 +6,47 @@ import clsx from 'clsx';
 const TableOfContentsItem = ( {
 	children,
 	isValid,
+	isDisabled,
 	level,
 	href,
 	onSelect,
-} ) => (
-	<li
-		className={ clsx(
-			'document-outline__item',
-			`is-${ level.toLowerCase() }`,
-			{
-				'is-invalid': ! isValid,
-			}
-		) }
-	>
-		<a
-			href={ href }
-			className="document-outline__button"
-			onClick={ onSelect }
+} ) => {
+	function handleClick( event ) {
+		if ( isDisabled ) {
+			event.preventDefault();
+			return;
+		}
+		onSelect();
+	}
+
+	return (
+		<li
+			className={ clsx(
+				'document-outline__item',
+				`is-${ level.toLowerCase() }`,
+				{
+					'is-invalid': ! isValid,
+					'is-disabled': isDisabled,
+				}
+			) }
 		>
-			<span
-				className="document-outline__emdash"
-				aria-hidden="true"
-			></span>
-			<strong className="document-outline__level">{ level }</strong>
-			<span className="document-outline__item-content">{ children }</span>
-		</a>
-	</li>
-);
+			<a
+				href={ href }
+				className="document-outline__button"
+				aria-disabled={ isDisabled }
+				onClick={ handleClick }
+			>
+				<span
+					className="document-outline__emdash"
+					aria-hidden="true"
+				></span>
+				<strong className="document-outline__level">{ level }</strong>
+				<span className="document-outline__item-content">
+					{ children }
+				</span>
+			</a>
+		</li>
+	);
+};
 
 export default TableOfContentsItem;

package/src/components/document-outline/style.scss

@@ -53,8 +53,10 @@
 	text-align: left;
 	border-radius: $radius-small;
 
+	&[aria-disabled="true"],
 	&:disabled {
 		cursor: default;
+		color: $gray-700;
 	}
 
 	&:focus {

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

@@ -36,10 +36,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 			);
 
 			const { default_template_types: templateTypes = [] } =
-				select( coreStore ).getEntityRecord(
-					'root',
-					'__unstableBase'
-				) ?? {};
+				select( coreStore ).getCurrentTheme() ?? {};
 
 			return {
 				entityRecordTitle: getTemplateInfo( {
@@ -64,6 +61,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/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

@@ -48,7 +48,7 @@ export default function PostCardPanel( {
 	);
 	const { postTitle, icon, labels } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getEntityRecord, getPostType } =
+			const { getEditedEntityRecord, getCurrentTheme, getPostType } =
 				select( coreStore );
 			const { getPostIcon } = unlock( select( editorStore ) );
 			let _title = '';
@@ -59,7 +59,7 @@ export default function PostCardPanel( {
 			);
 			if ( postIds.length === 1 ) {
 				const { default_template_types: templateTypes = [] } =
-					getEntityRecord( 'root', '__unstableBase' ) ?? {};
+					getCurrentTheme() ?? {};
 
 				const _templateInfo = [
 					TEMPLATE_POST_TYPE,
@@ -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() {