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

WordPress · Sep 16, 2020 · 7169f8b · 7169f8b
1 parent 115eb5c
commit 7169f8b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
@@ -11,40 +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';
-import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';
 
 const inserterToggleProps = { isPrimary: true };
 
 function Header( { isCustomizer } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const rootClientId = useSelect( ( select ) => {
-		const { getBlockRootClientId, getBlockSelectionEnd } = select(
-			'core/block-editor'
-		);
-		const selectedRootId = getBlockRootClientId( getBlockSelectionEnd() );
-		if ( selectedRootId ) {
-			return selectedRootId;
-		}
-
-		// 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 rootClientId = useLastSelectedRootId();
 
 	return (
 		<>

diff --git a/packages/edit-widgets/src/hooks/use-last-selected-root-id.js b/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;