Zoom Out Inserter: enable

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.

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>
 			) }

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
 			) }
 		/>
 	);

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 &&

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,
+	};
+}

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,
 } );
 
 /**

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