@wordpress/edit-site 5.32.0 → 5.33.0

package/src/components/{template-actions/rename-menu-item.js → rename-post-menu-item/index.js}

@@ -21,8 +21,10 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-export default function RenameMenuItem( { template, onClose } ) {
-	const title = decodeEntities( template.title.rendered );
+export default function RenamePostMenuItem( { post } ) {
+	const title = decodeEntities(
+		typeof post.title === 'string' ? post.title : post.title.rendered
+	);
 	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
@@ -33,53 +35,46 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
+	if ( post.type === TEMPLATE_POST_TYPE && ! post.is_custom ) {
 		return null;
 	}
 
-	async function onTemplateRename( event ) {
+	async function onRename( event ) {
 		event.preventDefault();
 
+		if ( editedTitle === title ) {
+			return;
+		}
+
 		try {
-			await editEntityRecord( 'postType', template.type, template.id, {
+			await editEntityRecord( 'postType', post.type, post.id, {
 				title: editedTitle,
 			} );
 
 			// Update state before saving rerenders the list.
 			setEditedTitle( '' );
 			setIsModalOpen( false );
-			onClose();
 
 			// Persist edited entity.
 			await saveSpecifiedEntityEdits(
 				'postType',
-				template.type,
-				template.id,
+				post.type,
+				post.id,
 				[ 'title' ], // Only save title to avoid persisting other edits.
 				{
 					throwOnError: true,
 				}
 			);
 
-			createSuccessNotice(
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'Template renamed.' )
-					: __( 'Template part renamed.' ),
-				{
-					type: 'snackbar',
-				}
-			);
+			createSuccessNotice( __( 'Name updated.' ), {
+				id: 'template-update',
+				type: 'snackbar',
+			} );
 		} catch ( error ) {
-			const fallbackErrorMessage =
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'An error occurred while renaming the template.' )
-					: __(
-							'An error occurred while renaming the template part.'
-					  );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: fallbackErrorMessage;
+					: __( 'An error occurred while updating the name.' );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -102,8 +97,9 @@ export default function RenameMenuItem( { template, onClose } ) {
 						setIsModalOpen( false );
 					} }
 					overlayClassName="edit-site-list__rename-modal"
+					focusOnMount="firstContentElement"
 				>
-					<form onSubmit={ onTemplateRename }>
+					<form onSubmit={ onRename }>
 						<VStack spacing="5">
 							<TextControl
 								__nextHasNoMarginBottom

package/src/components/resizable-frame/index.js

@@ -302,16 +302,12 @@ function ResizableFrame( {
 			} ) }
 			showHandle={ false } // Do not show the default handle, as we're using a custom one.
 		>
-			<motion.div
+			<div
 				className="edit-site-resizable-frame__inner-content"
-				animate={ {
-					borderRadius: isFullWidth ? 0 : 8,
-				} }
-				transition={ FRAME_TRANSITION }
 				style={ innerContentStyle }
 			>
 				{ children }
-			</motion.div>
+			</div>
 		</ResizableBox>
 	);
 }

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

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-import { NavigableRegion } from '@wordpress/interface';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -26,7 +25,8 @@ import { useActivateTheme } from '../../utils/use-activate-theme';
 import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+const { EntitiesSavedStatesExtensible, NavigableRegion } =
+	unlock( privateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();

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,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 { 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
@@ -56,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 ) => {
@@ -69,12 +64,12 @@ const FillContents = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
 		<>
 			<DefaultSidebar
-				identifier={ sidebarName }
+				identifier={ tabName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
 				closeLabel={ __( 'Close Settings' ) }
@@ -88,15 +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 /> }
 					</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 +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
@@ -169,7 +140,7 @@ export function SidebarComplementaryAreaFills() {
 	const onTabSelect = useCallback(
 		( newSelectedTabId ) => {
 			if ( !! newSelectedTabId ) {
-				enableComplementaryArea( STORE_NAME, newSelectedTabId );
+				enableComplementaryArea( 'core', newSelectedTabId );
 			}
 		},
 		[ enableComplementaryArea ]
@@ -177,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 }
 			/>