@wordpress/edit-site 5.30.0 → 5.32.0

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/save-panel/index.js

@@ -77,11 +77,13 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 	if ( isPreviewingTheme() ) {
 		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
 	}
-	return <EntitiesSavedStates close={ onClose } />;
+	return (
+		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+	);
 };
 
 export default function SavePanel() {
@@ -142,21 +144,26 @@ export default function SavePanel() {
 			} ) }
 			ariaLabel={ __( 'Save panel' ) }
 		>
-			{ isSaveViewOpen ? (
-				<_EntitiesSavedStates onClose={ onClose } />
-			) : (
-				<div className="edit-site-editor__toggle-save-panel">
-					<Button
-						variant="secondary"
-						className="edit-site-editor__toggle-save-panel-button"
-						onClick={ () => setIsSaveViewOpened( true ) }
-						aria-expanded={ false }
-						disabled={ disabled }
-						__experimentalIsFocusable
-					>
-						{ __( 'Open save panel' ) }
-					</Button>
-				</div>
+			<div
+				className={ classnames( 'edit-site-editor__toggle-save-panel', {
+					'screen-reader-text': isSaveViewOpen,
+				} ) }
+			>
+				<Button
+					variant="secondary"
+					className={ classnames(
+						'edit-site-editor__toggle-save-panel-button'
+					) }
+					onClick={ () => setIsSaveViewOpened( true ) }
+					aria-haspopup={ 'dialog' }
+					disabled={ disabled }
+					__experimentalIsFocusable
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+			{ isSaveViewOpen && (
+				<_EntitiesSavedStates onClose={ onClose } renderDialog />
 			) }
 		</NavigableRegion>
 	);

package/src/components/sidebar/index.js

@@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
@@ -32,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';
@@ -70,27 +68,23 @@ 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">
 				<SidebarNavigationScreenPage />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/:postType(wp_template)">
-				<SidebarNavigationScreenTemplates />
+				<SidebarNavigationScreenTemplatesBrowse />
 			</SidebarScreenWrapper>
 			{ ! isMobileViewport && (
 				<SidebarScreenWrapper path="/patterns">
 					<SidebarNavigationScreenPatterns />
 				</SidebarScreenWrapper>
 			) }
-			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
+			<SidebarScreenWrapper path="/:postType(wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -110,7 +110,7 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 				title={ dataview.title }
 				type={ type }
 				isActive={ isActive }
-				isCustom="true"
+				isCustom
 				customViewId={ dataviewId }
 				suffix={
 					<DropdownMenu
@@ -216,7 +216,7 @@ export default function CustomDataViewsList( { type, activeView, isCustom } ) {
 							key={ customViewRecord.id }
 							dataviewId={ customViewRecord.id }
 							isActive={
-								isCustom === 'true' &&
+								isCustom &&
 								Number( activeView ) === customViewRecord.id
 							}
 						/>

package/src/components/sidebar-dataviews/dataview-item.js

@@ -38,8 +38,8 @@ export default function DataViewItem( {
 	const linkInfo = useLink( {
 		path,
 		layout,
-		activeView: isCustom === 'true' ? customViewId : slug,
-		isCustom,
+		activeView: isCustom ? customViewId : slug,
+		isCustom: isCustom ? 'true' : 'false',
 	} );
 	return (
 		<HStack

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

@@ -11,7 +11,7 @@ import {
 	LAYOUT_LIST,
 	LAYOUT_TABLE,
 	LAYOUT_GRID,
-	OPERATOR_IN,
+	OPERATOR_IS_ANY,
 } from '../../utils/constants';
 
 export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
@@ -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,
@@ -61,7 +61,11 @@ export const DEFAULT_VIEWS = {
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [
-					{ field: 'status', operator: OPERATOR_IN, value: 'draft' },
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'draft',
+					},
 				],
 			},
 		},
@@ -72,7 +76,11 @@ export const DEFAULT_VIEWS = {
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [
-					{ field: 'status', operator: OPERATOR_IN, value: 'trash' },
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'trash',
+					},
 				],
 			},
 		},

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() {
@@ -25,6 +25,7 @@ export default function DataViewsSidebarContent() {
 	if ( ! path || ! PATH_TO_TYPE[ path ] ) {
 		return null;
 	}
+	const isCustomBoolean = isCustom === 'true';
 	const type = PATH_TO_TYPE[ path ];
 
 	return (
@@ -39,10 +40,10 @@ export default function DataViewsSidebarContent() {
 							icon={ dataview.icon }
 							type={ dataview.view.type }
 							isActive={
-								isCustom === 'false' &&
+								! isCustomBoolean &&
 								dataview.slug === activeView
 							}
-							isCustom="false"
+							isCustom={ false }
 						/>
 					);
 				} ) }
@@ -51,7 +52,7 @@ export default function DataViewsSidebarContent() {
 				<CustomDataViewsList
 					activeView={ activeView }
 					type={ type }
-					isCustom="true"
+					isCustom
 				/>
 			) }
 		</>

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,69 +1,54 @@
 /**
  * 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,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	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 }
@@ -97,6 +66,7 @@ export default function PagePanels() {
 					postType={ type }
 				/>
 			</PanelBody>
+			<PluginDocumentSettingPanel.Slot />
 			{ renderingMode !== 'post-only' && (
 				<PanelBody title={ __( 'Content' ) }>
 					<PageContent />
@@ -104,7 +74,6 @@ export default function PagePanels() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostFeaturedImagePanel />
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />

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/page-panels/page-summary.js

@@ -7,6 +7,7 @@ import {
 	PostURLPanel,
 	PostSchedulePanel,
 	PostTemplatePanel,
+	PostFeaturedImagePanel,
 } from '@wordpress/editor';
 
 /**
@@ -23,6 +24,7 @@ export default function PageSummary( {
 } ) {
 	return (
 		<VStack spacing={ 0 }>
+			<PostFeaturedImagePanel withPanelBody={ false } />
 			<PageStatus
 				status={ status }
 				date={ date }