@wordpress/edit-site 5.32.0 → 5.34.0

package/src/components/sidebar/index.js

@@ -1,117 +1,69 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { memo, useRef } from '@wordpress/element';
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-} from '@wordpress/components';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useViewportMatch } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+	useCallback,
+	createContext,
+	useState,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
+import { focus } from '@wordpress/dom';
 
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
-import useSyncPathWithURL, {
-	getPathFromURL,
-} from '../sync-state-with-url/use-sync-path-with-url';
-import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
-import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
-import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SaveHub from '../save-hub';
-import { unlock } from '../../lock-unlock';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import DataViewsSidebarContent from '../sidebar-dataviews';
-import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
-
-const { useLocation } = unlock( routerPrivateApis );
+export const SidebarNavigationContext = createContext( () => {} );
 
-function SidebarScreenWrapper( { className, ...props } ) {
-	return (
-		<NavigatorScreen
-			className={ classNames(
-				'edit-site-sidebar__screen-wrapper',
-				className
-			) }
-			{ ...props }
-		/>
-	);
-}
+export default function SidebarContent( { routeKey, children } ) {
+	const [ navState, setNavState ] = useState( {
+		direction: null,
+		focusSelector: null,
+	} );
 
-function SidebarScreens() {
-	useSyncPathWithURL();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const navigate = useCallback( ( direction, focusSelector = null ) => {
+		setNavState( ( prevState ) => ( {
+			direction,
+			focusSelector:
+				direction === 'forward' && focusSelector
+					? focusSelector
+					: prevState.focusSelector,
+		} ) );
+	}, [] );
 
-	return (
-		<>
-			<SidebarScreenWrapper path="/">
-				<SidebarNavigationScreenMain />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/navigation">
-				<SidebarNavigationScreenNavigationMenus />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/navigation/:postType/:postId">
-				<SidebarNavigationScreenNavigationMenu />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/wp_global_styles">
-				<SidebarNavigationScreenGlobalStyles />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/page">
-				<SidebarNavigationScreen
-					title={ __( 'Manage pages' ) }
-					content={ <DataViewsSidebarContent /> }
-				/>
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/page/:postId">
-				<SidebarNavigationScreenPage />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/:postType(wp_template)">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</SidebarScreenWrapper>
-			{ ! isMobileViewport && (
-				<SidebarScreenWrapper path="/patterns">
-					<SidebarNavigationScreenPatterns />
-				</SidebarScreenWrapper>
-			) }
-			<SidebarScreenWrapper path="/:postType(wp_template_part)/all">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">
-				<SidebarNavigationScreenPattern />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/:postType(wp_template)/:postId">
-				<SidebarNavigationScreenTemplate />
-			</SidebarScreenWrapper>
-		</>
-	);
-}
+	const wrapperRef = useRef();
+	useEffect( () => {
+		let elementToFocus;
+		if ( navState.direction === 'back' && navState.focusSelector ) {
+			elementToFocus = wrapperRef.current.querySelector(
+				navState.focusSelector
+			);
+		}
+		if ( navState.direction !== null && ! elementToFocus ) {
+			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
+			elementToFocus = firstTabbable ?? wrapperRef.current;
+		}
+		elementToFocus?.focus();
+	}, [ navState ] );
 
-function Sidebar() {
-	const { params: urlParams } = useLocation();
-	const initialPath = useRef( getPathFromURL( urlParams ) );
+	const wrapperCls = classnames( 'edit-site-sidebar__screen-wrapper', {
+		'slide-from-left': navState.direction === 'back',
+		'slide-from-right': navState.direction === 'forward',
+	} );
 
 	return (
-		<>
-			<NavigatorProvider
-				className="edit-site-sidebar__content"
-				initialPath={ initialPath.current }
-			>
-				<SidebarScreens />
-			</NavigatorProvider>
-			<SaveHub />
-		</>
+		<SidebarNavigationContext.Provider value={ navigate }>
+			<div className="edit-site-sidebar__content">
+				<div
+					ref={ wrapperRef }
+					key={ routeKey }
+					className={ wrapperCls }
+				>
+					{ children }
+				</div>
+			</div>
+		</SidebarNavigationContext.Provider>
 	);
 }
-
-export default memo( Sidebar );

package/src/components/sidebar/style.scss

@@ -3,20 +3,55 @@
 	overflow-y: auto;
 }
 
+@keyframes slide-from-right {
+	from {
+		transform: translateX(50px);
+		opacity: 0;
+	}
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+
+@keyframes slide-from-left {
+	from {
+		transform: translateX(-50px);
+		opacity: 0;
+	}
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+
 .edit-site-sidebar__screen-wrapper {
+	overflow-x: auto;
 	@include custom-scrollbars-on-hover(transparent, $gray-700);
 	scrollbar-gutter: stable;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	max-height: 100%;
 
 	// This matches the logo padding
 	padding: 0 $grid-unit-15;
-}
 
-.edit-site-sidebar__footer {
-	border-top: 1px solid $gray-800;
-	flex-shrink: 0;
-	margin: 0 $canvas-padding;
-	padding: $canvas-padding 0;
+	// Animation
+	animation-duration: 0.14s;
+	animation-timing-function: ease-in-out;
+	will-change: transform, opacity;
+
+	@media ( prefers-reduced-motion: reduce ) {
+		animation-duration: 0s;
+	}
+
+	&.slide-from-left {
+		animation-name: slide-from-left;
+	}
+
+	&.slide-from-right {
+		animation-name: slide-from-right;
+	}
+
 }

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

@@ -42,7 +42,7 @@ const DEFAULT_PAGE_BASE = {
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {
-		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_TABLE ],
+		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
 	},
 };
 

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

@@ -48,7 +48,7 @@ export default function DataViewsSidebarContent() {
 					);
 				} ) }
 			</ItemGroup>
-			{ window?.__experimentalAdminViews && (
+			{ window?.__experimentalCustomViews && (
 				<CustomDataViewsList
 					activeView={ activeView }
 					type={ type }

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,35 +9,36 @@ 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 {
+	PageAttributesPanel,
+	PostDiscussionPanel,
+	PostLastRevisionPanel,
+	PostTaxonomiesPanel,
+	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 { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
-
+const { interfaceStore, useAutoSwitchEditorSidebars, PatternOverridesPanel } =
+	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
@@ -56,7 +57,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 ) => {
@@ -69,12 +70,12 @@ const FillContents = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
 		<>
 			<DefaultSidebar
-				identifier={ sidebarName }
+				identifier={ tabName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
 				closeLabel={ __( 'Close Settings' ) }
@@ -88,15 +89,21 @@ 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 /> }
+						<PostLastRevisionPanel />
+						<PostTaxonomiesPanel />
+						<PostDiscussionPanel />
+						<PageAttributesPanel />
+						<PatternOverridesPanel />
 					</Tabs.TabPanel>
-					<Tabs.TabPanel tabId={ SIDEBAR_BLOCK } focusable={ false }>
+					<Tabs.TabPanel tabId="edit-post/block" focusable={ false }>
 						<InspectorSlot bubblesVirtually />
 					</Tabs.TabPanel>
 				</Tabs.Context.Provider>
@@ -107,60 +114,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 ) );
+	useAutoSwitchEditorSidebars();
+	const { tabName, supportsGlobalStyles, isEditingPage } = useSelect(
+		( select ) => {
+			const sidebar =
+				select( interfaceStore ).getActiveComplementaryArea( 'core' );
 
-		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 );
-
-	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
@@ -169,7 +151,7 @@ export function SidebarComplementaryAreaFills() {
 	const onTabSelect = useCallback(
 		( newSelectedTabId ) => {
 			if ( !! newSelectedTabId ) {
-				enableComplementaryArea( STORE_NAME, newSelectedTabId );
+				enableComplementaryArea( 'core', newSelectedTabId );
 			}
 		},
 		[ enableComplementaryArea ]
@@ -177,19 +159,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

@@ -2,19 +2,17 @@
  * WordPress dependencies
  */
 import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
-	PageAttributesPanel,
 	PluginDocumentSettingPanel,
-	PostDiscussionPanel,
-	PostExcerptPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -22,9 +20,11 @@ import {
 import { store as editSiteStore } from '../../../store';
 import PageContent from './page-content';
 import PageSummary from './page-summary';
+
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function PagePanels() {
 	const { id, type, hasResolved, status, date, password, renderingMode } =
@@ -49,6 +49,58 @@ export default function PagePanels() {
 				renderingMode: getRenderingMode(),
 			};
 		}, [] );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						history.push( {
+							path: '/' + items[ 0 ].type,
+							postId: undefined,
+							postType: undefined,
+							canvas: 'view',
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												path: undefined,
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ history, createSuccessNotice ]
+	);
 
 	if ( ! hasResolved ) {
 		return null;
@@ -56,7 +108,11 @@ export default function PagePanels() {
 
 	return (
 		<>
-			<PostCardPanel />
+			<PostCardPanel
+				actions={
+					<PostActions onActionPerformed={ onActionPerformed } />
+				}
+			/>
 			<PanelBody title={ __( 'Summary' ) }>
 				<PageSummary
 					status={ status }
@@ -72,11 +128,6 @@ export default function PagePanels() {
 					<PageContent />
 				</PanelBody>
 			) }
-			<PostLastRevisionPanel />
-			<PostTaxonomiesPanel />
-			<PostExcerptPanel />
-			<PostDiscussionPanel />
-			<PageAttributesPanel />
 		</>
 	);
 }