Borrow getInserterInitialTab changes from #57572

Co-authored-by: ramon <[email protected]>

docs/reference-guides/data/data-core-customize-widgets.md

@@ -78,6 +78,7 @@ _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.
+-   _value.initialTab_ `string`: The id of the tab to display first when the block editor inserter is opened. A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
 
 _Returns_
 

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

@@ -215,6 +215,7 @@ _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.
+-   _value.initialTab_ `string`: The id of the tab to display first when the block editor inserter is opened. A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
 
 _Returns_
 

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

@@ -1382,6 +1382,7 @@ _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.
+-   _value.initialTab_ `string`: The id of the tab to display first when the block editor inserter is opened. A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
 
 _Returns_
 

packages/block-editor/src/components/inserter/library.js

@@ -21,6 +21,7 @@ function InserterLibrary(
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
 		__experimentalFilterValue,
+		initialInserterTab,
 		onSelect = noop,
 		shouldFocusBlock = false,
 	},
@@ -46,6 +47,7 @@ function InserterLibrary(
 			isAppender={ isAppender }
 			showInserterHelpPanel={ showInserterHelpPanel }
 			showMostUsedBlocks={ showMostUsedBlocks }
+			initialInserterTab={ initialInserterTab }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }

packages/block-editor/src/components/inserter/menu.js

@@ -45,6 +45,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
+		initialInserterTab,
 	},
 	ref
 ) {
@@ -56,8 +57,9 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( null );
-
+	const [ selectedTab, setSelectedTab ] = useState(
+		initialInserterTab || null
+	);
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
 			rootClientId,
@@ -259,6 +261,7 @@ function InserterMenu(
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
 						tabsContents={ inserterTabsContents }
+						initialTabId={ initialInserterTab }
 					/>
 				) }
 				{ ! delayedFilterValue && ! showAsTabs && (

packages/block-editor/src/components/inserter/tabs.js

@@ -33,16 +33,21 @@ function InserterTabs( {
 	showMedia = false,
 	onSelect,
 	tabsContents,
+	initialTabId,
 } ) {
 	const tabs = [
 		blocksTab,
 		showPatterns && patternsTab,
 		showMedia && mediaTab,
 	].filter( Boolean );
 
+	initialTabId = !! tabs.find( ( { name } ) => initialTabId === name )
+		? initialTabId
+		: 'blocks';
+
 	return (
 		<div className="block-editor-inserter__tabs">
-			<Tabs onSelect={ onSelect }>
+			<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) => (
 						<Tabs.Tab key={ tab.name } tabId={ tab.name }>

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

@@ -7,6 +7,8 @@
  *                                              use an object.
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
+ * @param {string}         value.initialTab     The id of the tab to display first when the block editor inserter is opened.
+ *                                              A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
  *
  * @example
  * ```js

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

@@ -348,6 +348,8 @@ export function setIsWidgetAreaOpen( clientId, isOpen ) {
  *                                              use an object.
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
+ * @param {string}         value.initialTab     The id of the tab to display first when the block editor inserter is opened.
+ *                                              A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
  *
  * @return {Object} Action object.
  */

packages/editor/src/components/inserter-sidebar/index.js

@@ -20,14 +20,18 @@ import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
 export default function InserterSidebar() {
-	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { getInsertionPoint } = unlock( select( editorStore ) );
-		const { get } = select( preferencesStore );
-		return {
-			insertionPoint: getInsertionPoint(),
-			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
-		};
-	}, [] );
+	const { insertionPoint, initialInserterTab, showMostUsedBlocks } =
+		useSelect( ( select ) => {
+			const { getInsertionPoint, getInserterInitialTab } = unlock(
+				select( editorStore )
+			);
+			const { get } = select( preferencesStore );
+			return {
+				insertionPoint: getInsertionPoint(),
+				initialInserterTab: getInserterInitialTab(),
+				showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+			};
+		}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -64,6 +68,7 @@ export default function InserterSidebar() {
 					__experimentalInsertionIndex={
 						insertionPoint.insertionIndex
 					}
+					initialInserterTab={ initialInserterTab }
 					__experimentalFilterValue={ insertionPoint.filterValue }
 					ref={ libraryRef }
 				/>

packages/editor/src/store/actions.js

@@ -697,6 +697,8 @@ export function removeEditorPanel( panelName ) {
  *                                              use an object.
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
+ * @param {string}         value.initialTab     The id of the tab to display first when the block editor inserter is opened.
+ *                                              A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
  *
  * @return {Object} Action object.
  */

packages/editor/src/store/private-selectors.js

@@ -25,7 +25,11 @@ const EMPTY_INSERTION_POINT = {
 export const getInsertionPoint = createRegistrySelector(
 	( select ) => ( state ) => {
 		if ( typeof state.blockInserterPanel === 'object' ) {
-			return state.blockInserterPanel;
+			return {
+				rootClientId: state.blockInserterPanel?.rootClientId,
+				insertionIndex: state.blockInserterPanel?.insertionIndex,
+				filterValue: state.blockInserterPanel?.filterValue,
+			};
 		}
 
 		if ( getRenderingMode( state ) === 'template-locked' ) {
@@ -46,6 +50,21 @@ export const getInsertionPoint = createRegistrySelector(
 	}
 );
 
+/**
+ * Get the initial tab id for the inserter.
+ * A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} The initial tab category to open when the inserter is opened.
+ */
+export const getInserterInitialTab = createRegistrySelector(
+	() => ( state ) =>
+		typeof state.blockInserterPanel === 'object'
+			? state.blockInserterPanel?.initialTab
+			: null
+);
+
 export function getListViewToggleRef( state ) {
 	return state.listViewToggleRef;
 }