From c765adca6035e42575c714e926312be565b11c85 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 8 Apr 2024 11:20:00 +0100
Subject: [PATCH 01/10] Editor: Animate opening and closing editor right
 sidebar

---
 .../edit-post/src/components/layout/index.js  |  31 +---
 .../edit-site/src/components/editor/index.js  |   2 -
 .../components/complementary-area/index.js    | 156 +++++++++++-------
 .../components/interface-skeleton/index.js    |   1 -
 .../components/interface-skeleton/style.scss  |   6 +-
 5 files changed, 106 insertions(+), 90 deletions(-)

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 26fbc70f1403fe..6fc9ab570e5ac9 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -24,7 +24,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Button, ScrollLock } from '@wordpress/components';
+import { ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -139,8 +139,7 @@ function Layout( { initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
+	const { closeGeneralSidebar } = useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
@@ -206,11 +205,6 @@ function Layout( { initialPost } ) {
 
 	const styles = useEditorStyles();
 
-	const openSidebarPanel = () =>
-		openGeneralSidebar(
-			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
-		);
-
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
@@ -313,25 +307,8 @@ function Layout( { initialPost } ) {
 				editorNotices={ <EditorNotices /> }
 				secondarySidebar={ secondarySidebar() }
 				sidebar={
-					( ( isMobileViewport && sidebarIsOpened ) ||
-						( ! isMobileViewport && ! isDistractionFree ) ) && (
-						<>
-							{ ! isMobileViewport && ! sidebarIsOpened && (
-								<div className="edit-post-layout__toggle-sidebar-panel">
-									<Button
-										variant="secondary"
-										className="edit-post-layout__toggle-sidebar-panel-button"
-										onClick={ openSidebarPanel }
-										aria-expanded={ false }
-									>
-										{ hasBlockSelected
-											? __( 'Open block settings' )
-											: __( 'Open document settings' ) }
-									</Button>
-								</div>
-							) }
-							<ComplementaryArea.Slot scope="core/edit-post" />
-						</>
+					! isDistractionFree && (
+						<ComplementaryArea.Slot scope="core/edit-post" />
 					)
 				}
 				notices={ <EditorSnackbars /> }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index f5fdd62ba7dc14..ba04333b985bde 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -297,9 +297,7 @@ export default function Editor( { isLoading, onClick } ) {
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
-							! isDistractionFree &&
 							isEditMode &&
-							isRightSidebarOpen &&
 							! isDistractionFree && (
 								<ComplementaryArea.Slot scope="core/edit-site" />
 							)
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 3e2913b20b18b3..70e17cc484edcc 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -6,13 +6,21 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Panel, Slot, Fill } from '@wordpress/components';
+import {
+	Button,
+	Panel,
+	Slot,
+	Fill,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as viewportStore } from '@wordpress/viewport';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -24,16 +32,53 @@ import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
+const ANIMATION_DURATION = 0.2;
+
 function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
 }
 
-function ComplementaryAreaFill( { scope, children, className, id } ) {
+const SIDEBAR_WIDTH = 280;
+const variants = {
+	open: { width: SIDEBAR_WIDTH },
+	closed: { width: 0 },
+	mobileOpen: { width: '100vw' },
+};
+
+function ComplementaryAreaFill( { isActive, scope, children, className, id } ) {
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION,
+		ease: 'easeOut',
+	};
+
 	return (
 		<Fill name={ `ComplementaryArea/${ scope }` }>
-			<div id={ id } className={ className }>
-				{ children }
-			</div>
+			<AnimatePresence initial={ false }>
+				{ isActive && (
+					<motion.div
+						variants={ variants }
+						initial="closed"
+						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
+						exit="closed"
+						transition={ defaultTransition }
+					>
+						<div
+							id={ id }
+							className={ className }
+							style={ {
+								width: isMobileViewport
+									? '100vw'
+									: SIDEBAR_WIDTH,
+							} }
+						>
+							{ children }
+						</div>
+					</motion.div>
+				) }
+			</AnimatePresence>
 		</Fill>
 	);
 }
@@ -204,59 +249,56 @@ function ComplementaryArea( {
 					{ title }
 				</ComplementaryAreaMoreMenuItem>
 			) }
-			{ isActive && (
-				<ComplementaryAreaFill
-					className={ classnames(
-						'interface-complementary-area',
-						className
-					) }
-					scope={ scope }
-					id={ identifier.replace( '/', ':' ) }
+			<ComplementaryAreaFill
+				isActive={ isActive }
+				className={ classnames(
+					'interface-complementary-area',
+					className
+				) }
+				scope={ scope }
+				id={ identifier.replace( '/', ':' ) }
+			>
+				<ComplementaryAreaHeader
+					className={ headerClassName }
+					closeLabel={ closeLabel }
+					onClose={ () => disableComplementaryArea( scope ) }
+					smallScreenTitle={ smallScreenTitle }
+					toggleButtonProps={ {
+						label: closeLabel,
+						shortcut: toggleShortcut,
+						scope,
+						identifier,
+					} }
 				>
-					<ComplementaryAreaHeader
-						className={ headerClassName }
-						closeLabel={ closeLabel }
-						onClose={ () => disableComplementaryArea( scope ) }
-						smallScreenTitle={ smallScreenTitle }
-						toggleButtonProps={ {
-							label: closeLabel,
-							shortcut: toggleShortcut,
-							scope,
-							identifier,
-						} }
-					>
-						{ header || (
-							<>
-								<h2 className="interface-complementary-area-header__title">
-									{ title }
-								</h2>
-								{ isPinnable && (
-									<Button
-										className="interface-complementary-area__pin-unpin-item"
-										icon={
-											isPinned ? starFilled : starEmpty
-										}
-										label={
-											isPinned
-												? __( 'Unpin from toolbar' )
-												: __( 'Pin to toolbar' )
-										}
-										onClick={ () =>
-											( isPinned ? unpinItem : pinItem )(
-												scope,
-												identifier
-											)
-										}
-										isPressed={ isPinned }
-										aria-expanded={ isPinned }
-									/>
-								) }
-							</>
-						) }
-					</ComplementaryAreaHeader>
-					<Panel className={ panelClassName }>{ children }</Panel>
-				</ComplementaryAreaFill>
-			) }
+					{ header || (
+						<>
+							<h2 className="interface-complementary-area-header__title">
+								{ title }
+							</h2>
+							{ isPinnable && (
+								<Button
+									className="interface-complementary-area__pin-unpin-item"
+									icon={ isPinned ? starFilled : starEmpty }
+									label={
+										isPinned
+											? __( 'Unpin from toolbar' )
+											: __( 'Pin to toolbar' )
+									}
+									onClick={ () =>
+										( isPinned ? unpinItem : pinItem )(
+											scope,
+											identifier
+										)
+									}
+									isPressed={ isPinned }
+									aria-expanded={ isPinned }
+								/>
+							) }
+						</>
+					) }
+				</ComplementaryAreaHeader>
+				<Panel className={ panelClassName }>{ children }</Panel>
+			</ComplementaryAreaFill>
 		</>
 	);
 }
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index 8d6a060259a292..83ab8f6abf5a8a 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -63,7 +63,6 @@ function InterfaceSkeleton(
 	ref
 ) {
 	const navigateRegionsProps = useNavigateRegions( shortcuts );
-
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index d7ce996226ba59..509dd23a81dd4c 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -102,16 +102,15 @@ html.interface-interface-skeleton__html-container {
 	position: absolute;
 	z-index: z-index(".interface-interface-skeleton__sidebar");
 	top: 0;
-	right: 0;
-	bottom: 0;
 	left: 0;
+	bottom: 0;
 	background: $white;
 	color: $gray-900;
+	width: auto; // Keep the sidebar width flexible.
 
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-		width: auto; // Keep the sidebar width flexible.
 
 		// Set this z-index only when the sidebar is opened. When it's closed, the
 		// button to open the sidebar that is shown when navigating regions needs to
@@ -131,6 +130,7 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	right: 0;
 	@include break-medium() {
 		border-right: $border-width solid $gray-200;
 	}

From 8ea334703a00a40721a14f3d5c020a618681699e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 8 Apr 2024 11:28:56 +0100
Subject: [PATCH 02/10] Make the animation work in the widgets editor too

---
 packages/edit-widgets/src/components/layout/interface.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 987e3868de1337..ee46251eca2245 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -96,11 +96,7 @@ function Interface( { blockEditorSettings } ) {
 			} }
 			header={ <Header /> }
 			secondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }
-			sidebar={
-				hasSidebarEnabled && (
-					<ComplementaryArea.Slot scope="core/edit-widgets" />
-				)
-			}
+			sidebar={ <ComplementaryArea.Slot scope="core/edit-widgets" /> }
 			content={
 				<>
 					<WidgetAreasBlockEditorContent

From 915bbd1d0bbc796d185828c6d657ae16dcb69932 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 8 Apr 2024 12:50:51 +0100
Subject: [PATCH 03/10] Adjust animation profile

---
 packages/interface/src/components/complementary-area/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 70e17cc484edcc..ebbb50c5a8a0e9 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -32,7 +32,7 @@ import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
-const ANIMATION_DURATION = 0.2;
+const ANIMATION_DURATION = 0.3;
 
 function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
@@ -51,7 +51,7 @@ function ComplementaryAreaFill( { isActive, scope, children, className, id } ) {
 	const defaultTransition = {
 		type: 'tween',
 		duration: disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION,
-		ease: 'easeOut',
+		ease: [ 0.6, 0, 0.4, 1 ],
 	};
 
 	return (

From fe7a68b51a10d6ad75149e6bfa31afcc6f069a54 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 8 Apr 2024 14:08:09 +0100
Subject: [PATCH 04/10] Avoid hiding the active template when animating

---
 .../sidebar/settings-sidebar/index.js         | 78 +++++++------------
 .../src/components/sidebar-edit-mode/index.js | 41 ++++------
 2 files changed, 42 insertions(+), 77 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 6ea62974ebbbe0..b9009f73e58cb0 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -63,11 +63,7 @@ function onActionPerformed( actionId, items ) {
 	}
 }
 
-const SidebarContent = ( {
-	sidebarName,
-	keyboardShortcut,
-	isEditingTemplate,
-} ) => {
+const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 	const tabListRef = useRef( null );
 	// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
@@ -86,7 +82,7 @@ const SidebarContent = ( {
 			// 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 ) => {
@@ -99,11 +95,11 @@ const SidebarContent = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
 		<PluginSidebarEditPost
-			identifier={ sidebarName }
+			identifier={ tabName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
 					<SettingsHeader ref={ tabListRef } />
@@ -153,41 +149,28 @@ const SidebarContent = ( {
 };
 
 const SettingsSidebar = () => {
-	const {
-		sidebarName,
-		isSettingsSidebarActive,
-		keyboardShortcut,
-		isEditingTemplate,
-	} = useSelect( ( select ) => {
-		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
-		// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
-		// If one of the two sidebars is active the component will contain the content of that sidebar.
-		// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
-		// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
-		// should contain the sidebar that will be active when the toggle button is pressed. If a block
-		// is selected, that should be edit-post/block otherwise it's edit-post/document.
-		let sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editPostStore.name
-		);
-		let isSettingsSidebar = true;
-		if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
-			isSettingsSidebar = false;
-			if ( select( blockEditorStore ).getBlockSelectionStart() ) {
-				sidebar = sidebars.block;
-			}
-			sidebar = sidebars.document;
-		}
-		const shortcut = select(
-			keyboardShortcutsStore
-		).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
-		return {
-			sidebarName: sidebar,
-			isSettingsSidebarActive: isSettingsSidebar,
-			keyboardShortcut: shortcut,
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-		};
-	}, [] );
+	const { tabName, keyboardShortcut, isEditingTemplate } = useSelect(
+		( select ) => {
+			const shortcut = select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
+
+			return {
+				tabName:
+					select( interfaceStore ).getActiveComplementaryArea(
+						editPostStore.name
+					) ??
+					( !! select( blockEditorStore ).getBlockSelectionStart()
+						? sidebars.block
+						: sidebars.document ),
+				keyboardShortcut: shortcut,
+				isEditingTemplate:
+					select( editorStore ).getCurrentPostType() ===
+					'wp_template',
+			};
+		},
+		[]
+	);
 
 	const { openGeneralSidebar } = useDispatch( editPostStore );
 
@@ -202,17 +185,12 @@ const SettingsSidebar = () => {
 
 	return (
 		<Tabs
-			// Due to how this component is controlled (via a value from the
-			// `interfaceStore`), 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={ isSettingsSidebarActive ? sidebarName : null }
+			selectedTabId={ tabName }
 			onSelect={ onTabSelect }
 			selectOnMove={ false }
 		>
 			<SidebarContent
-				sidebarName={ sidebarName }
+				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
 				isEditingTemplate={ isEditingTemplate }
 			/>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index f3cb7cc9dae0ed..986155e21a80ac 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -33,11 +33,7 @@ const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 );
 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 +52,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 +65,12 @@ const FillContents = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
 		<>
 			<DefaultSidebar
-				identifier={ sidebarName }
+				identifier={ tabName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
 				closeLabel={ __( 'Close Settings' ) }
@@ -108,12 +104,11 @@ const FillContents = ( {
 
 export function SidebarComplementaryAreaFills() {
 	const {
-		sidebar,
+		tabName,
 		isEditorSidebarOpened,
 		hasBlockSelection,
 		supportsGlobalStyles,
 		isEditingPage,
-		isEditorOpen,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
@@ -122,17 +117,21 @@ export function SidebarComplementaryAreaFills() {
 			SIDEBAR_BLOCK,
 			SIDEBAR_TEMPLATE,
 		].includes( _sidebar );
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
 
 		return {
-			sidebar: _sidebar,
+			tabName:
+				select( interfaceStore ).getActiveComplementaryArea(
+					STORE_NAME
+				) ??
+				( !! select( blockEditorStore ).getBlockSelectionStart()
+					? SIDEBAR_BLOCK
+					: SIDEBAR_TEMPLATE ),
 			isEditorSidebarOpened: _isEditorSidebarOpened,
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles:
 				select( coreStore ).getCurrentTheme()?.is_block_theme,
 			isEditingPage: select( editSiteStore ).isPage(),
-			isEditorOpen: getCanvasMode() === 'edit',
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -157,11 +156,6 @@ export function SidebarComplementaryAreaFills() {
 		enableComplementaryArea,
 	] );
 
-	let sidebarName = sidebar;
-	if ( ! isEditorSidebarOpened ) {
-		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
-	}
-
 	// `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
 	// sidebar is closed). These cases should both be covered by the `!!` check
@@ -177,19 +171,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 }
 			/>

From f303b3ab59793282353e03b5c54c7c502cf80d24 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 9 Apr 2024 10:27:10 +0100
Subject: [PATCH 05/10] Fix default tabName

---
 .../sidebar/settings-sidebar/index.js         | 24 +++++++++++++------
 .../src/components/sidebar-edit-mode/index.js | 18 +++++++-------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index b9009f73e58cb0..27b85cffa08643 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -155,14 +155,24 @@ const SettingsSidebar = () => {
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
 
+			const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+				editPostStore.name
+			);
+			const _isEditorSidebarOpened = [
+				sidebars.block,
+				sidebars.document,
+			].includes( sidebar );
+			let _tabName = sidebar;
+			if ( ! _isEditorSidebarOpened ) {
+				_tabName = !! select(
+					blockEditorStore
+				).getBlockSelectionStart()
+					? sidebars.block
+					: sidebars.document;
+			}
+
 			return {
-				tabName:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editPostStore.name
-					) ??
-					( !! select( blockEditorStore ).getBlockSelectionStart()
-						? sidebars.block
-						: sidebars.document ),
+				tabName: _tabName,
 				keyboardShortcut: shortcut,
 				isEditingTemplate:
 					select( editorStore ).getCurrentPostType() ===
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index 986155e21a80ac..38b2ca0665cc4b 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -110,22 +110,22 @@ export function SidebarComplementaryAreaFills() {
 		supportsGlobalStyles,
 		isEditingPage,
 	} = useSelect( ( select ) => {
-		const _sidebar =
+		const sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
 
 		const _isEditorSidebarOpened = [
 			SIDEBAR_BLOCK,
 			SIDEBAR_TEMPLATE,
-		].includes( _sidebar );
+		].includes( sidebar );
+		let _tabName = sidebar;
+		if ( ! _isEditorSidebarOpened ) {
+			_tabName = !! select( blockEditorStore ).getBlockSelectionStart()
+				? SIDEBAR_BLOCK
+				: SIDEBAR_TEMPLATE;
+		}
 
 		return {
-			tabName:
-				select( interfaceStore ).getActiveComplementaryArea(
-					STORE_NAME
-				) ??
-				( !! select( blockEditorStore ).getBlockSelectionStart()
-					? SIDEBAR_BLOCK
-					: SIDEBAR_TEMPLATE ),
+			tabName: _tabName,
 			isEditorSidebarOpened: _isEditorSidebarOpened,
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),

From 34630fce9ecb0d7e9bd15223701a72d14214a2da Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 9 Apr 2024 12:32:24 +0100
Subject: [PATCH 06/10] Keep the sidebar border

---
 packages/edit-post/src/style.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index be16158bc6b04d..4ba063905d8b2e 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -77,18 +77,3 @@ body.js.block-editor-page {
 }
 
 @include wordpress-admin-schemes();
-
-// The edit-site package adds or removes the sidebar when it's opened or closed.
-// The edit-post package, however, always has the sidebar in the canvas.
-// These edit-post specific rules ensures there isn't a border on the right of
-// the canvas when a sidebar is visually closed.
-.interface-interface-skeleton__sidebar {
-	border-left: none;
-
-	.is-sidebar-opened & {
-		@include break-medium() {
-			border-left: $border-width solid $gray-200;
-			overflow: hidden scroll;
-		}
-	}
-}

From 04c68f8891878631c5d44faf477f2256a5b235e6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 9 Apr 2024 13:14:41 +0100
Subject: [PATCH 07/10] Do not animate when switching sidebars

---
 .../components/complementary-area/index.js    | 43 ++++++++++++++++---
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index ebbb50c5a8a0e9..28914cb4bd286f 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -17,10 +17,14 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { store as viewportStore } from '@wordpress/viewport';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	usePrevious,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -45,25 +49,49 @@ const variants = {
 	mobileOpen: { width: '100vw' },
 };
 
-function ComplementaryAreaFill( { isActive, scope, children, className, id } ) {
+function ComplementaryAreaFill( {
+	activeArea,
+	isActive,
+	scope,
+	children,
+	className,
+	id,
+} ) {
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const defaultTransition = {
+	// This is used to delay the exit animation to the next tick.
+	// The reason this is done is to allow us to apply the right transition properties
+	// When we switch from an open sidebar to another open sidebar.
+	// we don't want to animate in this case.
+	const previousActiveArea = usePrevious( activeArea );
+	const previousIsActive = usePrevious( isActive );
+	const [ , setState ] = useState( {} );
+	useEffect( () => {
+		setState( {} );
+	}, [ isActive ] );
+	const transition = {
 		type: 'tween',
-		duration: disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION,
+		duration:
+			disableMotion ||
+			isMobileViewport ||
+			( !! previousActiveArea &&
+				!! activeArea &&
+				activeArea !== previousActiveArea )
+				? 0
+				: ANIMATION_DURATION,
 		ease: [ 0.6, 0, 0.4, 1 ],
 	};
 
 	return (
 		<Fill name={ `ComplementaryArea/${ scope }` }>
 			<AnimatePresence initial={ false }>
-				{ isActive && (
+				{ ( previousIsActive || isActive ) && (
 					<motion.div
 						variants={ variants }
 						initial="closed"
 						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
 						exit="closed"
-						transition={ defaultTransition }
+						transition={ transition }
 					>
 						<div
 							id={ id }
@@ -250,6 +278,7 @@ function ComplementaryArea( {
 				</ComplementaryAreaMoreMenuItem>
 			) }
 			<ComplementaryAreaFill
+				activeArea={ activeArea }
 				isActive={ isActive }
 				className={ classnames(
 					'interface-complementary-area',

From 73fd919fc188490fe20548d627bd17ffff3c2fda Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 9 Apr 2024 13:26:16 +0100
Subject: [PATCH 08/10] Avoid animating global styles NavigatorScreen on
 initial render

---
 packages/components/CHANGELOG.md                          | 1 +
 .../src/navigator/navigator-provider/component.tsx        | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 84cd741f5eb749..6f9c5d06709a8b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,7 @@
 -   `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)).
 -   `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
 -   `Text`: Add `text-wrap: pretty;` to improve wrapping. ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).
+-   `Navigator`: Navigation to the active path doesn't create a new location history. ([#60561](https://github.com/WordPress/gutenberg/pull/60561))
 
 ## 27.3.0 (2024-04-03)
 
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index c776b036d39b60..368e78d799d72d 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -146,7 +146,6 @@ function routerReducer(
 	action: RouterAction
 ): RouterState {
 	let { screens, locationHistory, matchedPath } = state;
-
 	switch ( action.type ) {
 		case 'add':
 			screens = addScreen( state, action.screen );
@@ -158,6 +157,13 @@ function routerReducer(
 			locationHistory = goBack( state );
 			break;
 		case 'goto':
+			if (
+				locationHistory.length &&
+				action.path ===
+					locationHistory[ locationHistory.length - 1 ].path
+			) {
+				break;
+			}
 			locationHistory = goTo( state, action.path, action.options );
 			break;
 		case 'gotoparent':

From 8f232b2b0d9a4ef8413c9a06b464cd0dc32c8158 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 11 Apr 2024 09:40:40 +0100
Subject: [PATCH 09/10] Prevent initial animation

---
 .../src/components/complementary-area/index.js         | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 28914cb4bd286f..15b528c18c5a52 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -183,6 +183,11 @@ function ComplementaryArea( {
 	toggleShortcut,
 	isActiveByDefault,
 } ) {
+	// This state is used to delay the rendering of the Fill
+	// until the initial effect runs.
+	// This prevents the animation from running on mount if
+	// the complementary area is active by default.
+	const [ isReady, setIsReady ] = useState( false );
 	const {
 		isLoading,
 		isActive,
@@ -236,6 +241,7 @@ function ComplementaryArea( {
 		} else if ( activeArea === undefined && isSmall ) {
 			disableComplementaryArea( scope, identifier );
 		}
+		setIsReady( true );
 	}, [
 		activeArea,
 		isActiveByDefault,
@@ -246,6 +252,10 @@ function ComplementaryArea( {
 		disableComplementaryArea,
 	] );
 
+	if ( ! isReady ) {
+		return;
+	}
+
 	return (
 		<>
 			{ isPinnable && (

From 4d8fc56d25c5d17cf1ff0dc9bd0fae7262b1f063 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 11 Apr 2024 11:10:50 +0100
Subject: [PATCH 10/10] Increase the mouse position just a bit to make the test
 stable

---
 test/e2e/specs/editor/various/multi-block-selection.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
index 5ec90841310b7d..225b21234182ca 100644
--- a/test/e2e/specs/editor/various/multi-block-selection.spec.js
+++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -372,7 +372,7 @@ test.describe( 'Multi-block selection (@firefox, @webkit)', () => {
 		const { height } = await paragraphBlock.boundingBox();
 		await paragraphBlock.click( { position: { x: 0, y: height / 2 } } );
 		await paragraphBlock.click( {
-			position: { x: 20, y: height / 2 },
+			position: { x: 25, y: height / 2 },
 			modifiers: [ 'Shift' ],
 		} );
 		await page.keyboard.type( 'hi' );