Update: Remove static defaults from complementary areas active area (WordPress#22381)

Author: jorgefilipecosta

packages/edit-post/src/components/sidebar/settings-sidebar/index.js

@@ -3,6 +3,7 @@
  */
 import { BlockInspector } from '@wordpress/block-editor';
 import { cog } from '@wordpress/icons';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +23,11 @@ import PluginSidebarEditPost from '../../sidebar/plugin-sidebar';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
+const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
+	web: true,
+	native: false,
+} );
+
 const SettingsSidebar = () => {
 	const { sidebarName, keyboardShortcut } = useSelect( ( select ) => {
 		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
@@ -57,6 +63,7 @@ const SettingsSidebar = () => {
 			title={ __( 'Settings' ) }
 			toggleShortcut={ keyboardShortcut }
 			icon={ cog }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
 		>
 			{ sidebarName === 'edit-post/document' && (
 				<>

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

@@ -5,11 +5,16 @@ import { createSlotFill } from '@wordpress/components';
 import { ComplementaryArea } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { cog, pencil } from '@wordpress/icons';
+import { Platform } from '@wordpress/element';
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
 );
 export const SidebarInspectorFill = InspectorFill;
+const BLOCK_INSPECTOR_ACTIVE_BY_DEFAULT = Platform.select( {
+	web: true,
+	native: false,
+} );
 export function SidebarComplementaryAreaFills() {
 	return (
 		<>
@@ -18,6 +23,7 @@ export function SidebarComplementaryAreaFills() {
 				identifier="edit-site/block-inspector"
 				title={ __( 'Block Inspector' ) }
 				icon={ cog }
+				isActiveByDefault={ BLOCK_INSPECTOR_ACTIVE_BY_DEFAULT }
 			>
 				<InspectorSlot bubblesVirtually />
 			</ComplementaryArea>

packages/edit-widgets/src/components/sidebar/index.js

@@ -7,14 +7,19 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import { useEffect, Platform } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { ComplementaryArea } from '@wordpress/interface';
 import { BlockInspector } from '@wordpress/block-editor';
 import { cog } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 
+const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
+	web: true,
+	native: false,
+} );
+
 /**
  * Internal dependencies
  */
@@ -131,6 +136,7 @@ export default function Sidebar() {
 			scope="core/edit-widgets"
 			identifier={ currentArea }
 			icon={ cog }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
 		>
 			{ currentArea === 'edit-widgets/block-areas' && <BlockAreas /> }
 			{ currentArea === 'edit-widgets/block-inspector' && (

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

@@ -92,6 +92,7 @@ function ComplementaryArea( {
 	smallScreenTitle,
 	title,
 	toggleShortcut,
+	isActiveByDefault,
 } ) {
 	const { isActive, isPinned, activeArea, isSmall } = useSelect(
 		( select ) => {
@@ -117,10 +118,19 @@ function ComplementaryArea( {
 		isActive,
 		isSmall
 	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		'core/interface'
-	);
-	const { pinItem, unpinItem } = useDispatch( 'core/interface' );
+	const {
+		enableComplementaryArea,
+		disableComplementaryArea,
+		pinItem,
+		unpinItem,
+	} = useDispatch( 'core/interface' );
+
+	useEffect( () => {
+		if ( isActiveByDefault && activeArea === undefined && ! isSmall ) {
+			enableComplementaryArea( scope, identifier );
+		}
+	}, [ activeArea, isActiveByDefault, scope, identifier, isSmall ] );
+
 	return (
 		<>
 			{ isPinned && isPinnable && (

packages/interface/src/store/defaults.js

@@ -1,30 +1,13 @@
 /**
  * External dependencies
  */
-import { flow, get, isEmpty, omit } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { DEFAULTS } from './defaults';
-
-/**
- * Higher-order reducer creator which provides the given initial state for the
- * original reducer.
- *
- * @param {*} initialState Initial state to provide to reducer.
- *
- * @return {Function} Higher-order reducer.
- */
-const createWithInitialState = ( initialState ) => ( reducer ) => {
-	return ( state = initialState, action ) => reducer( state, action );
-};
-
 /**
  * Reducer to keep tract of the active area per scope.
  *
@@ -41,18 +24,6 @@ export function singleEnableItems(
 		return state;
 	}
 
-	if (
-		! item &&
-		! get( DEFAULTS.enableItems.singleEnableItems, [ itemType, scope ] )
-	) {
-		const newTypeState = omit( state[ itemType ], [ scope ] );
-		return isEmpty( newTypeState )
-			? omit( state, [ itemType ] )
-			: {
-					...state,
-					[ itemType ]: newTypeState,
-			  };
-	}
 	return {
 		...state,
 		[ itemType ]: {
@@ -103,8 +74,6 @@ const enableItems = combineReducers( {
 	multipleEnableItems,
 } );
 
-export default flow( [ combineReducers, createWithInitialState( DEFAULTS ) ] )(
-	{
-		enableItems,
-	}
-);
+export default combineReducers( {
+	enableItems,
+} );

packages/interface/src/store/defaults.native.js

@@ -10,14 +10,10 @@ import { get } from 'lodash';
  * @param {string} itemType Type of item.
  * @param {string} scope    Item scope.
  *
- * @return {string} The item that is enabled in the passed scope and type.
+ * @return {?string|null} The item that is enabled in the passed scope and type.
  */
 function getSingleEnableItem( state, itemType, scope ) {
-	return get(
-		state.enableItems.singleEnableItems,
-		[ itemType, scope ],
-		null
-	);
+	return get( state.enableItems.singleEnableItems, [ itemType, scope ] );
 }
 
 /**