@wordpress/editor 13.32.0 → 13.33.0

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

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { Component } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 import { TextControl } from '@wordpress/components';
 
@@ -14,72 +13,55 @@ import { TextControl } from '@wordpress/components';
 import PostSlugCheck from './check';
 import { store as editorStore } from '../../store';
 
-export class PostSlug extends Component {
-	constructor( { postSlug, postTitle, postID } ) {
-		super( ...arguments );
-
-		this.state = {
-			editedSlug:
-				safeDecodeURIComponent( postSlug ) ||
-				cleanForSlug( postTitle ) ||
-				postID,
-		};
-
-		this.setSlug = this.setSlug.bind( this );
-	}
-
-	setSlug( event ) {
-		const { postSlug, onUpdateSlug } = this.props;
-		const { value } = event.target;
-
-		const editedSlug = cleanForSlug( value );
-
-		if ( editedSlug === postSlug ) {
-			return;
-		}
-
-		onUpdateSlug( editedSlug );
-	}
+function PostSlugControl() {
+	const postSlug = useSelect( ( select ) => {
+		return safeDecodeURIComponent(
+			select( editorStore ).getEditedPostSlug()
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+	const [ forceEmptyField, setForceEmptyField ] = useState( false );
 
-	render() {
-		const { editedSlug } = this.state;
-		return (
-			<PostSlugCheck>
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Slug' ) }
-					autoComplete="off"
-					spellCheck="false"
-					value={ editedSlug }
-					onChange={ ( slug ) =>
-						this.setState( { editedSlug: slug } )
+	return (
+		<TextControl
+			__nextHasNoMarginBottom
+			label={ __( 'Slug' ) }
+			autoComplete="off"
+			spellCheck="false"
+			value={ forceEmptyField ? '' : postSlug }
+			onChange={ ( newValue ) => {
+				editPost( { slug: newValue } );
+				// When we delete the field the permalink gets
+				// reverted to the original value.
+				// The forceEmptyField logic allows the user to have
+				// the field temporarily empty while typing.
+				if ( ! newValue ) {
+					if ( ! forceEmptyField ) {
+						setForceEmptyField( true );
 					}
-					onBlur={ this.setSlug }
-					className="editor-post-slug"
-				/>
-			</PostSlugCheck>
-		);
-	}
+					return;
+				}
+				if ( forceEmptyField ) {
+					setForceEmptyField( false );
+				}
+			} }
+			onBlur={ ( event ) => {
+				editPost( {
+					slug: cleanForSlug( event.target.value ),
+				} );
+				if ( forceEmptyField ) {
+					setForceEmptyField( false );
+				}
+			} }
+			className="editor-post-slug"
+		/>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getEditedPostAttribute } =
-			select( editorStore );
-
-		const { id } = getCurrentPost();
-		return {
-			postSlug: getEditedPostAttribute( 'slug' ),
-			postTitle: getEditedPostAttribute( 'title' ),
-			postID: id,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost } = dispatch( editorStore );
-		return {
-			onUpdateSlug( slug ) {
-				editPost( { slug } );
-			},
-		};
-	} ),
-] )( PostSlug );
+export default function PostSlug() {
+	return (
+		<PostSlugCheck>
+			<PostSlugControl />
+		</PostSlugCheck>
+	);
+}

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,310 @@
+/**
+ * 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';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+import { store as editorStore } from '../../store';
+import { Icon, chevronDownSmall } from '@wordpress/icons';
+
+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;
+	}
+
+	if ( ! canEdit ) {
+		return (
+			<div className="editor-post-status">
+				<PostStatusLabel />
+			</div>
+		);
+	}
+
+	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 (
+		<Dropdown
+			className="editor-post-status"
+			contentClassName="editor-change-status__content"
+			popoverProps={ popoverProps }
+			focusOnMount
+			ref={ setPopoverAnchor }
+			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>
+				</>
+			) }
+		/>
+	);
+}

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

@@ -0,0 +1,75 @@
+.editor-post-status {
+	max-width: 100%;
+	margin-bottom: $grid-unit-20;
+
+	.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;
 	}
@@ -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