@wordpress/editor 13.32.0 → 13.34.0

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

@@ -1,9 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalText as Text,
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -11,6 +25,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import PostExcerptForm from './index';
 import PostExcerptCheck from './check';
 import PluginPostExcerpt from './plugin';
+import { TEMPLATE_ORIGINS } from '../../store/constants';
 import { store as editorStore } from '../../store';
 
 /**
@@ -18,14 +33,18 @@ import { store as editorStore } from '../../store';
  */
 const PANEL_NAME = 'post-excerpt';
 
-export default function PostExcerptPanel() {
-	const { isOpened, isEnabled } = useSelect( ( select ) => {
-		const { isEditorPanelOpened, isEditorPanelEnabled } =
-			select( editorStore );
+function ExcerptPanel() {
+	const { isOpened, isEnabled, postType } = useSelect( ( select ) => {
+		const {
+			isEditorPanelOpened,
+			isEditorPanelEnabled,
+			getCurrentPostType,
+		} = select( editorStore );
 
 		return {
 			isOpened: isEditorPanelOpened( PANEL_NAME ),
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			postType: getCurrentPostType(),
 		};
 	}, [] );
 
@@ -36,22 +55,180 @@ export default function PostExcerptPanel() {
 		return null;
 	}
 
+	// There are special cases where we want to label the excerpt as a description.
+	const shouldUseDescriptionLabel = [
+		'wp_template',
+		'wp_template_part',
+		'wp_block',
+	].includes( postType );
+
+	return (
+		<PanelBody
+			title={
+				shouldUseDescriptionLabel
+					? __( 'Description' )
+					: __( 'Excerpt' )
+			}
+			opened={ isOpened }
+			onToggle={ toggleExcerptPanel }
+		>
+			<PluginPostExcerpt.Slot>
+				{ ( fills ) => (
+					<>
+						<PostExcerptForm />
+						{ fills }
+					</>
+				) }
+			</PluginPostExcerpt.Slot>
+		</PanelBody>
+	);
+}
+
+export default function PostExcerptPanel() {
 	return (
 		<PostExcerptCheck>
-			<PanelBody
-				title={ __( 'Excerpt' ) }
-				opened={ isOpened }
-				onToggle={ toggleExcerptPanel }
-			>
-				<PluginPostExcerpt.Slot>
-					{ ( fills ) => (
-						<>
-							<PostExcerptForm />
-							{ fills }
-						</>
-					) }
-				</PluginPostExcerpt.Slot>
-			</PanelBody>
+			<ExcerptPanel />
 		</PostExcerptCheck>
 	);
 }
+
+export function PrivatePostExcerptPanel() {
+	return (
+		<PostExcerptCheck>
+			<PrivateExcerpt />
+		</PostExcerptCheck>
+	);
+}
+
+function PrivateExcerpt() {
+	const { shouldRender, excerpt, shouldBeUsedAsDescription, allowEditing } =
+		useSelect( ( select ) => {
+			const {
+				getCurrentPostType,
+				getCurrentPostId,
+				getEditedPostAttribute,
+				isEditorPanelEnabled,
+			} = select( editorStore );
+			const postType = getCurrentPostType();
+			const isTemplateOrTemplatePart = [
+				'wp_template',
+				'wp_template_part',
+			].includes( postType );
+			const isPattern = postType === 'wp_block';
+			// These post types use the `excerpt` field as a description semantically, so we need to
+			// handle proper labeling and some flows where we should always render them as text.
+			const _shouldBeUsedAsDescription =
+				isTemplateOrTemplatePart || isPattern;
+			const _usedAttribute = isTemplateOrTemplatePart
+				? 'description'
+				: 'excerpt';
+			// We need to fetch the entity in this case to check if we'll allow editing.
+			const template =
+				isTemplateOrTemplatePart &&
+				select( coreStore ).getEntityRecord(
+					'postType',
+					postType,
+					getCurrentPostId()
+				);
+			// For post types that use excerpt as description, we do not abide
+			// by the `isEnabled` panel flag in order to render them as text.
+			const _shouldRender =
+				isEditorPanelEnabled( PANEL_NAME ) ||
+				_shouldBeUsedAsDescription;
+			return {
+				excerpt: getEditedPostAttribute( _usedAttribute ),
+				shouldRender: _shouldRender,
+				shouldBeUsedAsDescription: _shouldBeUsedAsDescription,
+				// If we should render, allow editing for all post types that are not used as description.
+				// For the rest allow editing only for user generated entities.
+				allowEditing:
+					_shouldRender &&
+					( ! _shouldBeUsedAsDescription ||
+						isPattern ||
+						( template &&
+							template.source === TEMPLATE_ORIGINS.custom &&
+							! template.has_theme_file ) ),
+			};
+		}, [] );
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const label = shouldBeUsedAsDescription
+		? __( 'Description' )
+		: __( 'Excerpt' );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			'aria-label': label,
+			headerTitle: label,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor, label ]
+	);
+	if ( ! shouldRender ) {
+		return false;
+	}
+	const excerptText = !! excerpt && (
+		<Text align="left" numberOfLines={ 4 } truncate>
+			{ excerpt }
+		</Text>
+	);
+	if ( ! allowEditing ) {
+		return excerptText;
+	}
+	const excerptPlaceholder = shouldBeUsedAsDescription
+		? __( 'Add a description…' )
+		: __( 'Add an excerpt…' );
+	const triggerEditLabel = shouldBeUsedAsDescription
+		? __( 'Edit description' )
+		: __( 'Edit excerpt' );
+	return (
+		<Dropdown
+			className="editor-post-excerpt__dropdown"
+			contentClassName="editor-post-excerpt__dropdown__content"
+			popoverProps={ popoverProps }
+			focusOnMount
+			ref={ setPopoverAnchor }
+			renderToggle={ ( { onToggle } ) => (
+				<Button
+					className={ classnames(
+						'editor-post-excerpt__dropdown__trigger',
+						{ 'has-excerpt': !! excerpt }
+					) }
+					onClick={ onToggle }
+					label={
+						!! excerptText ? triggerEditLabel : excerptPlaceholder
+					}
+					showTooltip={ !! excerptText }
+				>
+					{ excerptText || excerptPlaceholder }
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<InspectorPopoverHeader
+						title={ label }
+						onClose={ onClose }
+					/>
+
+					<VStack spacing={ 4 }>
+						<PluginPostExcerpt.Slot>
+							{ ( fills ) => (
+								<>
+									<PostExcerptForm
+										hideLabelFromVision
+										updateOnBlur
+									/>
+									{ fills }
+								</>
+							) }
+						</PluginPostExcerpt.Slot>
+					</VStack>
+				</>
+			) }
+		/>
+	);
+}

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

@@ -20,7 +20,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
  * ```js
  * // Using ES5 syntax
  * var __ = wp.i18n.__;
- * var PluginPostExcerpt = wp.editPost.PluginPostExcerpt;
+ * var PluginPostExcerpt = wp.editPost.__experimentalPluginPostExcerpt;
  *
  * function MyPluginPostExcerpt() {
  * 	return React.createElement(
@@ -37,7 +37,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
  * ```jsx
  * // Using ESNext syntax
  * import { __ } from '@wordpress/i18n';
- * import { PluginPostExcerpt } from '@wordpress/edit-post';
+ * import { __experimentalPluginPostExcerpt as PluginPostExcerpt } from '@wordpress/edit-post';
  *
  * const MyPluginPostExcerpt = () => (
  * 	<PluginPostExcerpt className="my-plugin-post-excerpt">

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

@@ -2,3 +2,27 @@
 	width: 100%;
 	margin-bottom: 10px;
 }
+
+.editor-post-excerpt__dropdown__trigger {
+	height: auto;
+	padding: 0;
+
+	&:not(.has-excerpt) {
+		color: $gray-700;
+	}
+
+	&:hover {
+		color: $gray-900;
+	}
+}
+
+.editor-post-excerpt__dropdown {
+	display: block;
+}
+
+.editor-post-excerpt__dropdown__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+}

package/src/components/post-featured-image/index.js

@@ -32,7 +32,7 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 // Used when labels from post type were not yet loaded or when they are not present.
 const DEFAULT_FEATURE_IMAGE_LABEL = __( 'Featured image' );
-const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
+const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Add a featured image' );
 
 const instructions = (
 	<p>

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

@@ -31,8 +31,7 @@
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
 	outline-offset: -#{$border-width};
-	min-height: $grid-unit-50 * 2;
-	margin-bottom: $grid-unit-20;
+	min-height: $grid-unit-50;
 
 	display: flex;
 	justify-content: center;
@@ -52,16 +51,11 @@
 
 .editor-post-featured-image__toggle {
 	border-radius: $radius-block-ui;
-	background-color: $gray-100;
 	height: 100%;
 	line-height: 20px;
 	padding: $grid-unit-10 0;
 	text-align: center;
-
-	&:hover {
-		background: $gray-300;
-		color: $gray-900;
-	}
+	box-shadow: inset 0 0 0 $border-width $gray-400;
 }
 
 .editor-post-featured-image__actions {

package/src/components/post-last-edited-panel/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostLastEditedPanel() {
+	const modified = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'modified' ),
+		[]
+	);
+	const lastEditedText =
+		modified &&
+		sprintf(
+			// translators: %s: Human-readable time difference, e.g. "2 days ago".
+			__( 'Last edited %s.' ),
+			humanTimeDiff( modified )
+		);
+	if ( ! lastEditedText ) {
+		return null;
+	}
+	return (
+		<div className="editor-post-last-edited-panel">
+			<Text>{ lastEditedText }</Text>
+		</div>
+	);
+}

package/src/components/post-last-edited-panel/style.scss

@@ -0,0 +1,6 @@
+.editor-post-last-edited-panel {
+	color: $gray-700;
+	& .components-text {
+		color: inherit;
+	}
+}

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

@@ -1,6 +1,6 @@
 .editor-post-panel__row {
 	width: 100%;
-	min-height: $button-size-next-default-40px;
+	min-height: $grid-unit-40;
 	justify-content: flex-start !important;
 	align-items: flex-start !important;
 }
@@ -8,14 +8,14 @@
 .editor-post-panel__row-label {
 	width: 30%;
 	flex-shrink: 0;
-	min-height: $button-size-next-default-40px;
+	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
 }
 
 .editor-post-panel__row-control {
 	flex-grow: 1;
-	min-height: $button-size-next-default-40px;
+	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
 }

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' );
+}