@wordpress/editor 13.13.0 → 13.15.0

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

@@ -3,53 +3,126 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, PanelRow } from '@wordpress/components';
+import {
+	PanelRow,
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+} from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function PostSyncStatus() {
-	const { editPost } = useDispatch( editorStore );
-	const { meta, postType } = useSelect( ( select ) => {
+	const { syncStatus, postType, meta } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		return {
+			syncStatus: getEditedPostAttribute( 'wp_pattern_sync_status' ),
 			meta: getEditedPostAttribute( 'meta' ),
 			postType: getEditedPostAttribute( 'type' ),
 		};
-	}, [] );
+	} );
+
 	if ( postType !== 'wp_block' ) {
 		return null;
 	}
-	const onUpdateSync = ( syncStatus ) =>
+	// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+	const currentSyncStatus =
+		meta?.wp_pattern_sync_status === 'unsynced' ? 'unsynced' : syncStatus;
+
+	return (
+		<PanelRow className="edit-post-sync-status">
+			<span>{ __( 'Sync status' ) }</span>
+			<div>
+				{ currentSyncStatus === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ) }
+			</div>
+		</PanelRow>
+	);
+}
+
+export function PostSyncStatusModal() {
+	const { editPost } = useDispatch( editorStore );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ syncType, setSyncType ] = useState( undefined );
+
+	const { postType, isNewPost } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isCleanNewPost } =
+			select( editorStore );
+		return {
+			postType: getEditedPostAttribute( 'type' ),
+			isNewPost: isCleanNewPost(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( isNewPost && postType === 'wp_block' ) {
+			setIsModalOpen( true );
+		}
+		// We only want the modal to open when the page is first loaded.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	const setSyncStatus = () => {
 		editPost( {
 			meta: {
-				...meta,
-				wp_block:
-					syncStatus === 'unsynced'
-						? { sync_status: syncStatus }
-						: null,
+				wp_pattern_sync_status: syncType,
 			},
 		} );
-	const syncStatus = meta?.wp_block?.sync_status;
-	const isFullySynced = ! syncStatus;
+	};
 
+	if ( postType !== 'wp_block' || ! isNewPost ) {
+		return null;
+	}
+	const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis );
 	return (
-		<PanelRow className="edit-post-sync-status">
-			<span>{ __( 'Syncing' ) }</span>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={
-					isFullySynced ? __( 'Fully synced' ) : __( 'Not synced' )
-				}
-				checked={ isFullySynced }
-				onChange={ () => {
-					onUpdateSync(
-						syncStatus === 'unsynced' ? 'fully' : 'unsynced'
-					);
-				} }
-			/>
-		</PanelRow>
+		<>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Set pattern sync status' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setIsModalOpen( false );
+							setSyncStatus();
+						} }
+					>
+						<VStack spacing="5">
+							<ReusableBlocksRenameHint />
+							<ToggleControl
+								label={ __( 'Synced' ) }
+								help={ __(
+									'Editing the pattern will update it anywhere it is used.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button variant="primary" type="submit">
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
 	);
 }

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

@@ -9,8 +9,8 @@
 		flex-shrink: 0;
 	}
 
-	.components-base-control {
+	> div {
 		// Match padding on tertiary buttons for alignment.
-		padding-left: $grid-unit-15 * 0.5;
+		padding-left: $grid-unit-15;
 	}
 }

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-trash/style.scss

@@ -1,4 +1,4 @@
 .editor-post-trash.components-button {
-	width: 100%;
-	display: block;
+	flex-grow: 1;
+	justify-content: center;
 }

package/src/components/provider/use-block-editor-settings.js

@@ -47,6 +47,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'enableCustomUnits',
 	'enableOpenverseMediaCategory',
 	'focusMode',
+	'distractionFree',
 	'fontSizes',
 	'gradients',
 	'generateAnchors',

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.
@@ -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.