@wordpress/editor 13.14.0 → 13.15.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-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 );