@wordpress/editor 13.14.0 → 13.16.0

package/src/components/post-text-editor/index.js

@@ -7,8 +7,9 @@ import Textarea from 'react-autosize-textarea';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
@@ -19,63 +20,34 @@ import { VisuallyHidden } from '@wordpress/components';
 import { store as editorStore } from '../../store';
 
 export default function PostTextEditor() {
-	const postContent = useSelect(
-		( select ) => select( editorStore ).getEditedPostContent(),
-		[]
-	);
-
-	const { editPost, resetEditorBlocks } = useDispatch( editorStore );
-
-	const [ value, setValue ] = useState( postContent );
-	const [ isDirty, setIsDirty ] = useState( false );
 	const instanceId = useInstanceId( PostTextEditor );
-	const valueRef = useRef();
-
-	if ( ! isDirty && value !== postContent ) {
-		setValue( postContent );
-	}
+	const { content, blocks, type, id } = useSelect( ( select ) => {
+		const { getEditedEntityRecord } = select( coreStore );
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const _type = getCurrentPostType();
+		const _id = getCurrentPostId();
+		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
 
-	/**
-	 * Handles a textarea change event to notify the onChange prop callback and
-	 * reflect the new value in the component's own state. This marks the start
-	 * of the user's edits, if not already changed, preventing future props
-	 * changes to value from replacing the rendered value. This is expected to
-	 * be followed by a reset to dirty state via `stopEditing`.
-	 *
-	 * @see stopEditing
-	 *
-	 * @param {Event} event Change event.
-	 */
-	const onChange = ( event ) => {
-		const newValue = event.target.value;
-		editPost( { content: newValue } );
-		setValue( newValue );
-		setIsDirty( true );
-		valueRef.current = newValue;
-	};
-
-	/**
-	 * Function called when the user has completed their edits, responsible for
-	 * ensuring that changes, if made, are surfaced to the onPersist prop
-	 * callback and resetting dirty state.
-	 */
-	const stopEditing = () => {
-		if ( isDirty ) {
-			const blocks = parse( value );
-			resetEditorBlocks( blocks );
-			setIsDirty( false );
-		}
-	};
-
-	// Ensure changes aren't lost when component unmounts.
-	useEffect( () => {
-		return () => {
-			if ( valueRef.current ) {
-				const blocks = parse( valueRef.current );
-				resetEditorBlocks( blocks );
-			}
+		return {
+			content: editedRecord?.content,
+			blocks: editedRecord?.blocks,
+			type: _type,
+			id: _id,
 		};
 	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+	// Replicates the logic found in getEditedPostContent().
+	const value = useMemo( () => {
+		if ( content instanceof Function ) {
+			return content( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			return __unstableSerializeAndClean( blocks );
+		}
+		return content;
+	}, [ content, blocks ] );
 
 	return (
 		<>
@@ -89,8 +61,13 @@ export default function PostTextEditor() {
 				autoComplete="off"
 				dir="auto"
 				value={ value }
-				onChange={ onChange }
-				onBlur={ stopEditing }
+				onChange={ ( event ) => {
+					editEntityRecord( 'postType', type, id, {
+						content: event.target.value,
+						blocks: undefined,
+						selection: undefined,
+					} );
+				} }
 				className="editor-post-text-editor"
 				id={ `post-content-${ instanceId }` }
 				placeholder={ __( 'Start writing with text or HTML' ) }

package/src/components/post-title/style.native.scss

@@ -1,10 +1,10 @@
 
 .titleContainer {
-	padding-left: 12;
-	padding-right: 16;
-	padding-top: 12;
-	padding-bottom: 12;
-	margin-top: 24;
+	padding-left: $block-edge-to-content;
+	padding-right: $block-edge-to-content;
+	padding-top: 6;
+	padding-bottom: 6;
+	margin-top: 12;
 }
 
 .dimmed {

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 } ) {
+export 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 '../';
 
+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/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

@@ -11,6 +11,7 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { applyFilters } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -177,15 +178,26 @@ export const savePost =
 				edits,
 				options
 			);
-		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
 
-		const error = registry
+		let error = registry
 			.select( coreStore )
 			.getLastEntitySaveError(
 				'postType',
 				previousRecord.type,
 				previousRecord.id
 			);
+
+		if ( ! error ) {
+			await applyFilters(
+				'editor.__unstableSavePost',
+				Promise.resolve(),
+				options
+			).catch( ( err ) => {
+				error = err;
+			} );
+		}
+		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
+
 		if ( error ) {
 			const args = getNotificationArgumentsForSaveFail( {
 				post: previousRecord,
@@ -289,6 +301,26 @@ export const autosave =
 		}
 	};
 
+export const __unstableSaveForPreview =
+	( { forceIsAutosaveable } = {} ) =>
+	async ( { select, dispatch } ) => {
+		if (
+			( forceIsAutosaveable || select.isEditedPostAutosaveable() ) &&
+			! select.isPostLocked()
+		) {
+			const isDraft = [ 'draft', 'auto-draft' ].includes(
+				select.getEditedPostAttribute( 'status' )
+			);
+			if ( isDraft ) {
+				await dispatch.savePost( { isPreview: true } );
+			} else {
+				await dispatch.autosave( { isPreview: true } );
+			}
+		}
+
+		return select.getEditedPostPreviewLink();
+	};
+
 /**
  * Action that restores last popped state in undo history.
  */

package/src/store/selectors.js

@@ -10,6 +10,7 @@ import {
 	getFreeformContentHandlerName,
 	getDefaultBlockName,
 	__unstableSerializeAndClean,
+	parse,
 } from '@wordpress/blocks';
 import { isInTheFuture, getDate } from '@wordpress/date';
 import { addQueryArgs, cleanForSlug } from '@wordpress/url';
@@ -42,15 +43,6 @@ import { getTemplatePartIcon } from '../utils/get-template-part-icon';
  */
 const EMPTY_OBJECT = {};
 
-/**
- * Shared reference to an empty array for cases where it is important to avoid
- * returning a new array reference on every invocation, as in a connected or
- * other pure component which performs `shouldComponentUpdate` check on props.
- * This should be used as a last resort, since the normalized data should be
- * maintained by the reducer result in state.
- */
-const EMPTY_ARRAY = [];
-
 /**
  * Returns true if any past editor history snapshots exist, or false otherwise.
  *
@@ -507,16 +499,31 @@ export function isEditedPostSaveable( state ) {
  *
  * @return {boolean} Whether post has content.
  */
-export function isEditedPostEmpty( state ) {
-	// While the condition of truthy content string is sufficient to determine
-	// emptiness, testing saveable blocks length is a trivial operation. Since
-	// this function can be called frequently, optimize for the fast case as a
-	// condition of the mere existence of blocks. Note that the value of edited
-	// content takes precedent over block content, and must fall through to the
-	// default logic.
-	const blocks = getEditorBlocks( state );
+export const isEditedPostEmpty = createRegistrySelector(
+	( select ) => ( state ) => {
+		// While the condition of truthy content string is sufficient to determine
+		// emptiness, testing saveable blocks length is a trivial operation. Since
+		// this function can be called frequently, optimize for the fast case as a
+		// condition of the mere existence of blocks. Note that the value of edited
+		// content takes precedent over block content, and must fall through to the
+		// default logic.
+		const postId = getCurrentPostId( state );
+		const postType = getCurrentPostType( state );
+		const record = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
+		if ( typeof record.content !== 'function' ) {
+			return ! record.content;
+		}
+
+		const blocks = getEditedPostAttribute( state, 'blocks' );
+
+		if ( blocks.length === 0 ) {
+			return true;
+		}
 
-	if ( blocks.length ) {
 		// Pierce the abstraction of the serializer in knowing that blocks are
 		// joined with newlines such that even if every individual block
 		// produces an empty save result, the serialized content is non-empty.
@@ -542,10 +549,10 @@ export function isEditedPostEmpty( state ) {
 		) {
 			return false;
 		}
-	}
 
-	return ! getEditedPostContent( state );
-}
+		return ! getEditedPostContent( state );
+	}
+);
 
 /**
  * Returns true if the post can be autosaved, or false otherwise.
@@ -604,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 )
@@ -681,15 +688,9 @@ export function isDeletingPost( state ) {
  *
  * @return {boolean} Whether post is being saved.
  */
-export const isSavingPost = createRegistrySelector( ( select ) => ( state ) => {
-	const postType = getCurrentPostType( state );
-	const postId = getCurrentPostId( state );
-	return select( coreStore ).isSavingEntityRecord(
-		'postType',
-		postType,
-		postId
-	);
-} );
+export function isSavingPost( state ) {
+	return !! state.saving.pending;
+}
 
 /**
  * Returns true if non-post entities are currently being saved, or false otherwise.
@@ -760,10 +761,7 @@ export const didPostSaveRequestFail = createRegistrySelector(
  * @return {boolean} Whether the post is autosaving.
  */
 export function isAutosavingPost( state ) {
-	if ( ! isSavingPost( state ) ) {
-		return false;
-	}
-	return Boolean( state.saving.options?.isAutosave );
+	return isSavingPost( state ) && Boolean( state.saving.options?.isAutosave );
 }
 
 /**
@@ -774,10 +772,7 @@ export function isAutosavingPost( state ) {
  * @return {boolean} Whether the post is being previewed.
  */
 export function isPreviewingPost( state ) {
-	if ( ! isSavingPost( state ) ) {
-		return false;
-	}
-	return Boolean( state.saving.options?.isPreview );
+	return isSavingPost( state ) && Boolean( state.saving.options?.isPreview );
 }
 
 /**
@@ -1100,9 +1095,18 @@ export const isPublishSidebarEnabled = createRegistrySelector(
  * @param {Object} state
  * @return {Array} Block list.
  */
-export function getEditorBlocks( state ) {
-	return getEditedPostAttribute( state, 'blocks' ) || EMPTY_ARRAY;
-}
+export const getEditorBlocks = createSelector(
+	( state ) => {
+		return (
+			getEditedPostAttribute( state, 'blocks' ) ||
+			parse( getEditedPostContent( state ) )
+		);
+	},
+	( state ) => [
+		getEditedPostAttribute( state, 'blocks' ),
+		getEditedPostContent( state ),
+	]
+);
 
 /**
  * A block selection object.