Initially set the area disabled for small screens

This makes the area state values to be consistent.
WordPress · Feb 2, 2023 · ae4a680 · ae4a680
1 parent ed67d4d
commit ae4a680
Showing 1 changed file with 30 additions and 19 deletions.
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
@@ -48,26 +48,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
@@ -104,18 +107,14 @@ function ComplementaryArea( {
 				const { getActiveComplementaryArea, isItemPinned } =
 					select( interfaceStore );
 
-				const isComplementaryAreaVisible = select(
-					preferencesStore
-				).get( scope, 'isComplementaryAreaVisible' );
+				const isVisible = select( preferencesStore ).get(
+					scope,
+					'isComplementaryAreaVisible'
+				);
 				const _activeArea = getActiveComplementaryArea( scope );
-				const _isSmall =
-					select( viewportStore ).isViewportMatch( '< medium' );
 
 				return {
-					isLoading:
-						isComplementaryAreaVisible &&
-						_activeArea === undefined &&
-						! _isSmall,
+					isLoading: isVisible && _activeArea === undefined,
 					isActive: _activeArea === identifier,
 					isPinned: isItemPinned( scope, identifier ),
 					activeArea: _activeArea,
@@ -143,8 +142,20 @@ function ComplementaryArea( {
 	useEffect( () => {
 		if ( isActiveByDefault && activeArea === undefined && ! isSmall ) {
 			enableComplementaryArea( scope, identifier );
+		} else if ( activeArea === undefined && isSmall ) {
+			// The isComplementaryAreaVisible state is preserved, so in case it
+			// was previously true, we need to adjust and initially disable for
+			// small screens.
+			disableComplementaryArea( scope, identifier );
 		}
-	}, [ activeArea, isActiveByDefault, scope, identifier, isSmall ] );
+	}, [
+		activeArea,
+		isActiveByDefault,
+		scope,
+		identifier,
+		isSmall,
+		isLoading,
+	] );
 
 	return (
 		<>