@wordpress/editor 13.33.0 → 13.34.0

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

@@ -15,7 +15,7 @@ import PostPingbacks from '../post-pingbacks';
 
 const PANEL_NAME = 'discussion-panel';
 
-function PostDiscussionPanel() {
+function DiscussionPanel() {
 	const { isEnabled, isOpened } = useSelect( ( select ) => {
 		const { isEditorPanelEnabled, isEditorPanelOpened } =
 			select( editorStore );
@@ -31,27 +31,31 @@ function PostDiscussionPanel() {
 		return null;
 	}
 
+	return (
+		<PanelBody
+			title={ __( 'Discussion' ) }
+			opened={ isOpened }
+			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		>
+			<PostTypeSupportCheck supportKeys="comments">
+				<PanelRow>
+					<PostComments />
+				</PanelRow>
+			</PostTypeSupportCheck>
+
+			<PostTypeSupportCheck supportKeys="trackbacks">
+				<PanelRow>
+					<PostPingbacks />
+				</PanelRow>
+			</PostTypeSupportCheck>
+		</PanelBody>
+	);
+}
+
+export default function PostDiscussionPanel() {
 	return (
 		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
-			<PanelBody
-				title={ __( 'Discussion' ) }
-				opened={ isOpened }
-				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-			>
-				<PostTypeSupportCheck supportKeys="comments">
-					<PanelRow>
-						<PostComments />
-					</PanelRow>
-				</PostTypeSupportCheck>
-
-				<PostTypeSupportCheck supportKeys="trackbacks">
-					<PanelRow>
-						<PostPingbacks />
-					</PanelRow>
-				</PostTypeSupportCheck>
-			</PanelBody>
+			<DiscussionPanel />
 		</PostTypeSupportCheck>
 	);
 }
-
-export default PostDiscussionPanel;

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

@@ -1,13 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import PostTypeSupportCheck from '../post-type-support-check';
-import { store as editorStore } from '../../store';
 
 /**
  * Component for checking if the post type supports the excerpt field.
@@ -18,18 +12,6 @@ import { store as editorStore } from '../../store';
  * @return {Component} The component to be rendered.
  */
 function PostExcerptCheck( { children } ) {
-	const postType = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
-		return getEditedPostAttribute( 'type' );
-	}, [] );
-
-	// This special case is unfortunate, but the REST API of wp_template and wp_template_part
-	// support the excerpt field throught the "description" field rather than "excerpt" which means
-	// the default ExcerptPanel won't work for these.
-	if ( [ 'wp_template', 'wp_template_part' ].includes( postType ) ) {
-		return null;
-	}
-
 	return (
 		<PostTypeSupportCheck supportKeys="excerpt">
 			{ children }

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

@@ -4,37 +4,88 @@
 import { __ } from '@wordpress/i18n';
 import { ExternalLink, TextareaControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostExcerpt() {
-	const excerpt = useSelect(
-		( select ) => select( editorStore ).getEditedPostAttribute( 'excerpt' ),
+/**
+ * Renders an editable textarea for the post excerpt.
+ * Templates, template parts and patterns use the `excerpt` field as a description semantically.
+ * Additionally templates and template parts override the `excerpt` field as `description` in
+ * REST API. So this component handles proper labeling and updating the edited entity.
+ *
+ * @param {Object}  props                             - Component props.
+ * @param {boolean} [props.hideLabelFromVision=false] - Whether to visually hide the textarea's label.
+ * @param {boolean} [props.updateOnBlur=false]        - Whether to update the post on change or use local state and update on blur.
+ */
+export default function PostExcerpt( {
+	hideLabelFromVision = false,
+	updateOnBlur = false,
+} ) {
+	const { excerpt, shouldUseDescriptionLabel, usedAttribute } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
+			const postType = getCurrentPostType();
+			// This special case is unfortunate, but the REST API of wp_template and wp_template_part
+			// support the excerpt field throught the "description" field rather than "excerpt".
+			const _usedAttribute = [
+				'wp_template',
+				'wp_template_part',
+			].includes( postType )
+				? 'description'
+				: 'excerpt';
+			return {
+				excerpt: getEditedPostAttribute( _usedAttribute ),
+				// There are special cases where we want to label the excerpt as a description.
+				shouldUseDescriptionLabel: [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+				usedAttribute: _usedAttribute,
+			};
+		},
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
+	const [ localExcerpt, setLocalExcerpt ] = useState( excerpt );
+	const updatePost = ( value ) => {
+		editPost( { [ usedAttribute ]: value } );
+	};
+	const label = shouldUseDescriptionLabel
+		? __( 'Write a description (optional)' )
+		: __( 'Write an excerpt (optional)' );
 
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
 				__nextHasNoMarginBottom
-				label={ __( 'Write an excerpt (optional)' ) }
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
 				className="editor-post-excerpt__textarea"
-				onChange={ ( value ) => editPost( { excerpt: value } ) }
-				value={ excerpt }
+				onChange={ updateOnBlur ? setLocalExcerpt : updatePost }
+				onBlur={
+					updateOnBlur ? () => updatePost( localExcerpt ) : undefined
+				}
+				value={ updateOnBlur ? localExcerpt : excerpt }
+				help={
+					! shouldUseDescriptionLabel ? (
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt'
+							) }
+						>
+							{ __( 'Learn more about manual excerpts' ) }
+						</ExternalLink>
+					) : (
+						__( 'Write a description' )
+					)
+				}
 			/>
-			<ExternalLink
-				href={ __(
-					'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt'
-				) }
-			>
-				{ __( 'Learn more about manual excerpts' ) }
-			</ExternalLink>
 		</div>
 	);
 }
-
-export default PostExcerpt;

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;
 }