@wordpress/editor 13.33.0 → 13.35.0

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

@@ -2,8 +2,16 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -12,20 +20,95 @@ import { store as editorStore } from '../../store';
 import PostTypeSupportCheck from '../post-type-support-check';
 import PostComments from '../post-comments';
 import PostPingbacks from '../post-pingbacks';
+import PostPanelRow from '../post-panel-row';
 
 const PANEL_NAME = 'discussion-panel';
 
-function PostDiscussionPanel() {
-	const { isEnabled, isOpened } = useSelect( ( select ) => {
-		const { isEditorPanelEnabled, isEditorPanelOpened } =
-			select( editorStore );
+function ModalContents( { onClose } ) {
+	return (
+		<div className="editor-post-discussion">
+			<InspectorPopoverHeader
+				title={ __( 'Discussion' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 4 }>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PostComments />
+				</PostTypeSupportCheck>
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PostPingbacks />
+				</PostTypeSupportCheck>
+			</VStack>
+		</div>
+	);
+}
+
+function PostDiscussionToggle( { isOpen, onClick } ) {
+	const {
+		commentStatus,
+		pingStatus,
+		commentsSupported,
+		trackbacksSupported,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+		return {
+			commentStatus: getEditedPostAttribute( 'comment_status' ) ?? 'open',
+			pingStatus: getEditedPostAttribute( 'ping_status' ) ?? 'open',
+			commentsSupported: !! postType.supports.comments,
+			trackbacksSupported: !! postType.supports.trackbacks,
+		};
+	}, [] );
+	let label;
+	if ( commentStatus === 'open' ) {
+		if ( pingStatus === 'open' ) {
+			label = __( 'Open' );
+		} else {
+			label = trackbacksSupported ? __( 'Comments only' ) : __( 'Open' );
+		}
+	} else if ( pingStatus === 'open' ) {
+		label = commentsSupported ? __( 'Pings only' ) : __( 'Pings enabled' );
+	} else {
+		label = __( 'Closed' );
+	}
+	return (
+		<Button
+			size="compact"
+			className="editor-post-discussion__panel-toggle"
+			variant="tertiary"
+			aria-label={ __( 'Change discussion options' ) }
+			aria-expanded={ isOpen }
+			onClick={ onClick }
+		>
+			<Text>{ label }</Text>
+		</Button>
+	);
+}
+
+export default function PostDiscussionPanel() {
+	const { isEnabled } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled } = select( editorStore );
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
 		};
 	}, [] );
 
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// 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,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
 
 	if ( ! isEnabled ) {
 		return null;
@@ -33,25 +116,23 @@ 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>
+			<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					className="editor-post-discussion__panel-dropdown"
+					contentClassName="editor-post-discussion__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostDiscussionToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<ModalContents onClose={ onClose } />
+					) }
+				/>
+			</PostPanelRow>
 		</PostTypeSupportCheck>
 	);
 }
-
-export default PostDiscussionPanel;

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

@@ -0,0 +1,26 @@
+.editor-post-discussion__panel-dialog .editor-post-discussion {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+
+	.components-radio-control__option {
+		align-items: flex-start;
+	}
+
+	.components-radio-control__label .components-text {
+		display: block;
+		margin-top: $grid-unit-05;
+	}
+}
+.editor-post-discussion__panel-toggle {
+	&.components-button {
+		height: auto;
+	}
+	.components-text {
+		color: inherit;
+	}
+}
+
+.editor-post-discussion__panel-dialog .components-popover__content {
+	min-width: 320px;
+}

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 clsx from 'clsx';
+
 /**
  * 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={ clsx(
+						'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-format/panel.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelRow } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostFormatForm from './';
+import PostFormatCheck from './check';
+
+export function PostFormat() {
+	return (
+		<PostFormatCheck>
+			<PanelRow className="editor-post-format__panel">
+				<PostFormatForm />
+			</PanelRow>
+		</PostFormatCheck>
+	);
+}
+
+export default PostFormat;

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

@@ -1,3 +1,9 @@
 [class].editor-post-format__suggestion {
 	margin: $grid-unit-05 0 0 0;
 }
+
+.editor-post-format__panel {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}