[edit-widgets] Make global inserter usable by passing correct rootCli…

…entId to it (#24908)

* Pass correct rootClientId to the inserter

* Use last selected root id for the global inserter in widgets editor

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

@@ -11,25 +11,20 @@ import {
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import SaveButton from '../save-button';
+import useLastSelectedRootId from '../../hooks/use-last-selected-root-id';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 
 const inserterToggleProps = { isPrimary: true };
 
 function Header( { isCustomizer } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const rootClientId = useSelect( ( select ) => {
-		const { getBlockRootClientId, getBlockSelectionEnd } = select(
-			'core/block-editor'
-		);
-		return getBlockRootClientId( getBlockSelectionEnd() );
-	}, [] );
+	const rootClientId = useLastSelectedRootId();
 
 	return (
 		<>

packages/edit-widgets/src/hooks/use-last-selected-root-id.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../store/utils';
+
+const useLastSelectedRootId = () => {
+	const firstRootId = useSelect( ( select ) => {
+		// Default to the first widget area
+		const { getEntityRecord } = select( 'core' );
+		const widgetAreasPost = getEntityRecord(
+			KIND,
+			POST_TYPE,
+			buildWidgetAreasPostId()
+		);
+		if ( widgetAreasPost ) {
+			return widgetAreasPost?.blocks[ 0 ]?.clientId;
+		}
+	}, [] );
+
+	const lastSelectedRootIdRef = useRef();
+	if ( ! lastSelectedRootIdRef.current && firstRootId ) {
+		lastSelectedRootIdRef.current = firstRootId;
+	}
+
+	const selectedRootId = useSelect( ( select ) => {
+		const { getBlockRootClientId, getBlockSelectionEnd } = select(
+			'core/block-editor'
+		);
+		return getBlockRootClientId( getBlockSelectionEnd() );
+	}, [] );
+
+	if ( selectedRootId ) {
+		lastSelectedRootIdRef.current = selectedRootId;
+	}
+
+	return lastSelectedRootIdRef.current;
+};
+
+export default useLastSelectedRootId;