@wordpress/editor 13.14.0 → 13.16.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">

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-sync-status/index.js

@@ -1,35 +1,128 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { PanelRow } from '@wordpress/components';
+import {
+	PanelRow,
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+} from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function PostSyncStatus() {
-	const { syncStatus, postType } = useSelect( ( select ) => {
+	const { syncStatus, postType, meta } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		return {
 			syncStatus: getEditedPostAttribute( 'wp_pattern_sync_status' ),
+			meta: getEditedPostAttribute( 'meta' ),
 			postType: getEditedPostAttribute( 'type' ),
 		};
-	}, [] );
+	} );
+
 	if ( postType !== 'wp_block' ) {
 		return null;
 	}
-
-	const isFullySynced = ! syncStatus;
+	// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+	const currentSyncStatus =
+		meta?.wp_pattern_sync_status === 'unsynced' ? 'unsynced' : syncStatus;
 
 	return (
 		<PanelRow className="edit-post-sync-status">
 			<span>{ __( 'Sync status' ) }</span>
 			<div>
-				{ isFullySynced ? __( 'Fully synced' ) : __( 'Not synced' ) }
+				{ currentSyncStatus === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ) }
 			</div>
 		</PanelRow>
 	);
 }
+
+export function PostSyncStatusModal() {
+	const { editPost } = useDispatch( editorStore );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ syncType, setSyncType ] = useState( undefined );
+
+	const { postType, isNewPost } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isCleanNewPost } =
+			select( editorStore );
+		return {
+			postType: getEditedPostAttribute( 'type' ),
+			isNewPost: isCleanNewPost(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( isNewPost && postType === 'wp_block' ) {
+			setIsModalOpen( true );
+		}
+		// We only want the modal to open when the page is first loaded.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	const setSyncStatus = () => {
+		editPost( {
+			meta: {
+				wp_pattern_sync_status: syncType,
+			},
+		} );
+	};
+
+	if ( postType !== 'wp_block' || ! isNewPost ) {
+		return null;
+	}
+	const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis );
+	return (
+		<>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Set pattern sync status' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setIsModalOpen( false );
+							setSyncStatus();
+						} }
+					>
+						<VStack spacing="5">
+							<ReusableBlocksRenameHint />
+							<ToggleControl
+								label={ __( 'Synced' ) }
+								help={ __(
+									'Editing the pattern will update it anywhere it is used.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button variant="primary" type="submit">
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}