@wordpress/edit-site 5.11.0 → 5.12.1

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

@@ -0,0 +1,41 @@
+.edit-site-page-panels__edit-template-preview {
+	border: 1px solid $gray-200;
+	height: 200px;
+	max-height: 200px;
+	overflow: hidden;
+}
+
+.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

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
 /**
@@ -11,27 +16,44 @@ import { store as interfaceStore } from '@wordpress/interface';
  */
 import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
+import { store as editSiteStore } from '../../../store';
 
 const SettingsHeader = ( { sidebarName } ) => {
+	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 = () =>
 		enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 	const openBlockSettings = () =>
 		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 
-	const [ templateAriaLabel, templateActiveClass ] =
-		sidebarName === SIDEBAR_TEMPLATE
-			? // translators: ARIA label for the Template sidebar tab, selected.
-			  [ __( 'Template (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-			  [ __( 'Template' ), '' ];
-
-	const [ blockAriaLabel, blockActiveClass ] =
-		sidebarName === SIDEBAR_BLOCK
-			? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-			  [ __( 'Block (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-			  [ __( 'Block' ), '' ];
+	let templateAriaLabel;
+	if ( hasPageContentFocus ) {
+		templateAriaLabel =
+			sidebarName === SIDEBAR_TEMPLATE
+				? // translators: ARIA label for the Template sidebar tab, selected.
+				  __( 'Page (selected)' )
+				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
+				  __( 'Page' );
+	} else {
+		templateAriaLabel =
+			sidebarName === SIDEBAR_TEMPLATE
+				? // translators: ARIA label for the Template sidebar tab, selected.
+				  sprintf( __( '%s (selected)' ), entityLabel )
+				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
+				  entityLabel;
+	}
 
 	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
@@ -39,29 +61,39 @@ const SettingsHeader = ( { sidebarName } ) => {
 			<li>
 				<Button
 					onClick={ openTemplateSettings }
-					className={ `edit-site-sidebar-edit-mode__panel-tab ${ templateActiveClass }` }
+					className={ classnames(
+						'edit-site-sidebar-edit-mode__panel-tab',
+						{
+							'is-active': sidebarName === SIDEBAR_TEMPLATE,
+						}
+					) }
 					aria-label={ templateAriaLabel }
-					// translators: Data label for the Template Settings Sidebar tab.
-					data-label={ __( 'Template' ) }
-				>
-					{
-						// translators: Text label for the Template Settings Sidebar tab.
-						__( 'Template' )
+					data-label={
+						hasPageContentFocus ? __( 'Page' ) : entityLabel
 					}
+				>
+					{ hasPageContentFocus ? __( 'Page' ) : entityLabel }
 				</Button>
 			</li>
 			<li>
 				<Button
 					onClick={ openBlockSettings }
-					className={ `edit-site-sidebar-edit-mode__panel-tab ${ blockActiveClass }` }
-					aria-label={ blockAriaLabel }
-					// translators: Data label for the Block Settings Sidebar tab.
+					className={ classnames(
+						'edit-site-sidebar-edit-mode__panel-tab',
+						{
+							'is-active': sidebarName === SIDEBAR_BLOCK,
+						}
+					) }
+					aria-label={
+						sidebarName === SIDEBAR_BLOCK
+							? // translators: ARIA label for the Block Settings Sidebar tab, selected.
+							  __( 'Block (selected)' )
+							: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
+							  __( 'Block' )
+					}
 					data-label={ __( 'Block' ) }
 				>
-					{
-						// translators: Text label for the Block Settings Sidebar tab.
-						__( 'Block' )
-					}
+					{ __( 'Block' ) }
 				</Button>
 			</li>
 		</ul>

package/src/components/sidebar-edit-mode/sidebar-card/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+export default function SidebarCard( {
+	className,
+	title,
+	icon,
+	description,
+	actions,
+	children,
+} ) {
+	return (
+		<div className={ classnames( 'edit-site-sidebar-card', className ) }>
+			<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
+			<div className="edit-site-sidebar-card__content">
+				<div className="edit-site-sidebar-card__header">
+					<h2 className="edit-site-sidebar-card__title">{ title }</h2>
+					{ actions }
+				</div>
+				<div className="edit-site-sidebar-card__description">
+					{ description }
+				</div>
+				{ children }
+			</div>
+		</div>
+	);
+}

package/src/components/sidebar-edit-mode/sidebar-card/style.scss

@@ -0,0 +1,34 @@
+.edit-site-sidebar-card {
+	display: flex;
+	align-items: flex-start;
+
+	&__content {
+		flex-grow: 1;
+		margin-bottom: $grid-unit-05;
+	}
+
+	&__title {
+		font-weight: 500;
+		line-height: $icon-size;
+		&.edit-site-sidebar-card__title {
+			margin: 0;
+		}
+	}
+
+	&__description {
+		font-size: $default-font-size;
+	}
+
+	&__icon {
+		flex: 0 0 $icon-size;
+		margin-right: $grid-unit-15;
+		width: $icon-size;
+		height: $icon-size;
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 0 $grid-unit-05;
+	}
+}

package/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js

@@ -6,7 +6,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME = 'SidebarFixedBottom';

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { PanelRow, PanelBody } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { navigation as navigationIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import TemplateActions from './template-actions';
+import TemplateAreas from './template-areas';
+import LastRevision from './last-revision';
+import SidebarCard from '../sidebar-card';
+
+export default function TemplatePanel() {
+	const {
+		info: { title, description, icon },
+		record,
+	} = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
+
+		const postType = getEditedPostType();
+		const postId = getEditedPostId();
+		const _record = getEditedEntityRecord( 'postType', postType, postId );
+
+		const info = _record ? getTemplateInfo( _record ) : {};
+
+		return { info, record: _record };
+	}, [] );
+
+	if ( ! title && ! description ) {
+		return null;
+	}
+
+	return (
+		<PanelBody className="edit-site-template-panel">
+			<SidebarCard
+				className="edit-site-template-card"
+				title={ decodeEntities( title ) }
+				icon={
+					record?.type === 'wp_navigation' ? navigationIcon : icon
+				}
+				description={ decodeEntities( description ) }
+				actions={ <TemplateActions template={ record } /> }
+			>
+				<TemplateAreas />
+			</SidebarCard>
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
+			>
+				<LastRevision />
+			</PanelRow>
+		</PanelBody>
+	);
+}