@wordpress/editor 13.35.0 → 14.0.0

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -15,13 +10,12 @@ import {
 	TextControl,
 	RadioControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,44 +27,17 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
+import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
-function PostStatusLabel( { canEdit } ) {
-	const status = useSelect(
-		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
-		[]
-	);
-	let statusLabel;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = __( 'Published' );
-			break;
-		case 'future':
-			statusLabel = __( 'Scheduled' );
-			break;
-		case 'draft':
-		case 'auto-draft':
-			statusLabel = __( 'Draft' );
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending' );
-			break;
-		case 'private':
-			statusLabel = __( 'Private' );
-			break;
-	}
-	return (
-		<Text
-			className={ clsx( 'editor-post-status-label', {
-				[ ` has-status-${ status }` ]: !! status,
-				'has-icon': canEdit,
-			} ) }
-		>
-			{ statusLabel }
-			{ canEdit && <Icon icon={ chevronDownSmall } /> }
-		</Text>
-	);
-}
+const labels = {
+	'auto-draft': __( 'Draft' ),
+	draft: __( 'Draft' ),
+	pending: __( 'Pending' ),
+	private: __( 'Private' ),
+	future: __( 'Scheduled' ),
+	publish: __( 'Published' ),
+};
 
 const STATUS_OPTIONS = [
 	{
@@ -208,11 +175,6 @@ export default function PostStatus() {
 		let newPassword = password;
 		if ( status === 'future' && new Date( date ) > new Date() ) {
 			newDate = null;
-		} else if ( value === 'future' ) {
-			if ( ! date || new Date( date ) < new Date() ) {
-				newDate = new Date();
-				newDate.setDate( newDate.getDate() + 7 );
-			}
 		}
 		if ( value === 'private' && password ) {
 			newPassword = '';
@@ -234,10 +196,16 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle } ) => (
 						<Button
-							className="editor-post-status-trigger"
+							variant="tertiary"
+							size="compact"
 							onClick={ onToggle }
+							aria-label={ sprintf(
+								// translators: %s: Current post status.
+								__( 'Change post status: %s' ),
+								labels[ status ]
+							) }
 						>
-							<PostStatusLabel canEdit={ canEdit } />
+							{ labels[ status ] }
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (
@@ -260,6 +228,16 @@ export default function PostStatus() {
 												: status
 										}
 									/>
+									{ status === 'future' && (
+										<div className="editor-change-status__publish-date-wrapper">
+											<PrivatePostSchedule
+												showPopoverHeaderActions={
+													false
+												}
+												isCompact
+											/>
+										</div>
+									) }
 									{ status !== 'private' && (
 										<VStack
 											as="fieldset"
@@ -309,8 +287,8 @@ export default function PostStatus() {
 					) }
 				/>
 			) : (
-				<div className="editor-post-status">
-					<PostStatusLabel />
+				<div className="editor-post-status is-read-only">
+					{ labels[ status ] }
 				</div>
 			) }
 		</PostPanelRow>

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

@@ -1,43 +1,13 @@
 .editor-post-status {
 	max-width: 100%;
 
-	.editor-post-status-trigger {
-		padding: 1px;
-		height: auto;
-		border-radius: $grid-unit-20;
-	}
-
-	.editor-post-status-label {
-		border-radius: $grid-unit-20;
-		display: inline-flex;
-		padding: 0 $grid-unit-15 0 $grid-unit-15;
-		background: rgba($gray-900, 0.04);
-		height: $button-size-compact;
-		align-items: center;
-		color: $gray-900;
-
-		&.has-icon {
-			padding: 0 $grid-unit-10 0 $grid-unit-15;
-
-			&:hover {
-				background: rgba($gray-900, 0.08);
-			}
-		}
-
-		&.has-status-publish,
-		&.has-status-private,
-		&.has-status-future {
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: var(--wp-admin-theme-color);
-
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
+	&.is-read-only {
+		padding: 6px 12px;
 	}
 }
 
-.editor-change-status__password-fieldset {
+.editor-change-status__password-fieldset,
+.editor-change-status__publish-date-wrapper {
 	border-top: $border-width solid $gray-200;
 	padding-top: $grid-unit-20;
 }

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
 
 export default function PostSticky() {
 	const postSticky = useSelect( ( select ) => {
@@ -21,12 +22,16 @@ export default function PostSticky() {
 
 	return (
 		<PostStickyCheck>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={ __( 'Stick to the top of the blog' ) }
-				checked={ postSticky }
-				onChange={ () => editPost( { sticky: ! postSticky } ) }
-			/>
+			<PostPanelRow label={ __( 'Sticky' ) }>
+				<ToggleControl
+					className="editor-post-sticky__toggle-control"
+					label={
+						<VisuallyHidden>{ __( 'Sticky' ) }</VisuallyHidden>
+					}
+					checked={ postSticky }
+					onChange={ () => editPost( { sticky: ! postSticky } ) }
+				/>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }

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

@@ -0,0 +1,3 @@
+.editor-post-sticky__toggle-control {
+	padding: 6px 12px;
+}

package/src/components/post-template/block-theme.js

@@ -78,6 +78,7 @@ export default function BlockThemeControl( { id } ) {
 			toggleProps={ {
 				size: 'compact',
 				variant: 'tertiary',
+				tooltipPosition: 'middle left',
 			} }
 			label={ __( 'Template options' ) }
 			text={ decodeEntities( template.title ) }

package/src/components/post-template/classic-theme.js

@@ -55,6 +55,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 	);
 }
 
+/**
+ * Renders the dropdown content for selecting a post template.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose The function to close the dropdown.
+ *
+ * @return {JSX.Element} The rendered dropdown content.
+ */
 function PostTemplateDropdownContent( { onClose } ) {
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const {
@@ -216,4 +224,11 @@ function ClassicThemeControl() {
 	);
 }
 
+/**
+ * Provides a dropdown menu for selecting and managing post templates.
+ *
+ * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
+ *
+ * @return {JSX.Element} The rendered ClassicThemeControl component.
+ */
 export default ClassicThemeControl;

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

@@ -13,6 +13,11 @@ import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
 import PostPanelRow from '../post-panel-row';
 
+/**
+ * Displays the template controls based on the current editor settings and user permissions.
+ *
+ * @return {JSX.Element|null} The rendered PostTemplatePanel component.
+ */
 export default function PostTemplatePanel() {
 	const { templateId, isBlockTheme } = useSelect( ( select ) => {
 		const { getCurrentTemplateId, getEditorSettings } =

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

@@ -20,14 +20,6 @@
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
 }
 
 .editor-post-template__dropdown {

package/src/components/post-text-editor/index.js

@@ -19,6 +19,11 @@ import { VisuallyHidden } from '@wordpress/components';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Displays the Post Text Editor along with content in Visual and Text mode.
+ *
+ * @return {JSX.Element|null} The rendered PostTextEditor component.
+ */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );
 	const { content, blocks, type, id } = useSelect( ( select ) => {

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -211,4 +210,12 @@ function PostTitle( _, forwardedRef ) {
 	);
 }
 
+/**
+ * Renders the `PostTitle` component.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Forwarded ref for the component.
+ *
+ * @return {Component} The rendered PostTitle component.
+ */
 export default forwardRef( PostTitle );

package/src/components/post-title/index.native.js

@@ -18,11 +18,67 @@ import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
+/**
+ * Inserts content with title
+ *
+ * This function processes the given content and title, updating the title
+ * and content based on certain conditions. If the content is an array of
+ * blocks, it will check the first block for a heading or paragraph to use
+ * as the title. If the content is a string, it will strip HTML and update
+ * the title and content accordingly.
+ *
+ * @param {string}         title           The post title.
+ * @param {Array | string} content         The content to be processed. It can be an array of blocks or a string.
+ * @param {Function}       onUpdateTitle   Callback function to update the title.
+ * @param {Function}       onUpdateContent Callback function to update the content.
+ * @param {RichTextValue}  value           The initial value object, default is an object with empty text.
+ */
+export function insertContentWithTitle(
+	title,
+	content,
+	onUpdateTitle,
+	onUpdateContent,
+	value = create( { text: '' } )
+) {
+	if ( ! content.length ) {
+		return;
+	}
+
+	if ( typeof content !== 'string' ) {
+		const [ firstBlock ] = content;
+
+		if (
+			! title &&
+			( firstBlock.name === 'core/heading' ||
+				firstBlock.name === 'core/paragraph' )
+		) {
+			// Strip HTML to avoid unwanted HTML being added to the title.
+			// In the majority of cases it is assumed that HTML in the title
+			// is undesirable.
+			const contentNoHTML = stripHTML( firstBlock.attributes.content );
+			onUpdateTitle( contentNoHTML );
+			onUpdateContent( content.slice( 1 ) );
+		} else {
+			onUpdateContent( content );
+		}
+	} else {
+		// Strip HTML to avoid unwanted HTML being added to the title.
+		// In the majority of cases it is assumed that HTML in the title
+		// is undesirable.
+		const contentNoHTML = stripHTML( content );
+
+		const newValue = insert( value, create( { html: contentNoHTML } ) );
+		onUpdateTitle( toHTMLString( { value: newValue } ) );
+	}
+}
+
 class PostTitle extends Component {
 	constructor( props ) {
 		super( props );
@@ -59,45 +115,24 @@ class PostTitle extends Component {
 	}
 
 	onPaste( { value, plainText, html } ) {
-		const { title, onInsertBlockAfter, onUpdate } = this.props;
+		const {
+			title,
+			onInsertBlockAfter: onInsertBlocks,
+			onUpdate,
+		} = this.props;
 
 		const content = pasteHandler( {
 			HTML: html,
 			plainText,
 		} );
 
-		if ( ! content.length ) {
-			return;
-		}
-
-		if ( typeof content !== 'string' ) {
-			const [ firstBlock ] = content;
-
-			if (
-				! title &&
-				( firstBlock.name === 'core/heading' ||
-					firstBlock.name === 'core/paragraph' )
-			) {
-				// Strip HTML to avoid unwanted HTML being added to the title.
-				// In the majority of cases it is assumed that HTML in the title
-				// is undesirable.
-				const contentNoHTML = stripHTML(
-					firstBlock.attributes.content
-				);
-				onUpdate( contentNoHTML );
-				onInsertBlockAfter( content.slice( 1 ) );
-			} else {
-				onInsertBlockAfter( content );
-			}
-		} else {
-			// Strip HTML to avoid unwanted HTML being added to the title.
-			// In the majority of cases it is assumed that HTML in the title
-			// is undesirable.
-			const contentNoHTML = stripHTML( content );
-
-			const newValue = insert( value, create( { html: contentNoHTML } ) );
-			onUpdate( toHTMLString( { value: newValue } ) );
-		}
+		insertContentWithTitle(
+			title,
+			content,
+			onUpdate,
+			onInsertBlocks,
+			value
+		);
 	}
 
 	setRef( richText ) {
@@ -166,7 +201,7 @@ class PostTitle extends Component {
 				<RichText.Raw
 					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
-					tagName={ 'p' }
+					tagName="p"
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
@@ -174,7 +209,7 @@ class PostTitle extends Component {
 					styles={ styles }
 					fontSize={ 24 }
 					lineHeight={ 1 }
-					fontWeight={ 'bold' }
+					fontWeight="bold"
 					deleteEnter
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );

package/src/components/post-title/post-title-raw.js

@@ -20,6 +20,14 @@ import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 
+/**
+ * Renders a raw post title input field.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Reference to the component's DOM node.
+ *
+ * @return {Component} The rendered component.
+ */
 function PostTitleRaw( _, forwardedRef ) {
 	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );

package/src/components/post-title/use-post-title-focus.js

@@ -9,6 +9,13 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook that manages the focus behavior of the post title input field.
+ *
+ * @param {Element} forwardedRef - The forwarded ref for the input field.
+ *
+ * @return {Object} - The ref object.
+ */
 export default function usePostTitleFocus( forwardedRef ) {
 	const ref = useRef();
 

package/src/components/post-title/use-post-title.js

@@ -7,6 +7,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook for managing the post title in the editor.
+ *
+ * @return {Object} An object containing the current title and a function to update the title.
+ */
 export default function usePostTitle() {
 	const { editPost } = useDispatch( editorStore );
 	const { title } = useSelect( ( select ) => {

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

@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { PanelBody, PanelRow } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
@@ -62,17 +62,9 @@ function PostTransform() {
 
 	return (
 		<PanelBody
-			title={ __( 'Transform into:' ) }
+			title={ __( 'Design' ) }
 			initialOpen={ record.type === TEMPLATE_PART_POST_TYPE }
 		>
-			<PanelRow>
-				<p>
-					{ __(
-						'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
-					) }
-				</p>
-			</PanelRow>
-
 			<TemplatesList
 				availableTemplates={ availablePatterns }
 				onSelect={ onTemplateSelect }

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

@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Check if the post URL is valid and visible.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child components.
+ *
+ * @return {Component|null} The child components if the post URL is valid and visible, otherwise null.
+ */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();

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

@@ -21,37 +21,54 @@ import { useCopyToClipboard } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURL` component.
+ *
+ * @example
+ * ```jsx
+ * <PostURL />
+ * ```
+ *
+ * @param {Function} onClose Callback function to be executed when the popover is closed.
+ *
+ * @return {Component} The rendered PostURL component.
+ */
 export default function PostURL( { onClose } ) {
-	const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } =
-		useSelect( ( select ) => {
-			const post = select( editorStore ).getCurrentPost();
-			const postTypeSlug = select( editorStore ).getCurrentPostType();
-			const postType = select( coreStore ).getPostType( postTypeSlug );
-			const permalinkParts = select( editorStore ).getPermalinkParts();
-			const hasPublishAction =
-				post?._links?.[ 'wp:action-publish' ] ?? false;
+	const {
+		isEditable,
+		postSlug,
+		postLink,
+		permalinkPrefix,
+		permalinkSuffix,
+		permalink,
+	} = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		const permalinkParts = select( editorStore ).getPermalinkParts();
+		const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;
 
-			return {
-				isEditable:
-					select( editorStore ).isPermalinkEditable() &&
-					hasPublishAction,
-				postSlug: safeDecodeURIComponent(
-					select( editorStore ).getEditedPostSlug()
-				),
-				viewPostLabel: postType?.labels.view_item,
-				postLink: post.link,
-				permalinkPrefix: permalinkParts?.prefix,
-				permalinkSuffix: permalinkParts?.suffix,
-			};
-		}, [] );
+		return {
+			isEditable:
+				select( editorStore ).isPermalinkEditable() && hasPublishAction,
+			postSlug: safeDecodeURIComponent(
+				select( editorStore ).getEditedPostSlug()
+			),
+			viewPostLabel: postType?.labels.view_item,
+			postLink: post.link,
+			permalinkPrefix: permalinkParts?.prefix,
+			permalinkSuffix: permalinkParts?.suffix,
+			permalink: safeDecodeURIComponent(
+				select( editorStore ).getPermalink()
+			),
+		};
+	}, [] );
 	const { editPost } = useDispatch( editorStore );
 	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
-	const postUrlLabel = usePostURLLabel();
-	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
 		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',

package/src/components/post-url/label.js

@@ -9,10 +9,20 @@ import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Represents a label component for a post URL.
+ *
+ * @return {Component} The PostURLLabel component.
+ */
 export default function PostURLLabel() {
 	return usePostURLLabel();
 }
 
+/**
+ * Custom hook to get the label for the post URL.
+ *
+ * @return {string} The filtered and decoded post URL label.
+ */
 export function usePostURLLabel() {
 	const postLink = useSelect(
 		( select ) => select( editorStore ).getPermalink(),

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

@@ -15,6 +15,11 @@ import PostURL from './index';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURLPanel` component.
+ *
+ * @return {JSX.Element} The rendered PostURLPanel component.
+ */
 export default function PostURLPanel() {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -68,7 +73,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ decodedSlug }
+			/{ decodedSlug }
 		</Button>
 	);
 }