@wordpress/editor 14.48.0 → 14.48.2-next.v.202606191442.0

package/src/components/collaborators-presence/avatar/test/index.tsx

@@ -7,7 +7,6 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**
@@ -16,13 +15,18 @@ import { Tooltip } from '@wordpress/ui';
 import Avatar from '..';
 
 /**
- * Wraps the avatar in a `Tooltip.Provider` with `delay={ 0 }` so hover-based
- * tooltip-presence assertions don't have to wait for the real-world delay.
+ * Wraps the avatar in a `Tooltip.Provider` with `delay={ 0 }` and
+ * `closeDelay={ 0 }` so hover-based tooltip-presence assertions don't have to
+ * wait for the real-world open/close delay.
  *
  * @param ui The avatar element (or anything else) to render.
  */
 function renderAvatar( ui: React.ReactElement ): ReturnType< typeof render > {
-	return render( <Tooltip.Provider delay={ 0 }>{ ui }</Tooltip.Provider> );
+	return render(
+		<Tooltip.Provider delay={ 0 } closeDelay={ 0 }>
+			{ ui }
+		</Tooltip.Provider>
+	);
 }
 
 /**

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

@@ -141,6 +141,8 @@ export default function DocumentBar( props ) {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	const isReducedMotion = useReducedMotion();
 
+	const hasShortcut = ! window.__experimentalAdminBarInEditor;
+
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const hasBackButton =
 		!! onNavigateToPreviousEntityRecord || !! unlockedPatternInfo;
@@ -175,6 +177,7 @@ export default function DocumentBar( props ) {
 		<div
 			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
+				'has-shortcut': hasShortcut,
 			} ) }
 		>
 			<AnimatePresence>
@@ -267,9 +270,11 @@ export default function DocumentBar( props ) {
 								) }
 						</WCText>
 					</motion.div>
-					<span className="editor-document-bar__shortcut">
-						{ displayShortcut.primary( 'k' ) }
-					</span>
+					{ hasShortcut && (
+						<span className="editor-document-bar__shortcut">
+							{ displayShortcut.primary( 'k' ) }
+						</span>
+					) }
 				</Button>
 			) }
 		</div>

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

@@ -55,8 +55,10 @@
 	max-width: 70%;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	@include break-medium() {
-		padding-left: $grid-unit-30;
+	.editor-document-bar.has-shortcut & {
+		@include break-medium() {
+			padding-left: $grid-unit-30;
+		}
 	}
 
 	h1 {

package/src/components/global-keyboard-shortcuts/index.js

@@ -41,6 +41,7 @@ export default function EditorKeyboardShortcuts() {
 		isPostSavingLocked,
 		isListViewOpened,
 		getEditorMode,
+		isSavingNonPostEntityChanges,
 	} = useSelect( editorStore );
 
 	useShortcut(
@@ -75,7 +76,7 @@ export default function EditorKeyboardShortcuts() {
 		/**
 		 * Do not save the post if post saving is locked.
 		 */
-		if ( isPostSavingLocked() ) {
+		if ( isPostSavingLocked() || isSavingNonPostEntityChanges() ) {
 			return;
 		}
 

package/src/components/local-autosave-monitor/index.js

@@ -3,7 +3,7 @@
  */
 import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { ifCondition, usePrevious } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
@@ -53,19 +53,14 @@ const hasSessionStorageSupport = () => {
  * restore a local autosave, if one exists.
  */
 function useAutosaveNotice() {
-	const { postId, isEditedPostNew, hasRemoteAutosave } = useSelect(
+	const registry = useRegistry();
+	const { postId, isEditedPostNew } = useSelect(
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			hasRemoteAutosave:
-				!! select( editorStore ).getEditorSettings().autosave,
 		} ),
 		[]
 	);
-	const { getEditedPostAttribute } = useSelect( editorStore );
-
-	const { createWarningNotice, removeNotice } = useDispatch( noticesStore );
-	const { editPost, resetEditorBlocks } = useDispatch( editorStore );
 
 	useEffect( () => {
 		let localAutosave = localAutosaveGet( postId, isEditedPostNew );
@@ -83,24 +78,31 @@ function useAutosaveNotice() {
 		const { post_title: title, content, excerpt } = localAutosave;
 		const edits = { title, content, excerpt };
 
-		{
-			// Only display a notice if there is a difference between what has been
-			// saved and that which is stored in sessionStorage.
-			const hasDifference = Object.keys( edits ).some( ( key ) => {
-				return edits[ key ] !== getEditedPostAttribute( key );
-			} );
-
-			if ( ! hasDifference ) {
-				// If there is no difference, it can be safely ejected from storage.
-				localAutosaveClear( postId, isEditedPostNew );
-				return;
-			}
+		const { getEditedPostAttribute, getEditorSettings } =
+			registry.select( editorStore );
+
+		// Only display a notice if there is a difference between what has been
+		// saved and that which is stored in sessionStorage.
+		const hasDifference = Object.keys( edits ).some( ( key ) => {
+			return edits[ key ] !== getEditedPostAttribute( key );
+		} );
+
+		if ( ! hasDifference ) {
+			// If there is no difference, it can be safely ejected from storage.
+			localAutosaveClear( postId, isEditedPostNew );
+			return;
 		}
 
+		const hasRemoteAutosave = !! getEditorSettings().autosave;
 		if ( hasRemoteAutosave ) {
 			return;
 		}
 
+		const { createWarningNotice, removeNotice } =
+			registry.dispatch( noticesStore );
+		const { editPost, resetEditorBlocks } =
+			registry.dispatch( editorStore );
+
 		const id = 'wpEditorAutosaveRestore';
 
 		createWarningNotice(
@@ -125,7 +127,7 @@ function useAutosaveNotice() {
 				],
 			}
 		);
-	}, [ isEditedPostNew, postId ] );
+	}, [ registry, postId, isEditedPostNew ] );
 }
 
 /**

package/src/components/more-menu/view-more-menu-group.js

@@ -2,10 +2,9 @@
  * WordPress dependencies
  */
 import { createSlotFill } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
 
 const { Fill: ViewMoreMenuGroup, Slot } = createSlotFill(
-	Platform.OS === 'web' ? Symbol( 'ViewMoreMenuGroup' ) : 'ViewMoreMenuGroup'
+	Symbol( 'ViewMoreMenuGroup' )
 );
 
 ViewMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;

package/src/components/page-attributes/parent.js

@@ -95,6 +95,7 @@ export function PageAttributesParent() {
 			if ( !! fieldValue ) {
 				query.search = fieldValue;
 				query.orderby = 'relevance';
+				query.search_columns = [ 'post_title' ];
 			}
 
 			const parentPost = pageId

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

@@ -168,7 +168,7 @@ export default function PostCardPanel( {
 					{ sprintf(
 						// translators: %s: Name of the plural post type e.g: "Posts".
 						__( 'Changes will be applied to all selected %s.' ),
-						labels?.name.toLowerCase()
+						labels?.name?.toLowerCase()
 					) }
 				</WCText>
 			) }

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

@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,220 +12,176 @@ import { store as editorStore } from '../../store';
 
 const noop = () => {};
 
-export class PostPublishButton extends Component {
-	constructor( props ) {
-		super( props );
+export function PostPublishButton( {
+	forceIsDirty,
+	isOpen,
+	isToggle,
+	onSubmit = noop,
+	onToggle,
+	setEntitiesSavedStatesCallback,
+} ) {
+	const {
+		hasPublishAction,
+		isBeingScheduled,
+		isPostSavingLocked,
+		isPublishable,
+		isPublished,
+		isSaveable,
+		isSaving,
+		isAutoSaving,
+		visibility,
+		hasNonPostEntityChanges,
+		isSavingNonPostEntityChanges,
+		postStatus,
+		postStatusHasChanged,
+		postType,
+		postId,
+	} = useSelect( ( select ) => {
+		const store = select( editorStore );
+		return {
+			isSaving: store.isSavingPost(),
+			isAutoSaving: store.isAutosavingPost(),
+			isBeingScheduled: store.isEditedPostBeingScheduled(),
+			visibility: store.getEditedPostVisibility(),
+			isSaveable: store.isEditedPostSaveable(),
+			isPostSavingLocked: store.isPostSavingLocked(),
+			isPublishable: store.isEditedPostPublishable(),
+			isPublished: store.isCurrentPostPublished(),
+			hasPublishAction:
+				!! store.getCurrentPost()?._links?.[ 'wp:action-publish' ],
+			postType: store.getCurrentPostType(),
+			postId: store.getCurrentPostId(),
+			postStatus: store.getEditedPostAttribute( 'status' ),
+			postStatusHasChanged: store.getPostEdits()?.status,
+			hasNonPostEntityChanges: store.hasNonPostEntityChanges(),
+			isSavingNonPostEntityChanges: store.isSavingNonPostEntityChanges(),
+		};
+	}, [] );
 
-		this.createOnClick = this.createOnClick.bind( this );
-		this.closeEntitiesSavedStates =
-			this.closeEntitiesSavedStates.bind( this );
+	const { editPost, savePost } = useDispatch( editorStore );
 
-		this.state = {
-			entitiesSavedStatesCallback: false,
-		};
-	}
+	const savePostStatus = ( status ) => {
+		editPost( { status }, { undoIgnore: true } );
+		savePost();
+	};
 
-	createOnClick( callback ) {
-		return ( ...args ) => {
-			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
-				this.props;
+	const createOnClick =
+		( callback ) =>
+		( ...args ) => {
 			// 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
 			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.
-				this.setState( {
-					entitiesSavedStatesCallback: () => callback( ...args ),
-				} );
+				// The modal for multiple entity saving will open. If the post
+				// entity is checked when it closes, run the held callback.
+				const onClose = ( savedEntities ) => {
+					if (
+						savedEntities &&
+						savedEntities.some(
+							( elt ) =>
+								elt.kind === 'postType' &&
+								elt.name === postType &&
+								elt.key === postId
+						)
+					) {
+						callback( ...args );
+					}
+				};
 
 				// Open the save panel by setting its callback.
 				// To set a function on the useState hook, we must set it
 				// with another function (() => myFunction). Passing the
 				// function on its own will cause an error when called.
-				setEntitiesSavedStatesCallback(
-					() => this.closeEntitiesSavedStates
-				);
+				setEntitiesSavedStatesCallback( () => onClose );
 				return noop;
 			}
 
 			return callback( ...args );
 		};
-	}
 
-	closeEntitiesSavedStates( savedEntities ) {
-		const { postType, postId } = this.props;
-		const { entitiesSavedStatesCallback } = this.state;
-		this.setState( { entitiesSavedStatesCallback: false }, () => {
-			if (
-				savedEntities &&
-				savedEntities.some(
-					( elt ) =>
-						elt.kind === 'postType' &&
-						elt.name === postType &&
-						elt.key === postId
-				)
-			) {
-				// The post entity was checked, call the held callback from `createOnClick`.
-				entitiesSavedStatesCallback();
-			}
-		} );
+	const isButtonDisabled =
+		isPostSavingLocked ||
+		// Disable while a non-post entity (e.g. a newly created term) is mid-save.
+		isSavingNonPostEntityChanges ||
+		( ( isSaving ||
+			! isSaveable ||
+			( ! isPublishable && ! forceIsDirty ) ) &&
+			! hasNonPostEntityChanges );
+
+	const isToggleDisabled =
+		isPostSavingLocked ||
+		isSavingNonPostEntityChanges ||
+		( ( isPublished ||
+			isSaving ||
+			! isSaveable ||
+			( ! isPublishable && ! forceIsDirty ) ) &&
+			! hasNonPostEntityChanges );
+
+	// If the new status has not changed explicitly, we derive it from
+	// other factors, like having a publish action, etc.. We need to preserve
+	// this because it affects when to show the pre and post publish panels.
+	// If it has changed though explicitly, we need to respect that.
+	let publishStatus = 'publish';
+	if ( postStatusHasChanged ) {
+		publishStatus = postStatus;
+	} else if ( ! hasPublishAction ) {
+		publishStatus = 'pending';
+	} else if ( visibility === 'private' ) {
+		publishStatus = 'private';
+	} else if ( isBeingScheduled ) {
+		publishStatus = 'future';
 	}
 
-	render() {
-		const {
-			forceIsDirty,
-			hasPublishAction,
-			isBeingScheduled,
-			isOpen,
-			isPostSavingLocked,
-			isPublishable,
-			isPublished,
-			isSaveable,
-			isSaving,
-			isAutoSaving,
-			isToggle,
-			savePostStatus,
-			onSubmit = noop,
-			onToggle,
-			visibility,
-			hasNonPostEntityChanges,
-			isSavingNonPostEntityChanges,
-			postStatus,
-			postStatusHasChanged,
-		} = this.props;
-
-		const isButtonDisabled =
-			isPostSavingLocked ||
-			( ( isSaving ||
-				! isSaveable ||
-				( ! isPublishable && ! forceIsDirty ) ) &&
-				( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges ) );
-
-		const isToggleDisabled =
-			isPostSavingLocked ||
-			( ( isPublished ||
-				isSaving ||
-				! isSaveable ||
-				( ! isPublishable && ! forceIsDirty ) ) &&
-				( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges ) );
-
-		// If the new status has not changed explicitly, we derive it from
-		// other factors, like having a publish action, etc.. We need to preserve
-		// this because it affects when to show the pre and post publish panels.
-		// If it has changed though explicitly, we need to respect that.
-		let publishStatus = 'publish';
-		if ( postStatusHasChanged ) {
-			publishStatus = postStatus;
-		} else if ( ! hasPublishAction ) {
-			publishStatus = 'pending';
-		} else if ( visibility === 'private' ) {
-			publishStatus = 'private';
-		} else if ( isBeingScheduled ) {
-			publishStatus = 'future';
+	const onClickButton = () => {
+		if ( isButtonDisabled ) {
+			return;
 		}
-
-		const onClickButton = () => {
-			if ( isButtonDisabled ) {
-				return;
-			}
-			onSubmit();
-			savePostStatus( publishStatus );
-		};
-
-		// Callback to open the publish panel.
-		const onClickToggle = () => {
-			if ( isToggleDisabled ) {
-				return;
-			}
-			onToggle();
-		};
-
-		const buttonProps = {
-			'aria-disabled': isButtonDisabled,
-			className: 'editor-post-publish-button',
-			isBusy: ! isAutoSaving && isSaving,
-			variant: 'primary',
-			onClick: this.createOnClick( onClickButton ),
-			'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
-		};
-
-		const toggleProps = {
-			'aria-disabled': isToggleDisabled,
-			'aria-expanded': isOpen,
-			className: 'editor-post-publish-panel__toggle',
-			isBusy: isSaving && isPublished,
-			variant: 'primary',
-			size: 'compact',
-			onClick: this.createOnClick( onClickToggle ),
-			'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
-		};
-		const componentProps = isToggle ? toggleProps : buttonProps;
-		return (
-			<>
-				<Button
-					{ ...componentProps }
-					className={ `${ componentProps.className } editor-post-publish-button__button` }
-					size="compact"
-				>
-					<PublishButtonLabel />
-				</Button>
-			</>
-		);
-	}
+		onSubmit();
+		savePostStatus( publishStatus );
+	};
+
+	// Callback to open the publish panel.
+	const onClickToggle = () => {
+		if ( isToggleDisabled ) {
+			return;
+		}
+		onToggle();
+	};
+
+	const buttonProps = {
+		'aria-disabled': isButtonDisabled,
+		className: 'editor-post-publish-button',
+		isBusy: ! isAutoSaving && isSaving,
+		variant: 'primary',
+		onClick: createOnClick( onClickButton ),
+		'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
+	};
+
+	const toggleProps = {
+		'aria-disabled': isToggleDisabled,
+		'aria-expanded': isOpen,
+		className: 'editor-post-publish-panel__toggle',
+		isBusy: isSaving && isPublished,
+		variant: 'primary',
+		size: 'compact',
+		onClick: createOnClick( onClickToggle ),
+		'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
+	};
+	const componentProps = isToggle ? toggleProps : buttonProps;
+	return (
+		<Button
+			{ ...componentProps }
+			className={ `${ componentProps.className } editor-post-publish-button__button` }
+			size="compact"
+		>
+			<PublishButtonLabel />
+		</Button>
+	);
 }
 
 /**
  * Renders the publish button.
  */
-export default compose( [
-	withSelect( ( select ) => {
-		const {
-			isSavingPost,
-			isAutosavingPost,
-			isEditedPostBeingScheduled,
-			getEditedPostVisibility,
-			isCurrentPostPublished,
-			isEditedPostSaveable,
-			isEditedPostPublishable,
-			isPostSavingLocked,
-			getCurrentPost,
-			getCurrentPostType,
-			getCurrentPostId,
-			hasNonPostEntityChanges,
-			isSavingNonPostEntityChanges,
-			getEditedPostAttribute,
-			getPostEdits,
-		} = select( editorStore );
-		return {
-			isSaving: isSavingPost(),
-			isAutoSaving: isAutosavingPost(),
-			isBeingScheduled: isEditedPostBeingScheduled(),
-			visibility: getEditedPostVisibility(),
-			isSaveable: isEditedPostSaveable(),
-			isPostSavingLocked: isPostSavingLocked(),
-			isPublishable: isEditedPostPublishable(),
-			isPublished: isCurrentPostPublished(),
-			hasPublishAction:
-				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
-			postType: getCurrentPostType(),
-			postId: getCurrentPostId(),
-			postStatus: getEditedPostAttribute( 'status' ),
-			postStatusHasChanged: getPostEdits()?.status,
-			hasNonPostEntityChanges: hasNonPostEntityChanges(),
-			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost, savePost } = dispatch( editorStore );
-		return {
-			savePostStatus: ( status ) => {
-				editPost( { status }, { undoIgnore: true } );
-				savePost();
-			},
-		};
-	} ),
-] )( PostPublishButton );
+export default PostPublishButton;