@wordpress/edit-site 5.11.0 → 5.12.0

package/src/components/save-hub/index.js

@@ -1,60 +1,165 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { __experimentalHStack as HStack } from '@wordpress/components';
-import { sprintf, _n } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { check } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const PUBLISH_ON_SAVE_ENTITIES = [
+	{
+		kind: 'postType',
+		name: 'wp_navigation',
+	},
+];
 
 export default function SaveHub() {
-	const { countUnsavedChanges, isDirty, isSaving } = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			return {
-				isDirty: dirtyEntityRecords.length > 0,
-				isSaving: dirtyEntityRecords.some( ( record ) =>
-					isSavingEntityRecord( record.kind, record.name, record.key )
-				),
-				countUnsavedChanges: dirtyEntityRecords.length,
-			};
-		},
-		[]
-	);
+	const { params } = useLocation();
+
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const { dirtyCurrentEntity, countUnsavedChanges, isDirty, isSaving } =
+		useSelect(
+			( select ) => {
+				const {
+					__experimentalGetDirtyEntityRecords,
+					isSavingEntityRecord,
+				} = select( coreStore );
+				const dirtyEntityRecords =
+					__experimentalGetDirtyEntityRecords();
+				let calcDirtyCurrentEntity = null;
+
+				if ( dirtyEntityRecords.length === 1 ) {
+					// if we are on global styles
+					if ( params.path?.includes( 'wp_global_styles' ) ) {
+						calcDirtyCurrentEntity = dirtyEntityRecords.find(
+							( record ) => record.name === 'globalStyles'
+						);
+					}
+					// if we are on pages
+					else if ( params.postId ) {
+						calcDirtyCurrentEntity = dirtyEntityRecords.find(
+							( record ) =>
+								record.name === params.postType &&
+								String( record.key ) === params.postId
+						);
+					}
+				}
+
+				return {
+					dirtyCurrentEntity: calcDirtyCurrentEntity,
+					isDirty: dirtyEntityRecords.length > 0,
+					isSaving: dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					),
+					countUnsavedChanges: dirtyEntityRecords.length,
+				};
+			},
+			[ params.path, params.postType, params.postId ]
+		);
+
+	const {
+		editEntityRecord,
+		saveEditedEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
 
 	const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() );
 
+	// if we have only one unsaved change and it matches current context, we can show a more specific label
+	let label = dirtyCurrentEntity
+		? __( 'Save' )
+		: sprintf(
+				// translators: %d: number of unsaved changes (number).
+				_n(
+					'Review %d change…',
+					'Review %d changes…',
+					countUnsavedChanges
+				),
+				countUnsavedChanges
+		  );
+
+	if ( isSaving ) {
+		label = __( 'Saving' );
+	}
+
+	const saveCurrentEntity = async () => {
+		if ( ! dirtyCurrentEntity ) return;
+
+		const { kind, name, key, property } = dirtyCurrentEntity;
+
+		try {
+			if ( 'root' === dirtyCurrentEntity.kind && 'site' === name ) {
+				await saveSpecifiedEntityEdits( 'root', 'site', undefined, [
+					property,
+				] );
+			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					editEntityRecord( kind, name, key, { status: 'publish' } );
+				}
+
+				await saveEditedEntityRecord( kind, name, key );
+			}
+
+			__unstableMarkLastChangeAsPersistent();
+
+			createSuccessNotice( __( 'Site updated.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` );
+		}
+	};
+
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
-			{ isDirty && (
-				<span>
-					{ sprintf(
-						// translators: %d: number of unsaved changes (number).
-						_n(
-							'%d unsaved change',
-							'%d unsaved changes',
-							countUnsavedChanges
-						),
-						countUnsavedChanges
-					) }
-				</span>
+			{ dirtyCurrentEntity ? (
+				<Button
+					variant="primary"
+					onClick={ saveCurrentEntity }
+					isBusy={ isSaving }
+					disabled={ isSaving }
+					aria-disabled={ isSaving }
+					className="edit-site-save-hub__button"
+				>
+					{ label }
+				</Button>
+			) : (
+				<SaveButton
+					className="edit-site-save-hub__button"
+					variant={ disabled ? null : 'primary' }
+					showTooltip={ false }
+					icon={ disabled && ! isSaving ? check : null }
+					defaultLabel={ label }
+				/>
 			) }
-			<SaveButton
-				className="edit-site-save-hub__button"
-				variant={ disabled ? null : 'primary' }
-				showTooltip={ false }
-				icon={ disabled ? check : null }
-			/>
 		</HStack>
 	);
 }

package/src/components/save-hub/style.scss

@@ -1,9 +1,15 @@
 .edit-site-save-hub {
 	color: $gray-600;
+	border-top: 1px solid $gray-800;
+	flex-shrink: 0;
+	margin: 0;
+	padding: $canvas-padding;
 }
 
 .edit-site-save-hub__button {
 	color: inherit;
+	width: 100%;
+	justify-content: center;
 
 	&[aria-disabled="true"] {
 		opacity: 1;

package/src/components/save-panel/index.js

@@ -7,10 +7,15 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button, Modal } from '@wordpress/components';
-import { EntitiesSavedStates } from '@wordpress/editor';
+import {
+	EntitiesSavedStates,
+	useEntitiesSavedStatesIsDirty,
+	privateApis,
+} from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -18,6 +23,59 @@ import { NavigableRegion } from '@wordpress/interface';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 import { useActivateTheme } from '../../utils/use-activate-theme';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+
+const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+	const isDirtyProps = useEntitiesSavedStatesIsDirty();
+	let activateSaveLabel;
+	if ( isDirtyProps.isDirty ) {
+		activateSaveLabel = __( 'Activate & Save' );
+	} else {
+		activateSaveLabel = __( 'Activate' );
+	}
+
+	const { getTheme } = useSelect( coreStore );
+	const theme = getTheme( currentlyPreviewingTheme() );
+	const additionalPrompt = (
+		<p>
+			{ sprintf(
+				'Saving your changes will change your active theme to  %1$s.',
+				theme?.name?.rendered
+			) }
+		</p>
+	);
+
+	const activateTheme = useActivateTheme();
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	return (
+		<EntitiesSavedStatesExtensible
+			{ ...{
+				...isDirtyProps,
+				additionalPrompt,
+				close: onClose,
+				onSave,
+				saveEnabled: true,
+				saveLabel: activateSaveLabel,
+			} }
+		/>
+	);
+};
+
+const _EntitiesSavedStates = ( { onClose } ) => {
+	if ( isPreviewingTheme() ) {
+		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
+	}
+	return <EntitiesSavedStates close={ onClose } />;
+};
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -33,18 +91,7 @@ export default function SavePanel() {
 		};
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-	const activateTheme = useActivateTheme();
 	const onClose = () => setIsSaveViewOpened( false );
-	const onSave = async ( values ) => {
-		await activateTheme();
-		return values;
-	};
-
-	const entitySavedStates = window?.__experimentalEnableThemePreviews ? (
-		<EntitiesSavedStates close={ onClose } onSave={ onSave } />
-	) : (
-		<EntitiesSavedStates close={ onClose } />
-	);
 
 	if ( canvasMode === 'view' ) {
 		return isSaveViewOpen ? (
@@ -56,7 +103,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				{ entitySavedStates }
+				<_EntitiesSavedStates onClose={ onClose } />
 			</Modal>
 		) : null;
 	}
@@ -69,7 +116,7 @@ export default function SavePanel() {
 			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
-				entitySavedStates
+				<_EntitiesSavedStates onClose={ onClose } />
 			) : (
 				<div className="edit-site-editor__toggle-save-panel">
 					<Button

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -9,6 +9,7 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -24,9 +25,14 @@ const { PrivateListView } = unlock( blockEditorPrivateApis );
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			setIsListViewOpened( false );
@@ -55,9 +61,10 @@ export default function ListViewSidebar() {
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
+					setDropZoneElement,
 				] ) }
 			>
-				<PrivateListView />
+				<PrivateListView dropZoneElement={ dropZoneElement } />
 			</div>
 		</div>
 	);

package/src/components/sidebar/index.js

@@ -14,6 +14,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part';
 import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
@@ -57,9 +58,12 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/:postId">
+			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template_part)/:postId">
+				<SidebarNavigationScreenTemplatePart />
+			</NavigatorScreen>
 		</>
 	);
 }
@@ -76,9 +80,7 @@ function Sidebar() {
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			<div className="edit-site-sidebar__footer">
-				<SaveHub />
-			</div>
+			<SaveHub />
 		</>
 	);
 }

package/src/components/sidebar/style.scss

@@ -5,6 +5,9 @@
 	.components-navigator-screen {
 		@include custom-scrollbars-on-hover(transparent, $gray-700);
 		scrollbar-gutter: stable;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 }
 
@@ -15,10 +18,6 @@
 	padding: $canvas-padding 0;
 }
 
-.edit-site-sidebar__content.edit-site-sidebar__content {
-	overflow-x: unset;
-}
-
 .edit-site-sidebar__content > div {
 	// This matches the logo padding
 	padding: 0 $grid-unit-15;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components';
+import { createSlotFill } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
@@ -16,8 +16,8 @@ import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
-import LastRevision from './template-revisions';
-import TemplateCard from './template-card';
+import PagePanels from './page-panels';
+import TemplatePanel from './template-panel';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
@@ -33,6 +33,7 @@ export function SidebarComplementaryAreaFills() {
 		isEditorSidebarOpened,
 		hasBlockSelection,
 		supportsGlobalStyles,
+		hasPageContentLock,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
@@ -47,18 +48,23 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) return;
+		// Don't automatically switch tab when the sidebar is closed or when we
+		// are focused on page content.
+		if ( ! isEditorSidebarOpened || hasPageContentLock ) {
+			return;
+		}
 		if ( hasBlockSelection ) {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+	}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentLock ] );
 
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
@@ -77,15 +83,11 @@ export function SidebarComplementaryAreaFills() {
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
 					<>
-						<PanelBody>
-							<TemplateCard />
-							<PanelRow
-								header={ __( 'Editing history' ) }
-								className="edit-site-template-revisions"
-							>
-								<LastRevision />
-							</PanelRow>
-						</PanelBody>
+						{ hasPageContentLock ? (
+							<PagePanels />
+						) : (
+							<TemplatePanel />
+						) }
 						<PluginTemplateSettingPanel.Slot />
 					</>
 				) }

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

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { getBlockType, __experimentalGetBlockLabel } from '@wordpress/blocks';
+import { store as blockEditorStore, BlockIcon } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { CONTENT_BLOCK_TYPES } from '../../page-content-lock/constants';
+
+// TODO: This overlaps a lot with BlockInspectorLockedBlocks in
+// @wordpress/block-editor. DRY them into a single component.
+export default function ContentBlocksList() {
+	const contentBlocks = useSelect( ( select ) => {
+		const {
+			getClientIdsWithDescendants,
+			getBlockName,
+			getBlock,
+			isBlockSelected,
+			hasSelectedInnerBlock,
+		} = select( blockEditorStore );
+		return getClientIdsWithDescendants().flatMap( ( clientId ) => {
+			const blockName = getBlockName( clientId );
+			if ( ! CONTENT_BLOCK_TYPES.includes( blockName ) ) {
+				return [];
+			}
+			return [
+				{
+					block: getBlock( clientId ),
+					isSelected:
+						isBlockSelected( clientId ) ||
+						hasSelectedInnerBlock( clientId, /* deep: */ true ),
+				},
+			];
+		} );
+	}, [] );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	if ( ! contentBlocks.length ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 1 }>
+			{ contentBlocks.map( ( { block, isSelected } ) => {
+				const blockType = getBlockType( block.name );
+				return (
+					<Button
+						key={ block.clientId }
+						isPressed={ isSelected }
+						onClick={ () => selectBlock( block.clientId ) }
+					>
+						<HStack justify="flex-start">
+							<BlockIcon icon={ blockType.icon } />
+							<FlexItem>
+								{ __experimentalGetBlockLabel(
+									blockType,
+									block.attributes,
+									'list-view'
+								) }
+							</FlexItem>
+						</HStack>
+					</Button>
+				);
+			} ) }
+		</VStack>
+	);
+}

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;
+}