@wordpress/editor 13.31.0 → 13.33.0

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>

package/src/components/post-slug/index.js

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { Component } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 import { TextControl } from '@wordpress/components';
 
@@ -14,72 +13,55 @@ import { TextControl } from '@wordpress/components';
 import PostSlugCheck from './check';
 import { store as editorStore } from '../../store';
 
-export class PostSlug extends Component {
-	constructor( { postSlug, postTitle, postID } ) {
-		super( ...arguments );
-
-		this.state = {
-			editedSlug:
-				safeDecodeURIComponent( postSlug ) ||
-				cleanForSlug( postTitle ) ||
-				postID,
-		};
-
-		this.setSlug = this.setSlug.bind( this );
-	}
-
-	setSlug( event ) {
-		const { postSlug, onUpdateSlug } = this.props;
-		const { value } = event.target;
-
-		const editedSlug = cleanForSlug( value );
-
-		if ( editedSlug === postSlug ) {
-			return;
-		}
-
-		onUpdateSlug( editedSlug );
-	}
+function PostSlugControl() {
+	const postSlug = useSelect( ( select ) => {
+		return safeDecodeURIComponent(
+			select( editorStore ).getEditedPostSlug()
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+	const [ forceEmptyField, setForceEmptyField ] = useState( false );
 
-	render() {
-		const { editedSlug } = this.state;
-		return (
-			<PostSlugCheck>
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Slug' ) }
-					autoComplete="off"
-					spellCheck="false"
-					value={ editedSlug }
-					onChange={ ( slug ) =>
-						this.setState( { editedSlug: slug } )
+	return (
+		<TextControl
+			__nextHasNoMarginBottom
+			label={ __( 'Slug' ) }
+			autoComplete="off"
+			spellCheck="false"
+			value={ forceEmptyField ? '' : postSlug }
+			onChange={ ( newValue ) => {
+				editPost( { slug: newValue } );
+				// When we delete the field the permalink gets
+				// reverted to the original value.
+				// The forceEmptyField logic allows the user to have
+				// the field temporarily empty while typing.
+				if ( ! newValue ) {
+					if ( ! forceEmptyField ) {
+						setForceEmptyField( true );
 					}
-					onBlur={ this.setSlug }
-					className="editor-post-slug"
-				/>
-			</PostSlugCheck>
-		);
-	}
+					return;
+				}
+				if ( forceEmptyField ) {
+					setForceEmptyField( false );
+				}
+			} }
+			onBlur={ ( event ) => {
+				editPost( {
+					slug: cleanForSlug( event.target.value ),
+				} );
+				if ( forceEmptyField ) {
+					setForceEmptyField( false );
+				}
+			} }
+			className="editor-post-slug"
+		/>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getEditedPostAttribute } =
-			select( editorStore );
-
-		const { id } = getCurrentPost();
-		return {
-			postSlug: getEditedPostAttribute( 'slug' ),
-			postTitle: getEditedPostAttribute( 'title' ),
-			postID: id,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost } = dispatch( editorStore );
-		return {
-			onUpdateSlug( slug ) {
-				editPost( { slug } );
-			},
-		};
-	} ),
-] )( PostSlug );
+export default function PostSlug() {
+	return (
+		<PostSlugCheck>
+			<PostSlugControl />
+		</PostSlugCheck>
+	);
+}

package/src/components/post-slug/test/index.js

@@ -4,23 +4,46 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostSlug } from '../';
+import PostSlug from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch/use-dispatch', () =>
+	jest.fn()
+);
 
 describe( 'PostSlug', () => {
 	it( 'should update slug with sanitized input', async () => {
 		const user = userEvent.setup();
-		const onUpdateSlug = jest.fn();
+		const editPost = jest.fn();
+
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getPostType: () => null,
+				getEditedPostAttribute: () => 'post',
+				getEditedPostSlug: () => '1',
+			} ) )
+		);
+		useDispatch.mockImplementation( () => ( {
+			editPost,
+		} ) );
 
-		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
+		render( <PostSlug /> );
 
 		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
-		await user.clear( input );
-		await user.type( input, 'Foo Bar-Baz 9!' );
+		await user.type( input, '2', {
+			initialSelectionStart: 0,
+			initialSelectionEnd: 1,
+		} );
 		act( () => input.blur() );
 
-		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
+		expect( editPost ).toHaveBeenCalledWith( { slug: '2' } );
 	} );
 } );