Editor: Move and unify the inserter and list view states (#57158)

docs/reference-guides/data/data-core-edit-post.md

@@ -214,6 +214,8 @@ _Returns_
 
 ### isInserterOpened
 
+> **Deprecated**
+
 Returns true if the inserter is opened.
 
 _Parameters_
@@ -446,30 +448,24 @@ Returns an action object used to switch to template editing.
 
 ### setIsInserterOpened
 
+> **Deprecated**
+
 Returns an action object used to open/close the inserter.
 
 _Parameters_
 
--   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
--   _value.rootClientId_ `string`: The root client ID to insert at.
--   _value.insertionIndex_ `number`: The index to insert at.
-
-_Returns_
-
--   `Object`: Action object.
+-   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false).
 
 ### setIsListViewOpened
 
+> **Deprecated**
+
 Returns an action object used to open/close the list view.
 
 _Parameters_
 
 -   _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.
 
-_Returns_
-
--   `Object`: Action object.
-
 ### showBlockTypes
 
 Update the provided block types to be visible.

docs/reference-guides/data/data-core-edit-site.md

@@ -157,27 +157,29 @@ _Returns_
 
 ### isInserterOpened
 
-Returns the current opened/closed state of the inserter panel.
+> **Deprecated**
+
+Returns true if the inserter is opened.
 
 _Parameters_
 
 -   _state_ `Object`: Global application state.
 
 _Returns_
 
--   `boolean`: True if the inserter panel should be open; false if closed.
+-   `boolean`: Whether the inserter is opened.
 
 ### isListViewOpened
 
-Returns the current opened/closed state of the list view panel.
+Returns true if the list view is opened.
 
 _Parameters_
 
 -   _state_ `Object`: Global application state.
 
 _Returns_
 
--   `boolean`: True if the list view panel should be open; false if closed.
+-   `boolean`: Whether the list view is opened.
 
 ### isNavigationOpened
 
@@ -307,25 +309,23 @@ _Parameters_
 
 ### setIsInserterOpened
 
-Opens or closes the inserter.
-
-_Parameters_
+> **Deprecated**
 
--   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
--   _value.rootClientId_ `string`: The root client ID to insert at.
--   _value.insertionIndex_ `number`: The index to insert at.
+Returns an action object used to open/close the inserter.
 
-_Returns_
+_Parameters_
 
--   `Object`: Action object.
+-   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false).
 
 ### setIsListViewOpened
 
-Sets whether the list view panel should be open.
+> **Deprecated**
+
+Returns an action object used to open/close the list view.
 
 _Parameters_
 
--   _isOpen_ `boolean`: If true, opens the list view. If false, closes it. It does not toggle the state, but sets it directly.
+-   _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.
 
 ### setIsNavigationPanelOpened
 

docs/reference-guides/data/data-core-editor.md

@@ -924,6 +924,30 @@ _Related_
 
 -   isFirstMultiSelectedBlock in core/block-editor store.
 
+### isInserterOpened
+
+Returns true if the inserter is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether the inserter is opened.
+
+### isListViewOpened
+
+Returns true if the list view is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether the list view is opened.
+
 ### isMultiSelecting
 
 _Related_
@@ -1349,6 +1373,32 @@ _Returns_
 
 -   `Object`: Action object.
 
+### setIsInserterOpened
+
+Returns an action object used to open/close the inserter.
+
+_Parameters_
+
+-   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
+-   _value.rootClientId_ `string`: The root client ID to insert at.
+-   _value.insertionIndex_ `number`: The index to insert at.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setIsListViewOpened
+
+Returns an action object used to open/close the list view.
+
+_Parameters_
+
+-   _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setRenderingMode
 
 Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -35,7 +35,7 @@ const preventDefault = ( event ) => {
 function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editPostStore );
+		useDispatch( editorStore );
 	const {
 		isInserterEnabled,
 		isInserterOpened,
@@ -46,9 +46,8 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 	} = useSelect( ( select ) => {
 		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
 			select( blockEditorStore );
-		const { getEditorSettings } = select( editorStore );
-		const { getEditorMode, isFeatureActive, isListViewOpened } =
-			select( editPostStore );
+		const { getEditorSettings, isListViewOpened } = select( editorStore );
+		const { getEditorMode, isFeatureActive } = select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		return {
@@ -59,7 +58,7 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 				hasInserterItems(
 					getBlockRootClientId( getBlockSelectionEnd() )
 				),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
+			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isTextModeEnabled: getEditorMode() === 'text',
 			showIconLabels: isFeatureActive( 'showIconLabels' ),
 			isListViewOpen: isListViewOpened(),

packages/edit-post/src/components/header/writing-menu/index.js

@@ -10,6 +10,7 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -19,9 +20,10 @@ import { store as postEditorStore } from '../../../store';
 function WritingMenu() {
 	const registry = useRegistry();
 
-	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
-		useDispatch( postEditorStore );
+	const { closeGeneralSidebar } = useDispatch( postEditorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editorStore );
 
 	const toggleDistractionFree = () => {
 		registry.batch( () => {

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -18,24 +18,22 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
-		useSelect( editPostStore );
+	const { getEditorMode, isEditorSidebarOpened } = useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } =
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
-
+	const { isListViewOpened } = useSelect( editorStore );
 	const {
 		switchEditorMode,
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		toggleFeature,
-		setIsListViewOpened,
 		toggleDistractionFree,
 	} = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-
+	const { setIsListViewOpened } = useDispatch( editorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const {
 		getBlockName,

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

@@ -142,9 +142,10 @@ function Layout() {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
+	const { openGeneralSidebar, closeGeneralSidebar } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
 		mode,
 		isFullscreenActive,
@@ -176,8 +177,8 @@ function Layout() {
 			),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
-			isListViewOpened: select( editPostStore ).isListViewOpened(),
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpened: select( editorStore ).isListViewOpened(),
 			mode: select( editPostStore ).getEditorMode(),
 			isRichEditingEnabled: editorSettings.richEditingEnabled,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),

packages/edit-post/src/components/preferences-modal/index.js

@@ -64,9 +64,9 @@ export default function EditPostPreferencesModal() {
 		[ isLargeViewport ]
 	);
 
-	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( editPostStore );
-
+	const { closeGeneralSidebar } = useDispatch( editPostStore );
+	const { setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const toggleDistractionFree = () => {

packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js

@@ -11,22 +11,24 @@ import {
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function InserterSidebar() {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { isFeatureActive, __experimentalGetInsertionPoint } =
-			select( editPostStore );
+		const { isFeatureActive } = select( editPostStore );
+		const { getInsertionPoint } = unlock( select( editorStore ) );
 		return {
-			insertionPoint: __experimentalGetInsertionPoint(),
+			insertionPoint: getInsertionPoint(),
 			showMostUsedBlocks: isFeatureActive( 'mostUsedBlocks' ),
 		};
 	}, [] );
-	const { setIsInserterOpened } = useDispatch( editPostStore );
+	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';

packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js

@@ -11,15 +11,15 @@ import { __, _x } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../store';
 import ListViewOutline from './list-view-outline';
 
 export default function ListViewSidebar( { listViewToggleElement } ) {
-	const { setIsListViewOpened } = useDispatch( editPostStore );
+	const { setIsListViewOpened } = useDispatch( editorStore );
 
 	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );

packages/edit-post/src/editor.js

@@ -96,8 +96,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		[ postType, postId, isLargeViewport ]
 	);
 
-	const { updatePreferredStyleVariations, setIsInserterOpened } =
-		useDispatch( editPostStore );
+	const { updatePreferredStyleVariations } = useDispatch( editPostStore );
 
 	const editorSettings = useMemo( () => {
 		const result = {
@@ -112,8 +111,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 			hasInlineToolbar,
 			allowRightClickOverrides,
 
-			// This is marked as experimental to give time for the quick inserter to mature.
-			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			keepCaretInsideBlock,
 			// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
 			// where we need to differentiate if a block is disabled by the user or some plugin.
@@ -146,7 +143,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		hiddenBlockTypes,
 		blockTypes,
 		preferredStyleVariations,
-		setIsInserterOpened,
 		updatePreferredStyleVariations,
 		keepCaretInsideBlock,
 	] );

packages/edit-post/src/hooks/commands/use-common-commands.js

@@ -32,7 +32,6 @@ export default function useCommonCommands() {
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		switchEditorMode,
-		setIsListViewOpened,
 		toggleDistractionFree,
 	} = useDispatch( editPostStore );
 	const { openModal } = useDispatch( interfaceStore );
@@ -44,8 +43,8 @@ export default function useCommonCommands() {
 		showBlockBreadcrumbs,
 		isDistractionFree,
 	} = useSelect( ( select ) => {
-		const { getEditorMode, isListViewOpened, isFeatureActive } =
-			select( editPostStore );
+		const { getEditorMode, isFeatureActive } = select( editPostStore );
+		const { isListViewOpened } = select( editorStore );
 		return {
 			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
 				editPostStore.name
@@ -63,7 +62,8 @@ export default function useCommonCommands() {
 	}, [] );
 	const { toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
-	const { __unstableSaveForPreview } = useDispatch( editorStore );
+	const { __unstableSaveForPreview, setIsListViewOpened } =
+		useDispatch( editorStore );
 	const { getCurrentPostId } = useSelect( editorStore );
 
 	useCommand( {