Enhance Block Tools: Add inserter opened state to selector and update…

… rendering logic
WordPress · Dec 5, 2024 · a605b82 · a605b82
1 parent 600218e
commit a605b82
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -44,6 +44,7 @@ function selector( select ) {
 		isTyping: isTyping(),
 		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
+		isInserterOpened: getSettings().__experimentalIsInserterOpened,
 	};
 }
 
@@ -61,8 +62,14 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
-		useSelect( selector, [] );
+	const {
+		clientId,
+		hasFixedToolbar,
+		isTyping,
+		isZoomOutMode,
+		isDragging,
+		isInserterOpened,
+	} = useSelect( selector, [] );
 
 	const isMatch = useShortcutEventMatch();
 	const {
@@ -234,7 +241,7 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && ! isDragging && (
+				{ isZoomOutMode && ! isDragging && ! isInserterOpened && (
 					<ZoomOutModeInserters
 						__unstableContentRef={ __unstableContentRef }
 					/>

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -274,6 +274,11 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 
 	const forceDisableFocusMode = settings.focusMode === false;
 
+	const isInserterOpened = useSelect(
+		( select ) => select( editorStore ).isInserterOpened(),
+		[]
+	);
+
 	return useMemo( () => {
 		const blockEditorSettings = {
 			...Object.fromEntries(
@@ -326,6 +331,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				postType === 'wp_navigation'
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
+			__experimentalIsInserterOpened: isInserterOpened,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			[ sectionRootClientIdKey ]: sectionRootClientId,
 			editorTool:
@@ -360,6 +366,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		globalStylesData,
 		globalStylesLinksData,
 		renderingMode,
+		isInserterOpened,
 	] );
 }