From dcca1219f34f338d120706f4fb92e5a3107e3b2e Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Thu, 26 Dec 2024 12:19:00 +0530
Subject: [PATCH 1/3] Zoom Out Inserter: enable

---
 .../data/data-core-block-editor.md            | 24 +++++++++++++++++++
 .../block-list/zoom-out-separator.js          | 11 +++++++--
 .../zoom-out-mode-inserter-button.js          | 19 +++++++++++----
 .../src/components/inserter/menu.js           | 12 ++++++++--
 packages/block-editor/src/store/actions.js    | 14 +++++++++++
 packages/block-editor/src/store/reducer.js    | 18 ++++++++++++++
 packages/block-editor/src/store/selectors.js  | 11 +++++++++
 7 files changed, 101 insertions(+), 8 deletions(-)

diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index bca05d57610934..80be4dfb7bfa41 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -827,6 +827,18 @@ _Returns_
 
 -   `0|-1|null`: Initial position.
 
+### getSelectedTab
+
+Returns the selected tab.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: The selected tab.
+
 ### getSelectionEnd
 
 Returns the current selection end block client ID, attribute key and text offset.
@@ -1721,6 +1733,18 @@ _Parameters_
 
 -   _isNavigationMode_ `boolean`: Enable/Disable navigation mode.
 
+### setSelectedTab
+
+Sets the selected tab.
+
+_Parameters_
+
+-   _tab_ `string`: The selected tab. Can be `patterns`, `blocks` or `media`.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setTemplateValidity
 
 Action that resets the template validity.
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index 86191c1e4ce32c..95acc9e36dc00a 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -13,7 +13,7 @@ import {
 import { useReducedMotion } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,6 +34,7 @@ export function ZoomOutSeparator( {
 		blockInsertionPointVisible,
 		blockInsertionPoint,
 		blocksBeingDragged,
+		selectedTab,
 	} = useSelect( ( select ) => {
 		const {
 			getInsertionPoint,
@@ -42,6 +43,7 @@ export function ZoomOutSeparator( {
 			isBlockInsertionPointVisible,
 			getBlockInsertionPoint,
 			getDraggedBlockClientIds,
+			getSelectedTab,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -54,6 +56,7 @@ export function ZoomOutSeparator( {
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			blocksBeingDragged: getDraggedBlockClientIds(),
+			selectedTab: getSelectedTab(),
 		};
 	}, [] );
 
@@ -162,7 +165,11 @@ export function ZoomOutSeparator( {
 							delay: 0.125,
 						} }
 					>
-						{ __( 'Drop pattern.' ) }
+						{ sprintf(
+							/* translators: %s: tab name (e.g. "pattern" or "block") */
+							__( 'Drop %s.' ),
+							selectedTab
+						) }
 					</motion.div>
 				</motion.div>
 			) }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
index 961552caa66e01..b8658672b59a7a 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
@@ -6,11 +6,21 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
 
 function ZoomOutModeInserterButton( { onClick } ) {
+	const selectedTab = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSelectedTab();
+	}, [] );
+
 	return (
 		<Button
 			variant="primary"
@@ -21,9 +31,10 @@ function ZoomOutModeInserterButton( { onClick } ) {
 				'block-editor-block-tools__zoom-out-mode-inserter-button'
 			) }
 			onClick={ onClick }
-			label={ _x(
-				'Add pattern',
-				'Generic label for pattern inserter button'
+			label={ sprintf(
+				/* translators: %s: tab name (e.g. "pattern" or "block") */
+				_x( 'Add %s', 'Label for zoom out mode inserter button.' ),
+				selectedTab
 			) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 019a37bffdde26..e7461809b47db4 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -17,7 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -74,6 +74,11 @@ function InserterMenu(
 		useState( null );
 	const isLargeViewport = useViewportMatch( 'large' );
 
+	const selectedTab = useSelect( ( select ) =>
+		select( blockEditorStore ).getSelectedTab()
+	);
+	const { setSelectedTab } = useDispatch( blockEditorStore );
+
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
 			return __experimentalInitialTab;
@@ -85,7 +90,10 @@ function InserterMenu(
 
 		return 'blocks';
 	}
-	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
+
+	useLayoutEffect( () => {
+		setSelectedTab( getInitialTab() );
+	}, [] );
 
 	const shouldUseZoomOut =
 		hasSectionRootClientId &&
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 6edc5cb4da0393..8671fcd7106948 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -2142,3 +2142,17 @@ export function unsetBlockEditingMode( clientId = '' ) {
 		clientId,
 	};
 }
+
+/**
+ * Sets the selected tab.
+ *
+ * @param {string} tab The selected tab. Can be `patterns`, `blocks` or `media`.
+ *
+ * @return {Object} Action object.
+ */
+export function setSelectedTab( tab ) {
+	return {
+		type: 'SET_SELECTED_TAB',
+		tab,
+	};
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index fc3803462d8920..757150ca06bd3e 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -2110,6 +2110,23 @@ export function insertionPoint( state = null, action ) {
 	return state;
 }
 
+/**
+ * Reducer setting the selected tab
+ *
+ * @param {string} state  Current state. Defaults to 'patterns'.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function selectedTab( state = 'patterns', action ) {
+	switch ( action.type ) {
+		case 'SET_SELECTED_TAB':
+			return action.tab;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2143,6 +2160,7 @@ const combinedReducers = combineReducers( {
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
 	zoomLevel,
+	selectedTab,
 } );
 
 /**
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 31ee6778da8d0d..8e08337fb87783 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -3153,6 +3153,17 @@ export const isGroupable = createRegistrySelector(
 		}
 );
 
+/**
+ * Returns the selected tab.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} The selected tab.
+ */
+export function getSelectedTab( state ) {
+	return state.selectedTab;
+}
+
 /**
  * DO-NOT-USE in production.
  * This selector is created for internal/experimental only usage and may be

From 368e81d0c3b50d8316b54db7823fb4bae7e10efe Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Thu, 26 Dec 2024 12:49:31 +0530
Subject: [PATCH 2/3] Zoom Out Inserter: enable `dynamic labels`

---
 docs/reference-guides/data/data-core-block-editor.md | 2 +-
 packages/block-editor/src/store/actions.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 80be4dfb7bfa41..e01463df7f26dc 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -1739,7 +1739,7 @@ Sets the selected tab.
 
 _Parameters_
 
--   _tab_ `string`: The selected tab. Can be `patterns`, `blocks` or `media`.
+-   _tab_ `string`: The selected tab. Takes `patterns`, `blocks` or `media`.
 
 _Returns_
 
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 8671fcd7106948..b7fda55822a5d1 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -2146,7 +2146,7 @@ export function unsetBlockEditingMode( clientId = '' ) {
 /**
  * Sets the selected tab.
  *
- * @param {string} tab The selected tab. Can be `patterns`, `blocks` or `media`.
+ * @param {string} tab The selected tab. Takes `patterns`, `blocks` or `media`.
  *
  * @return {Object} Action object.
  */

From f6555880c576b0d5d0210ab56cdc62fb0bfbdb36 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Thu, 26 Dec 2024 15:04:34 +0530
Subject: [PATCH 3/3] fix: canvas zooms in when pattern inserter closed after
 opening block inserter once

---
 .../block-editor/src/components/inserter/menu.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index e7461809b47db4..e3b0aa3d44aaee 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -12,6 +12,7 @@ import {
 	useCallback,
 	useMemo,
 	useRef,
+	useEffect,
 	useLayoutEffect,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
@@ -74,11 +75,6 @@ function InserterMenu(
 		useState( null );
 	const isLargeViewport = useViewportMatch( 'large' );
 
-	const selectedTab = useSelect( ( select ) =>
-		select( blockEditorStore ).getSelectedTab()
-	);
-	const { setSelectedTab } = useDispatch( blockEditorStore );
-
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
 			return __experimentalInitialTab;
@@ -91,9 +87,13 @@ function InserterMenu(
 		return 'blocks';
 	}
 
-	useLayoutEffect( () => {
-		setSelectedTab( getInitialTab() );
-	}, [] );
+	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
+	const { setSelectedTab: setInserterSelectedTab } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		setInserterSelectedTab( selectedTab );
+	}, [ selectedTab, setInserterSelectedTab ] );
 
 	const shouldUseZoomOut =
 		hasSectionRootClientId &&