Use an explicit action when setting up the site editor app to denote …

…the default action
WordPress · May 10, 2022 · 43a1bcd · 43a1bcd
1 parent ba3b358
commit 43a1bcd
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/packages/edit-site/src/components/sidebar/constants.js b/packages/edit-site/src/components/sidebar/constants.js
@@ -1,3 +1,2 @@
 export const SIDEBAR_TEMPLATE = 'edit-site/template';
 export const SIDEBAR_BLOCK = 'edit-site/block-inspector';
-export const DEFAULT_SIDEBAR = SIDEBAR_TEMPLATE;
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -18,7 +18,7 @@ import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
-import { DEFAULT_SIDEBAR, SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
+import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
@@ -30,7 +30,7 @@ export function SidebarComplementaryAreaFills() {
 		( select ) => {
 			const _sidebar = select(
 				interfaceStore
-			).getActiveComplementaryArea( STORE_NAME, DEFAULT_SIDEBAR );
+			).getActiveComplementaryArea( STORE_NAME );
 			const _isEditorSidebarOpened = [
 				SIDEBAR_BLOCK,
 				SIDEBAR_TEMPLATE,
@@ -46,6 +46,7 @@ export function SidebarComplementaryAreaFills() {
 		[]
 	);
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
 	useEffect( () => {
 		if ( ! isEditorSidebarOpened ) return;
 		if ( hasBlockSelection ) {
@@ -54,6 +55,7 @@ export function SidebarComplementaryAreaFills() {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
 	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;

diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
@@ -13,6 +13,7 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
@@ -77,6 +78,11 @@ export function reinitializeEditor( target, settings ) {
 			dispatch( editSiteStore ).setIsListViewOpened( true );
 		}
 
+		dispatch( interfaceStore ).setDefaultComplementaryArea(
+			'core/edit-site',
+			'edit-site/template'
+		);
+
 		dispatch( editSiteStore ).updateSettings( settings );
 
 		// Keep the defaultTemplateTypes in the core/editor settings too,

diff --git a/packages/interface/src/store/actions.js b/packages/interface/src/store/actions.js
@@ -4,6 +4,20 @@
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Set a default complementary area.
+ *
+ * @param {string} scope Complementary area scope.
+ * @param {string} area  Area identifier.
+ *
+ * @return {Object} Action object.
+ */
+export const setDefaultComplementaryArea = ( scope, area ) => ( {
+	type: 'SET_DEFAULT_COMPLEMENTARY_AREA',
+	scope,
+	area,
+} );
+
 /**
  * Enable the complementary area.
  *

diff --git a/packages/interface/src/store/reducer.js b/packages/interface/src/store/reducer.js
@@ -5,10 +5,23 @@ import { combineReducers } from '@wordpress/data';
 
 export function complementaryAreas( state = {}, action ) {
 	switch ( action.type ) {
+		case 'SET_DEFAULT_COMPLEMENTARY_AREA': {
+			const { scope, area } = action;
+
+			// If there's already an area, don't overwrite it.
+			if ( state[ scope ] ) {
+				return state;
+			}
+
+			return {
+				...state,
+				[ scope ]: area,
+			};
+		}
 		case 'ENABLE_COMPLEMENTARY_AREA': {
 			const { scope, area } = action;
 			return {
-				...state.scope,
+				...state,
 				[ scope ]: area,
 			};
 		}

diff --git a/packages/interface/src/store/selectors.js b/packages/interface/src/store/selectors.js
@@ -8,14 +8,13 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Returns the complementary area that is active in a given scope.
  *
- * @param {Object} state       Global application state.
- * @param {string} scope       Item scope.
- * @param {string} defaultArea The default area to show if the area is visible.
+ * @param {Object} state Global application state.
+ * @param {string} scope Item scope.
  *
  * @return {string | null | undefined} The complementary area that is active in the given scope.
  */
 export const getActiveComplementaryArea = createRegistrySelector(
-	( select ) => ( state, scope, defaultArea ) => {
+	( select ) => ( state, scope ) => {
 		const isComplementaryAreaVisible = select( preferencesStore ).get(
 			scope,
 			'isComplementaryAreaVisible'
@@ -33,7 +32,7 @@ export const getActiveComplementaryArea = createRegistrySelector(
 			return null;
 		}
 
-		return state?.complementaryAreas?.[ scope ] ?? defaultArea;
+		return state?.complementaryAreas?.[ scope ];
 	}
 );