@wordpress/editor 13.32.0 → 13.34.0

package/src/components/post-slug/test/index.js

@@ -4,23 +4,46 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostSlug } from '../';
+import PostSlug from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch/use-dispatch', () =>
+	jest.fn()
+);
 
 describe( 'PostSlug', () => {
 	it( 'should update slug with sanitized input', async () => {
 		const user = userEvent.setup();
-		const onUpdateSlug = jest.fn();
+		const editPost = jest.fn();
+
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getPostType: () => null,
+				getEditedPostAttribute: () => 'post',
+				getEditedPostSlug: () => '1',
+			} ) )
+		);
+		useDispatch.mockImplementation( () => ( {
+			editPost,
+		} ) );
 
-		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
+		render( <PostSlug /> );
 
 		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
-		await user.clear( input );
-		await user.type( input, 'Foo Bar-Baz 9!' );
+		await user.type( input, '2', {
+			initialSelectionStart: 0,
+			initialSelectionEnd: 1,
+		} );
 		act( () => input.blur() );
 
-		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
+		expect( editPost ).toHaveBeenCalledWith( { slug: '2' } );
 	} );
 } );

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

@@ -0,0 +1,318 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	CheckboxControl,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	TextControl,
+	RadioControl,
+} from '@wordpress/components';
+import { __ } 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
+ */
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+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 review' );
+			break;
+		case 'private':
+			statusLabel = __( 'Published privately' );
+			break;
+	}
+	return (
+		<Text
+			className={ classnames( 'editor-post-status-label', {
+				[ ` has-status-${ status }` ]: !! status,
+				'has-icon': canEdit,
+			} ) }
+		>
+			{ statusLabel }
+			{ canEdit && <Icon icon={ chevronDownSmall } /> }
+		</Text>
+	);
+}
+
+const STATUS_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Draft' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Not ready to publish.' ) }
+				</Text>
+			</>
+		),
+		value: 'draft',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Pending' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Waiting for review before publishing.' ) }
+				</Text>
+			</>
+		),
+		value: 'pending',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Private' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Only visible to site admins and editors.' ) }
+				</Text>
+			</>
+		),
+		value: 'private',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Scheduled' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Publish automatically on a chosen date.' ) }
+				</Text>
+			</>
+		),
+		value: 'future',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Published' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visible to everyone.' ) }
+				</Text>
+			</>
+		),
+		value: 'publish',
+	},
+];
+
+const DESIGN_POST_TYPES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+];
+
+export default function PostStatus() {
+	const { status, date, password, postId, postType, canEdit } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostId,
+				getCurrentPostType,
+				getCurrentPost,
+			} = select( editorStore );
+			return {
+				status: getEditedPostAttribute( 'status' ),
+				date: getEditedPostAttribute( 'date' ),
+				password: getEditedPostAttribute( 'password' ),
+				postId: getCurrentPostId(),
+				postType: getCurrentPostType(),
+				canEdit:
+					getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
+			};
+		},
+		[]
+	);
+	const [ showPassword, setShowPassword ] = useState( !! password );
+	const passwordInputId = useInstanceId(
+		PostStatus,
+		'editor-change-status__password-input'
+	);
+	const { editEntityRecord } = useDispatch( coreStore );
+	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,
+			'aria-label': __( 'Status & visibility' ),
+			headerTitle: __( 'Status & visibility' ),
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( DESIGN_POST_TYPES.includes( postType ) ) {
+		return null;
+	}
+
+	const updatePost = ( {
+		status: newStatus = status,
+		password: newPassword = password,
+		date: newDate = date,
+	} ) => {
+		editEntityRecord( 'postType', postType, postId, {
+			status: newStatus,
+			date: newDate,
+			password: newPassword,
+		} );
+	};
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			updatePost( { password: '' } );
+		}
+	};
+
+	const handleStatus = ( value ) => {
+		let newDate = date;
+		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 = '';
+		}
+		updatePost( {
+			status: value,
+			date: newDate,
+			password: newPassword,
+		} );
+	};
+
+	return (
+		<PostPanelRow label={ __( 'Status' ) } ref={ setPopoverAnchor }>
+			{ canEdit ? (
+				<Dropdown
+					className="editor-post-status"
+					contentClassName="editor-change-status__content"
+					popoverProps={ popoverProps }
+					focusOnMount
+					renderToggle={ ( { onToggle } ) => (
+						<Button
+							className="editor-post-status-trigger"
+							onClick={ onToggle }
+						>
+							<PostStatusLabel canEdit={ canEdit } />
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<InspectorPopoverHeader
+								title={ __( 'Status & visibility' ) }
+								onClose={ onClose }
+							/>
+							<form>
+								<VStack spacing={ 4 }>
+									<RadioControl
+										className="editor-change-status__options"
+										hideLabelFromVision
+										label={ __( 'Status' ) }
+										options={ STATUS_OPTIONS }
+										onChange={ handleStatus }
+										selected={
+											status === 'auto-draft'
+												? 'draft'
+												: status
+										}
+									/>
+									{ status !== 'private' && (
+										<VStack
+											as="fieldset"
+											spacing={ 4 }
+											className="editor-change-status__password-fieldset"
+										>
+											<CheckboxControl
+												__nextHasNoMarginBottom
+												label={ __(
+													'Password protected'
+												) }
+												help={ __(
+													'Only visible to those who know the password'
+												) }
+												checked={ showPassword }
+												onChange={
+													handleTogglePassword
+												}
+											/>
+											{ showPassword && (
+												<div className="editor-change-status__password-input">
+													<TextControl
+														label={ __(
+															'Password'
+														) }
+														onChange={ ( value ) =>
+															updatePost( {
+																password: value,
+															} )
+														}
+														value={ password }
+														placeholder={ __(
+															'Use a secure password'
+														) }
+														type="text"
+														id={ passwordInputId }
+														__next40pxDefaultSize
+														__nextHasNoMarginBottom
+													/>
+												</div>
+											) }
+										</VStack>
+									) }
+								</VStack>
+							</form>
+						</>
+					) }
+				/>
+			) : (
+				<div className="editor-post-status">
+					<PostStatusLabel />
+				</div>
+			) }
+		</PostPanelRow>
+	);
+}

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

@@ -0,0 +1,74 @@
+.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);
+			}
+		}
+	}
+}
+
+.editor-change-status__password-fieldset {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
+}
+
+.editor-change-status__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+
+	.editor-change-status__options {
+		.components-base-control__field > .components-v-stack {
+			gap: $grid-unit-15;
+		}
+
+		// TODO: it's not great to override component styles.. This might be resolved
+		// by the new radio control component.
+		.components-radio-control__option {
+			align-items: flex-start;
+		}
+
+		label {
+			.components-text {
+				display: block;
+				margin-top: $grid-unit-05;
+			}
+		}
+	}
+
+	.editor-change-status__password-legend {
+		padding: 0;
+		margin-bottom: $grid-unit-10;
+	}
+}

package/src/components/post-switch-to-draft-button/index.js

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
  */
 import { store as editorStore } from '../../store';
 
+// TODO: deprecate..
 export default function PostSwitchToDraftButton() {
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
@@ -31,10 +32,13 @@ export default function PostSwitchToDraftButton() {
 	const isDisabled = isSaving || ( ! isPublished && ! isScheduled );
 
 	let alertMessage;
+	let confirmButtonText;
 	if ( isPublished ) {
 		alertMessage = __( 'Are you sure you want to unpublish this post?' );
+		confirmButtonText = __( 'Unpublish' );
 	} else if ( isScheduled ) {
 		alertMessage = __( 'Are you sure you want to unschedule this post?' );
+		confirmButtonText = __( 'Unschedule' );
 	}
 
 	const handleConfirm = () => {
@@ -63,6 +67,7 @@ export default function PostSwitchToDraftButton() {
 				isOpen={ showConfirmDialog }
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ confirmButtonText }
 			>
 				{ alertMessage }
 			</ConfirmDialog>

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

@@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecord } from '@wordpress/core-data';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -51,6 +51,11 @@ export default function BlockThemeControl( { id } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { setRenderingMode } = useDispatch( editorStore );
 
+	const canCreateTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
@@ -71,7 +76,7 @@ export default function BlockThemeControl( { id } ) {
 			popoverProps={ POPOVER_PROPS }
 			focusOnMount
 			toggleProps={ {
-				__next40pxDefaultSize: true,
+				size: 'compact',
 				variant: 'tertiary',
 			} }
 			label={ __( 'Template options' ) }
@@ -81,30 +86,34 @@ export default function BlockThemeControl( { id } ) {
 			{ ( { onClose } ) => (
 				<>
 					<MenuGroup>
-						<MenuItem
-							onClick={ () => {
-								onNavigateToEntityRecord( {
-									postId: template.id,
-									postType: 'wp_template',
-								} );
-								onClose();
-								createSuccessNotice(
-									__(
-										'Editing template. Changes made here affect all posts and pages that use the template.'
-									),
-									{
-										type: 'snackbar',
-										actions: notificationAction,
-									}
-								);
-							} }
-						>
-							{ __( 'Edit template' ) }
-						</MenuItem>
+						{ canCreateTemplate && (
+							<MenuItem
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									onClose();
+									createSuccessNotice(
+										__(
+											'Editing template. Changes made here affect all posts and pages that use the template.'
+										),
+										{
+											type: 'snackbar',
+											actions: notificationAction,
+										}
+									);
+								} }
+							>
+								{ __( 'Edit template' ) }
+							</MenuItem>
+						) }
 
 						<SwapTemplateButton onClick={ onClose } />
 						<ResetDefaultTemplate onClick={ onClose } />
-						<CreateNewTemplate onClick={ onClose } />
+						{ canCreateTemplate && (
+							<CreateNewTemplate onClick={ onClose } />
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem
@@ -119,7 +128,7 @@ export default function BlockThemeControl( { id } ) {
 								);
 							} }
 						>
-							{ __( 'Template preview' ) }
+							{ __( 'Show template' ) }
 						</MenuItem>
 					</MenuGroup>
 				</>

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

@@ -45,7 +45,6 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 	return (
 		<Button
 			__next40pxDefaultSize
-			className="edit-post-post-template__toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
 			aria-label={ __( 'Template options' ) }

package/src/components/post-template/swap-template-button.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { MenuItem, Modal } from '@wordpress/components';
@@ -18,9 +18,6 @@ import { useAvailableTemplates, useEditedPostContext } from './hooks';
 
 export default function SwapTemplateButton( { onClick } ) {
 	const [ showModal, setShowModal ] = useState( false );
-	const onClose = useCallback( () => {
-		setShowModal( false );
-	}, [] );
 	const { postType, postId } = useEditedPostContext();
 	const availableTemplates = useAvailableTemplates( postType );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -35,7 +32,7 @@ export default function SwapTemplateButton( { onClick } ) {
 			{ template: template.name },
 			{ undoIgnore: true }
 		);
-		onClose(); // Close the template suggestions modal first.
+		setShowModal( false ); // Close the template suggestions modal first.
 		onClick();
 	};
 	return (
@@ -46,7 +43,7 @@ export default function SwapTemplateButton( { onClick } ) {
 			{ showModal && (
 				<Modal
 					title={ __( 'Choose a template' ) }
-					onRequestClose={ onClose }
+					onRequestClose={ () => setShowModal( false ) }
 					overlayClassName="editor-post-template__swap-template-modal"
 					isFullScreen
 				>

package/src/components/post-text-editor/style.scss

@@ -1,4 +1,4 @@
-.edit-post-text-editor__body textarea.editor-post-text-editor {
+textarea.editor-post-text-editor {
 	border: $border-width solid $gray-600;
 	border-radius: 0;
 	display: block;

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

@@ -1,5 +1,5 @@
 // Raw Text Variant
-.edit-post-text-editor__body .editor-post-title.is-raw-text {
+.editor-post-title.is-raw-text {
 	margin-bottom: $grid-unit-30;
 	margin-top: 2px; // space for focus outline to appear.
 	max-width: none;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -9,26 +9,26 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-function PostTrashCheck( { isNew, postId, canUserDelete, children } ) {
-	if ( isNew || ! postId || ! canUserDelete ) {
+export default function PostTrashCheck( { children } ) {
+	const { canTrashPost } = useSelect( ( select ) => {
+		const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
+			select( editorStore );
+		const { getPostType, canUser } = select( coreStore );
+		const postType = getPostType( getCurrentPostType() );
+		const postId = getCurrentPostId();
+		const isNew = isEditedPostNew();
+		const resource = postType?.rest_base || ''; // eslint-disable-line camelcase
+		const canUserDelete =
+			postId && resource ? canUser( 'delete', resource, postId ) : false;
+
+		return {
+			canTrashPost: ( ! isNew || postId ) && canUserDelete,
+		};
+	}, [] );
+
+	if ( ! canTrashPost ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default withSelect( ( select ) => {
-	const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
-		select( editorStore );
-	const { getPostType, canUser } = select( coreStore );
-	const postId = getCurrentPostId();
-	const postType = getPostType( getCurrentPostType() );
-	const resource = postType?.rest_base || ''; // eslint-disable-line camelcase
-
-	return {
-		isNew: isEditedPostNew(),
-		postId,
-		canUserDelete:
-			postId && resource ? canUser( 'delete', resource, postId ) : false,
-	};
-} )( PostTrashCheck );

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

@@ -54,6 +54,7 @@ export default function PostTrash() {
 				isOpen={ showConfirmDialog }
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ __( 'Move to trash' ) }
 			>
 				{ __(
 					'Are you sure you want to move this post to the trash?'