@wordpress/editor 13.32.0 → 13.33.0

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -10,7 +5,6 @@ import { Button } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -112,13 +106,14 @@ export class PostPublishButton extends Component {
 			isSaving,
 			isAutoSaving,
 			isToggle,
-			onSave,
-			onStatusChange,
+			savePostStatus,
 			onSubmit = noop,
 			onToggle,
 			visibility,
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
+			postStatus,
+			postStatusHasChanged,
 		} = this.props;
 
 		const isButtonDisabled =
@@ -135,15 +130,19 @@ export class PostPublishButton extends Component {
 				( ! isPublishable && ! forceIsDirty ) ) &&
 			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
 
-		let publishStatus;
-		if ( ! hasPublishAction ) {
+		// If the new status has not changed explicitely, 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 explicitely, 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';
-		} else {
-			publishStatus = 'publish';
 		}
 
 		const onClickButton = () => {
@@ -151,10 +150,10 @@ export class PostPublishButton extends Component {
 				return;
 			}
 			onSubmit();
-			onStatusChange( publishStatus );
-			onSave();
+			savePostStatus( publishStatus );
 		};
 
+		// Callback to open the publish panel.
 		const onClickToggle = () => {
 			if ( isToggleDisabled ) {
 				return;
@@ -179,33 +178,16 @@ export class PostPublishButton extends Component {
 			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
 		};
-
-		const toggleChildren = isBeingScheduled
-			? __( 'Schedule…' )
-			: __( 'Publish' );
-		const buttonChildren = (
-			<PublishButtonLabel
-				hasNonPostEntityChanges={ hasNonPostEntityChanges }
-			/>
-		);
-
 		const componentProps = isToggle ? toggleProps : buttonProps;
-		const componentChildren = isToggle ? toggleChildren : buttonChildren;
 		return (
 			<>
 				<Button
 					ref={ this.buttonNode }
 					{ ...componentProps }
-					className={ classnames(
-						componentProps.className,
-						'editor-post-publish-button__button',
-						{
-							'has-changes-dot': hasNonPostEntityChanges,
-						}
-					) }
+					className={ `${ componentProps.className } editor-post-publish-button__button` }
 					size="compact"
 				>
-					{ componentChildren }
+					<PublishButtonLabel />
 				</Button>
 			</>
 		);
@@ -228,6 +210,8 @@ export default compose( [
 			getCurrentPostId,
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
+			getEditedPostAttribute,
+			getPostEdits,
 		} = select( editorStore );
 		return {
 			isSaving: isSavingPost(),
@@ -242,6 +226,8 @@ export default compose( [
 				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			postType: getCurrentPostType(),
 			postId: getCurrentPostId(),
+			postStatus: getEditedPostAttribute( 'status' ),
+			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
@@ -249,9 +235,10 @@ export default compose( [
 	withDispatch( ( dispatch ) => {
 		const { editPost, savePost } = dispatch( editorStore );
 		return {
-			onStatusChange: ( status ) =>
-				editPost( { status }, { undoIgnore: true } ),
-			onSave: savePost,
+			savePostStatus: ( status ) => {
+				editPost( { status }, { undoIgnore: true } );
+				savePost();
+			},
 		};
 	} ),
 ] )( PostPublishButton );

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

@@ -2,49 +2,27 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PublishButtonLabel( {
-	isPublished,
-	isBeingScheduled,
-	isSaving,
-	isPublishing,
-	hasPublishAction,
-	isAutosaving,
-	hasNonPostEntityChanges,
-} ) {
-	if ( isPublishing ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Publishing…' );
-	} else if ( isPublished && isSaving && ! isAutosaving ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Updating…' );
-	} else if ( isBeingScheduled && isSaving && ! isAutosaving ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Scheduling…' );
-	}
-
-	if ( ! hasPublishAction ) {
-		return hasNonPostEntityChanges
-			? __( 'Submit for Review…' )
-			: __( 'Submit for Review' );
-	} else if ( isPublished ) {
-		return hasNonPostEntityChanges ? __( 'Update…' ) : __( 'Update' );
-	} else if ( isBeingScheduled ) {
-		return hasNonPostEntityChanges ? __( 'Schedule…' ) : __( 'Schedule' );
-	}
-
-	return __( 'Publish' );
-}
-
-export default compose( [
-	withSelect( ( select ) => {
+export default function PublishButtonLabel() {
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	const {
+		isPublished,
+		isBeingScheduled,
+		isSaving,
+		isPublishing,
+		hasPublishAction,
+		isAutosaving,
+		hasNonPostEntityChanges,
+		postStatusHasChanged,
+		postStatus,
+	} = useSelect( ( select ) => {
 		const {
 			isCurrentPostPublished,
 			isEditedPostBeingScheduled,
@@ -53,6 +31,8 @@ export default compose( [
 			getCurrentPost,
 			getCurrentPostType,
 			isAutosavingPost,
+			getPostEdits,
+			getEditedPostAttribute,
 		} = select( editorStore );
 		return {
 			isPublished: isCurrentPostPublished(),
@@ -63,6 +43,41 @@ export default compose( [
 				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			postType: getCurrentPostType(),
 			isAutosaving: isAutosavingPost(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
+			postStatusHasChanged: !! getPostEdits()?.status,
+			postStatus: getEditedPostAttribute( 'status' ),
 		};
-	} ),
-] )( PublishButtonLabel );
+	}, [] );
+	if ( isPublishing ) {
+		/* translators: button label text should, if possible, be under 16 characters. */
+		return __( 'Publishing…' );
+	} else if (
+		( isPublished || isBeingScheduled ) &&
+		isSaving &&
+		! isAutosaving
+	) {
+		/* translators: button label text should, if possible, be under 16 characters. */
+		return __( 'Saving…' );
+	}
+	if ( ! hasPublishAction ) {
+		// TODO: this is because "Submit for review" string is too long in some languages.
+		// @see https://github.com/WordPress/gutenberg/issues/10475
+		return isSmallerThanMediumViewport
+			? __( 'Publish' )
+			: __( 'Submit for Review' );
+	}
+	if (
+		hasNonPostEntityChanges ||
+		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
+		( ! postStatusHasChanged && postStatus === 'future' )
+	) {
+		return __( 'Save' );
+	}
+	if ( isBeingScheduled ) {
+		return __( 'Schedule' );
+	}
+	return __( 'Publish' );
+}

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

@@ -81,13 +81,11 @@ describe( 'PostPublishButton', () => {
 	describe( 'publish status', () => {
 		it( 'should be pending for contributor', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction={ false }
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -97,18 +95,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'pending' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'pending' );
 		} );
 
 		it( 'should be future for scheduled post', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isBeingScheduled
 					isSaveable
 					isPublishable
@@ -119,18 +115,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'future' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'future' );
 		} );
 
 		it( 'should be private for private visibility', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					visibility="private"
 					isSaveable
 					isPublishable
@@ -141,18 +135,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'private' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'private' );
 		} );
 
 		it( 'should be publish otherwise', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -162,20 +154,18 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'publish' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'publish' );
 		} );
 	} );
 
 	describe( 'click', () => {
 		it( 'should save with status', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -185,8 +175,7 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'publish' );
-			expect( onSave ).toHaveBeenCalled();
+			expect( savePostStatus ).toHaveBeenCalledWith( 'publish' );
 		} );
 	} );
 

package/src/components/post-publish-button/test/label.js

@@ -1,67 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PublishButtonLabel } from '../label';
+import PublishButtonLabel from '../label';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
 
 describe( 'PublishButtonLabel', () => {
 	it( 'should show publishing if publishing in progress', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublishing: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publishing…' );
 	} );
 
-	it( 'should show updating if published and saving in progress', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show saving if published and saving in progress', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: true,
 			isSaving: true,
-		} );
-		expect( label ).toBe( 'Updating…' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Saving…' );
 	} );
 
-	it( 'should show scheduling if scheduled and saving in progress', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show saving if scheduled and saving in progress', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isBeingScheduled: true,
 			isSaving: true,
-		} );
-		expect( label ).toBe( 'Scheduling…' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Saving…' );
 	} );
 
 	it( 'should show publish if not published and saving in progress', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: false,
 			isSaving: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publish' );
 	} );
 
 	it( 'should show submit for review for contributor', () => {
-		const label = PublishButtonLabel( { hasPublishAction: false } );
+		useSelect.mockImplementation( () => ( {
+			hasPublishAction: false,
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Submit for Review' );
 	} );
 
-	it( 'should show update for already published', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show save for already published', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: true,
-		} );
-		expect( label ).toBe( 'Update' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Save' );
 	} );
 
 	it( 'should show schedule for scheduled', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isBeingScheduled: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Schedule' );
 	} );
 
 	it( 'should show publish otherwise', () => {
-		const label = PublishButtonLabel( { hasPublishAction: true } );
+		useSelect.mockImplementation( () => ( {
+			hasPublishAction: true,
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publish' );
 	} );
 } );

package/src/components/post-saved-state/index.js

@@ -40,13 +40,14 @@ export default function PostSavedState( { forceIsDirty } ) {
 		isAutosaving,
 		isDirty,
 		isNew,
-		isPending,
 		isPublished,
 		isSaveable,
 		isSaving,
 		isScheduled,
 		hasPublishAction,
 		showIconLabels,
+		postStatus,
+		postStatusHasChanged,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -59,14 +60,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 				getCurrentPost,
 				isAutosavingPost,
 				getEditedPostAttribute,
+				getPostEdits,
 			} = select( editorStore );
 			const { get } = select( preferencesStore );
-
 			return {
 				isAutosaving: isAutosavingPost(),
 				isDirty: forceIsDirty || isEditedPostDirty(),
 				isNew: isEditedPostNew(),
-				isPending: 'pending' === getEditedPostAttribute( 'status' ),
 				isPublished: isCurrentPostPublished(),
 				isSaving: isSavingPost(),
 				isSaveable: isEditedPostSaveable(),
@@ -74,11 +74,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
 				showIconLabels: get( 'core', 'showIconLabels' ),
+				postStatus: getEditedPostAttribute( 'status' ),
+				postStatusHasChanged: !! getPostEdits()?.status,
 			};
 		},
 		[ forceIsDirty ]
 	);
-
+	const isPending = postStatus === 'pending';
 	const { savePost } = useDispatch( editorStore );
 
 	const wasSaving = usePrevious( isSaving );
@@ -102,7 +104,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 		return null;
 	}
 
-	if ( isPublished || isScheduled ) {
+	if (
+		isPublished ||
+		isScheduled ||
+		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) ||
+		( postStatusHasChanged &&
+			[ 'pending', 'draft' ].includes( postStatus ) )
+	) {
 		return null;
 	}
 
@@ -115,7 +123,6 @@ export default function PostSavedState( { forceIsDirty } ) {
 	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
 	const isSavedState = isSaving || isSaved;
 	const isDisabled = isSaving || isSaved || ! isSaveable;
-
 	let text;
 
 	if ( isSaving ) {

package/src/components/post-saved-state/test/index.js

@@ -47,6 +47,7 @@ describe( 'PostSavedState', () => {
 			isNew: true,
 			isSaveable: false,
 			isSaving: true,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -62,6 +63,7 @@ describe( 'PostSavedState', () => {
 			isNew: true,
 			isSaveable: false,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -75,6 +77,7 @@ describe( 'PostSavedState', () => {
 			isNew: false,
 			isSaveable: true,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -93,6 +96,7 @@ describe( 'PostSavedState', () => {
 			isNew: false,
 			isSaveable: true,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		// Simulate the viewport being considered large.

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

@@ -4,6 +4,7 @@
 import { Button, Dropdown } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,9 +13,27 @@ import PostScheduleCheck from './check';
 import PostScheduleForm from './index';
 import { usePostScheduleLabel } from './label';
 import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+
+const DESIGN_POST_TYPES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+];
 
 export default function PostSchedulePanel() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const postType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
 		() => ( {
@@ -29,6 +48,9 @@ export default function PostSchedulePanel() {
 
 	const label = usePostScheduleLabel();
 	const fullLabel = usePostScheduleLabel( { full: true } );
+	if ( DESIGN_POST_TYPES.includes( postType ) ) {
+		return null;
+	}
 
 	return (
 		<PostScheduleCheck>