@wordpress/edit-site 5.10.0 → 5.12.0

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

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__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';
+
+/**
+ * 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';
+
+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 blockContext = useMemo(
+		() => ( { ...context, postType: null, postId: null } ),
+		[ context ]
+	);
+
+	if ( ! hasPageResolved || ! isTemplateLoaded ) {
+		return null;
+	}
+
+	return (
+		<>
+			<PanelBody>
+				<SidebarCard
+					title={ page.title }
+					icon={ pageIcon }
+					description={ sprintf(
+						// translators: %s: Human-readable time difference, e.g. "2 days ago".
+						__( 'Last edited %s' ),
+						humanTimeDiff( page.modified )
+					) }
+				/>
+			</PanelBody>
+			<PanelBody title={ __( 'Content' ) }>
+				<ContentBlocksList />
+			</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>
+			</PanelBody>
+		</>
+	);
+}

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

@@ -0,0 +1,10 @@
+.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;
+}

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 { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
 /**
@@ -11,27 +16,35 @@ 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 hasPageContentLock = useSelect( ( select ) =>
+		select( editSiteStore ).hasPageContentLock()
+	);
+
 	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 ( hasPageContentLock ) {
+		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.
+				  __( 'Template (selected)' )
+				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
+				  __( 'Template' );
+	}
 
 	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
@@ -39,29 +52,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={
+						hasPageContentLock ? __( 'Page' ) : __( 'Template' )
 					}
+				>
+					{ hasPageContentLock ? __( 'Page' ) : __( 'Template' ) }
 				</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/{template-card → template-panel}/index.js

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
+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';
 
 /**
  * Internal dependencies
@@ -13,8 +14,10 @@ import { decodeEntities } from '@wordpress/html-entities';
 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 TemplateCard() {
+export default function TemplatePanel() {
 	const {
 		info: { title, description, icon },
 		template,
@@ -38,22 +41,22 @@ export default function TemplateCard() {
 	}
 
 	return (
-		<>
-			<div className="edit-site-template-card">
-				<Icon className="edit-site-template-card__icon" icon={ icon } />
-				<div className="edit-site-template-card__content">
-					<div className="edit-site-template-card__header">
-						<h2 className="edit-site-template-card__title">
-							{ decodeEntities( title ) }
-						</h2>
-						<TemplateActions template={ template } />
-					</div>
-					<div className="edit-site-template-card__description">
-						{ decodeEntities( description ) }
-					</div>
-					<TemplateAreas />
-				</div>
-			</div>
-		</>
+		<PanelBody className="edit-site-template-panel">
+			<SidebarCard
+				className="edit-site-template-card"
+				title={ decodeEntities( title ) }
+				icon={ icon }
+				description={ decodeEntities( description ) }
+				actions={ <TemplateActions template={ template } /> }
+			>
+				<TemplateAreas />
+			</SidebarCard>
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
+			>
+				<LastRevision />
+			</PanelRow>
+		</PanelBody>
 	);
 }

package/src/components/sidebar-edit-mode/{template-revisions/index.js → template-panel/last-revision.js}

@@ -19,8 +19,7 @@ const useRevisionData = () => {
 		currentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
 
 	const revisionsCount =
-		( currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0 ) +
-		1;
+		currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 
 	return {
 		currentTemplate,

package/src/components/sidebar-edit-mode/{template-card → template-panel}/style.scss

@@ -1,30 +1,6 @@
 .edit-site-template-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-template-card__title {
-			margin: 0;
-		}
-	}
-
-	&__description {
-		font-size: $default-font-size;
-		margin: 0 0 $grid-unit-20;
-	}
-
-	&__icon {
-		flex: 0 0 $icon-size;
-		margin-right: $grid-unit-15;
-		width: $icon-size;
-		height: $icon-size;
+	&__template-areas {
+		margin-top: $grid-unit-20;
 	}
 
 	&__template-areas-list {
@@ -44,12 +20,6 @@
 		}
 	}
 
-	&__header {
-		display: flex;
-		justify-content: space-between;
-		margin: 0 0 $grid-unit-05;
-	}
-
 	&__actions {
 		line-height: 0;
 		> .components-button.is-small.has-icon {

package/src/components/sidebar-navigation-item/style.scss

@@ -19,6 +19,15 @@
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
 		fill: $gray-700;
 	}
+
+	&:is(a) {
+		text-decoration: none;
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {

package/src/components/sidebar-navigation-screen/index.js

@@ -27,7 +27,9 @@ export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
 	actions,
+	meta,
 	content,
+	footer,
 	description,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
@@ -40,58 +42,80 @@ export default function SidebarNavigationScreen( {
 	const theme = getTheme( currentlyPreviewingTheme() );
 
 	return (
-		<VStack spacing={ 2 }>
-			<HStack
-				spacing={ 4 }
-				alignment="flex-start"
-				className="edit-site-sidebar-navigation-screen__title-icon"
+		<>
+			<VStack
+				className="edit-site-sidebar-navigation-screen__main"
+				spacing={ 0 }
+				justify="flex-start"
 			>
-				{ ! isRoot ? (
-					<NavigatorToParentButton
-						as={ SidebarButton }
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						label={ __( 'Back' ) }
-					/>
-				) : (
-					<SidebarButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						label={
-							! isPreviewingTheme()
-								? __( 'Go back to the Dashboard' )
-								: __( 'Go back to the theme showcase' )
-						}
-						href={
-							! isPreviewingTheme()
-								? dashboardLink || 'index.php'
-								: 'themes.php'
-						}
-					/>
-				) }
-				<Heading
-					className="edit-site-sidebar-navigation-screen__title"
-					color={ 'white' }
-					level={ 2 }
-					size={ 20 }
+				<HStack
+					spacing={ 4 }
+					alignment="flex-start"
+					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isPreviewingTheme()
-						? title
-						: sprintf(
-								'Previewing %1$s: %2$s',
-								theme?.name?.rendered,
-								title
-						  ) }
-				</Heading>
-				{ actions }
-			</HStack>
-
-			<nav className="edit-site-sidebar-navigation-screen__content">
-				{ description && (
-					<p className="edit-site-sidebar-navigation-screen__description">
-						{ description }
-					</p>
+					{ ! isRoot ? (
+						<NavigatorToParentButton
+							as={ SidebarButton }
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							label={ __( 'Back' ) }
+						/>
+					) : (
+						<SidebarButton
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							label={
+								! isPreviewingTheme()
+									? __( 'Go back to the Dashboard' )
+									: __( 'Go back to the theme showcase' )
+							}
+							href={
+								! isPreviewingTheme()
+									? dashboardLink || 'index.php'
+									: 'themes.php'
+							}
+						/>
+					) }
+					<Heading
+						className="edit-site-sidebar-navigation-screen__title"
+						color={ 'white' }
+						level={ 2 }
+						size={ 20 }
+					>
+						{ ! isPreviewingTheme()
+							? title
+							: sprintf(
+									'Previewing %1$s: %2$s',
+									theme?.name?.rendered,
+									title
+							  ) }
+					</Heading>
+					{ actions && (
+						<div className="edit-site-sidebar-navigation-screen__actions">
+							{ actions }
+						</div>
+					) }
+				</HStack>
+				{ meta && (
+					<>
+						<div className="edit-site-sidebar-navigation-screen__meta">
+							{ meta }
+						</div>
+					</>
 				) }
-				{ content }
-			</nav>
-		</VStack>
+
+				<div className="edit-site-sidebar-navigation-screen__content">
+					{ description && (
+						<p className="edit-site-sidebar-navigation-screen__description">
+							{ description }
+						</p>
+					) }
+					{ content }
+				</div>
+			</VStack>
+			{ footer && (
+				<footer className="edit-site-sidebar-navigation-screen__footer">
+					{ footer }
+				</footer>
+			) }
+		</>
 	);
 }

package/src/components/sidebar-navigation-screen/style.scss

@@ -5,10 +5,31 @@
 	position: relative;
 }
 
+.edit-site-sidebar-navigation-screen__main {
+	// Ensure the sidebar is always at least as tall as the viewport.
+	// This allows the footer section to be sticky at the bottom of the viewport.
+	flex-grow: 1;
+}
+
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
-	color: $gray-600;
-	//z-index: z-index(".edit-site-sidebar-navigation-screen__content");
+	color: $gray-400;
+	padding: 0 $grid-unit-20;
+	.components-item-group {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
+	.components-text {
+		color: $gray-400;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__meta {
+	margin: 0 0 $grid-unit-20 0;
+	color: $gray-400;
+	margin-left: $grid-unit-20;
+	.components-text {
+		color: $gray-400;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__page-link {
@@ -22,7 +43,6 @@
 	.components-external-link__icon {
 		margin-left: $grid-unit-05;
 	}
-	margin-left: $grid-unit-20;
 	display: inline-block;
 }
 
@@ -34,7 +54,6 @@
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
-	padding-right: $grid-unit-20;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
 }
 
@@ -43,8 +62,11 @@
 	padding: $grid-unit-15 * 0.5 0 0 0;
 }
 
+.edit-site-sidebar-navigation-screen__actions {
+	flex-shrink: 0;
+}
+
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
-	margin-left: $grid-unit-20;
 	.edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}
@@ -59,3 +81,21 @@
 		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 	}
 }
+
+.edit-site-sidebar-navigation-screen__sticky-section.edit-site-sidebar-navigation-screen__sticky-section {
+	position: sticky;
+	bottom: 0;
+	background-color: $gray-900;
+	gap: 0;
+	padding: $grid-unit-20 0;
+	margin: $grid-unit-20 0 0;
+	border-top: 1px solid $gray-800;
+	box-shadow: 0 #{-$grid-unit-10} $grid-unit-20 $gray-900;
+}
+
+.edit-site-sidebar-navigation-screen__footer {
+	position: sticky;
+	bottom: 0;
+	background-color: $gray-900;
+	padding: $grid-unit-20 0;
+}