@wordpress/editor 13.16.0 → 13.17.1

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-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-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();
 	} );
 } );

package/src/components/post-publish-panel/style.scss

@@ -82,7 +82,7 @@
 }
 
 .editor-post-publish-panel__footer {
-	padding: 16px;
+	padding: $grid-unit-20;
 }
 
 .components-button.editor-post-publish-panel__toggle.is-primary {
@@ -94,17 +94,17 @@
 	}
 
 	.dashicon {
-		margin-right: -4px;
+		margin-right: -$grid-unit-05;
 	}
 }
 
 .editor-post-publish-panel__link {
 	font-weight: 400;
-	padding-left: 4px;
+	padding-left: $grid-unit-05;
 }
 
 .editor-post-publish-panel__prepublish {
-	padding: 16px;
+	padding: $grid-unit-20;
 
 	strong {
 		color: $gray-900;
@@ -112,8 +112,8 @@
 
 	.components-panel__body {
 		background: $white;
-		margin-left: -16px;
-		margin-right: -16px;
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
 	}
 
 	.editor-post-visibility__dialog-legend {
@@ -130,21 +130,11 @@
 	display: flex;
 	align-content: space-between;
 	flex-wrap: wrap;
-	margin: -5px;
-
-	> * {
-		flex-grow: 1;
-		margin: 5px;
-	}
+	gap: $grid-unit-20;
 
 	.components-button {
-		height: auto;
 		justify-content: center;
-		padding: 3px 10px 4px;
 		flex: 1;
-		line-height: 1.6;
-		text-align: center;
-		white-space: normal;
 	}
 
 	.components-clipboard-button {
@@ -162,21 +152,18 @@
 	}
 
 	input[readonly] {
-		padding: 10px;
-		background: $gray-300;
+		padding: $grid-unit-20;
+		background: $gray-100;
+		border-color: $gray-400;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		height: $button-size;
 	}
 }
 
 .post-publish-panel__postpublish-post-address__copy-button-wrap {
 	flex-shrink: 0;
-	margin-left: 8px; // margin left for copy button
-
-	// match copy button height to the address field height
-	.components-button {
-		height: 38px;
-	}
+	margin-left: $grid-unit-20;
 }
 
 .post-publish-panel__postpublish-header {

package/src/components/post-sync-status/style.scss

@@ -2,15 +2,18 @@
 	width: 100%;
 	position: relative;
 	justify-content: flex-start;
+	align-items: flex-start;
 
 	> span {
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
+		padding: $grid-unit-15 * 0.5 0;
+		word-break: break-word;
 	}
 
 	> div {
 		// Match padding on tertiary buttons for alignment.
-		padding-left: $grid-unit-15;
+		padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
 	}
 }

package/src/components/post-type-support-check/index.js

@@ -21,7 +21,7 @@ import { store as editorStore } from '../../store';
  *
  * @return {WPComponent} The component to be rendered.
  */
-export function PostTypeSupportCheck( { children, supportKeys } ) {
+function PostTypeSupportCheck( { children, supportKeys } ) {
 	const postType = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );

package/src/components/post-type-support-check/test/index.js

@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { PostTypeSupportCheck } from '../';
+import PostTypeSupportCheck from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.

package/src/components/provider/index.js

@@ -10,8 +10,8 @@ import {
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 
 /**
  * Internal dependencies
@@ -22,6 +22,7 @@ import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 export const ExperimentalEditorProvider = withRegistryProvider(
 	( {
@@ -130,7 +131,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							useSubRegistry={ false }
 						>
 							{ children }
-							<ReusableBlocksMenuItems />
+							<PatternsMenuItems />
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>