@wordpress/editor 13.15.0 → 13.17.0

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

@@ -3,17 +3,23 @@
  */
 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
  */
 import { store as editorStore } from '../../store';
 
-function PostPingbacks( { pingStatus = 'open', ...props } ) {
+function PostPingbacks() {
+	const pingStatus = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'ping_status' ) ??
+			'open',
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
 	const onTogglePingback = () =>
-		props.editPost( {
+		editPost( {
 			ping_status: pingStatus === 'open' ? 'closed' : 'open',
 		} );
 
@@ -27,14 +33,4 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			pingStatus:
-				select( editorStore ).getEditedPostAttribute( 'ping_status' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		editPost: dispatch( editorStore ).editPost,
-	} ) ),
-] )( PostPingbacks );
+export default PostPingbacks;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -14,7 +14,6 @@ import { store as editorStore } from '../../store';
  * type supports one of the given `supportKeys` prop.
  *
  * @param {Object}            props             Props.
- * @param {string}            [props.postType]  Current post type.
  * @param {WPElement}         props.children    Children to be rendered if post
  *                                              type supports.
  * @param {(string|string[])} props.supportKeys String or string array of keys
@@ -22,7 +21,12 @@ import { store as editorStore } from '../../store';
  *
  * @return {WPComponent} The component to be rendered.
  */
-export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
+function PostTypeSupportCheck( { children, supportKeys } ) {
+	const postType = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		return getPostType( getEditedPostAttribute( 'type' ) );
+	}, [] );
 	let isSupported = true;
 	if ( postType ) {
 		isSupported = (
@@ -37,10 +41,4 @@ export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
 	return children;
 }
 
-export default withSelect( ( select ) => {
-	const { getEditedPostAttribute } = select( editorStore );
-	const { getPostType } = select( coreStore );
-	return {
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-	};
-} )( PostTypeSupportCheck );
+export default PostTypeSupportCheck;

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

@@ -3,15 +3,37 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+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.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function setupUseSelectMock( postType ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getPostType: () => postType,
+			getEditedPostAttribute: () => 'post',
+		} ) );
+	} );
+}
 
 describe( 'PostTypeSupportCheck', () => {
 	it( 'renders its children when post type is not known', () => {
+		setupUseSelectMock( undefined );
+
 		const { container } = render(
-			<PostTypeSupportCheck postType={ undefined } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -20,11 +42,11 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -33,13 +55,13 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'renders its children when post type is known and supports', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {
 				title: true,
 			},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -48,16 +70,13 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'renders its children if some of keys supported', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {
 				title: true,
 			},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck
-				postType={ postType }
-				supportKeys={ [ 'title', 'thumbnail' ] }
-			>
+			<PostTypeSupportCheck supportKeys={ [ 'title', 'thumbnail' ] }>
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -66,14 +85,11 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'does not render its children if none of keys supported', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck
-				postType={ postType }
-				supportKeys={ [ 'title', 'thumbnail' ] }
-			>
+			<PostTypeSupportCheck supportKeys={ [ 'title', 'thumbnail' ] }>
 				Supported
 			</PostTypeSupportCheck>
 		);

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>

package/src/components/unsaved-changes-warning/index.js

@@ -13,41 +13,36 @@ import { store as coreStore } from '@wordpress/core-data';
  * @return {WPComponent} The component.
  */
 export default function UnsavedChangesWarning() {
-	const isDirty = useSelect( ( select ) => {
-		return () => {
-			const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+	const { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );
+
+	useEffect( () => {
+		/**
+		 * Warns the user if there are unsaved changes before leaving the editor.
+		 *
+		 * @param {Event} event `beforeunload` event.
+		 *
+		 * @return {string | undefined} Warning prompt message, if unsaved changes exist.
+		 */
+		const warnIfUnsavedChanges = ( event ) => {
+			// We need to call the selector directly in the listener to avoid race
+			// conditions with `BrowserURL` where `componentDidUpdate` gets the
+			// new value of `isEditedPostDirty` before this component does,
+			// causing this component to incorrectly think a trashed post is still dirty.
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			return dirtyEntityRecords.length > 0;
+			if ( dirtyEntityRecords.length > 0 ) {
+				event.returnValue = __(
+					'You have unsaved changes. If you proceed, they will be lost.'
+				);
+				return event.returnValue;
+			}
 		};
-	}, [] );
 
-	/**
-	 * Warns the user if there are unsaved changes before leaving the editor.
-	 *
-	 * @param {Event} event `beforeunload` event.
-	 *
-	 * @return {string | undefined} Warning prompt message, if unsaved changes exist.
-	 */
-	const warnIfUnsavedChanges = ( event ) => {
-		// We need to call the selector directly in the listener to avoid race
-		// conditions with `BrowserURL` where `componentDidUpdate` gets the
-		// new value of `isEditedPostDirty` before this component does,
-		// causing this component to incorrectly think a trashed post is still dirty.
-		if ( isDirty() ) {
-			event.returnValue = __(
-				'You have unsaved changes. If you proceed, they will be lost.'
-			);
-			return event.returnValue;
-		}
-	};
-
-	useEffect( () => {
 		window.addEventListener( 'beforeunload', warnIfUnsavedChanges );
 
 		return () => {
 			window.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
 		};
-	}, [] );
+	}, [ __experimentalGetDirtyEntityRecords ] );
 
 	return null;
 }

package/src/hooks/custom-sources-backwards-compatibility.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
-import { select as globalSelect, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -124,26 +123,3 @@ addFilter(
 	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
 	shimAttributeSource
 );
-
-// The above filter will only capture blocks registered after the filter was
-// added. There may already be blocks registered by this point, and those must
-// be updated to apply the shim.
-//
-// The following implementation achieves this, albeit with a couple caveats:
-// - Only blocks registered on the global store will be modified.
-// - The block settings are directly mutated, since there is currently no
-//   mechanism to update an existing block registration. This is the reason for
-//   `getBlockType` separate from `getBlockTypes`, since the latter returns a
-//   _copy_ of the block registration (i.e. the mutation would not affect the
-//   actual registered block settings).
-//
-// `getBlockTypes` or `getBlockType` implementation could change in the future
-// in regards to creating settings clones, but the corresponding end-to-end
-// tests for meta blocks should cover against any potential regressions.
-//
-// In the future, we could support updating block settings, at which point this
-// implementation could use that mechanism instead.
-globalSelect( blocksStore )
-	.getBlockTypes()
-	.map( ( { name } ) => globalSelect( blocksStore ).getBlockType( name ) )
-	.forEach( shimAttributeSource );

package/src/store/actions.js

@@ -302,7 +302,7 @@ export const autosave =
 	};
 
 export const __unstableSaveForPreview =
-	( { forceIsAutosaveable } ) =>
+	( { forceIsAutosaveable } = {} ) =>
 	async ( { select, dispatch } ) => {
 		if (
 			( forceIsAutosaveable || select.isEditedPostAutosaveable() ) &&

package/src/store/selectors.js

@@ -611,8 +611,8 @@ export const isEditedPostAutosaveable = createRegistrySelector(
 			return true;
 		}
 
-		// If the title or excerpt has changed, the post is autosaveable.
-		return [ 'title', 'excerpt' ].some(
+		// If title, excerpt, or meta have changed, the post is autosaveable.
+		return [ 'title', 'excerpt', 'meta' ].some(
 			( field ) =>
 				getPostRawValue( autosave[ field ] ) !==
 				getEditedPostAttribute( state, field )

package/src/store/test/selectors.js

@@ -260,7 +260,7 @@ describe( 'selectors', () => {
 			parent: [ 'core/test-block-b' ],
 		} );
 
-		registerBlockType( 'core/test-freeform', {
+		registerBlockType( 'core/freeform', {
 			save: ( props ) => <RawHTML>{ props.attributes.content }</RawHTML>,
 			category: 'text',
 			title: 'Test Freeform Content Handler',
@@ -287,7 +287,7 @@ describe( 'selectors', () => {
 			save: () => null,
 		} );
 
-		setFreeformContentHandlerName( 'core/test-freeform' );
+		setFreeformContentHandlerName( 'core/freeform' );
 		setDefaultBlockName( 'core/test-default' );
 
 		cachedSelectors.forEach( ( { clear } ) => clear() );
@@ -298,7 +298,7 @@ describe( 'selectors', () => {
 		unregisterBlockType( 'core/test-block-a' );
 		unregisterBlockType( 'core/test-block-b' );
 		unregisterBlockType( 'core/test-block-c' );
-		unregisterBlockType( 'core/test-freeform' );
+		unregisterBlockType( 'core/freeform' );
 		unregisterBlockType( 'core/test-default' );
 
 		setFreeformContentHandlerName( undefined );
@@ -1337,7 +1337,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1364,7 +1364,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1741,7 +1741,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1769,7 +1769,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1797,7 +1797,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: 'Test Data',
@@ -1825,7 +1825,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1833,7 +1833,7 @@ describe( 'selectors', () => {
 								},
 								{
 									clientId: 456,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -2426,7 +2426,7 @@ describe( 'selectors', () => {
 		} );
 
 		it( "returns removep'd serialization of blocks for single unknown", () => {
-			const unknownBlock = createBlock( 'core/test-freeform', {
+			const unknownBlock = createBlock( 'core/freeform', {
 				content: '<p>foo</p>',
 			} );
 			const state = {
@@ -2448,10 +2448,10 @@ describe( 'selectors', () => {
 		} );
 
 		it( "returns non-removep'd serialization of blocks for multiple unknown", () => {
-			const firstUnknown = createBlock( 'core/test-freeform', {
+			const firstUnknown = createBlock( 'core/freeform', {
 				content: '<p>foo</p>',
 			} );
-			const secondUnknown = createBlock( 'core/test-freeform', {
+			const secondUnknown = createBlock( 'core/freeform', {
 				content: '<p>bar</p>',
 			} );
 			const state = {