From 93c569b28b88b25a2c9106c3f8022b0f4ec98810 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 8 Apr 2024 14:08:09 +0100 Subject: [PATCH] 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 dd1a6a048d965e..e0cdaebb2d5a56 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -53,11 +53,7 @@ export const sidebars = { block: 'edit-post/block', }; -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 @@ -76,7 +72,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 ) => { @@ -89,11 +85,11 @@ const SidebarContent = ( { ) { selectedTabElement?.focus(); } - }, [ sidebarName ] ); + }, [ tabName ] ); return ( @@ -137,41 +133,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 ); @@ -186,17 +169,12 @@ const SettingsSidebar = () => { return ( 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 ( <> { 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 (