@wordpress/edit-site 5.12.0 → 5.12.2

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export default function EditTemplate() {
+	const { context, hasResolved, title, blocks } = useSelect( ( select ) => {
+		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
+			select( editSiteStore );
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const _context = getEditedPostContext();
+		const queryArgs = [
+			'postType',
+			getEditedPostType(),
+			getEditedPostId(),
+		];
+		const template = getEditedEntityRecord( ...queryArgs );
+		return {
+			context: _context,
+			hasResolved: hasFinishedResolution(
+				'getEditedEntityRecord',
+				queryArgs
+			),
+			title: template?.title,
+			blocks: template?.blocks,
+		};
+	}, [] );
+
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	const blockContext = useMemo(
+		() => ( { ...context, postType: null, postId: null } ),
+		[ context ]
+	);
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	return (
+		<VStack>
+			<div>{ decodeEntities( title ) }</div>
+			<div className="edit-site-page-panels__edit-template-preview">
+				<BlockContextProvider value={ blockContext }>
+					<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />
+				</BlockContextProvider>
+			</div>
+			<Button
+				className="edit-site-page-panels__edit-template-button"
+				variant="secondary"
+				onClick={ () => setHasPageContentFocus( false ) }
+			>
+				{ __( 'Edit template' ) }
+			</Button>
+		</VStack>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/index.js

@@ -3,48 +3,50 @@
  */
 import {
 	PanelBody,
+	__experimentalText as Text,
 	__experimentalVStack as VStack,
-	Button,
 } from '@wordpress/components';
 import { page as pageIcon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEntityRecord } from '@wordpress/core-data';
-import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import useEditedEntityRecord from '../../use-edited-entity-record';
 import SidebarCard from '../sidebar-card';
-import ContentBlocksList from './content-blocks-list';
+import PageContent from './page-content';
+import PageSummary from './page-summary';
+import EditTemplate from './edit-template';
 
 export default function PagePanels() {
-	const context = useSelect(
-		( select ) => select( editSiteStore ).getEditedPostContext(),
-		[]
-	);
-
-	const { hasResolved: hasPageResolved, editedRecord: page } =
-		useEntityRecord( 'postType', context.postType, context.postId );
-
-	const {
-		isLoaded: isTemplateLoaded,
-		getTitle: getTemplateTitle,
-		record: template,
-	} = useEditedEntityRecord();
-
-	const { setHasPageContentLock } = useDispatch( editSiteStore );
+	const { id, type, hasResolved, status, date, password, title, modified } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext } = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				title: page?.title,
+				id: page?.id,
+				type: page?.type,
+				status: page?.status,
+				date: page?.date,
+				password: page?.password,
+				modified: page?.modified,
+			};
+		}, [] );
 
-	const blockContext = useMemo(
-		() => ( { ...context, postType: null, postId: null } ),
-		[ context ]
-	);
-
-	if ( ! hasPageResolved || ! isTemplateLoaded ) {
+	if ( ! hasResolved ) {
 		return null;
 	}
 
@@ -52,37 +54,35 @@ export default function PagePanels() {
 		<>
 			<PanelBody>
 				<SidebarCard
-					title={ page.title }
+					title={ decodeEntities( title ) }
 					icon={ pageIcon }
-					description={ sprintf(
-						// translators: %s: Human-readable time difference, e.g. "2 days ago".
-						__( 'Last edited %s' ),
-						humanTimeDiff( page.modified )
-					) }
+					description={
+						<VStack>
+							<Text>
+								{ sprintf(
+									// translators: %s: Human-readable time difference, e.g. "2 days ago".
+									__( 'Last edited %s' ),
+									humanTimeDiff( modified )
+								) }
+							</Text>
+						</VStack>
+					}
+				/>
+			</PanelBody>
+			<PanelBody title={ __( 'Summary' ) }>
+				<PageSummary
+					status={ status }
+					date={ date }
+					password={ password }
+					postId={ id }
+					postType={ type }
 				/>
 			</PanelBody>
 			<PanelBody title={ __( 'Content' ) }>
-				<ContentBlocksList />
+				<PageContent />
 			</PanelBody>
 			<PanelBody title={ __( 'Template' ) }>
-				<VStack>
-					<div>{ getTemplateTitle() }</div>
-					<div className="edit-site-page-panels__edit-template-preview">
-						<BlockContextProvider value={ blockContext }>
-							<BlockPreview
-								viewportWidth={ 1024 }
-								blocks={ template.blocks }
-							/>
-						</BlockContextProvider>
-					</div>
-					<Button
-						className="edit-site-page-panels__edit-template-button"
-						variant="secondary"
-						onClick={ () => setHasPageContentLock( false ) }
-					>
-						{ __( 'Edit template' ) }
-					</Button>
-				</VStack>
+				<EditTemplate />
 			</PanelBody>
 		</>
 	);

package/src/components/sidebar-edit-mode/page-panels/page-content.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
+import { unlock } from '../../../lock-unlock';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+export default function PageContent() {
+	const clientIds = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+				PAGE_CONTENT_BLOCK_TYPES
+			),
+		[]
+	);
+	return <BlockQuickNavigation clientIds={ clientIds } />;
+}

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -0,0 +1,233 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	BaseControl,
+	ToggleControl,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+	RadioControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
+
+const STATUS_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Draft' ) }
+				<Text variant="muted">{ __( 'Not ready to publish.' ) }</Text>
+			</>
+		),
+		value: 'draft',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Pending' ) }
+				<Text variant="muted">
+					{ __( 'Waiting for review before publishing.' ) }
+				</Text>
+			</>
+		),
+		value: 'pending',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Private' ) }
+				<Text variant="muted">
+					{ __( 'Only visible to site admins and editors.' ) }
+				</Text>
+			</>
+		),
+		value: 'private',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Scheduled' ) }
+				<Text variant="muted">
+					{ __( 'Publish automatically on a chosen date.' ) }
+				</Text>
+			</>
+		),
+		value: 'future',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Published' ) }
+				<Text variant="muted">{ __( 'Visible to everyone.' ) }</Text>
+			</>
+		),
+		value: 'publish',
+	},
+];
+
+export default function PageStatus( {
+	postType,
+	postId,
+	status,
+	password,
+	date,
+} ) {
+	const [ showPassword, setShowPassword ] = useState( !! password );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	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': __( 'Change status' ),
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const saveStatus = async ( {
+		status: newStatus = status,
+		password: newPassword = password,
+		date: newDate = date,
+	} ) => {
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				status: newStatus,
+				date: newDate,
+				password: newPassword,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			saveStatus( { password: '' } );
+		}
+	};
+
+	const handleStatus = ( value ) => {
+		let newDate = date;
+		let newPassword = password;
+		if ( value === 'publish' ) {
+			if ( 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 );
+			}
+		} else if ( value === 'private' && password ) {
+			setShowPassword( false );
+			newPassword = '';
+		}
+		saveStatus( {
+			status: value,
+			date: newDate,
+			password: newPassword,
+		} );
+	};
+
+	return (
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Status' ) }
+			</Text>
+			<Dropdown
+				contentClassName="edit-site-change-status__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-site-summary-field__trigger"
+						variant="tertiary"
+						onClick={ onToggle }
+					>
+						<StatusLabel
+							status={ password ? 'protected' : status }
+						/>
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Status' ) }
+							onClose={ onClose }
+						/>
+						<form>
+							<VStack spacing={ 5 }>
+								<RadioControl
+									className="edit-site-change-status__options"
+									hideLabelFromVision
+									label={ __( 'Status' ) }
+									options={ STATUS_OPTIONS }
+									onChange={ handleStatus }
+									selected={ status }
+								/>
+								{ status !== 'private' && (
+									<BaseControl
+										id={ `edit-site-change-status__password` }
+										label={ __( 'Password' ) }
+									>
+										<ToggleControl
+											label={ __(
+												'Hide this page behind a password'
+											) }
+											checked={ showPassword }
+											onChange={ handleTogglePassword }
+										/>
+										{ showPassword && (
+											<TextControl
+												onChange={ ( value ) =>
+													saveStatus( {
+														password: value,
+													} )
+												}
+												value={ password }
+												/* eslint-disable jsx-a11y/no-autofocus */
+												autoFocus={ ! password }
+												/* eslint-enable jsx-a11y/no-autofocus */
+												placeholder={ __(
+													'Enter a secure password'
+												) }
+												type="password"
+											/>
+										) }
+									</BaseControl>
+								) }
+							</VStack>
+						</form>
+					</>
+				) }
+			/>
+		</HStack>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import PageStatus from './page-status';
+import PublishDate from './publish-date';
+
+export default function PageSummary( {
+	status,
+	date,
+	password,
+	postId,
+	postType,
+} ) {
+	return (
+		<VStack>
+			<PageStatus
+				status={ status }
+				date={ date }
+				password={ password }
+				postId={ postId }
+				postType={ postType }
+			/>
+			<PublishDate
+				status={ status }
+				date={ date }
+				postId={ postId }
+				postType={ postType }
+			/>
+		</VStack>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/publish-date.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { humanTimeDiff } from '@wordpress/date';
+
+export default function ChangeStatus( { postType, postId, status, date } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	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': __( 'Change publish date' ),
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const saveDate = async ( newDate ) => {
+		try {
+			let newStatus = status;
+			if ( status === 'future' && new Date( newDate ) < new Date() ) {
+				newStatus = 'publish';
+			} else if (
+				status === 'publish' &&
+				new Date( newDate ) > new Date()
+			) {
+				newStatus = 'future';
+			}
+			await editEntityRecord( 'postType', postType, postId, {
+				status: newStatus,
+				date: newDate,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	const relateToNow = date ? humanTimeDiff( date ) : __( 'Immediately' );
+
+	return (
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Publish' ) }
+			</Text>
+			<Dropdown
+				contentClassName="edit-site-change-status__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-site-summary-field__trigger"
+						variant="tertiary"
+						onClick={ onToggle }
+					>
+						{ relateToNow }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PublishDateTimePicker
+						currentDate={ date }
+						is12Hour
+						onClose={ onClose }
+						onChange={ saveDate }
+					/>
+				) }
+			/>
+		</HStack>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -8,3 +8,34 @@
 .edit-site-page-panels__edit-template-button {
 	justify-content: center;
 }
+
+.edit-site-change-status__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+	.edit-site-change-status__options {
+		.components-base-control__field > .components-v-stack {
+			gap: $grid-unit-10;
+		}
+		label {
+			.components-text {
+				display: block;
+				margin-left: $radio-input-size + 6;
+			}
+		}
+	}
+}
+
+.edit-site-summary-field {
+	.components-dropdown {
+		flex-grow: 1;
+	}
+	.edit-site-summary-field__trigger {
+		width: 100%;
+	}
+	.edit-site-summary-field__label {
+		width: 30%;
+	}
+}
+

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -19,9 +19,18 @@ import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
 
 const SettingsHeader = ( { sidebarName } ) => {
-	const hasPageContentLock = useSelect( ( select ) =>
-		select( editSiteStore ).hasPageContentLock()
-	);
+	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
+		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
+			select( editSiteStore );
+
+		return {
+			hasPageContentFocus: _hasPageContentFocus(),
+			entityType: getEditedPostType(),
+		};
+	} );
+
+	const entityLabel =
+		entityType === 'wp_navigation' ? __( 'Navigation' ) : __( 'Template' );
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>
@@ -30,7 +39,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 
 	let templateAriaLabel;
-	if ( hasPageContentLock ) {
+	if ( hasPageContentFocus ) {
 		templateAriaLabel =
 			sidebarName === SIDEBAR_TEMPLATE
 				? // translators: ARIA label for the Template sidebar tab, selected.
@@ -41,9 +50,9 @@ const SettingsHeader = ( { sidebarName } ) => {
 		templateAriaLabel =
 			sidebarName === SIDEBAR_TEMPLATE
 				? // translators: ARIA label for the Template sidebar tab, selected.
-				  __( 'Template (selected)' )
+				  sprintf( __( '%s (selected)' ), entityLabel )
 				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  __( 'Template' );
+				  entityLabel;
 	}
 
 	/* Use a list so screen readers will announce how many tabs there are. */
@@ -60,10 +69,10 @@ const SettingsHeader = ( { sidebarName } ) => {
 					) }
 					aria-label={ templateAriaLabel }
 					data-label={
-						hasPageContentLock ? __( 'Page' ) : __( 'Template' )
+						hasPageContentFocus ? __( 'Page' ) : entityLabel
 					}
 				>
-					{ hasPageContentLock ? __( 'Page' ) : __( 'Template' ) }
+					{ hasPageContentFocus ? __( 'Page' ) : entityLabel }
 				</Button>
 			</li>
 			<li>