Fix ComplementaryArea's initial isActive state (#47498)

packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts

@@ -2,29 +2,29 @@
  * Internal dependencies
  */
 import type { Editor } from './index';
-import { expect } from '../test';
 
 /**
- * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
+ * Clicks on the button in the header which opens Document Settings sidebar when
+ * it is closed.
  *
  * @param {Editor} this
  */
 export async function openDocumentSettingsSidebar( this: Editor ) {
-	const editorSettingsButton = this.page.locator(
-		'role=region[name="Editor top bar"i] >> role=button[name="Settings"i]'
-	);
+	const toggleButton = this.page
+		.getByRole( 'region', { name: 'Editor top bar' } )
+		.getByRole( 'button', {
+			name: 'Settings',
+			disabled: false,
+		} );
 
-	const isEditorSettingsOpened =
-		( await editorSettingsButton.getAttribute( 'aria-expanded' ) ) ===
-		'true';
+	const isClosed =
+		( await toggleButton.getAttribute( 'aria-expanded' ) ) === 'false';
 
-	if ( ! isEditorSettingsOpened ) {
-		await editorSettingsButton.click();
-
-		await expect(
-			this.page.locator(
-				'role=region[name="Editor settings"i] >> role=button[name^="Close settings"i]'
-			)
-		).toBeVisible();
+	if ( isClosed ) {
+		await toggleButton.click();
+		await this.page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Close settings' } )
+			.waitFor();
 	}
 }

packages/e2e-test-utils/src/open-document-settings-sidebar.js

@@ -2,12 +2,17 @@
  * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
  */
 export async function openDocumentSettingsSidebar() {
-	const openButton = await page.$(
-		'.edit-post-header__settings button[aria-label="Settings"][aria-expanded="false"]'
+	const toggleButton = await page.waitForSelector(
+		'.edit-post-header__settings button[aria-label="Settings"][aria-disabled="false"]'
 	);
 
-	if ( openButton ) {
-		await openButton.click();
+	const isClosed = await page.evaluate(
+		( element ) => element.getAttribute( 'aria-expanded' ) === 'false',
+		toggleButton
+	);
+
+	if ( isClosed ) {
+		await toggleButton.click();
 		await page.waitForSelector( '.edit-post-sidebar' );
 	}
 }

packages/edit-site/src/components/sidebar-edit-mode/index.js

@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings sidebar' ) }
+				closeLabel={ __( 'Close settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>

packages/interface/src/components/complementary-area/index.js

@@ -47,26 +47,29 @@ function useAdjustComplementaryListener(
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 	useEffect( () => {
-		// If the complementary area is active and the editor is switching from a big to a small window size.
+		// If the complementary area is active and the editor is switching from
+		// a big to a small window size.
 		if ( isActive && isSmall && ! previousIsSmall.current ) {
-			// Disable the complementary area.
 			disableComplementaryArea( scope );
-			// Flag the complementary area to be reopened when the window size goes from small to big.
+			// Flag the complementary area to be reopened when the window size
+			// goes from small to big.
 			shouldOpenWhenNotSmall.current = true;
 		} else if (
-			// If there is a flag indicating the complementary area should be enabled when we go from small to big window size
-			// and we are going from a small to big window size.
+			// If there is a flag indicating the complementary area should be
+			// enabled when we go from small to big window size and we are going
+			// from a small to big window size.
 			shouldOpenWhenNotSmall.current &&
 			! isSmall &&
 			previousIsSmall.current
 		) {
-			// Remove the flag indicating the complementary area should be enabled.
+			// Remove the flag indicating the complementary area should be
+			// enabled.
 			shouldOpenWhenNotSmall.current = false;
-			// Enable the complementary area.
 			enableComplementaryArea( scope, identifier );
 		} else if (
-			// If the flag is indicating the current complementary should be reopened but another complementary area becomes active,
-			// remove the flag.
+			// If the flag is indicating the current complementary should be
+			// reopened but another complementary area becomes active, remove
+			// the flag.
 			shouldOpenWhenNotSmall.current &&
 			activeArea &&
 			activeArea !== identifier
@@ -97,21 +100,29 @@ function ComplementaryArea( {
 	isActiveByDefault,
 	showIconLabels = false,
 } ) {
-	const { isActive, isPinned, activeArea, isSmall, isLarge } = useSelect(
-		( select ) => {
-			const { getActiveComplementaryArea, isItemPinned } =
-				select( interfaceStore );
-			const _activeArea = getActiveComplementaryArea( scope );
-			return {
-				isActive: _activeArea === identifier,
-				isPinned: isItemPinned( scope, identifier ),
-				activeArea: _activeArea,
-				isSmall: select( viewportStore ).isViewportMatch( '< medium' ),
-				isLarge: select( viewportStore ).isViewportMatch( 'large' ),
-			};
-		},
-		[ identifier, scope ]
-	);
+	const { isLoading, isActive, isPinned, activeArea, isSmall, isLarge } =
+		useSelect(
+			( select ) => {
+				const {
+					getActiveComplementaryArea,
+					isComplementaryAreaLoading,
+					isItemPinned,
+				} = select( interfaceStore );
+
+				const _activeArea = getActiveComplementaryArea( scope );
+
+				return {
+					isLoading: isComplementaryAreaLoading( scope ),
+					isActive: _activeArea === identifier,
+					isPinned: isItemPinned( scope, identifier ),
+					activeArea: _activeArea,
+					isSmall:
+						select( viewportStore ).isViewportMatch( '< medium' ),
+					isLarge: select( viewportStore ).isViewportMatch( 'large' ),
+				};
+			},
+			[ identifier, scope ]
+		);
 	useAdjustComplementaryListener(
 		scope,
 		identifier,
@@ -127,8 +138,12 @@ function ComplementaryArea( {
 	} = useDispatch( interfaceStore );
 
 	useEffect( () => {
+		// Set initial visibility: For large screens, enable if it's active by
+		// default. For small screens, always initially disable.
 		if ( isActiveByDefault && activeArea === undefined && ! isSmall ) {
 			enableComplementaryArea( scope, identifier );
+		} else if ( activeArea === undefined && isSmall ) {
+			disableComplementaryArea( scope, identifier );
 		}
 	}, [ activeArea, isActiveByDefault, scope, identifier, isSmall ] );
 
@@ -144,6 +159,7 @@ function ComplementaryArea( {
 								isActive && ( ! showIconLabels || isLarge )
 							}
 							aria-expanded={ isActive }
+							aria-disabled={ isLoading }
 							label={ title }
 							icon={ showIconLabels ? check : icon }
 							showTooltip={ ! showIconLabels }

packages/interface/src/store/selectors.js

@@ -28,14 +28,26 @@ export const getActiveComplementaryArea = createRegistrySelector(
 		}
 
 		// Return `null` to indicate the user hid the complementary area.
-		if ( ! isComplementaryAreaVisible ) {
+		if ( isComplementaryAreaVisible === false ) {
 			return null;
 		}
 
 		return state?.complementaryAreas?.[ scope ];
 	}
 );
 
+export const isComplementaryAreaLoading = createRegistrySelector(
+	( select ) => ( state, scope ) => {
+		const isVisible = select( preferencesStore ).get(
+			scope,
+			'isComplementaryAreaVisible'
+		);
+		const identifier = state?.complementaryAreas?.[ scope ];
+
+		return isVisible && identifier === undefined;
+	}
+);
+
 /**
  * Returns a boolean indicating if an item is pinned or not.
  *