@wordpress/editor 13.31.0 → 13.33.0

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

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

@@ -164,7 +164,7 @@ class PostTitle extends Component {
 				accessibilityHint={ __( 'Updates the title.' ) }
 			>
 				<RichText.Raw
-					setRef={ this.setRef }
+					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
 					tagName={ 'p' }
 					tagsToEliminate={ [ 'strong' ] }

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?'