@wordpress/editor 13.15.0 → 13.17.0

package/src/components/page-attributes/test/order.js

@@ -4,10 +4,43 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PageAttributesOrder } from '../order';
+import PageAttributesOrder from '../order';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+function setupDataMock( order = 0 ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getPostType: () => null,
+			getEditedPostAttribute: ( attr ) => {
+				switch ( attr ) {
+					case 'menu_order':
+						return order;
+					default:
+						return null;
+				}
+			},
+		} ) )
+	);
+
+	const editPost = jest.fn();
+	useDispatch.mockImplementation( () => ( {
+		editPost,
+	} ) );
+
+	return editPost;
+}
 
 describe( 'PageAttributesOrder', () => {
 	/**
@@ -22,9 +55,9 @@ describe( 'PageAttributesOrder', () => {
 	it( 'should reject invalid input', async () => {
 		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock();
 
-		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+		render( <PageAttributesOrder /> );
 
 		const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
 		await user.type( input, 'bad', typeOptions );
@@ -33,31 +66,29 @@ describe( 'PageAttributesOrder', () => {
 		await user.type( input, '+', typeOptions );
 		await user.type( input, ' ', typeOptions );
 
-		expect( onUpdateOrder ).not.toHaveBeenCalled();
+		expect( editPost ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should update with zero input', async () => {
 		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock( 4 );
 
-		render(
-			<PageAttributesOrder order={ 4 } onUpdateOrder={ onUpdateOrder } />
-		);
+		render( <PageAttributesOrder /> );
 
 		const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
 
 		await user.type( input, '0', typeOptions );
 
-		expect( onUpdateOrder ).toHaveBeenCalledWith( 0 );
+		expect( editPost ).toHaveBeenCalledWith( { menu_order: 0 } );
 	} );
 
 	it( 'should update with valid positive input', async () => {
 		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock();
 
-		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+		render( <PageAttributesOrder /> );
 
 		await user.type(
 			screen.getByRole( 'spinbutton', { name: 'Order' } ),
@@ -65,15 +96,15 @@ describe( 'PageAttributesOrder', () => {
 			typeOptions
 		);
 
-		expect( onUpdateOrder ).toHaveBeenCalledWith( 4 );
+		expect( editPost ).toHaveBeenCalledWith( { menu_order: 4 } );
 	} );
 
 	it( 'should update with valid negative input', async () => {
 		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock();
 
-		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+		render( <PageAttributesOrder /> );
 
 		await user.type(
 			screen.getByRole( 'spinbutton', { name: 'Order' } ),
@@ -81,6 +112,6 @@ describe( 'PageAttributesOrder', () => {
 			typeOptions
 		);
 
-		expect( onUpdateOrder ).toHaveBeenCalledWith( -1 );
+		expect( editPost ).toHaveBeenCalledWith( { menu_order: -1 } );
 	} );
 } );

package/src/components/post-author/test/check.js

@@ -19,32 +19,38 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
+function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getPostType: () => ( { supports: { author: true } } ),
+			getEditedPostAttribute: () => {},
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-assign-author': hasAssignAuthorAction,
+				},
+			} ),
+			getUsers: () => Array( hasAuthors ? 1 : 0 ).fill( {} ),
+		} ) );
+	} );
+}
+
 describe( 'PostAuthorCheck', () => {
 	it( 'should not render anything if has no authors', () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: false,
-			hasAssignAuthorAction: true,
-		} ) );
+		setupUseSelectMock( false, true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if doesn't have author action", () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: true,
-			hasAssignAuthorAction: false,
-		} ) );
+		setupUseSelectMock( true, false );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render control', () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: true,
-			hasAssignAuthorAction: true,
-		} ) );
+		setupUseSelectMock( true, true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.getByText( 'authors' ) ).toBeVisible();

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

@@ -3,17 +3,23 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostComments( { commentStatus = 'open', ...props } ) {
+function PostComments() {
+	const commentStatus = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'comment_status' ) ??
+			'open',
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
 	const onToggleComments = () =>
-		props.editPost( {
+		editPost( {
 			comment_status: commentStatus === 'open' ? 'closed' : 'open',
 		} );
 
@@ -27,16 +33,4 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			commentStatus:
-				select( editorStore ).getEditedPostAttribute(
-					'comment_status'
-				),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		editPost: dispatch( editorStore ).editPost,
-	} ) ),
-] )( PostComments );
+export default PostComments;

package/src/components/post-excerpt/check.js

@@ -3,8 +3,12 @@
  */
 import PostTypeSupportCheck from '../post-type-support-check';
 
-function PostExcerptCheck( props ) {
-	return <PostTypeSupportCheck { ...props } supportKeys="excerpt" />;
+function PostExcerptCheck( { children } ) {
+	return (
+		<PostTypeSupportCheck supportKeys="excerpt">
+			{ children }
+		</PostTypeSupportCheck>
+	);
 }
 
 export default PostExcerptCheck;

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

@@ -3,22 +3,27 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ExternalLink, TextareaControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
+function PostExcerpt() {
+	const excerpt = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'excerpt' ),
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
+
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
 				__nextHasNoMarginBottom
 				label={ __( 'Write an excerpt (optional)' ) }
 				className="editor-post-excerpt__textarea"
-				onChange={ ( value ) => onUpdateExcerpt( value ) }
+				onChange={ ( value ) => editPost( { excerpt: value } ) }
 				value={ excerpt }
 			/>
 			<ExternalLink
@@ -32,15 +37,4 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			excerpt: select( editorStore ).getEditedPostAttribute( 'excerpt' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onUpdateExcerpt( excerpt ) {
-			dispatch( editorStore ).editPost( { excerpt } );
-		},
-	} ) ),
-] )( PostExcerpt );
+export default PostExcerpt;

package/src/components/post-featured-image/check.js

@@ -4,10 +4,12 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 import ThemeSupportCheck from '../theme-support-check';
 
-function PostFeaturedImageCheck( props ) {
+function PostFeaturedImageCheck( { children } ) {
 	return (
 		<ThemeSupportCheck supportKeys="post-thumbnails">
-			<PostTypeSupportCheck { ...props } supportKeys="thumbnail" />
+			<PostTypeSupportCheck supportKeys="thumbnail">
+				{ children }
+			</PostTypeSupportCheck>
 		</ThemeSupportCheck>
 	);
 }

package/src/components/post-format/check.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -9,17 +9,22 @@ import { withSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
-function PostFormatCheck( { disablePostFormats, ...props } ) {
+function PostFormatCheck( { children } ) {
+	const disablePostFormats = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().disablePostFormats,
+		[]
+	);
+
+	if ( disablePostFormats ) {
+		return null;
+	}
+
 	return (
-		! disablePostFormats && (
-			<PostTypeSupportCheck { ...props } supportKeys="post-formats" />
-		)
+		<PostTypeSupportCheck supportKeys="post-formats">
+			{ children }
+		</PostTypeSupportCheck>
 	);
 }
 
-export default withSelect( ( select ) => {
-	const editorSettings = select( editorStore ).getEditorSettings();
-	return {
-		disablePostFormats: editorSettings.disablePostFormats,
-	};
-} )( PostFormatCheck );
+export default PostFormatCheck;

package/src/components/post-last-revision/check.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -9,11 +9,16 @@ import { withSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
-export function PostLastRevisionCheck( {
-	lastRevisionId,
-	revisionsCount,
-	children,
-} ) {
+function PostLastRevisionCheck( { children } ) {
+	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
+		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+			select( editorStore );
+		return {
+			lastRevisionId: getCurrentPostLastRevisionId(),
+			revisionsCount: getCurrentPostRevisionsCount(),
+		};
+	}, [] );
+
 	if ( ! lastRevisionId || revisionsCount < 2 ) {
 		return null;
 	}
@@ -25,11 +30,4 @@ export function PostLastRevisionCheck( {
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
-		select( editorStore );
-	return {
-		lastRevisionId: getCurrentPostLastRevisionId(),
-		revisionsCount: getCurrentPostRevisionsCount(),
-	};
-} )( PostLastRevisionCheck );
+export default PostLastRevisionCheck;

package/src/components/post-last-revision/index.js

@@ -3,7 +3,7 @@
  */
 import { sprintf, _n } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -13,7 +13,16 @@ import { addQueryArgs } from '@wordpress/url';
 import PostLastRevisionCheck from './check';
 import { store as editorStore } from '../../store';
 
-function LastRevision( { lastRevisionId, revisionsCount } ) {
+function LastRevision() {
+	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
+		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+			select( editorStore );
+		return {
+			lastRevisionId: getCurrentPostLastRevisionId(),
+			revisionsCount: getCurrentPostRevisionsCount(),
+		};
+	}, [] );
+
 	return (
 		<PostLastRevisionCheck>
 			<Button
@@ -34,11 +43,4 @@ function LastRevision( { lastRevisionId, revisionsCount } ) {
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
-		select( editorStore );
-	return {
-		lastRevisionId: getCurrentPostLastRevisionId(),
-		revisionsCount: getCurrentPostRevisionsCount(),
-	};
-} )( LastRevision );
+export default LastRevision;

package/src/components/post-last-revision/test/check.js

@@ -3,38 +3,50 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostLastRevisionCheck } from '../check';
+import PostLastRevisionCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupDataMock( id, count ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getCurrentPostLastRevisionId: () => id,
+			getCurrentPostRevisionsCount: () => count,
+			getEditedPostAttribute: () => null,
+			getPostType: () => null,
+		} ) )
+	);
+}
 
 describe( 'PostLastRevisionCheck', () => {
 	it( 'should not render anything if the last revision ID is unknown', () => {
-		render(
-			<PostLastRevisionCheck revisionsCount={ 2 }>
-				Children
-			</PostLastRevisionCheck>
-		);
+		setupDataMock( null, 2 );
+
+		render( <PostLastRevisionCheck>Children</PostLastRevisionCheck> );
 
 		expect( screen.queryByText( 'Children' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render anything if there is only one revision', () => {
-		render(
-			<PostLastRevisionCheck lastRevisionId={ 1 } revisionsCount={ 1 }>
-				Children
-			</PostLastRevisionCheck>
-		);
+		setupDataMock( 1, 1 );
+
+		render( <PostLastRevisionCheck>Children</PostLastRevisionCheck> );
 
 		expect( screen.queryByText( 'Children' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if there are two revisions', () => {
-		render(
-			<PostLastRevisionCheck lastRevisionId={ 1 } revisionsCount={ 2 }>
-				Children
-			</PostLastRevisionCheck>
-		);
+		setupDataMock( 1, 2 );
+
+		render( <PostLastRevisionCheck>Children</PostLastRevisionCheck> );
 
 		expect( screen.getByText( 'Children' ) ).toBeVisible();
 	} );

package/src/components/post-pending-status/check.js

@@ -1,19 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostPendingStatusCheck( {
-	hasPublishAction,
-	isPublished,
-	children,
-} ) {
+export function PostPendingStatusCheck( { children } ) {
+	const { hasPublishAction, isPublished } = useSelect( ( select ) => {
+		const { isCurrentPostPublished, getCurrentPost } =
+			select( editorStore );
+		return {
+			hasPublishAction:
+				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
+			isPublished: isCurrentPostPublished(),
+		};
+	}, [] );
+
 	if ( isPublished || ! hasPublishAction ) {
 		return null;
 	}
@@ -21,15 +26,4 @@ export function PostPendingStatusCheck( {
 	return children;
 }
 
-export default compose(
-	withSelect( ( select ) => {
-		const { isCurrentPostPublished, getCurrentPostType, getCurrentPost } =
-			select( editorStore );
-		return {
-			hasPublishAction:
-				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
-			isPublished: isCurrentPostPublished(),
-			postType: getCurrentPostType(),
-		};
-	} )
-)( PostPendingStatusCheck );
+export default PostPendingStatusCheck;

package/src/components/post-pending-status/index.js

@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,10 +11,15 @@ import { compose } from '@wordpress/compose';
 import PostPendingStatusCheck from './check';
 import { store as editorStore } from '../../store';
 
-export function PostPendingStatus( { status, onUpdateStatus } ) {
+export function PostPendingStatus() {
+	const status = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
 	const togglePendingStatus = () => {
 		const updatedStatus = status === 'pending' ? 'draft' : 'pending';
-		onUpdateStatus( updatedStatus );
+		editPost( { status: updatedStatus } );
 	};
 
 	return (
@@ -30,13 +34,4 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	);
 }
 
-export default compose(
-	withSelect( ( select ) => ( {
-		status: select( editorStore ).getEditedPostAttribute( 'status' ),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		onUpdateStatus( status ) {
-			dispatch( editorStore ).editPost( { status } );
-		},
-	} ) )
-)( PostPendingStatus );
+export default PostPendingStatus;

package/src/components/post-pending-status/test/check.js

@@ -3,27 +3,49 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import { PostPendingStatusCheck } from '../check';
 
+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;
+} );
+
+function setupUseSelectMock( hasPublishAction ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			isCurrentPostPublished: () => false,
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
+
 describe( 'PostPendingStatusCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		render(
-			<PostPendingStatusCheck hasPublishAction={ false }>
-				status
-			</PostPendingStatusCheck>
-		);
+		setupUseSelectMock( false );
+
+		render( <PostPendingStatusCheck>status</PostPendingStatusCheck> );
+
 		expect( screen.queryByText( 'status' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostPendingStatusCheck hasPublishAction={ true }>
-				status
-			</PostPendingStatusCheck>
-		);
+		setupUseSelectMock( true );
+
+		render( <PostPendingStatusCheck>status</PostPendingStatusCheck> );
+
 		expect( screen.getByText( 'status' ) ).toBeVisible();
 	} );
 } );