@wordpress/editor 13.31.0 → 13.33.0

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

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { usePostActions } from './actions';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+} from '../../store/constants';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	kebabCase,
+} = unlock( componentsPrivateApis );
+
+const POST_ACTIONS_WHILE_EDITING = [
+	'view-post',
+	'view-post-revisions',
+	'rename-post',
+	'move-to-trash',
+];
+
+export default function PostActions( { onActionPerformed, buttonProps } ) {
+	const { postType, item } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPost } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+			item: getCurrentPost(),
+		};
+	} );
+	const actions = usePostActions(
+		onActionPerformed,
+		POST_ACTIONS_WHILE_EDITING
+	);
+
+	if (
+		[
+			TEMPLATE_POST_TYPE,
+			TEMPLATE_PART_POST_TYPE,
+			PATTERN_POST_TYPE,
+		].includes( postType )
+	) {
+		return null;
+	}
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="small"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					disabled={ ! actions.length }
+					className="editor-all-actions-button"
+					{ ...buttonProps }
+				/>
+			}
+			placement="bottom-end"
+		>
+			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
+		</DropdownMenu>
+	);
+}
+
+// From now on all the functions on this file are copied as from the dataviews packages,
+// The editor packages should not be using the dataviews packages directly,
+// and the dataviews package should not be using the editor packages directly,
+// so duplicating the code here seems like the least bad option.
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function DropdownMenuItemTrigger( { action, onClick } ) {
+	return (
+		<DropdownMenuItem
+			onClick={ onClick }
+			hideOnClick={ ! action.RenderModal }
+		>
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function ActionWithModal( { action, item, ActionTrigger } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ action.modalHeader || action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase(
+						action.id
+					) }` }
+				>
+					<RenderModal
+						items={ [ item ] }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( [ item ] ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}

package/src/components/post-actions/style.scss

@@ -0,0 +1,3 @@
+.editor-action-modal {
+	z-index: z-index(".editor-action-modal");
+}

package/src/components/post-card-panel/index.js

@@ -0,0 +1,168 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+	PanelBody,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+import { decodeEntities } from '@wordpress/html-entities';
+import { count as wordCount } from '@wordpress/wordcount';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+import TemplateAreas from '../template-areas';
+
+export default function PostCardPanel( { className, actions } ) {
+	const { modified, title, templateInfo, icon, postType, isPostsPage } =
+		useSelect( ( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostType,
+				getCurrentPostId,
+				__experimentalGetTemplateInfo,
+			} = select( editorStore );
+			const { getEditedEntityRecord, getEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const _type = getCurrentPostType();
+			const _id = getCurrentPostId();
+			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _templateInfo = __experimentalGetTemplateInfo( _record );
+			return {
+				title:
+					_templateInfo?.title || getEditedPostAttribute( 'title' ),
+				modified: getEditedPostAttribute( 'modified' ),
+				id: _id,
+				postType: _type,
+				templateInfo: _templateInfo,
+				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+					area: _record?.area,
+				} ),
+				isPostsPage: +_id === siteSettings?.page_for_posts,
+			};
+		}, [] );
+	const description = templateInfo?.description;
+	const lastEditedText =
+		modified &&
+		sprintf(
+			// translators: %s: Human-readable time difference, e.g. "2 days ago".
+			__( 'Last edited %s.' ),
+			humanTimeDiff( modified )
+		);
+	const showPostContentInfo =
+		! isPostsPage &&
+		! [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( postType );
+	return (
+		<PanelBody>
+			<div
+				className={ classnames( 'editor-post-card-panel', className ) }
+			>
+				<HStack
+					spacing={ 2 }
+					className="editor-post-card-panel__header"
+					align="flex-start"
+				>
+					<Icon
+						className="editor-post-card-panel__icon"
+						icon={ icon }
+					/>
+					<Text
+						numberOfLines={ 2 }
+						truncate
+						className="editor-post-card-panel__title"
+						weight={ 500 }
+						as="h2"
+					>
+						{ title ? decodeEntities( title ) : __( 'No Title' ) }
+					</Text>
+					{ actions }
+				</HStack>
+				<VStack className="editor-post-card-panel__content">
+					{ ( description ||
+						lastEditedText ||
+						showPostContentInfo ) && (
+						<VStack
+							className="editor-post-card-panel__description"
+							spacing={ 2 }
+						>
+							{ description && <Text>{ description }</Text> }
+							{ showPostContentInfo && <PostContentInfo /> }
+							{ lastEditedText && (
+								<Text>{ lastEditedText }</Text>
+							) }
+						</VStack>
+					) }
+					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
+				</VStack>
+			</div>
+		</PanelBody>
+	);
+}
+
+// Taken from packages/editor/src/components/time-to-read/index.js.
+const AVERAGE_READING_RATE = 189;
+
+// This component renders the wordcount and reading time for the post.
+function PostContentInfo() {
+	const postContent = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
+		[]
+	);
+	/*
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+	const wordsCounted = useMemo(
+		() => ( postContent ? wordCount( postContent, wordCountType ) : 0 ),
+		[ postContent, wordCountType ]
+	);
+	if ( ! wordsCounted ) {
+		return null;
+	}
+	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
+	const wordsCountText = sprintf(
+		// translators: %s: the number of words in the post.
+		_n( '%s word', '%s words', wordsCounted ),
+		wordsCounted.toLocaleString()
+	);
+	const minutesText =
+		readingTime <= 1
+			? __( '1 minute' )
+			: sprintf(
+					// translators: %s: the number of minutes to read the post.
+					_n( '%s minute', '%s minutes', readingTime ),
+					readingTime.toLocaleString()
+			  );
+	return (
+		<Text>
+			{ sprintf(
+				/* translators: 1: How many words a post has. 2: the number of minutes to read the post (e.g. 130 words, 2 minutes read time.) */
+				__( '%1$s, %2$s read time.' ),
+				wordsCountText,
+				minutesText
+			) }
+		</Text>
+	);
+}

package/src/components/post-card-panel/style.scss

@@ -0,0 +1,32 @@
+.editor-post-card-panel {
+	&__content {
+		flex-grow: 1;
+	}
+
+	&__title {
+		width: 100%;
+
+		&.editor-post-card-panel__title {
+			margin: 3px 0 0 0;
+		}
+	}
+
+	&__icon {
+		flex: 0 0 $icon-size;
+		width: $icon-size;
+		height: $icon-size;
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 0 $grid-unit-10;
+	}
+
+	&__description {
+		color: $gray-700;
+		& .components-text {
+			color: inherit;
+		}
+	}
+}

package/src/components/post-excerpt/check.js

@@ -9,6 +9,14 @@ import { useSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
+/**
+ * Component for checking if the post type supports the excerpt field.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostExcerptCheck( { children } ) {
 	const postType = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );

package/src/components/post-featured-image/style.scss

@@ -12,7 +12,6 @@
 
 .editor-post-featured-image__container {
 	position: relative;
-	aspect-ratio: 2/1;
 
 	&:hover,
 	&:focus,
@@ -31,8 +30,9 @@
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
-	outline: $border-width solid rgba(0, 0, 0, 0.1);
 	outline-offset: -#{$border-width};
+	min-height: $grid-unit-50 * 2;
+	margin-bottom: $grid-unit-20;
 
 	display: flex;
 	justify-content: center;
@@ -40,6 +40,7 @@
 
 .editor-post-featured-image__preview {
 	height: auto;
+	outline: $border-width solid rgba($black, 0.1);
 
 	.editor-post-featured-image__preview-image {
 		object-fit: cover;

package/src/components/post-publish-button/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -10,7 +5,6 @@ import { Button } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -112,13 +106,14 @@ export class PostPublishButton extends Component {
 			isSaving,
 			isAutoSaving,
 			isToggle,
-			onSave,
-			onStatusChange,
+			savePostStatus,
 			onSubmit = noop,
 			onToggle,
 			visibility,
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
+			postStatus,
+			postStatusHasChanged,
 		} = this.props;
 
 		const isButtonDisabled =
@@ -135,15 +130,19 @@ export class PostPublishButton extends Component {
 				( ! isPublishable && ! forceIsDirty ) ) &&
 			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
 
-		let publishStatus;
-		if ( ! hasPublishAction ) {
+		// If the new status has not changed explicitely, we derive it from
+		// other factors, like having a publish action, etc.. We need to preserve
+		// this because it affects when to show the pre and post publish panels.
+		// If it has changed though explicitely, we need to respect that.
+		let publishStatus = 'publish';
+		if ( postStatusHasChanged ) {
+			publishStatus = postStatus;
+		} else if ( ! hasPublishAction ) {
 			publishStatus = 'pending';
 		} else if ( visibility === 'private' ) {
 			publishStatus = 'private';
 		} else if ( isBeingScheduled ) {
 			publishStatus = 'future';
-		} else {
-			publishStatus = 'publish';
 		}
 
 		const onClickButton = () => {
@@ -151,10 +150,10 @@ export class PostPublishButton extends Component {
 				return;
 			}
 			onSubmit();
-			onStatusChange( publishStatus );
-			onSave();
+			savePostStatus( publishStatus );
 		};
 
+		// Callback to open the publish panel.
 		const onClickToggle = () => {
 			if ( isToggleDisabled ) {
 				return;
@@ -179,33 +178,16 @@ export class PostPublishButton extends Component {
 			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
 		};
-
-		const toggleChildren = isBeingScheduled
-			? __( 'Schedule…' )
-			: __( 'Publish' );
-		const buttonChildren = (
-			<PublishButtonLabel
-				hasNonPostEntityChanges={ hasNonPostEntityChanges }
-			/>
-		);
-
 		const componentProps = isToggle ? toggleProps : buttonProps;
-		const componentChildren = isToggle ? toggleChildren : buttonChildren;
 		return (
 			<>
 				<Button
 					ref={ this.buttonNode }
 					{ ...componentProps }
-					className={ classnames(
-						componentProps.className,
-						'editor-post-publish-button__button',
-						{
-							'has-changes-dot': hasNonPostEntityChanges,
-						}
-					) }
+					className={ `${ componentProps.className } editor-post-publish-button__button` }
 					size="compact"
 				>
-					{ componentChildren }
+					<PublishButtonLabel />
 				</Button>
 			</>
 		);
@@ -228,6 +210,8 @@ export default compose( [
 			getCurrentPostId,
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
+			getEditedPostAttribute,
+			getPostEdits,
 		} = select( editorStore );
 		return {
 			isSaving: isSavingPost(),
@@ -242,6 +226,8 @@ export default compose( [
 				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			postType: getCurrentPostType(),
 			postId: getCurrentPostId(),
+			postStatus: getEditedPostAttribute( 'status' ),
+			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
@@ -249,9 +235,10 @@ export default compose( [
 	withDispatch( ( dispatch ) => {
 		const { editPost, savePost } = dispatch( editorStore );
 		return {
-			onStatusChange: ( status ) =>
-				editPost( { status }, { undoIgnore: true } ),
-			onSave: savePost,
+			savePostStatus: ( status ) => {
+				editPost( { status }, { undoIgnore: true } );
+				savePost();
+			},
 		};
 	} ),
 ] )( PostPublishButton );

package/src/components/post-publish-button/label.js

@@ -2,49 +2,27 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PublishButtonLabel( {
-	isPublished,
-	isBeingScheduled,
-	isSaving,
-	isPublishing,
-	hasPublishAction,
-	isAutosaving,
-	hasNonPostEntityChanges,
-} ) {
-	if ( isPublishing ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Publishing…' );
-	} else if ( isPublished && isSaving && ! isAutosaving ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Updating…' );
-	} else if ( isBeingScheduled && isSaving && ! isAutosaving ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Scheduling…' );
-	}
-
-	if ( ! hasPublishAction ) {
-		return hasNonPostEntityChanges
-			? __( 'Submit for Review…' )
-			: __( 'Submit for Review' );
-	} else if ( isPublished ) {
-		return hasNonPostEntityChanges ? __( 'Update…' ) : __( 'Update' );
-	} else if ( isBeingScheduled ) {
-		return hasNonPostEntityChanges ? __( 'Schedule…' ) : __( 'Schedule' );
-	}
-
-	return __( 'Publish' );
-}
-
-export default compose( [
-	withSelect( ( select ) => {
+export default function PublishButtonLabel() {
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	const {
+		isPublished,
+		isBeingScheduled,
+		isSaving,
+		isPublishing,
+		hasPublishAction,
+		isAutosaving,
+		hasNonPostEntityChanges,
+		postStatusHasChanged,
+		postStatus,
+	} = useSelect( ( select ) => {
 		const {
 			isCurrentPostPublished,
 			isEditedPostBeingScheduled,
@@ -53,6 +31,8 @@ export default compose( [
 			getCurrentPost,
 			getCurrentPostType,
 			isAutosavingPost,
+			getPostEdits,
+			getEditedPostAttribute,
 		} = select( editorStore );
 		return {
 			isPublished: isCurrentPostPublished(),
@@ -63,6 +43,41 @@ export default compose( [
 				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			postType: getCurrentPostType(),
 			isAutosaving: isAutosavingPost(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
+			postStatusHasChanged: !! getPostEdits()?.status,
+			postStatus: getEditedPostAttribute( 'status' ),
 		};
-	} ),
-] )( PublishButtonLabel );
+	}, [] );
+	if ( isPublishing ) {
+		/* translators: button label text should, if possible, be under 16 characters. */
+		return __( 'Publishing…' );
+	} else if (
+		( isPublished || isBeingScheduled ) &&
+		isSaving &&
+		! isAutosaving
+	) {
+		/* translators: button label text should, if possible, be under 16 characters. */
+		return __( 'Saving…' );
+	}
+	if ( ! hasPublishAction ) {
+		// TODO: this is because "Submit for review" string is too long in some languages.
+		// @see https://github.com/WordPress/gutenberg/issues/10475
+		return isSmallerThanMediumViewport
+			? __( 'Publish' )
+			: __( 'Submit for Review' );
+	}
+	if (
+		hasNonPostEntityChanges ||
+		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
+		( ! postStatusHasChanged && postStatus === 'future' )
+	) {
+		return __( 'Save' );
+	}
+	if ( isBeingScheduled ) {
+		return __( 'Schedule' );
+	}
+	return __( 'Publish' );
+}