@wordpress/edit-site 5.31.0 → 5.33.0

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

@@ -1,10 +1,15 @@
 /**
  * WordPress dependencies
  */
-import {
-	ComplementaryArea,
-	ComplementaryAreaMoreMenuItem,
-} from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { ComplementaryArea, ComplementaryAreaMoreMenuItem } =
+	unlock( editorPrivateApis );
 
 export default function DefaultSidebar( {
 	className,
@@ -16,12 +21,13 @@ export default function DefaultSidebar( {
 	header,
 	headerClassName,
 	panelClassName,
+	isActiveByDefault,
 } ) {
 	return (
 		<>
 			<ComplementaryArea
 				className={ className }
-				scope="core/edit-site"
+				scope="core"
 				identifier={ identifier }
 				title={ title }
 				smallScreenTitle={ title }
@@ -30,11 +36,12 @@ export default function DefaultSidebar( {
 				header={ header }
 				headerClassName={ headerClassName }
 				panelClassName={ panelClassName }
+				isActiveByDefault={ isActiveByDefault }
 			>
 				{ children }
 			</ComplementaryArea>
 			<ComplementaryAreaMoreMenuItem
-				scope="core/edit-site"
+				scope="core"
 				identifier={ identifier }
 				icon={ icon }
 			>

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -12,9 +12,11 @@ import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -26,6 +28,8 @@ import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 import { store as coreStore } from '@wordpress/core-data';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+
 export default function GlobalStylesSidebar() {
 	const {
 		shouldClearCanvasContainerView,
@@ -59,7 +63,7 @@ export default function GlobalStylesSidebar() {
 			isStyleBookOpened: 'style-book' === canvasContainerView,
 			shouldClearCanvasContainerView:
 				'edit-site/global-styles' !==
-					getActiveComplementaryArea( 'core/edit-site' ) ||
+					getActiveComplementaryArea( 'core' ) ||
 				! _isVisualEditorMode ||
 				! _isEditCanvasMode,
 			showListViewByDefault: _showListViewByDefault,

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

@@ -9,36 +9,30 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
-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';
 
 const { Tabs } = unlock( componentsPrivateApis );
-
+const { interfaceStore, useAutoSwitchEditorSidebars } =
+	unlock( editorPrivateApis );
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
 );
 export const SidebarInspectorFill = InspectorFill;
 
-const FillContents = ( {
-	sidebarName,
-	isEditingPage,
-	supportsGlobalStyles,
-} ) => {
+const FillContents = ( { tabName, isEditingPage, supportsGlobalStyles } ) => {
 	const tabListRef = useRef( null );
 	// Because `DefaultSidebar` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
@@ -57,7 +51,7 @@ const FillContents = ( {
 			// We are purposefully using a custom `data-tab-id` attribute here
 			// because we don't want rely on any assumptions about `Tabs`
 			// component internals.
-			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
 		);
 		const activeElement = selectedTabElement?.ownerDocument.activeElement;
 		const tabsHasFocus = tabsElements.some( ( element ) => {
@@ -70,12 +64,12 @@ const FillContents = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
 		<>
 			<DefaultSidebar
-				identifier={ sidebarName }
+				identifier={ tabName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
 				closeLabel={ __( 'Close Settings' ) }
@@ -89,16 +83,16 @@ const FillContents = ( {
 				// margin to the panel.
 				// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
 				className="edit-site-sidebar__panel"
+				isActiveByDefault
 			>
 				<Tabs.Context.Provider value={ tabsContextValue }>
 					<Tabs.TabPanel
-						tabId={ SIDEBAR_TEMPLATE }
+						tabId="edit-post/document"
 						focusable={ false }
 					>
 						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
-						<PluginTemplateSettingPanel.Slot />
 					</Tabs.TabPanel>
-					<Tabs.TabPanel tabId={ SIDEBAR_BLOCK } focusable={ false }>
+					<Tabs.TabPanel tabId="edit-post/block" focusable={ false }>
 						<InspectorSlot bubblesVirtually />
 					</Tabs.TabPanel>
 				</Tabs.Context.Provider>
@@ -109,60 +103,35 @@ const FillContents = ( {
 };
 
 export function SidebarComplementaryAreaFills() {
-	const {
-		sidebar,
-		isEditorSidebarOpened,
-		hasBlockSelection,
-		supportsGlobalStyles,
-		isEditingPage,
-		isEditorOpen,
-	} = useSelect( ( select ) => {
-		const _sidebar =
-			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
-
-		const _isEditorSidebarOpened = [
-			SIDEBAR_BLOCK,
-			SIDEBAR_TEMPLATE,
-		].includes( _sidebar );
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-
-		return {
-			sidebar: _sidebar,
-			isEditorSidebarOpened: _isEditorSidebarOpened,
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			supportsGlobalStyles:
-				select( coreStore ).getCurrentTheme()?.is_block_theme,
-			isEditingPage: select( editSiteStore ).isPage(),
-			isEditorOpen: getCanvasMode() === 'edit',
-		};
-	}, [] );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	useAutoSwitchEditorSidebars();
+	const { tabName, supportsGlobalStyles, isEditingPage } = useSelect(
+		( select ) => {
+			const sidebar =
+				select( interfaceStore ).getActiveComplementaryArea( 'core' );
 
-	useEffect( () => {
-		// Don't automatically switch tab when the sidebar is closed or when we
-		// are focused on page content.
-		if ( ! isEditorSidebarOpened ) {
-			return;
-		}
-		if ( hasBlockSelection ) {
-			if ( ! isEditingPage ) {
-				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			const _isEditorSidebarOpened = [
+				'edit-post/block',
+				'edit-post/document',
+			].includes( sidebar );
+			let _tabName = sidebar;
+			if ( ! _isEditorSidebarOpened ) {
+				_tabName = !! select(
+					blockEditorStore
+				).getBlockSelectionStart()
+					? 'edit-post/block'
+					: 'edit-post/document';
 			}
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
-		}
-	}, [
-		hasBlockSelection,
-		isEditorSidebarOpened,
-		isEditingPage,
-		enableComplementaryArea,
-	] );
 
-	let sidebarName = sidebar;
-	if ( ! isEditorSidebarOpened ) {
-		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
-	}
+			return {
+				tabName: _tabName,
+				supportsGlobalStyles:
+					select( coreStore ).getCurrentTheme()?.is_block_theme,
+				isEditingPage: select( editSiteStore ).isPage(),
+			};
+		},
+		[]
+	);
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
 	// the initial render) or when we don't want a tab displayed (i.e. the
@@ -171,7 +140,7 @@ export function SidebarComplementaryAreaFills() {
 	const onTabSelect = useCallback(
 		( newSelectedTabId ) => {
 			if ( !! newSelectedTabId ) {
-				enableComplementaryArea( STORE_NAME, newSelectedTabId );
+				enableComplementaryArea( 'core', newSelectedTabId );
 			}
 		},
 		[ enableComplementaryArea ]
@@ -179,19 +148,12 @@ export function SidebarComplementaryAreaFills() {
 
 	return (
 		<Tabs
-			// Due to how this component is controlled (via a value from the
-			// edit-site store), when the sidebar closes the currently selected
-			// tab can't be found. This causes the component to continuously reset
-			// the selection to `null` in an infinite loop. Proactively setting
-			// the selected tab to `null` avoids that.
-			selectedTabId={
-				isEditorOpen && isEditorSidebarOpened ? sidebarName : null
-			}
+			selectedTabId={ tabName }
 			onSelect={ onTabSelect }
 			selectOnMove={ false }
 		>
 			<FillContents
-				sidebarName={ sidebarName }
+				tabName={ tabName }
 				isEditingPage={ isEditingPage }
 				supportsGlobalStyles={ supportsGlobalStyles }
 			/>

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,61 @@ import {
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
 
 /**
  * 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, PostActions } = unlock( editorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
 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(),
+			};
+		}, [] );
+
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'move-to-trash' ) {
+				history.push( {
+					path: '/' + items[ 0 ].type,
+					postId: undefined,
+					postType: undefined,
+					canvas: 'view',
+				} );
+			}
+		},
+		[ history ]
+	);
 
 	if ( ! hasResolved ) {
 		return null;
@@ -71,23 +75,11 @@ 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
+				actions={
+					<PostActions onActionPerformed={ onActionPerformed } />
+				}
+			/>
 			<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/page-panels/page-summary.js

@@ -3,6 +3,7 @@
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import {
+	PluginPostStatusInfo,
 	PostAuthorPanel,
 	PostURLPanel,
 	PostSchedulePanel,
@@ -24,18 +25,25 @@ export default function PageSummary( {
 } ) {
 	return (
 		<VStack spacing={ 0 }>
-			<PostFeaturedImagePanel withPanelBody={ false } />
-			<PageStatus
-				status={ status }
-				date={ date }
-				password={ password }
-				postId={ postId }
-				postType={ postType }
-			/>
-			<PostSchedulePanel />
-			<PostTemplatePanel />
-			<PostURLPanel />
-			<PostAuthorPanel />
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<PostFeaturedImagePanel withPanelBody={ false } />
+						<PageStatus
+							status={ status }
+							date={ date }
+							password={ password }
+							postId={ postId }
+							postType={ postType }
+						/>
+						<PostSchedulePanel />
+						<PostTemplatePanel />
+						<PostURLPanel />
+						<PostAuthorPanel />
+						{ fills }
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
 		</VStack>
 	);
 }

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

@@ -1,9 +1,3 @@
-
-
-.edit-site-page-panels__swap-template__confirm-modal__actions {
-	margin-top: $grid-unit-30;
-}
-
 .edit-site-change-status__content {
 	.components-popover__content {
 		min-width: 320px;

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

@@ -10,7 +10,6 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
@@ -24,16 +23,16 @@ const SettingsHeader = ( _, ref ) => {
 	return (
 		<Tabs.TabList ref={ ref }>
 			<Tabs.Tab
-				tabId={ SIDEBAR_TEMPLATE }
+				tabId="edit-post/document"
 				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ SIDEBAR_TEMPLATE }
+				data-tab-id="edit-post/document"
 			>
 				{ postTypeLabel }
 			</Tabs.Tab>
 			<Tabs.Tab
-				tabId={ SIDEBAR_BLOCK }
+				tabId="edit-post/block"
 				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ SIDEBAR_BLOCK }
+				data-tab-id="edit-post/block"
 			>
 				{ __( 'Block' ) }
 			</Tabs.Tab>

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

@@ -1,4 +1,4 @@
-.edit-site-sidebar-edit-mode {
+.editor-sidebar {
 	width: $sidebar-width;
 
 	> .components-panel {

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 ) {
@@ -57,11 +52,11 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 
 const POST_TYPE_PATH = {
 	wp_template: '/wp_template',
-	wp_template_part: '/wp_template_part/all',
+	wp_template_part: '/patterns',
 };
 
 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 />
 		</>
 	);
 }