@wordpress/editor 13.14.0 → 13.16.0

package/src/components/entities-saved-states/entity-type-list.js

@@ -31,7 +31,6 @@ export default function EntityTypeList( {
 	list,
 	unselectedEntities,
 	setUnselectedEntities,
-	closePanel,
 } ) {
 	const count = list.length;
 	const firstRecord = list[ 0 ];
@@ -73,7 +72,6 @@ export default function EntityTypeList( {
 						onChange={ ( value ) =>
 							setUnselectedEntities( record, value )
 						}
-						closePanel={ closePanel }
 					/>
 				);
 			} ) }

package/src/components/entities-saved-states/index.js

@@ -210,7 +210,6 @@ export function EntitiesSavedStatesExtensible( {
 					<EntityTypeList
 						key={ list[ 0 ].name }
 						list={ list }
-						closePanel={ dismissPanel }
 						unselectedEntities={ unselectedEntities }
 						setUnselectedEntities={ setUnselectedEntities }
 					/>

package/src/components/entities-saved-states/style.scss

@@ -1,18 +1,3 @@
-.entities-saved-states__find-entity {
-	display: none;
-
-	@include break-medium() {
-		display: block;
-	}
-}
-.entities-saved-states__find-entity-small {
-	display: block;
-
-	@include break-medium() {
-		display: none;
-	}
-}
-
 .entities-saved-states__panel-header {
 	box-sizing: border-box;
 	background: $white;

package/src/components/global-keyboard-shortcuts/index.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function EditorKeyboardShortcuts() {
+	const { redo, undo, savePost } = useDispatch( editorStore );
+	const { isEditedPostDirty, isPostSavingLocked } = useSelect( editorStore );
+
+	useShortcut( 'core/editor/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/editor/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/editor/save', ( event ) => {
+		event.preventDefault();
+
+		/**
+		 * Do not save the post if post saving is locked.
+		 */
+		if ( isPostSavingLocked() ) {
+			return;
+		}
+
+		// TODO: This should be handled in the `savePost` effect in
+		// considering `isSaveable`. See note on `isEditedPostSaveable`
+		// selector about dirtiness and meta-boxes.
+		//
+		// See: `isEditedPostSaveable`
+		if ( ! isEditedPostDirty() ) {
+			return;
+		}
+
+		savePost();
+	} );
+
+	return null;
+}

package/src/components/index.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import EditorKeyboardShortcuts from './global-keyboard-shortcuts';
+
 // Block Creation Components.
 export * from './autocompleters';
 
@@ -5,8 +10,7 @@ export * from './autocompleters';
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as DocumentOutline } from './document-outline';
 export { default as DocumentOutlineCheck } from './document-outline/check';
-export { default as VisualEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/visual-editor-shortcuts';
-export { default as TextEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/text-editor-shortcuts';
+export { EditorKeyboardShortcuts };
 export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-shortcuts/register-shortcuts';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
@@ -51,7 +55,10 @@ export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
-export { default as PostSyncStatus } from './post-sync-status';
+export {
+	default as PostSyncStatus,
+	PostSyncStatusModal,
+} from './post-sync-status';
 export { default as PostTaxonomies } from './post-taxonomies';
 export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
 export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
@@ -81,3 +88,5 @@ export { default as CharacterCount } from './character-count';
 export { default as EditorProvider } from './provider';
 
 export * from './deprecated';
+export const VisualEditorGlobalKeyboardShortcuts = EditorKeyboardShortcuts;
+export const TextEditorGlobalKeyboardShortcuts = EditorKeyboardShortcuts;

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/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-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-preview-button/index.js

@@ -1,16 +1,10 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Component, createRef, renderToString } from '@wordpress/element';
+import { renderToString } from '@wordpress/element';
 import { Button, Path, SVG, VisuallyHidden } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ifCondition, compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -105,48 +99,40 @@ function writeInterstitialMessage( targetDocument ) {
 	targetDocument.close();
 }
 
-export class PostPreviewButton extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.buttonRef = createRef();
-
-		this.openPreviewWindow = this.openPreviewWindow.bind( this );
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { previewLink } = this.props;
-		// This relies on the window being responsible to unset itself when
-		// navigation occurs or a new preview window is opened, to avoid
-		// unintentional forceful redirects.
-		if ( previewLink && ! prevProps.previewLink ) {
-			this.setPreviewWindowLink( previewLink );
-		}
-	}
-
-	/**
-	 * Sets the preview window's location to the given URL, if a preview window
-	 * exists and is not closed.
-	 *
-	 * @param {string} url URL to assign as preview window location.
-	 */
-	setPreviewWindowLink( url ) {
-		const { previewWindow } = this;
-
-		if ( previewWindow && ! previewWindow.closed ) {
-			previewWindow.location = url;
-			if ( this.buttonRef.current ) {
-				this.buttonRef.current.focus();
-			}
-		}
+export default function PostPreviewButton( {
+	className,
+	textContent,
+	forceIsAutosaveable,
+	role,
+	onPreview,
+} ) {
+	const { postId, currentPostLink, previewLink, isSaveable, isViewable } =
+		useSelect( ( select ) => {
+			const editor = select( editorStore );
+			const core = select( coreStore );
+
+			const postType = core.getPostType(
+				editor.getCurrentPostType( 'type' )
+			);
+
+			return {
+				postId: editor.getCurrentPostId(),
+				currentPostLink: editor.getCurrentPostAttribute( 'link' ),
+				previewLink: editor.getEditedPostPreviewLink(),
+				isSaveable: editor.isEditedPostSaveable(),
+				isViewable: postType?.viewable ?? false,
+			};
+		}, [] );
+
+	const { __unstableSaveForPreview } = useDispatch( editorStore );
+
+	if ( ! isViewable ) {
+		return null;
 	}
 
-	getWindowTarget() {
-		const { postId } = this.props;
-		return `wp-preview-${ postId }`;
-	}
+	const targetId = `wp-preview-${ postId }`;
 
-	openPreviewWindow( event ) {
+	const openPreviewWindow = async ( event ) => {
 		// Our Preview button has its 'href' and 'target' set correctly for a11y
 		// purposes. Unfortunately, though, we can't rely on the default 'click'
 		// handler since sometimes it incorrectly opens a new tab instead of reusing
@@ -155,117 +141,48 @@ export class PostPreviewButton extends Component {
 		event.preventDefault();
 
 		// Open up a Preview tab if needed. This is where we'll show the preview.
-		if ( ! this.previewWindow || this.previewWindow.closed ) {
-			this.previewWindow = window.open( '', this.getWindowTarget() );
-		}
+		const previewWindow = window.open( '', targetId );
 
 		// Focus the Preview tab. This might not do anything, depending on the browser's
 		// and user's preferences.
 		// https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus
-		this.previewWindow.focus();
-
-		if (
-			// If we don't need to autosave the post before previewing, then we simply
-			// load the Preview URL in the Preview tab.
-			! this.props.isAutosaveable ||
-			// Do not save or overwrite the post, if the post is already locked.
-			this.props.isPostLocked
-		) {
-			this.setPreviewWindowLink( event.target.href );
-			return;
-		}
-
-		// Request an autosave. This happens asynchronously and causes the component
-		// to update when finished.
-		if ( this.props.isDraft ) {
-			this.props.savePost( { isPreview: true } );
-		} else {
-			this.props.autosave( { isPreview: true } );
-		}
-
-		// Display a 'Generating preview' message in the Preview tab while we wait for the
-		// autosave to finish.
-		writeInterstitialMessage( this.previewWindow.document );
-	}
-
-	render() {
-		const { previewLink, currentPostLink, isSaveable, role } = this.props;
-
-		// Link to the `?preview=true` URL if we have it, since this lets us see
-		// changes that were autosaved since the post was last published. Otherwise,
-		// just link to the post's URL.
-		const href = previewLink || currentPostLink;
-
-		const classNames = classnames(
-			{
-				'editor-post-preview': ! this.props.className,
-			},
-			this.props.className
-		);
-
-		return (
-			<Button
-				variant={ ! this.props.className ? 'tertiary' : undefined }
-				className={ classNames }
-				href={ href }
-				target={ this.getWindowTarget() }
-				disabled={ ! isSaveable }
-				onClick={ this.openPreviewWindow }
-				ref={ this.buttonRef }
-				role={ role }
-			>
-				{ this.props.textContent ? (
-					this.props.textContent
-				) : (
-					<>
-						{ _x( 'Preview', 'imperative verb' ) }
-						<VisuallyHidden as="span">
-							{
-								/* translators: accessibility text */
-								__( '(opens in a new tab)' )
-							}
-						</VisuallyHidden>
-					</>
-				) }
-			</Button>
-		);
-	}
+		previewWindow.focus();
+
+		writeInterstitialMessage( previewWindow.document );
+
+		const link = await __unstableSaveForPreview( { forceIsAutosaveable } );
+
+		previewWindow.location = link;
+
+		onPreview?.();
+	};
+
+	// Link to the `?preview=true` URL if we have it, since this lets us see
+	// changes that were autosaved since the post was last published. Otherwise,
+	// just link to the post's URL.
+	const href = previewLink || currentPostLink;
+
+	return (
+		<Button
+			variant={ ! className ? 'tertiary' : undefined }
+			className={ className || 'editor-post-preview' }
+			href={ href }
+			target={ targetId }
+			disabled={ ! isSaveable }
+			onClick={ openPreviewWindow }
+			role={ role }
+		>
+			{ textContent || (
+				<>
+					{ _x( 'Preview', 'imperative verb' ) }
+					<VisuallyHidden as="span">
+						{
+							/* translators: accessibility text */
+							__( '(opens in a new tab)' )
+						}
+					</VisuallyHidden>
+				</>
+			) }
+		</Button>
+	);
 }
-
-export default compose( [
-	withSelect( ( select, { forcePreviewLink, forceIsAutosaveable } ) => {
-		const {
-			getCurrentPostId,
-			getCurrentPostAttribute,
-			getEditedPostAttribute,
-			isEditedPostSaveable,
-			isEditedPostAutosaveable,
-			getEditedPostPreviewLink,
-			isPostLocked,
-		} = select( editorStore );
-		const { getPostType } = select( coreStore );
-
-		const previewLink = getEditedPostPreviewLink();
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-		return {
-			postId: getCurrentPostId(),
-			currentPostLink: getCurrentPostAttribute( 'link' ),
-			previewLink:
-				forcePreviewLink !== undefined ? forcePreviewLink : previewLink,
-			isSaveable: isEditedPostSaveable(),
-			isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(),
-			isViewable: postType?.viewable ?? false,
-			isDraft:
-				[ 'draft', 'auto-draft' ].indexOf(
-					getEditedPostAttribute( 'status' )
-				) !== -1,
-			isPostLocked: isPostLocked(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		autosave: dispatch( editorStore ).autosave,
-		savePost: dispatch( editorStore ).savePost,
-	} ) ),
-	ifCondition( ( { isViewable } ) => isViewable ),
-] )( PostPreviewButton );