From 26cd0ebdecd99bd7faa116631f0da60071c0b284 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Nov 2024 10:41:26 +0100 Subject: [PATCH 1/8] Site Editor > Styles: open styles inspector when clicking preview canvas --- packages/edit-site/src/components/editor/index.js | 2 ++ .../src/components/global-styles-sidebar/index.js | 3 ++- .../interface/src/components/complementary-area/index.js | 9 ++++++--- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 8f0ca0c5b29718..ca3a5a36d507dd 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -212,6 +212,8 @@ export default function EditSiteEditor( { isPostsList = false } ) { duration: disableMotion ? 0 : 0.2, }; + // console.log( settings ); + return ( <> diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index c0ad313d5d477c..4cc6510ad5a139 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -29,7 +29,7 @@ const { useLocation } = unlock( routerPrivateApis ); export default function GlobalStylesSidebar() { const { params } = useLocation(); - const { canvas = 'view' } = params; + const { canvas = 'view', path } = params; const { shouldClearCanvasContainerView, isStyleBookOpened, @@ -135,6 +135,7 @@ export default function GlobalStylesSidebar() { title={ __( 'Styles' ) } icon={ styles } closeLabel={ __( 'Close Styles' ) } + isActiveByDefault={ path === '/wp_global_styles' } panelClassName="edit-site-global-styles-sidebar__panel" header={ { + // Make sure we have the latest active area. + const freshActiveArea = getActiveComplementaryArea( scope ); // Set initial visibility: For large screens, enable if it's active by // default. For small screens, always initially disable. - if ( isActiveByDefault && activeArea === undefined && ! isSmall ) { + if ( isActiveByDefault && freshActiveArea === undefined && ! isSmall ) { enableComplementaryArea( scope, identifier ); - } else if ( activeArea === undefined && isSmall ) { + } else if ( freshActiveArea === undefined && isSmall ) { disableComplementaryArea( scope, identifier ); } setIsReady( true ); }, [ - activeArea, isActiveByDefault, scope, identifier, isSmall, enableComplementaryArea, disableComplementaryArea, + getActiveComplementaryArea, ] ); if ( ! isReady ) { From 44dc983c885237689695e3431b8bdccea44e45c0 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Nov 2024 10:47:10 +0100 Subject: [PATCH 2/8] Remove logging --- packages/edit-site/src/components/editor/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index ca3a5a36d507dd..8f0ca0c5b29718 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -212,8 +212,6 @@ export default function EditSiteEditor( { isPostsList = false } ) { duration: disableMotion ? 0 : 0.2, }; - // console.log( settings ); - return ( <> From caf7b182cac44173c26b737caacf08951f280b5a Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Nov 2024 11:01:37 +0100 Subject: [PATCH 3/8] Add editor option to disable opening the document sidebar by default --- packages/edit-site/src/components/editor/index.js | 5 ++++- packages/editor/src/components/editor/index.js | 4 ++++ packages/editor/src/components/sidebar/index.js | 14 ++++++++++++-- .../src/components/complementary-area/index.js | 9 +++------ 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 8f0ca0c5b29718..19bd14161fd536 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -81,7 +81,7 @@ const siteIconVariants = { export default function EditSiteEditor( { isPostsList = false } ) { const disableMotion = useReducedMotion(); const { params } = useLocation(); - const { canvas = 'view' } = params; + const { canvas = 'view', path } = params; const isLoading = useIsSiteEditorLoading(); useAdaptEditorToCanvas( canvas ); const { @@ -242,6 +242,9 @@ export default function EditSiteEditor( { isPostsList = false } ) { extraSidebarPanels={ ! isEditingPage && } + __isDocumentSidebarActiveByDefault={ + path !== '/wp_global_styles' + } > { isEditMode && ( diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js index 21becea43cd7ee..52e08c30f918ab 100644 --- a/packages/editor/src/components/editor/index.js +++ b/packages/editor/src/components/editor/index.js @@ -29,6 +29,7 @@ function Editor( { // to account for site editor and post editor differences for now. extraContent, extraSidebarPanels, + __isDocumentSidebarActiveByDefault: isDocumentSidebarActiveByDefault, ...props } ) { const { post, template, hasLoadedPost } = useSelect( @@ -76,6 +77,9 @@ function Editor( { { children } diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index 601bcd8f311bb8..e0722bbb1af066 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -49,6 +49,7 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( { } ); const SidebarContent = ( { + isDocumentSidebarActiveByDefault, tabName, keyboardShortcut, onActionPerformed, @@ -107,7 +108,9 @@ const SidebarContent = ( { } toggleShortcut={ keyboardShortcut } icon={ isRTL() ? drawerLeft : drawerRight } - isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT } + isActiveByDefault={ + isDocumentSidebarActiveByDefault ?? SIDEBAR_ACTIVE_BY_DEFAULT + } > @@ -128,7 +131,11 @@ const SidebarContent = ( { ); }; -const Sidebar = ( { extraPanels, onActionPerformed } ) => { +const Sidebar = ( { + extraPanels, + onActionPerformed, + isDocumentSidebarActiveByDefault, +} ) => { useAutoSwitchEditorSidebars(); const { tabName, keyboardShortcut, showSummary } = useSelect( ( select ) => { @@ -187,6 +194,9 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => { showSummary={ showSummary } onActionPerformed={ onActionPerformed } extraPanels={ extraPanels } + isDocumentSidebarActiveByDefault={ + isDocumentSidebarActiveByDefault + } /> ); diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 4fe749655f756e..af56cf0c1755e1 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -233,7 +233,6 @@ function ComplementaryArea( { isActive, isSmall ); - const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { enableComplementaryArea, disableComplementaryArea, @@ -242,24 +241,22 @@ function ComplementaryArea( { } = useDispatch( interfaceStore ); useEffect( () => { - // Make sure we have the latest active area. - const freshActiveArea = getActiveComplementaryArea( scope ); // Set initial visibility: For large screens, enable if it's active by // default. For small screens, always initially disable. - if ( isActiveByDefault && freshActiveArea === undefined && ! isSmall ) { + if ( isActiveByDefault && activeArea === undefined && ! isSmall ) { enableComplementaryArea( scope, identifier ); - } else if ( freshActiveArea === undefined && isSmall ) { + } else if ( activeArea === undefined && isSmall ) { disableComplementaryArea( scope, identifier ); } setIsReady( true ); }, [ + activeArea, isActiveByDefault, scope, identifier, isSmall, enableComplementaryArea, disableComplementaryArea, - getActiveComplementaryArea, ] ); if ( ! isReady ) { From c9742535913191b49c661ea2fd9864b29297e2b2 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Nov 2024 11:06:34 +0100 Subject: [PATCH 4/8] polish --- packages/edit-site/src/components/editor/index.js | 11 +++++++++-- .../src/components/global-styles-sidebar/index.js | 6 +++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 19bd14161fd536..a8b983c7281ef9 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -212,6 +212,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { duration: disableMotion ? 0 : 0.2, }; + const isGlobalStylesPanelActiveByDefault = path === '/wp_global_styles'; return ( <> @@ -243,7 +244,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { ! isEditingPage && } __isDocumentSidebarActiveByDefault={ - path !== '/wp_global_styles' + ! isGlobalStylesPanelActiveByDefault } > { isEditMode && ( @@ -322,7 +323,13 @@ export default function EditSiteEditor( { isPostsList = false } ) { ) } - { supportsGlobalStyles && } + { supportsGlobalStyles && ( + + ) } ) } diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index 4cc6510ad5a139..d14d0b3da331f9 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -27,9 +27,9 @@ import DefaultSidebar from './default-sidebar'; const { interfaceStore } = unlock( editorPrivateApis ); const { useLocation } = unlock( routerPrivateApis ); -export default function GlobalStylesSidebar() { +export default function GlobalStylesSidebar( { isActiveByDefault } ) { const { params } = useLocation(); - const { canvas = 'view', path } = params; + const { canvas = 'view' } = params; const { shouldClearCanvasContainerView, isStyleBookOpened, @@ -135,7 +135,7 @@ export default function GlobalStylesSidebar() { title={ __( 'Styles' ) } icon={ styles } closeLabel={ __( 'Close Styles' ) } - isActiveByDefault={ path === '/wp_global_styles' } + isActiveByDefault={ isActiveByDefault } panelClassName="edit-site-global-styles-sidebar__panel" header={ Date: Thu, 14 Nov 2024 11:19:19 +0100 Subject: [PATCH 5/8] rewrite --- .../edit-site/src/components/editor/index.js | 24 +++++++++---------- .../components/global-styles-sidebar/index.js | 3 +-- .../editor/src/components/editor/index.js | 4 ---- .../editor/src/components/sidebar/index.js | 14 ++--------- .../components/complementary-area/index.js | 9 ++++--- 5 files changed, 20 insertions(+), 34 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index a8b983c7281ef9..0d36eda4e24b65 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,7 +17,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useCallback, useMemo, useEffect } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -50,7 +50,7 @@ import useEditorTitle from './use-editor-title'; import { useIsSiteEditorLoading } from '../layout/hooks'; import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas'; -const { Editor, BackButton } = unlock( editorPrivateApis ); +const { Editor, BackButton, interfaceStore } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -212,7 +212,14 @@ export default function EditSiteEditor( { isPostsList = false } ) { duration: disableMotion ? 0 : 0.2, }; - const isGlobalStylesPanelActiveByDefault = path === '/wp_global_styles'; + const { enableComplementaryArea } = useDispatch( interfaceStore ); + + useEffect( () => { + if ( path === '/wp_global_styles' && canvas === 'edit' ) { + enableComplementaryArea( 'core', 'edit-site/global-styles' ); + } + }, [ path, enableComplementaryArea, canvas ] ); + return ( <> @@ -243,9 +250,6 @@ export default function EditSiteEditor( { isPostsList = false } ) { extraSidebarPanels={ ! isEditingPage && } - __isDocumentSidebarActiveByDefault={ - ! isGlobalStylesPanelActiveByDefault - } > { isEditMode && ( @@ -323,13 +327,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { ) } - { supportsGlobalStyles && ( - - ) } + { supportsGlobalStyles && } ) } diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index d14d0b3da331f9..c0ad313d5d477c 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -27,7 +27,7 @@ import DefaultSidebar from './default-sidebar'; const { interfaceStore } = unlock( editorPrivateApis ); const { useLocation } = unlock( routerPrivateApis ); -export default function GlobalStylesSidebar( { isActiveByDefault } ) { +export default function GlobalStylesSidebar() { const { params } = useLocation(); const { canvas = 'view' } = params; const { @@ -135,7 +135,6 @@ export default function GlobalStylesSidebar( { isActiveByDefault } ) { title={ __( 'Styles' ) } icon={ styles } closeLabel={ __( 'Close Styles' ) } - isActiveByDefault={ isActiveByDefault } panelClassName="edit-site-global-styles-sidebar__panel" header={ { children } diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index e0722bbb1af066..601bcd8f311bb8 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -49,7 +49,6 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( { } ); const SidebarContent = ( { - isDocumentSidebarActiveByDefault, tabName, keyboardShortcut, onActionPerformed, @@ -108,9 +107,7 @@ const SidebarContent = ( { } toggleShortcut={ keyboardShortcut } icon={ isRTL() ? drawerLeft : drawerRight } - isActiveByDefault={ - isDocumentSidebarActiveByDefault ?? SIDEBAR_ACTIVE_BY_DEFAULT - } + isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT } > @@ -131,11 +128,7 @@ const SidebarContent = ( { ); }; -const Sidebar = ( { - extraPanels, - onActionPerformed, - isDocumentSidebarActiveByDefault, -} ) => { +const Sidebar = ( { extraPanels, onActionPerformed } ) => { useAutoSwitchEditorSidebars(); const { tabName, keyboardShortcut, showSummary } = useSelect( ( select ) => { @@ -194,9 +187,6 @@ const Sidebar = ( { showSummary={ showSummary } onActionPerformed={ onActionPerformed } extraPanels={ extraPanels } - isDocumentSidebarActiveByDefault={ - isDocumentSidebarActiveByDefault - } /> ); diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index af56cf0c1755e1..4fe749655f756e 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -233,6 +233,7 @@ function ComplementaryArea( { isActive, isSmall ); + const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { enableComplementaryArea, disableComplementaryArea, @@ -241,22 +242,24 @@ function ComplementaryArea( { } = useDispatch( interfaceStore ); useEffect( () => { + // Make sure we have the latest active area. + const freshActiveArea = getActiveComplementaryArea( scope ); // Set initial visibility: For large screens, enable if it's active by // default. For small screens, always initially disable. - if ( isActiveByDefault && activeArea === undefined && ! isSmall ) { + if ( isActiveByDefault && freshActiveArea === undefined && ! isSmall ) { enableComplementaryArea( scope, identifier ); - } else if ( activeArea === undefined && isSmall ) { + } else if ( freshActiveArea === undefined && isSmall ) { disableComplementaryArea( scope, identifier ); } setIsReady( true ); }, [ - activeArea, isActiveByDefault, scope, identifier, isSmall, enableComplementaryArea, disableComplementaryArea, + getActiveComplementaryArea, ] ); if ( ! isReady ) { From e55d06579170adade678bf136aa910d38d4b8580 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Nov 2024 11:20:56 +0100 Subject: [PATCH 6/8] Remove unneeded changes --- .../interface/src/components/complementary-area/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 4fe749655f756e..af56cf0c1755e1 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -233,7 +233,6 @@ function ComplementaryArea( { isActive, isSmall ); - const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { enableComplementaryArea, disableComplementaryArea, @@ -242,24 +241,22 @@ function ComplementaryArea( { } = useDispatch( interfaceStore ); useEffect( () => { - // Make sure we have the latest active area. - const freshActiveArea = getActiveComplementaryArea( scope ); // Set initial visibility: For large screens, enable if it's active by // default. For small screens, always initially disable. - if ( isActiveByDefault && freshActiveArea === undefined && ! isSmall ) { + if ( isActiveByDefault && activeArea === undefined && ! isSmall ) { enableComplementaryArea( scope, identifier ); - } else if ( freshActiveArea === undefined && isSmall ) { + } else if ( activeArea === undefined && isSmall ) { disableComplementaryArea( scope, identifier ); } setIsReady( true ); }, [ + activeArea, isActiveByDefault, scope, identifier, isSmall, enableComplementaryArea, disableComplementaryArea, - getActiveComplementaryArea, ] ); if ( ! isReady ) { From 75471fe406b46ddae7dc5cb0d85cc1ce9e26f0de Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Nov 2024 11:36:32 +0100 Subject: [PATCH 7/8] Restore prev state --- .../edit-site/src/components/editor/index.js | 14 +++------- .../components/global-styles-sidebar/index.js | 27 +++++++++++++++++-- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 0d36eda4e24b65..8f0ca0c5b29718 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,7 +17,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; -import { useCallback, useMemo, useEffect } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -50,7 +50,7 @@ import useEditorTitle from './use-editor-title'; import { useIsSiteEditorLoading } from '../layout/hooks'; import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas'; -const { Editor, BackButton, interfaceStore } = unlock( editorPrivateApis ); +const { Editor, BackButton } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -81,7 +81,7 @@ const siteIconVariants = { export default function EditSiteEditor( { isPostsList = false } ) { const disableMotion = useReducedMotion(); const { params } = useLocation(); - const { canvas = 'view', path } = params; + const { canvas = 'view' } = params; const isLoading = useIsSiteEditorLoading(); useAdaptEditorToCanvas( canvas ); const { @@ -212,14 +212,6 @@ export default function EditSiteEditor( { isPostsList = false } ) { duration: disableMotion ? 0 : 0.2, }; - const { enableComplementaryArea } = useDispatch( interfaceStore ); - - useEffect( () => { - if ( path === '/wp_global_styles' && canvas === 'edit' ) { - enableComplementaryArea( 'core', 'edit-site/global-styles' ); - } - }, [ path, enableComplementaryArea, canvas ] ); - return ( <> diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index c0ad313d5d477c..b9e394af424f0c 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -5,7 +5,7 @@ import { FlexItem, Flex, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { styles, seen, backup } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as editorStore, @@ -29,7 +29,7 @@ const { useLocation } = unlock( routerPrivateApis ); export default function GlobalStylesSidebar() { const { params } = useLocation(); - const { canvas = 'view' } = params; + const { canvas = 'view', path } = params; const { shouldClearCanvasContainerView, isStyleBookOpened, @@ -128,6 +128,29 @@ export default function GlobalStylesSidebar() { ); }; + const { getActiveComplementaryArea } = useSelect( interfaceStore ); + const { enableComplementaryArea } = useDispatch( interfaceStore ); + + const [ previousActiveArea, setPreviousActiveArea ] = useState( null ); + + useEffect( () => { + if ( path === '/wp_global_styles' && canvas === 'edit' ) { + const currentActiveArea = getActiveComplementaryArea( 'core' ); + if ( currentActiveArea !== 'edit-site/global-styles' ) { + setPreviousActiveArea( currentActiveArea ); + enableComplementaryArea( 'core', 'edit-site/global-styles' ); + } + } else if ( previousActiveArea ) { + enableComplementaryArea( 'core', previousActiveArea ); + } + }, [ + path, + enableComplementaryArea, + canvas, + getActiveComplementaryArea, + previousActiveArea, + ] ); + return ( Date: Thu, 14 Nov 2024 11:43:50 +0100 Subject: [PATCH 8/8] use ref --- .../components/global-styles-sidebar/index.js | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index b9e394af424f0c..b1cf4fec92c86e 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -5,7 +5,7 @@ import { FlexItem, Flex, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { styles, seen, backup } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as editorStore, @@ -130,26 +130,17 @@ export default function GlobalStylesSidebar() { const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { enableComplementaryArea } = useDispatch( interfaceStore ); - - const [ previousActiveArea, setPreviousActiveArea ] = useState( null ); + const previousActiveAreaRef = useRef( null ); useEffect( () => { if ( path === '/wp_global_styles' && canvas === 'edit' ) { - const currentActiveArea = getActiveComplementaryArea( 'core' ); - if ( currentActiveArea !== 'edit-site/global-styles' ) { - setPreviousActiveArea( currentActiveArea ); - enableComplementaryArea( 'core', 'edit-site/global-styles' ); - } - } else if ( previousActiveArea ) { - enableComplementaryArea( 'core', previousActiveArea ); + previousActiveAreaRef.current = + getActiveComplementaryArea( 'core' ); + enableComplementaryArea( 'core', 'edit-site/global-styles' ); + } else if ( previousActiveAreaRef.current ) { + enableComplementaryArea( 'core', previousActiveAreaRef.current ); } - }, [ - path, - enableComplementaryArea, - canvas, - getActiveComplementaryArea, - previousActiveArea, - ] ); + }, [ path, enableComplementaryArea, canvas, getActiveComplementaryArea ] ); return (