Interface: Replace store name string with exposed store definition

packages/edit-post/src/components/layout/index.js

@@ -35,6 +35,7 @@ import {
 	ComplementaryArea,
 	FullscreenMode,
 	InterfaceSkeleton,
+	store as interfaceStore,
 } from '@wordpress/interface';
 import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
 import { close } from '@wordpress/icons';
@@ -99,7 +100,7 @@ function Layout( { styles } ) {
 				'fixedToolbar'
 			),
 			sidebarIsOpened: !! (
-				select( 'core/interface' ).getActiveComplementaryArea(
+				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
 				) || select( editPostStore ).isPublishSidebarOpened()
 			),

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

@@ -5,6 +5,7 @@ import { BlockInspector } from '@wordpress/block-editor';
 import { cog } from '@wordpress/icons';
 import { Platform } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -39,7 +40,7 @@ const SettingsSidebar = () => {
 		// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
 		// should contain the sidebar that will be active when the toggle button is pressed. If a block
 		// is selected, that should be edit-post/block otherwise it's edit-post/document.
-		let sidebar = select( 'core/interface' ).getActiveComplementaryArea(
+		let sidebar = select( interfaceStore ).getActiveComplementaryArea(
 			editPostStore.name
 		);
 		if (

packages/edit-post/src/store/actions.js

@@ -8,6 +8,7 @@ import { castArray, reduce } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { apiFetch } from '@wordpress/data-controls';
+import { store as interfaceStore } from '@wordpress/interface';
 import { controls, dispatch, select, subscribe } from '@wordpress/data';
 import { speak } from '@wordpress/a11y';
 
@@ -25,7 +26,7 @@ import { store as editPostStore } from '.';
  */
 export function* openGeneralSidebar( name ) {
 	yield controls.dispatch(
-		'core/interface',
+		interfaceStore.name,
 		'enableComplementaryArea',
 		editPostStore.name,
 		name
@@ -39,7 +40,7 @@ export function* openGeneralSidebar( name ) {
  */
 export function* closeGeneralSidebar() {
 	yield controls.dispatch(
-		'core/interface',
+		interfaceStore.name,
 		'disableComplementaryArea',
 		editPostStore.name
 	);

packages/edit-post/src/store/selectors.js

@@ -8,7 +8,7 @@ import { get, includes, some, flatten, values } from 'lodash';
  * WordPress dependencies
  */
 import { createRegistrySelector } from '@wordpress/data';
-
+import { store as interfaceStore } from '@wordpress/interface';
 /**
  * Returns the current editing mode.
  *
@@ -30,7 +30,7 @@ export function getEditorMode( state ) {
 export const isEditorSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar = select(
-			'core/interface'
+			interfaceStore
 		).getActiveComplementaryArea( 'core/edit-post' );
 		return includes(
 			[ 'edit-post/document', 'edit-post/block' ],
@@ -48,7 +48,7 @@ export const isEditorSidebarOpened = createRegistrySelector(
 export const isPluginSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar = select(
-			'core/interface'
+			interfaceStore
 		).getActiveComplementaryArea( 'core/edit-post' );
 		return (
 			!! activeGeneralSidebar &&
@@ -76,7 +76,7 @@ export const isPluginSidebarOpened = createRegistrySelector(
  */
 export const getActiveGeneralSidebarName = createRegistrySelector(
 	( select ) => () => {
-		return select( 'core/interface' ).getActiveComplementaryArea(
+		return select( interfaceStore ).getActiveComplementaryArea(
 			'core/edit-post'
 		);
 	}
@@ -201,7 +201,7 @@ export function isFeatureActive( state, feature ) {
  */
 export const isPluginItemPinned = createRegistrySelector(
 	( select ) => ( pluginName ) => {
-		return select( 'core/interface' ).isItemPinned(
+		return select( interfaceStore ).isItemPinned(
 			'core/edit-post',
 			pluginName
 		);

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

@@ -28,6 +28,7 @@ import {
 	FullscreenMode,
 	InterfaceSkeleton,
 	ComplementaryArea,
+	store as interfaceStore,
 } from '@wordpress/interface';
 import { EntitiesSavedStates, UnsavedChangesWarning } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
@@ -87,7 +88,7 @@ function Editor() {
 			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			deviceType: __experimentalGetPreviewDeviceType(),
 			sidebarIsOpened: !! select(
-				'core/interface'
+				interfaceStore
 			).getActiveComplementaryArea( 'core/edit-site' ),
 			settings: getSettings(),
 			templateType: postType,

packages/edit-widgets/src/components/layout/interface.js

@@ -13,7 +13,11 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
+import {
+	InterfaceSkeleton,
+	ComplementaryArea,
+	store as interfaceStore,
+} from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -42,7 +46,7 @@ function Interface( { blockEditorSettings } ) {
 
 	const { hasSidebarEnabled, isInserterOpened } = useSelect( ( select ) => ( {
 		hasSidebarEnabled: !! select(
-			'core/interface'
+			interfaceStore
 		).getActiveComplementaryArea( 'core/edit-widgets' ),
 		isInserterOpened: !! select( 'core/edit-widgets' ).isInserterOpened(),
 	} ) );

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

@@ -8,7 +8,10 @@ import classnames from 'classnames';
  */
 import { useEffect, Platform } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { ComplementaryArea } from '@wordpress/interface';
+import {
+	ComplementaryArea,
+	store as interfaceStore,
+} from '@wordpress/interface';
 import { BlockInspector } from '@wordpress/block-editor';
 import { cog } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
@@ -31,7 +34,7 @@ const WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';
 import WidgetAreas from './widget-areas';
 
 function ComplementaryAreaTab( { identifier, label, isActive } ) {
-	const { enableComplementaryArea } = useDispatch( 'core/interface' );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	return (
 		<Button
 			onClick={ () =>
@@ -54,7 +57,7 @@ function ComplementaryAreaTab( { identifier, label, isActive } ) {
 }
 
 export default function Sidebar() {
-	const { enableComplementaryArea } = useDispatch( 'core/interface' );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const {
 		currentArea,
 		hasSelectedNonAreaBlock,
@@ -66,7 +69,7 @@ export default function Sidebar() {
 			getBlock,
 			getBlockParentsByBlockName,
 		} = select( 'core/block-editor' );
-		const { getActiveComplementaryArea } = select( 'core/interface' );
+		const { getActiveComplementaryArea } = select( interfaceStore );
 
 		const selectedBlock = getSelectedBlock();
 

packages/edit-widgets/src/store/actions.js

@@ -9,7 +9,7 @@ import { invert } from 'lodash';
 import { __, sprintf } from '@wordpress/i18n';
 import { dispatch as dataDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
-
+import { store as interfaceStore } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
@@ -334,7 +334,7 @@ export function setIsInserterOpened( value ) {
  */
 export function* closeGeneralSidebar() {
 	yield dispatch(
-		'core/interface',
+		interfaceStore.name,
 		'disableComplementaryArea',
 		'core/edit-widgets'
 	);

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

@@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
 
 function ComplementaryAreaToggle( {
@@ -25,12 +26,12 @@ function ComplementaryAreaToggle( {
 	const ComponentToUse = as;
 	const isSelected = useSelect(
 		( select ) =>
-			select( 'core/interface' ).getActiveComplementaryArea( scope ) ===
+			select( interfaceStore ).getActiveComplementaryArea( scope ) ===
 			identifier,
 		[ identifier ]
 	);
 	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		'core/interface'
+		interfaceStore
 	);
 	return (
 		<ComponentToUse

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

@@ -20,6 +20,7 @@ import ComplementaryAreaHeader from '../complementary-area-header';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
+import { store as interfaceStore } from '../../store';
 
 function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
@@ -43,7 +44,7 @@ function useAdjustComplementaryListener(
 	const previousIsSmall = useRef( false );
 	const shouldOpenWhenNotSmall = useRef( false );
 	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		'core/interface'
+		interfaceStore
 	);
 	useEffect( () => {
 		// If the complementary area is active and the editor is switching from a big to a small window size.
@@ -98,7 +99,7 @@ function ComplementaryArea( {
 	const { isActive, isPinned, activeArea, isSmall, isLarge } = useSelect(
 		( select ) => {
 			const { getActiveComplementaryArea, isItemPinned } = select(
-				'core/interface'
+				interfaceStore
 			);
 			const _activeArea = getActiveComplementaryArea( scope );
 			return {
@@ -123,7 +124,7 @@ function ComplementaryArea( {
 		disableComplementaryArea,
 		pinItem,
 		unpinItem,
-	} = useDispatch( 'core/interface' );
+	} = useDispatch( interfaceStore );
 
 	useEffect( () => {
 		if ( isActiveByDefault && activeArea === undefined && ! isSmall ) {