@wordpress/editor 13.13.0 → 13.15.0

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

@@ -4,10 +4,39 @@
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostPreviewButton } from '../';
+import PostPreviewButton from '..';
+
+jest.useRealTimers();
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch/use-dispatch', () =>
+	jest.fn()
+);
+
+function mockUseSelect( overrides ) {
+	useSelect.mockImplementation( ( map ) =>
+		map( () => ( {
+			getPostType: () => ( { viewable: true } ),
+			getCurrentPostId: () => 123,
+			getCurrentPostType: () => 'post',
+			getCurrentPostAttribute: () => undefined,
+			getEditedPostPreviewLink: () => undefined,
+			isEditedPostSaveable: () => false,
+			...overrides,
+		} ) )
+	);
+	useDispatch.mockImplementation( () => ( {
+		__unstableSaveForPreview: () => Promise.resolve(),
+	} ) );
+}
 
 describe( 'PostPreviewButton', () => {
 	const documentWrite = jest.fn();
@@ -42,33 +71,39 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should render with `editor-post-preview` class if no `className` is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toHaveClass(
-			'editor-post-preview'
-		);
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveClass( 'editor-post-preview' );
 	} );
 
 	it( 'should render with a custom class and not `editor-post-preview` if `className` is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton className="foo-bar" /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( button ).toHaveClass( 'foo-bar' );
 		expect( button ).not.toHaveClass( 'editor-post-preview' );
 	} );
 
 	it( 'should render a tertiary button if no classname is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveClass( 'is-tertiary' );
 	} );
 
 	it( 'should render the button in its default variant if a custom classname is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton className="foo-bar" /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( button ).not.toHaveClass( 'is-primary' );
 		expect( button ).not.toHaveClass( 'is-secondary' );
 		expect( button ).not.toHaveClass( 'is-tertiary' );
@@ -76,12 +111,13 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should render `textContent` if specified.', () => {
+		mockUseSelect();
+
 		const textContent = 'Foo bar';
 
 		render( <PostPreviewButton textContent={ textContent } /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( button ).toHaveTextContent( textContent );
 		expect(
 			within( button ).queryByText( 'Preview' )
@@ -92,213 +128,113 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should render `Preview` with accessibility text if `textContent` not specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( within( button ).getByText( 'Preview' ) ).toBeVisible();
 		expect(
 			within( button ).getByText( '(opens in a new tab)' )
 		).toBeInTheDocument();
 	} );
 
-	it( 'should be disabled if post is not saveable.', async () => {
-		render( <PostPreviewButton isSaveable={ false } postId={ 123 } /> );
+	it( 'should be disabled if post is not saveable.', () => {
+		mockUseSelect( { isEditedPostSaveable: () => false } );
+
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'button' ) ).toBeDisabled();
 	} );
 
-	it( 'should not be disabled if post is saveable.', async () => {
-		render( <PostPreviewButton isSaveable postId={ 123 } /> );
+	it( 'should not be disabled if post is saveable.', () => {
+		mockUseSelect( { isEditedPostSaveable: () => true } );
+
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'button' ) ).toBeEnabled();
 	} );
 
-	it( 'should set `href` to `previewLink` if `previewLink` is specified.', async () => {
+	it( 'should set `href` to edited post preview link if specified.', () => {
 		const url = 'https://wordpress.org';
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => url,
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton isSaveable postId={ 123 } previewLink={ url } />
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url );
 	} );
 
-	it( 'should set `href` to `currentPostLink` if `currentPostLink` is specified.', async () => {
+	it( 'should set `href` to current post link if specified.', () => {
 		const url = 'https://wordpress.org';
+		mockUseSelect( {
+			getCurrentPostAttribute: () => url,
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton
-				isSaveable
-				postId={ 123 }
-				currentPostLink={ url }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url );
 	} );
 
-	it( 'should prioritize `previewLink` if both `previewLink` and `currentPostLink` are specified.', async () => {
+	it( 'should prioritize preview link if both preview link and link attribute are specified.', () => {
 		const url1 = 'https://wordpress.org';
 		const url2 = 'https://wordpress.com';
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => url1,
+			getCurrentPostAttribute: () => url2,
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton
-				isSaveable
-				postId={ 123 }
-				previewLink={ url1 }
-				currentPostLink={ url2 }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url1 );
 	} );
 
-	it( 'should properly set target to `wp-preview-${ postId }`.', async () => {
-		const postId = 123;
-		const url = 'https://wordpress.org';
+	it( 'should properly set link target', () => {
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => 'https://wordpress.org',
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton
-				isSaveable
-				postId={ postId }
-				previewLink={ url }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute(
 			'target',
-			`wp-preview-${ postId }`
-		);
-	} );
-
-	it( 'should save post if `isDraft` is `true`', async () => {
-		const user = userEvent.setup();
-		const url = 'https://wordpress.org';
-		const savePost = jest.fn();
-		const autosave = jest.fn();
-
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				isDraft
-				postId={ 123 }
-				previewLink={ url }
-				savePost={ savePost }
-				autosave={ autosave }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'link' ) );
-
-		expect( savePost ).toHaveBeenCalledWith(
-			expect.objectContaining( { isPreview: true } )
-		);
-		expect( autosave ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should autosave post if `isDraft` is `false`', async () => {
-		const user = userEvent.setup();
-		const url = 'https://wordpress.org';
-		const savePost = jest.fn();
-		const autosave = jest.fn();
-
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				isDraft={ false }
-				postId={ 123 }
-				previewLink={ url }
-				savePost={ savePost }
-				autosave={ autosave }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'link' ) );
-
-		expect( savePost ).not.toHaveBeenCalled();
-		expect( autosave ).toHaveBeenCalledWith(
-			expect.objectContaining( { isPreview: true } )
+			'wp-preview-123'
 		);
 	} );
 
 	it( 'should open a window with the specified target', async () => {
 		const user = userEvent.setup();
-		const postId = 123;
-		const url = 'https://wordpress.org';
 
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				postId={ postId }
-				previewLink={ url }
-				savePost={ jest.fn() }
-				autosave={ jest.fn() }
-			/>
-		);
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => 'https://wordpress.org',
+			isEditedPostSaveable: () => true,
+		} );
+
+		render( <PostPreviewButton /> );
 
 		await user.click( screen.getByRole( 'link' ) );
 
-		expect( global.open ).toHaveBeenCalledWith(
-			'',
-			`wp-preview-${ postId }`
-		);
+		expect( global.open ).toHaveBeenCalledWith( '', 'wp-preview-123' );
 	} );
 
-	it( 'should set the location in the window properly', async () => {
+	it( 'should display a `Generating preview` message while waiting for autosaving', async () => {
 		const user = userEvent.setup();
-		const postId = 123;
-		const url = 'https://wordpress.org';
-
-		const { rerender } = render(
-			<PostPreviewButton
-				isSaveable
-				postId={ postId }
-				savePost={ jest.fn() }
-				autosave={ jest.fn() }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'button' ) );
 
-		expect( setLocation ).toHaveBeenCalledWith( undefined );
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => 'https://wordpress.org',
+			isEditedPostSaveable: () => true,
+		} );
 
-		rerender(
-			<PostPreviewButton
-				isSaveable
-				postId={ postId }
-				previewLink={ url }
-				savePost={ jest.fn() }
-				autosave={ jest.fn() }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
-		expect( setLocation ).toHaveBeenCalledWith( url );
-	} );
+		await user.click( screen.getByRole( 'link' ) );
 
-	it( 'should display a `Generating preview` message while waiting for autosaving', async () => {
-		const user = userEvent.setup();
 		const previewText = 'Generating preview…';
-		const url = 'https://wordpress.org';
-		const savePost = jest.fn();
-		const autosave = jest.fn();
-
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				isDraft={ false }
-				postId={ 123 }
-				previewLink={ url }
-				savePost={ savePost }
-				autosave={ autosave }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'link' ) );
 
 		expect( documentWrite ).toHaveBeenCalledWith(
 			expect.stringContaining( previewText )

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

@@ -102,7 +102,6 @@ export class PostPublishButton extends Component {
 	render() {
 		const {
 			forceIsDirty,
-			forceIsSaving,
 			hasPublishAction,
 			isBeingScheduled,
 			isOpen,
@@ -124,7 +123,6 @@ export class PostPublishButton extends Component {
 
 		const isButtonDisabled =
 			( isSaving ||
-				forceIsSaving ||
 				! isSaveable ||
 				isPostSavingLocked ||
 				( ! isPublishable && ! forceIsDirty ) ) &&
@@ -133,7 +131,6 @@ export class PostPublishButton extends Component {
 		const isToggleDisabled =
 			( isPublished ||
 				isSaving ||
-				forceIsSaving ||
 				! isSaveable ||
 				( ! isPublishable && ! forceIsDirty ) ) &&
 			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
@@ -187,7 +184,6 @@ export class PostPublishButton extends Component {
 			: __( 'Publish' );
 		const buttonChildren = (
 			<PublishButtonLabel
-				forceIsSaving={ forceIsSaving }
 				hasNonPostEntityChanges={ hasNonPostEntityChanges }
 			/>
 		);
@@ -231,10 +227,9 @@ export default compose( [
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
 		} = select( editorStore );
-		const _isAutoSaving = isAutosavingPost();
 		return {
-			isSaving: isSavingPost() || _isAutoSaving,
-			isAutoSaving: _isAutoSaving,
+			isSaving: isSavingPost(),
+			isAutoSaving: isAutosavingPost(),
 			isBeingScheduled: isEditedPostBeingScheduled(),
 			visibility: getEditedPostVisibility(),
 			isSaveable: isEditedPostSaveable(),

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

@@ -44,7 +44,7 @@ export function PublishButtonLabel( {
 }
 
 export default compose( [
-	withSelect( ( select, { forceIsSaving } ) => {
+	withSelect( ( select ) => {
 		const {
 			isCurrentPostPublished,
 			isEditedPostBeingScheduled,
@@ -57,7 +57,7 @@ export default compose( [
 		return {
 			isPublished: isCurrentPostPublished(),
 			isBeingScheduled: isEditedPostBeingScheduled(),
-			isSaving: forceIsSaving || isSavingPost(),
+			isSaving: isSavingPost(),
 			isPublishing: isPublishingPost(),
 			hasPublishAction:
 				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,

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

@@ -19,16 +19,6 @@ describe( 'PostPublishButton', () => {
 			).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 
-		it( 'should be true if forceIsSaving is true', () => {
-			render(
-				<PostPublishButton isPublishable isSaveable forceIsSaving />
-			);
-
-			expect(
-				screen.getByRole( 'button', { name: 'Submit for Review' } )
-			).toHaveAttribute( 'aria-disabled', 'true' );
-		} );
-
 		it( 'should be true if post is not publishable and not forceIsDirty', () => {
 			render(
 				<PostPublishButton

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

@@ -51,7 +51,6 @@ export class PostPublishPanel extends Component {
 	render() {
 		const {
 			forceIsDirty,
-			forceIsSaving,
 			isBeingScheduled,
 			isPublished,
 			isPublishSidebarEnabled,
@@ -87,10 +86,9 @@ export class PostPublishPanel extends Component {
 						<>
 							<div className="editor-post-publish-panel__header-publish-button">
 								<PostPublishButton
-									focusOnMount={ true }
+									focusOnMount
 									onSubmit={ this.onSubmit }
 									forceIsDirty={ forceIsDirty }
-									forceIsSaving={ forceIsSaving }
 								/>
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
@@ -141,6 +139,7 @@ export default compose( [
 			isCurrentPostScheduled,
 			isEditedPostBeingScheduled,
 			isEditedPostDirty,
+			isAutosavingPost,
 			isSavingPost,
 			isSavingNonPostEntityChanges,
 		} = select( editorStore );
@@ -155,7 +154,7 @@ export default compose( [
 			isDirty: isEditedPostDirty(),
 			isPublished: isCurrentPostPublished(),
 			isPublishSidebarEnabled: isPublishSidebarEnabled(),
-			isSaving: isSavingPost(),
+			isSaving: isSavingPost() && ! isAutosavingPost(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 			isScheduled: isCurrentPostScheduled(),
 		};

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

@@ -29,14 +29,11 @@ import { store as editorStore } from '../../store';
  * @param {Object}   props                Component props.
  * @param {?boolean} props.forceIsDirty   Whether to force the post to be marked
  *                                        as dirty.
- * @param {?boolean} props.forceIsSaving  Whether to force the post to be marked
- *                                        as being saved.
  * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
  * @return {import('@wordpress/element').WPComponent} The component.
  */
 export default function PostSavedState( {
 	forceIsDirty,
-	forceIsSaving,
 	showIconLabels = false,
 } ) {
 	const [ forceSavedMessage, setForceSavedMessage ] = useState( false );
@@ -72,14 +69,14 @@ export default function PostSavedState( {
 				isNew: isEditedPostNew(),
 				isPending: 'pending' === getEditedPostAttribute( 'status' ),
 				isPublished: isCurrentPostPublished(),
-				isSaving: forceIsSaving || isSavingPost(),
+				isSaving: isSavingPost(),
 				isSaveable: isEditedPostSaveable(),
 				isScheduled: isCurrentPostScheduled(),
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
 			};
 		},
-		[ forceIsDirty, forceIsSaving ]
+		[ forceIsDirty ]
 	);
 
 	const { savePost } = useDispatch( editorStore );

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

@@ -33,7 +33,7 @@ export function getFullPostScheduleLabel( dateAttribute ) {
 
 	const timezoneAbbreviation = getTimezoneAbbreviation();
 	const formattedDate = dateI18n(
-		// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+		// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 		_x( 'F j, Y g:i\xa0a', 'post schedule full date format' ),
 		date
 	);
@@ -62,7 +62,7 @@ export function getPostScheduleLabel(
 		return sprintf(
 			// translators: %s: Time of day the post is scheduled for.
 			__( 'Today at %s' ),
-			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 			dateI18n( _x( 'g:i\xa0a', 'post schedule time format' ), date )
 		);
 	}
@@ -74,14 +74,14 @@ export function getPostScheduleLabel(
 		return sprintf(
 			// translators: %s: Time of day the post is scheduled for.
 			__( 'Tomorrow at %s' ),
-			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 			dateI18n( _x( 'g:i\xa0a', 'post schedule time format' ), date )
 		);
 	}
 
 	if ( date.getFullYear() === now.getFullYear() ) {
 		return dateI18n(
-			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 			_x( 'F j g:i\xa0a', 'post schedule date format without year' ),
 			date
 		);

package/src/components/post-switch-to-draft-button/index.js

@@ -3,7 +3,6 @@
  */
 import {
 	Button,
-	FlexItem,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -41,7 +40,7 @@ function PostSwitchToDraftButton( {
 	};
 
 	return (
-		<FlexItem isBlock>
+		<>
 			<Button
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
@@ -49,7 +48,7 @@ function PostSwitchToDraftButton( {
 				} }
 				disabled={ isSaving }
 				variant="secondary"
-				style={ { width: '100%', display: 'block' } }
+				style={ { flexGrow: '1', justifyContent: 'center' } }
 			>
 				{ __( 'Switch to draft' ) }
 			</Button>
@@ -60,7 +59,7 @@ function PostSwitchToDraftButton( {
 			>
 				{ alertMessage }
 			</ConfirmDialog>
-		</FlexItem>
+		</>
 	);
 }