@wordpress/edit-site 5.31.0 → 5.32.0

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

@@ -3,9 +3,14 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	useEntitiesSavedStatesIsDirty,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -15,30 +20,30 @@ import {
 	currentlyPreviewingTheme,
 	isPreviewingTheme,
 } from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function SaveButton( {
 	className = 'edit-site-save-button__button',
 	variant = 'primary',
 	showTooltip = true,
-	defaultLabel,
+	showReviewMessage,
 	icon,
 	size,
 	__next40pxDefaultSize = false,
 } ) {
-	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
-		useSelect( ( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+	const { params } = useLocation();
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
+	const { dirtyEntityRecords } = useEntitiesSavedStatesIsDirty();
+	const { isSaving, isSaveViewOpen, previewingThemeName } = useSelect(
+		( select ) => {
+			const { isSavingEntityRecord, isResolving } = select( coreStore );
 			const { isSaveViewOpened } = select( editSiteStore );
 			const isActivatingTheme = isResolving( 'activateTheme' );
 			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
-
 			return {
-				isDirty: dirtyEntityRecords.length > 0,
 				isSaving:
 					dirtyEntityRecords.some( ( record ) =>
 						isSavingEntityRecord(
@@ -55,12 +60,26 @@ export default function SaveButton( {
 							?.name?.rendered
 					: undefined,
 			};
-		}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const activateSaveEnabled = isPreviewingTheme() || isDirty;
-	const disabled = isSaving || ! activateSaveEnabled;
-
+		},
+		[ dirtyEntityRecords ]
+	);
+	const hasDirtyEntities = !! dirtyEntityRecords.length;
+	let isOnlyCurrentEntityDirty;
+	// Check if the current entity is the only entity with changes.
+	// We have some extra logic for `wp_global_styles` for now, that
+	// is used in navigation sidebar.
+	if ( dirtyEntityRecords.length === 1 ) {
+		if ( params.postId ) {
+			isOnlyCurrentEntityDirty =
+				`${ dirtyEntityRecords[ 0 ].key }` === params.postId &&
+				dirtyEntityRecords[ 0 ].name === params.postType;
+		} else if ( params.path?.includes( 'wp_global_styles' ) ) {
+			isOnlyCurrentEntityDirty =
+				dirtyEntityRecords[ 0 ].name === 'globalStyles';
+		}
+	}
+	const disabled =
+		isSaving || ( ! hasDirtyEntities && ! isPreviewingTheme() );
 	const getLabel = () => {
 		if ( isPreviewingTheme() ) {
 			if ( isSaving ) {
@@ -71,32 +90,42 @@ export default function SaveButton( {
 				);
 			} else if ( disabled ) {
 				return __( 'Saved' );
-			} else if ( isDirty ) {
+			} else if ( hasDirtyEntities ) {
 				return sprintf(
 					/* translators: %s: The name of theme to be activated. */
 					__( 'Activate %s & Save' ),
 					previewingThemeName
 				);
 			}
-
 			return sprintf(
 				/* translators: %s: The name of theme to be activated. */
 				__( 'Activate %s' ),
 				previewingThemeName
 			);
 		}
-
 		if ( isSaving ) {
 			return __( 'Saving' );
-		} else if ( disabled ) {
+		}
+		if ( disabled ) {
 			return __( 'Saved' );
-		} else if ( defaultLabel ) {
-			return defaultLabel;
+		}
+		if ( ! isOnlyCurrentEntityDirty && showReviewMessage ) {
+			return sprintf(
+				// translators: %d: number of unsaved changes (number).
+				_n(
+					'Review %d change…',
+					'Review %d changes…',
+					dirtyEntityRecords.length
+				),
+				dirtyEntityRecords.length
+			);
 		}
 		return __( 'Save' );
 	};
 	const label = getLabel();
-
+	const onClick = isOnlyCurrentEntityDirty
+		? () => saveDirtyEntities( { dirtyEntityRecords } )
+		: () => setIsSaveViewOpened( true );
 	return (
 		<Button
 			variant={ variant }
@@ -104,7 +133,7 @@ export default function SaveButton( {
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			onClick={ disabled ? undefined : onClick }
 			label={ label }
 			/*
 			 * We want the tooltip to show the keyboard shortcut only when the

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

@@ -1,186 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
-import { __, sprintf, _n } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 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 '../../lock-unlock';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-const PUBLISH_ON_SAVE_ENTITIES = [
-	{
-		kind: 'postType',
-		name: NAVIGATION_POST_TYPE,
-	},
-];
 
 export default function SaveHub() {
-	const saveNoticeId = 'site-edit-save-notice';
-	const { params } = useLocation();
-
-	const { __unstableMarkLastChangeAsPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { createSuccessNotice, createErrorNotice, removeNotice } =
-		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 { isDisabled, isSaving } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+			select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const _isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
 		);
-
-	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 { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
 		return {
-			homeUrl: getUnstableBase()?.home,
+			isSaving: _isSaving,
+			isDisabled:
+				_isSaving ||
+				( ! dirtyEntityRecords.length && ! isPreviewingTheme() ),
 		};
 	}, [] );
-
-	const saveCurrentEntity = async () => {
-		if ( ! dirtyCurrentEntity ) return;
-
-		removeNotice( saveNoticeId );
-		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',
-				actions: [
-					{
-						label: __( 'View site' ),
-						url: homeUrl,
-					},
-				],
-				id: saveNoticeId,
-			} );
-		} catch ( error ) {
-			createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` );
-		}
-	};
-
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
-			{ dirtyCurrentEntity ? (
-				<Button
-					variant="primary"
-					onClick={ saveCurrentEntity }
-					isBusy={ isSaving }
-					disabled={ isSaving }
-					aria-disabled={ isSaving }
-					className="edit-site-save-hub__button"
-					__next40pxDefaultSize
-				>
-					{ label }
-				</Button>
-			) : (
-				<SaveButton
-					className="edit-site-save-hub__button"
-					variant={ disabled ? null : 'primary' }
-					showTooltip={ false }
-					icon={ disabled && ! isSaving ? check : null }
-					defaultLabel={ label }
-					__next40pxDefaultSize
-				/>
-			) }
+			<SaveButton
+				className="edit-site-save-hub__button"
+				variant={ isDisabled ? null : 'primary' }
+				showTooltip={ false }
+				icon={ isDisabled && ! isSaving ? check : null }
+				showReviewMessage
+				__next40pxDefaultSize
+			/>
 		</HStack>
 	);
 }

package/src/components/sidebar/index.js

@@ -31,7 +31,6 @@ import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-gl
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
-import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
@@ -69,13 +68,9 @@ function SidebarScreens() {
 				<SidebarNavigationScreenGlobalStyles />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page">
-				<SidebarNavigationScreenPages />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/pages">
 				<SidebarNavigationScreen
 					title={ __( 'Manage pages' ) }
 					content={ <DataViewsSidebarContent /> }
-					backPath="/page"
 				/>
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">

package/src/components/sidebar-dataviews/default-views.js

@@ -29,7 +29,7 @@ export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
 };
 
 const DEFAULT_PAGE_BASE = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
 	page: 1,

package/src/components/sidebar-dataviews/index.js

@@ -15,7 +15,7 @@ import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
 const PATH_TO_TYPE = {
-	'/pages': 'page',
+	'/page': 'page',
 };
 
 export default function DataViewsSidebarContent() {

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

@@ -22,7 +22,6 @@ import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 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';
 import { unlock } from '../../lock-unlock';
@@ -96,7 +95,6 @@ const FillContents = ( {
 						focusable={ false }
 					>
 						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
-						<PluginTemplateSettingPanel.Slot />
 					</Tabs.TabPanel>
 					<Tabs.TabPanel tabId={ SIDEBAR_BLOCK } focusable={ false }>
 						<InspectorSlot bubblesVirtually />

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

@@ -1,17 +1,10 @@
 /**
  * WordPress dependencies
  */
-import {
-	PanelBody,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { page as pageIcon } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { humanTimeDiff } from '@wordpress/date';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
 import {
 	PageAttributesPanel,
 	PluginDocumentSettingPanel,
@@ -20,50 +13,42 @@ import {
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import SidebarCard from '../sidebar-card';
 import PageContent from './page-content';
 import PageSummary from './page-summary';
+import { unlock } from '../../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
 
 export default function PagePanels() {
-	const {
-		id,
-		type,
-		hasResolved,
-		status,
-		date,
-		password,
-		title,
-		modified,
-		renderingMode,
-	} = useSelect( ( select ) => {
-		const { getEditedPostContext } = select( editSiteStore );
-		const { getEditedEntityRecord, hasFinishedResolution } =
-			select( coreStore );
-		const { getRenderingMode } = select( editorStore );
-		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,
-			renderingMode: getRenderingMode(),
-		};
-	}, [] );
+	const { id, type, hasResolved, status, date, password, renderingMode } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext } = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const { getRenderingMode } = select( editorStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				id: page?.id,
+				type: page?.type,
+				status: page?.status,
+				date: page?.date,
+				password: page?.password,
+				renderingMode: getRenderingMode(),
+			};
+		}, [] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -71,23 +56,7 @@ export default function PagePanels() {
 
 	return (
 		<>
-			<PanelBody>
-				<SidebarCard
-					title={ decodeEntities( title ) }
-					icon={ pageIcon }
-					description={
-						<VStack>
-							<Text>
-								{ sprintf(
-									// translators: %s: Human-readable time difference, e.g. "2 days ago".
-									__( 'Last edited %s' ),
-									humanTimeDiff( modified )
-								) }
-							</Text>
-						</VStack>
-					}
-				/>
-			</PanelBody>
+			<PostCardPanel />
 			<PanelBody title={ __( 'Summary' ) }>
 				<PageSummary
 					status={ status }

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

@@ -6,7 +6,6 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,15 +14,16 @@ import { unlock } from '../../../lock-unlock';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
+const PAGE_CONTENT_BLOCKS = [
+	'core/post-content',
+	'core/post-featured-image',
+	'core/post-title',
+];
+
 export default function PageContent() {
-	const clientIdsTree = useSelect(
-		( select ) =>
-			unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),
-		[]
-	);
-	const clientIds = useMemo(
-		() => clientIdsTree.map( ( { clientId } ) => clientId ),
-		[ clientIdsTree ]
-	);
+	const clientIds = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( PAGE_CONTENT_BLOCKS );
+	}, [] );
 	return <BlockQuickNavigation clientIds={ clientIds } />;
 }

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

@@ -9,11 +9,10 @@ import {
 	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
+	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { navigation, symbol } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { serialize } from '@wordpress/blocks';
@@ -25,19 +24,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from '../../template-actions';
-import TemplateAreas from './template-areas';
-import SidebarCard from '../sidebar-card';
+import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
 import { useAvailablePatterns } from './hooks';
 import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
 import { unlock } from '../../../lock-unlock';
 
+const { PostCardPanel } = unlock( editorPrivateApis );
+const { PatternOverridesPanel } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
-const CARD_ICONS = {
-	wp_block: symbol,
-	wp_navigation: navigation,
-};
-
 function TemplatesList( { availableTemplates, onSelect } ) {
 	const shownTemplates = useAsyncList( availableTemplates );
 	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
@@ -61,7 +56,7 @@ const POST_TYPE_PATH = {
 };
 
 export default function TemplatePanel() {
-	const { title, description, icon, record, postType, postId } = useSelect(
+	const { title, description, record, postType, postId } = useSelect(
 		( select ) => {
 			const { getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
@@ -102,29 +97,23 @@ export default function TemplatePanel() {
 
 	return (
 		<>
-			<PanelBody>
-				<SidebarCard
-					className="edit-site-template-card"
-					title={ decodeEntities( title ) }
-					icon={ CARD_ICONS[ record?.type ] ?? icon }
-					description={ decodeEntities( description ) }
-					actions={
-						<TemplateActions
-							postType={ postType }
-							postId={ postId }
-							className="edit-site-template-card__actions"
-							toggleProps={ { size: 'small' } }
-							onRemove={ () => {
-								history.push( {
-									path: POST_TYPE_PATH[ postType ],
-								} );
-							} }
-						/>
-					}
-				>
-					<TemplateAreas />
-				</SidebarCard>
-			</PanelBody>
+			<PostCardPanel
+				className="edit-site-template-card"
+				actions={
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						className="edit-site-template-card__actions"
+						toggleProps={ { size: 'small' } }
+						onRemove={ () => {
+							history.push( {
+								path: POST_TYPE_PATH[ postType ],
+							} );
+						} }
+					/>
+				}
+			/>
+			<PluginTemplateSettingPanel.Slot />
 			{ availablePatterns?.length > 0 && (
 				<PanelBody
 					title={ __( 'Transform into:' ) }
@@ -149,6 +138,7 @@ export default function TemplatePanel() {
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />
+			<PatternOverridesPanel />
 		</>
 	);
 }