From ee95127fbb1cee1a1cd3620c8a6fc6e94dad3aba Mon Sep 17 00:00:00 2001
From: Margarita Cabrera Ramirez <dean@fs276ed391.tkyc007.ap.nuro.jp>
Date: Tue, 7 May 2024 16:27:56 +0900
Subject: [PATCH 01/17] add generic button instead of inserter between sections

---
 .../src/components/block-tools/style.scss     |   8 ++
 .../block-tools/zoom-out-mode-inserters.js    | 108 ++++++++++++++++--
 2 files changed, 109 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index c5920bdf2f7d38..07654a784305db 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -47,6 +47,10 @@
 
 	top: calc(50% - #{$button-size-small * 0.5});
 	left: calc(50% - #{$button-size-small * 0.5});
+	.is-pattern-inserter & {
+		top: 50%;
+		left: 50%;
+	}
 }
 
 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
@@ -262,3 +266,7 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+.block-editor-block-list__insertion-point.is-pattern-inserter .block-editor-button-pattern-inserter__button {
+	pointer-events: all;
+}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 5fad0e54e38a68..6cfb9cc6518af9 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -3,17 +3,35 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
+import { __unstableMotion as motion, Button } from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
-import Inserter from '../inserter';
 import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
+	const { setInserterIsOpened, insertionIndex } = useSelect(
+		( select ) => {
+			const { getSettings, getBlockIndex, getBlockCount } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			const index = getBlockIndex( clientId );
+			const blockCount = getBlockCount();
+
+			return {
+				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
+				insertionIndex: index === -1 ? blockCount : index,
+			};
+		},
+		[ clientId ]
+	);
 	const blockOrder = useSelect( ( select ) => {
 		const { sectionRootClientId } = unlock(
 			select( blockEditorStore ).getSettings()
@@ -31,25 +49,101 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		};
 	}, [] );
 
+	useEffect( () => {
+		if ( setInserterIsOpened ) {
+			setInserterIsOpened( false );
+		}
+	}, [ setInserterIsOpened ] );
+
+	const disableMotion = useReducedMotion();
+
 	if ( ! isReady ) {
 		return null;
 	}
 
+	const lineVariants = {
+		// Initial position starts from the center and invisible.
+		start: {
+			opacity: 0,
+			scale: 0,
+		},
+		// The line expands to fill the container. If the inserter is visible it
+		// is delayed so it appears orchestrated.
+		rest: {
+			opacity: 1,
+			scale: 1,
+			transition: { delay: 0.5, type: 'tween' },
+		},
+		hover: {
+			opacity: 1,
+			scale: 1,
+			transition: { delay: 0.5, type: 'tween' },
+		},
+	};
+	const patternInserterVariants = {
+		start: {
+			scale: disableMotion ? 1 : 0,
+			translateX: '-50%',
+			translateY: '-50%',
+		},
+		rest: {
+			scale: 1,
+			transition: { delay: 0.4, type: 'tween' },
+		},
+	};
+
+	const label = _x(
+		'Add pattern',
+		'Generic label for pattern inserter button'
+	);
+
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
+		if ( index === blockOrder.length - 1 ) {
+			return null;
+		}
 		return (
 			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
 				__unstableContentRef={ __unstableContentRef }
+				className="block-editor-button-pattern-inserter"
 			>
-				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
-					<Inserter
-						position="bottom center"
-						clientId={ blockOrder[ index ] }
-						__experimentalIsQuick
+				<motion.div
+					key={ clientId }
+					layout={ ! disableMotion }
+					initial={ disableMotion ? 'rest' : 'start' }
+					animate="rest"
+					whileHover="hover"
+					whileTap="pressed"
+					exit="start"
+					className="block-editor-block-list__insertion-point is-vertical is-pattern-inserter"
+				>
+					<motion.div
+						variants={ lineVariants }
+						className="block-editor-block-list__insertion-point-indicator"
+						data-testid="block-list-insertion-point-indicator"
 					/>
-				</div>
+					<motion.div
+						variants={ patternInserterVariants }
+						className="block-editor-block-list__insertion-point-inserter"
+					>
+						<Button
+							variant="primary"
+							icon={ plus }
+							size="compact"
+							className="block-editor-button-pattern-inserter__button"
+							onClick={ () => {
+								setInserterIsOpened( {
+									clientId,
+									insertionIndex,
+									filterValue,
+								} );
+							} }
+							label={ label }
+						/>
+					</motion.div>
+				</motion.div>
 			</BlockPopoverInbetween>
 		);
 	} );

From 426307e00176a9b577e5cc5ecebc8e9ac933ea9c Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 7 May 2024 16:55:50 +0900
Subject: [PATCH 02/17] Make it work :)

---
 .../block-tools/zoom-out-mode-inserters.js    | 185 ++++++++++--------
 1 file changed, 108 insertions(+), 77 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 6cfb9cc6518af9..d61d947ad235f3 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -15,52 +15,25 @@ import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-function ZoomOutModeInserters( { __unstableContentRef } ) {
-	const [ isReady, setIsReady ] = useState( false );
+function Inserter( {
+	previousClientId,
+	nextClientId,
+	sectionRootClientId,
+	disableMotion,
+	__unstableContentRef,
+	index,
+} ) {
 	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
-			const { getSettings, getBlockIndex, getBlockCount } =
-				select( blockEditorStore );
+			const { getSettings, getBlockCount } = select( blockEditorStore );
 			const settings = getSettings();
-			const index = getBlockIndex( clientId );
-			const blockCount = getBlockCount();
-
 			return {
 				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-				insertionIndex: index === -1 ? blockCount : index,
+				insertionIndex: index === -1 ? getBlockCount() : index,
 			};
 		},
-		[ clientId ]
+		[ index ]
 	);
-	const blockOrder = useSelect( ( select ) => {
-		const { sectionRootClientId } = unlock(
-			select( blockEditorStore ).getSettings()
-		);
-		return select( blockEditorStore ).getBlockOrder( sectionRootClientId );
-	}, [] );
-
-	// Defer the initial rendering to avoid the jumps due to the animation.
-	useEffect( () => {
-		const timeout = setTimeout( () => {
-			setIsReady( true );
-		}, 500 );
-		return () => {
-			clearTimeout( timeout );
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( setInserterIsOpened ) {
-			setInserterIsOpened( false );
-		}
-	}, [ setInserterIsOpened ] );
-
-	const disableMotion = useReducedMotion();
-
-	if ( ! isReady ) {
-		return null;
-	}
-
 	const lineVariants = {
 		// Initial position starts from the center and invisible.
 		start: {
@@ -96,55 +69,113 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		'Add pattern',
 		'Generic label for pattern inserter button'
 	);
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+			__unstableContentRef={ __unstableContentRef }
+			className="block-editor-button-pattern-inserter"
+		>
+			<motion.div
+				layout={ ! disableMotion }
+				initial={ disableMotion ? 'rest' : 'start' }
+				animate="rest"
+				whileHover="hover"
+				whileTap="pressed"
+				exit="start"
+				className="block-editor-block-list__insertion-point is-vertical is-pattern-inserter"
+			>
+				<motion.div
+					variants={ lineVariants }
+					className="block-editor-block-list__insertion-point-indicator"
+					data-testid="block-list-insertion-point-indicator"
+				/>
+				<motion.div
+					variants={ patternInserterVariants }
+					className="block-editor-block-list__insertion-point-inserter"
+				>
+					<Button
+						variant="primary"
+						icon={ plus }
+						size="compact"
+						className="block-editor-button-pattern-inserter__button"
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
+						label={ label }
+					/>
+				</motion.div>
+			</motion.div>
+		</BlockPopoverInbetween>
+	);
+}
+
+function ZoomOutModeInserters( { __unstableContentRef } ) {
+	const [ isReady, setIsReady ] = useState( false );
+	// const { setInserterIsOpened } = useSelect( ( select ) => {
+	// 	const { getSettings, getBlockIndex, getBlockCount } =
+	// 		select( blockEditorStore );
+	// 	const settings = getSettings();
+	// 	const index = getBlockIndex( clientId );
+	// 	const blockCount = getBlockCount();
+
+	// 	return {
+	// 		setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
+	// 		insertionIndex: index === -1 ? blockCount : index,
+	// 	};
+	// }, [] );
+	const { blockOrder, sectionRootClientId } = useSelect( ( select ) => {
+		const { sectionRootClientId: root } = unlock(
+			select( blockEditorStore ).getSettings()
+		);
+		return {
+			blockOrder: select( blockEditorStore ).getBlockOrder( root ),
+			sectionRootClientId: root,
+		};
+	}, [] );
+
+	// Defer the initial rendering to avoid the jumps due to the animation.
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			setIsReady( true );
+		}, 500 );
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [] );
+
+	// useEffect( () => {
+	// 	if ( setInserterIsOpened ) {
+	// 		setInserterIsOpened( false );
+	// 	}
+	// }, [ setInserterIsOpened ] );
+
+	const disableMotion = useReducedMotion();
+
+	if ( ! isReady ) {
+		return null;
+	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
 		if ( index === blockOrder.length - 1 ) {
 			return null;
 		}
 		return (
-			<BlockPopoverInbetween
+			<Inserter
 				key={ index }
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
+				sectionRootClientId={ sectionRootClientId }
+				disableMotion={ disableMotion }
+				index={ index }
+				blockOrder={ blockOrder }
 				__unstableContentRef={ __unstableContentRef }
-				className="block-editor-button-pattern-inserter"
-			>
-				<motion.div
-					key={ clientId }
-					layout={ ! disableMotion }
-					initial={ disableMotion ? 'rest' : 'start' }
-					animate="rest"
-					whileHover="hover"
-					whileTap="pressed"
-					exit="start"
-					className="block-editor-block-list__insertion-point is-vertical is-pattern-inserter"
-				>
-					<motion.div
-						variants={ lineVariants }
-						className="block-editor-block-list__insertion-point-indicator"
-						data-testid="block-list-insertion-point-indicator"
-					/>
-					<motion.div
-						variants={ patternInserterVariants }
-						className="block-editor-block-list__insertion-point-inserter"
-					>
-						<Button
-							variant="primary"
-							icon={ plus }
-							size="compact"
-							className="block-editor-button-pattern-inserter__button"
-							onClick={ () => {
-								setInserterIsOpened( {
-									clientId,
-									insertionIndex,
-									filterValue,
-								} );
-							} }
-							label={ label }
-						/>
-					</motion.div>
-				</motion.div>
-			</BlockPopoverInbetween>
+			/>
 		);
 	} );
 }

From 5940b15180274fb0038c752ca097862001f88e5c Mon Sep 17 00:00:00 2001
From: Margarita Cabrera Ramirez <dean@fs276ed391.tkyc007.ap.nuro.jp>
Date: Wed, 8 May 2024 10:01:31 +0900
Subject: [PATCH 03/17] removed comments

---
 .../block-tools/zoom-out-mode-inserters.js     | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index d61d947ad235f3..7b33590ff1a899 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -117,18 +117,6 @@ function Inserter( {
 
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
-	// const { setInserterIsOpened } = useSelect( ( select ) => {
-	// 	const { getSettings, getBlockIndex, getBlockCount } =
-	// 		select( blockEditorStore );
-	// 	const settings = getSettings();
-	// 	const index = getBlockIndex( clientId );
-	// 	const blockCount = getBlockCount();
-
-	// 	return {
-	// 		setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-	// 		insertionIndex: index === -1 ? blockCount : index,
-	// 	};
-	// }, [] );
 	const { blockOrder, sectionRootClientId } = useSelect( ( select ) => {
 		const { sectionRootClientId: root } = unlock(
 			select( blockEditorStore ).getSettings()
@@ -149,12 +137,6 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		};
 	}, [] );
 
-	// useEffect( () => {
-	// 	if ( setInserterIsOpened ) {
-	// 		setInserterIsOpened( false );
-	// 	}
-	// }, [ setInserterIsOpened ] );
-
 	const disableMotion = useReducedMotion();
 
 	if ( ! isReady ) {

From 76af591ad247441ab1377ca9c82d54a7494fa566 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 10:58:48 +0900
Subject: [PATCH 04/17] Open tab + category

---
 .../src/components/inserter/library.js             |  4 ++++
 .../block-editor/src/components/inserter/menu.js   | 14 +++++++++++---
 .../block-editor/src/components/inserter/tabs.js   |  4 ++--
 .../src/components/inserter-sidebar/index.js       |  2 ++
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index 7e9b366e5e3a74..6be31f49b5fbe1 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -20,6 +20,8 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
 		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
@@ -53,6 +55,8 @@ function InserterLibrary(
 			__experimentalOnPatternCategorySelection={
 				__experimentalOnPatternCategorySelection
 			}
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 			onClose={ onClose }
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 979a3b8199f0b0..ded08f4bb0bc49 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -48,6 +48,8 @@ function InserterMenu(
 		shouldFocusBlock = true,
 		__experimentalOnPatternCategorySelection = NOOP,
 		onClose,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 	},
 	ref
 ) {
@@ -59,12 +61,15 @@ function InserterMenu(
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
-	const [ selectedPatternCategory, setSelectedPatternCategory ] =
-		useState( null );
+	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
+		__experimentalInitialCategory
+	);
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( 'blocks' );
+	const [ selectedTab, setSelectedTab ] = useState(
+		__experimentalInitialTab
+	);
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -231,6 +236,7 @@ function InserterMenu(
 						category={ selectedPatternCategory }
 						patternFilter={ patternFilter }
 						showTitlesAsTooltip
+						initialCategory={ __experimentalInitialCategory }
 					/>
 				) }
 			</BlockPatternsTab>
@@ -243,6 +249,7 @@ function InserterMenu(
 		patternFilter,
 		selectedPatternCategory,
 		showPatternPanel,
+		__experimentalInitialCategory,
 	] );
 
 	const mediaTab = useMemo( () => {
@@ -306,6 +313,7 @@ function InserterMenu(
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
 					onClose={ onClose }
+					selectedTab={ selectedTab }
 				>
 					{ inserterSearch }
 					{ selectedTab === 'blocks' &&
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index c1486dda6dbf27..aadd73cec76035 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -33,12 +33,12 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, children, onClose }, ref ) {
+function InserterTabs( { onClose, onSelect, children, selectedTab }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
-			<Tabs onSelect={ onSelect }>
+			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
 				<div className="block-editor-inserter-sidebar__header">
 					<Button
 						className="block-editor-inserter-sidebar__close-button"
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 2863ef5e1eb22e..e127fa50d23bf4 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -62,6 +62,8 @@ export default function InserterSidebar( {
 					__experimentalInsertionIndex={
 						insertionPoint.insertionIndex
 					}
+					__experimentalInitialTab={ insertionPoint.tab }
+					__experimentalInitialCategory={ insertionPoint.category }
 					__experimentalFilterValue={ insertionPoint.filterValue }
 					__experimentalOnPatternCategorySelection={
 						isRightSidebarOpen ? closeGeneralSidebar : undefined

From cdbc4531510345106562154a86daa0d49ae4ee74 Mon Sep 17 00:00:00 2001
From: Maggie Cabrera <maggie@onemaggie.com>
Date: Wed, 8 May 2024 12:16:23 +0900
Subject: [PATCH 05/17] removed animations and extra horizontal divs

---
 .../src/components/block-tools/style.scss     | 10 +--
 .../block-tools/zoom-out-mode-inserters.js    | 87 ++++---------------
 2 files changed, 21 insertions(+), 76 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 07654a784305db..e77654619255b9 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -47,10 +47,6 @@
 
 	top: calc(50% - #{$button-size-small * 0.5});
 	left: calc(50% - #{$button-size-small * 0.5});
-	.is-pattern-inserter & {
-		top: 50%;
-		left: 50%;
-	}
 }
 
 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
@@ -267,6 +263,10 @@
 	display: none;
 }
 
-.block-editor-block-list__insertion-point.is-pattern-inserter .block-editor-button-pattern-inserter__button {
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
 	pointer-events: all;
+	position: absolute;
+	transform: translateX(-50%) translateY(-50%);
+	top: 50%;
+	left: 50%;
 }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 7b33590ff1a899..298f9cb7b87bec 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -3,8 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
-import { __unstableMotion as motion, Button } from '@wordpress/components';
-import { useReducedMotion } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
@@ -19,7 +18,6 @@ function Inserter( {
 	previousClientId,
 	nextClientId,
 	sectionRootClientId,
-	disableMotion,
 	__unstableContentRef,
 	index,
 } ) {
@@ -34,36 +32,6 @@ function Inserter( {
 		},
 		[ index ]
 	);
-	const lineVariants = {
-		// Initial position starts from the center and invisible.
-		start: {
-			opacity: 0,
-			scale: 0,
-		},
-		// The line expands to fill the container. If the inserter is visible it
-		// is delayed so it appears orchestrated.
-		rest: {
-			opacity: 1,
-			scale: 1,
-			transition: { delay: 0.5, type: 'tween' },
-		},
-		hover: {
-			opacity: 1,
-			scale: 1,
-			transition: { delay: 0.5, type: 'tween' },
-		},
-	};
-	const patternInserterVariants = {
-		start: {
-			scale: disableMotion ? 1 : 0,
-			translateX: '-50%',
-			translateY: '-50%',
-		},
-		rest: {
-			scale: 1,
-			transition: { delay: 0.4, type: 'tween' },
-		},
-	};
 
 	const label = _x(
 		'Add pattern',
@@ -76,41 +44,21 @@ function Inserter( {
 			__unstableContentRef={ __unstableContentRef }
 			className="block-editor-button-pattern-inserter"
 		>
-			<motion.div
-				layout={ ! disableMotion }
-				initial={ disableMotion ? 'rest' : 'start' }
-				animate="rest"
-				whileHover="hover"
-				whileTap="pressed"
-				exit="start"
-				className="block-editor-block-list__insertion-point is-vertical is-pattern-inserter"
-			>
-				<motion.div
-					variants={ lineVariants }
-					className="block-editor-block-list__insertion-point-indicator"
-					data-testid="block-list-insertion-point-indicator"
-				/>
-				<motion.div
-					variants={ patternInserterVariants }
-					className="block-editor-block-list__insertion-point-inserter"
-				>
-					<Button
-						variant="primary"
-						icon={ plus }
-						size="compact"
-						className="block-editor-button-pattern-inserter__button"
-						onClick={ () => {
-							setInserterIsOpened( {
-								rootClientId: sectionRootClientId,
-								insertionIndex,
-								tab: 'patterns',
-								category: 'all',
-							} );
-						} }
-						label={ label }
-					/>
-				</motion.div>
-			</motion.div>
+			<Button
+				variant="primary"
+				icon={ plus }
+				size="compact"
+				className="block-editor-button-pattern-inserter__button"
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex,
+						tab: 'patterns',
+						category: 'all',
+					} );
+				} }
+				label={ label }
+			/>
 		</BlockPopoverInbetween>
 	);
 }
@@ -137,8 +85,6 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		};
 	}, [] );
 
-	const disableMotion = useReducedMotion();
-
 	if ( ! isReady ) {
 		return null;
 	}
@@ -153,7 +99,6 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
 				sectionRootClientId={ sectionRootClientId }
-				disableMotion={ disableMotion }
 				index={ index }
 				blockOrder={ blockOrder }
 				__unstableContentRef={ __unstableContentRef }

From c6bebd4e878b23750353c16a0789e8063e4fad51 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 13:08:51 +0900
Subject: [PATCH 06/17] Hide active inserter

---
 .../src/components/block-tools/zoom-out-mode-inserters.js   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 298f9cb7b87bec..3acd635db9f61c 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -20,6 +20,7 @@ function Inserter( {
 	sectionRootClientId,
 	__unstableContentRef,
 	index,
+	setActiveInserter,
 } ) {
 	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
@@ -56,6 +57,7 @@ function Inserter( {
 						tab: 'patterns',
 						category: 'all',
 					} );
+					setActiveInserter( index );
 				} }
 				label={ label }
 			/>
@@ -65,6 +67,7 @@ function Inserter( {
 
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
+	const [ activeInserter, setActiveInserter ] = useState( null );
 	const { blockOrder, sectionRootClientId } = useSelect( ( select ) => {
 		const { sectionRootClientId: root } = unlock(
 			select( blockEditorStore ).getSettings()
@@ -90,7 +93,7 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		if ( index === blockOrder.length - 1 ) {
+		if ( activeInserter === index ) {
 			return null;
 		}
 		return (
@@ -102,6 +105,7 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 				index={ index }
 				blockOrder={ blockOrder }
 				__unstableContentRef={ __unstableContentRef }
+				setActiveInserter={ setActiveInserter }
 			/>
 		);
 	} );

From a523951f8f0e34a7a7061d5054b03c25a573ed2e Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 13:23:26 +0900
Subject: [PATCH 07/17] Reset active inserter when closing inserter panel

---
 .../block-tools/zoom-out-mode-inserters.js    | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 3acd635db9f61c..77d13830b9445f 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -68,15 +68,27 @@ function Inserter( {
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
 	const [ activeInserter, setActiveInserter ] = useState( null );
-	const { blockOrder, sectionRootClientId } = useSelect( ( select ) => {
-		const { sectionRootClientId: root } = unlock(
-			select( blockEditorStore ).getSettings()
-		);
-		return {
-			blockOrder: select( blockEditorStore ).getBlockOrder( root ),
-			sectionRootClientId: root,
-		};
-	}, [] );
+	const { blockOrder, sectionRootClientId, blockInsertionPoint } = useSelect(
+		( select ) => {
+			const { sectionRootClientId: root } = unlock(
+				select( blockEditorStore ).getSettings()
+			);
+			return {
+				blockOrder: select( blockEditorStore ).getBlockOrder( root ),
+				// To do: move ZoomOutModeInserters to core/editor.
+				// eslint-disable-next-line @wordpress/data-no-store-string-literals
+				blockInsertionPoint: select( 'core/editor' ).isInserterOpened(),
+				sectionRootClientId: root,
+			};
+		},
+		[]
+	);
+
+	useEffect( () => {
+		if ( ! blockInsertionPoint ) {
+			setActiveInserter( null );
+		}
+	}, [ blockInsertionPoint ] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {

From e9a026d58c819cb8203609d733320c8e3ceece5c Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 14:20:11 +0900
Subject: [PATCH 08/17] Reset active inserter

---
 .../components/block-tools/zoom-out-mode-inserters.js  | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 77d13830b9445f..dc8c55112cd19f 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -18,7 +18,6 @@ function Inserter( {
 	previousClientId,
 	nextClientId,
 	sectionRootClientId,
-	__unstableContentRef,
 	index,
 	setActiveInserter,
 } ) {
@@ -42,7 +41,6 @@ function Inserter( {
 		<BlockPopoverInbetween
 			previousClientId={ previousClientId }
 			nextClientId={ nextClientId }
-			__unstableContentRef={ __unstableContentRef }
 			className="block-editor-button-pattern-inserter"
 		>
 			<Button
@@ -68,7 +66,7 @@ function Inserter( {
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
 	const [ activeInserter, setActiveInserter ] = useState( null );
-	const { blockOrder, sectionRootClientId, blockInsertionPoint } = useSelect(
+	const { blockOrder, sectionRootClientId, isInserterOpened } = useSelect(
 		( select ) => {
 			const { sectionRootClientId: root } = unlock(
 				select( blockEditorStore ).getSettings()
@@ -77,7 +75,7 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 				blockOrder: select( blockEditorStore ).getBlockOrder( root ),
 				// To do: move ZoomOutModeInserters to core/editor.
 				// eslint-disable-next-line @wordpress/data-no-store-string-literals
-				blockInsertionPoint: select( 'core/editor' ).isInserterOpened(),
+				isInserterOpened: select( 'core/editor' ).isInserterOpened(),
 				sectionRootClientId: root,
 			};
 		},
@@ -85,10 +83,10 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 	);
 
 	useEffect( () => {
-		if ( ! blockInsertionPoint ) {
+		if ( ! isInserterOpened ) {
 			setActiveInserter( null );
 		}
-	}, [ blockInsertionPoint ] );
+	}, [ isInserterOpened ] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {

From adcecd7ed71887f8e430d952e6ec1a60f8a4f6b2 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 14:49:38 +0900
Subject: [PATCH 09/17] Simplify

---
 .../block-tools/zoom-out-mode-inserters.js    | 123 ++++++------------
 1 file changed, 43 insertions(+), 80 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index dc8c55112cd19f..f0fc86f2da325e 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -14,79 +14,27 @@ import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-function Inserter( {
-	previousClientId,
-	nextClientId,
-	sectionRootClientId,
-	index,
-	setActiveInserter,
-} ) {
-	const { setInserterIsOpened, insertionIndex } = useSelect(
-		( select ) => {
-			const { getSettings, getBlockCount } = select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-				insertionIndex: index === -1 ? getBlockCount() : index,
-			};
-		},
-		[ index ]
-	);
-
-	const label = _x(
-		'Add pattern',
-		'Generic label for pattern inserter button'
-	);
-	return (
-		<BlockPopoverInbetween
-			previousClientId={ previousClientId }
-			nextClientId={ nextClientId }
-			className="block-editor-button-pattern-inserter"
-		>
-			<Button
-				variant="primary"
-				icon={ plus }
-				size="compact"
-				className="block-editor-button-pattern-inserter__button"
-				onClick={ () => {
-					setInserterIsOpened( {
-						rootClientId: sectionRootClientId,
-						insertionIndex,
-						tab: 'patterns',
-						category: 'all',
-					} );
-					setActiveInserter( index );
-				} }
-				label={ label }
-			/>
-		</BlockPopoverInbetween>
-	);
-}
-
-function ZoomOutModeInserters( { __unstableContentRef } ) {
+function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const [ activeInserter, setActiveInserter ] = useState( null );
-	const { blockOrder, sectionRootClientId, isInserterOpened } = useSelect(
-		( select ) => {
-			const { sectionRootClientId: root } = unlock(
-				select( blockEditorStore ).getSettings()
-			);
-			return {
-				blockOrder: select( blockEditorStore ).getBlockOrder( root ),
-				// To do: move ZoomOutModeInserters to core/editor.
-				// eslint-disable-next-line @wordpress/data-no-store-string-literals
-				isInserterOpened: select( 'core/editor' ).isInserterOpened(),
-				sectionRootClientId: root,
-			};
-		},
-		[]
-	);
-
-	useEffect( () => {
-		if ( ! isInserterOpened ) {
-			setActiveInserter( null );
-		}
-	}, [ isInserterOpened ] );
+	const {
+		blockOrder,
+		sectionRootClientId,
+		insertionPoint,
+		setInserterIsOpened,
+	} = useSelect( ( select ) => {
+		const { getSettings, getBlockOrder } = select( blockEditorStore );
+		const { sectionRootClientId: root } = unlock( getSettings() );
+		// To do: move ZoomOutModeInserters to core/editor.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const editor = select( 'core/editor' );
+		return {
+			blockOrder: getBlockOrder( root ),
+			insertionPoint: unlock( editor ).getInsertionPoint(),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+		};
+	}, [] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -103,20 +51,35 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		if ( activeInserter === index ) {
+		if ( insertionPoint.insertionIndex === index ) {
 			return null;
 		}
 		return (
-			<Inserter
+			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
-				sectionRootClientId={ sectionRootClientId }
-				index={ index }
-				blockOrder={ blockOrder }
-				__unstableContentRef={ __unstableContentRef }
-				setActiveInserter={ setActiveInserter }
-			/>
+				className="block-editor-button-pattern-inserter"
+			>
+				<Button
+					variant="primary"
+					icon={ plus }
+					size="compact"
+					className="block-editor-button-pattern-inserter__button"
+					onClick={ () => {
+						setInserterIsOpened( {
+							rootClientId: sectionRootClientId,
+							insertionIndex: index,
+							tab: 'patterns',
+							category: 'all',
+						} );
+					} }
+					label={ _x(
+						'Add pattern',
+						'Generic label for pattern inserter button'
+					) }
+				/>
+			</BlockPopoverInbetween>
 		);
 	} );
 }

From 3ab955a7d707cf55b7bf39495ea1523a194b5bb0 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 15:05:18 +0900
Subject: [PATCH 10/17] Add comment on core/editor store use

---
 .../src/components/block-tools/zoom-out-mode-inserters.js     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index f0fc86f2da325e..683b06db834308 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -25,6 +25,10 @@ function ZoomOutModeInserters() {
 		const { getSettings, getBlockOrder } = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
 		// To do: move ZoomOutModeInserters to core/editor.
+		// Or we perhaps we should move the insertion point state to the
+		// block-editor store. I'm not sure what it was ever moved to the editor
+		// store, because all the inserter components all live in the
+		// block-editor package.
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const editor = select( 'core/editor' );
 		return {

From 7024e02757fcd75d38b28faf37d8c80576e85d68 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 18:50:50 +0900
Subject: [PATCH 11/17] Add active indictator

---
 .../block-tools/zoom-out-mode-inserters.js    | 52 +++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 683b06db834308..95826267bf30ee 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -55,9 +55,6 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		if ( insertionPoint.insertionIndex === index ) {
-			return null;
-		}
 		return (
 			<BlockPopoverInbetween
 				key={ index }
@@ -65,24 +62,37 @@ function ZoomOutModeInserters() {
 				nextClientId={ blockOrder[ index ] }
 				className="block-editor-button-pattern-inserter"
 			>
-				<Button
-					variant="primary"
-					icon={ plus }
-					size="compact"
-					className="block-editor-button-pattern-inserter__button"
-					onClick={ () => {
-						setInserterIsOpened( {
-							rootClientId: sectionRootClientId,
-							insertionIndex: index,
-							tab: 'patterns',
-							category: 'all',
-						} );
-					} }
-					label={ _x(
-						'Add pattern',
-						'Generic label for pattern inserter button'
-					) }
-				/>
+				{ insertionPoint.insertionIndex === index && (
+					<div
+						style={ {
+							opacity: 1,
+							height: '4px',
+							width: '100%',
+							transform: 'translateY(-50%)',
+						} }
+						className="block-editor-block-list__insertion-point-indicator"
+					/>
+				) }
+				{ insertionPoint.insertionIndex !== index && (
+					<Button
+						variant="primary"
+						icon={ plus }
+						size="compact"
+						className="block-editor-button-pattern-inserter__button"
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex: index,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
+						label={ _x(
+							'Add pattern',
+							'Generic label for pattern inserter button'
+						) }
+					/>
+				) }
 			</BlockPopoverInbetween>
 		);
 	} );

From 07029cb4a56e597276cbbaff9643295f8ac134d5 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 9 May 2024 11:21:07 +0900
Subject: [PATCH 12/17] make the indicator larger

---
 .../src/components/block-tools/zoom-out-mode-inserters.js    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 95826267bf30ee..49eba1f233a013 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -65,10 +65,11 @@ function ZoomOutModeInserters() {
 				{ insertionPoint.insertionIndex === index && (
 					<div
 						style={ {
+							borderRadius: '0',
+							height: '12px',
 							opacity: 1,
-							height: '4px',
-							width: '100%',
 							transform: 'translateY(-50%)',
+							width: '100%',
 						} }
 						className="block-editor-block-list__insertion-point-indicator"
 					/>

From 12d8e9abd40507ad934d32d6c0afb00b5023d37c Mon Sep 17 00:00:00 2001
From: Maggie Cabrera <maggie@onemaggie.com>
Date: Thu, 9 May 2024 11:21:38 +0900
Subject: [PATCH 13/17] add e2e test

---
 test/e2e/specs/site-editor/zoom-out.spec.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 0a4319440f4ac1..36b040bdc0950d 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -61,4 +61,25 @@ test.describe( 'Zoom Out', () => {
 
 		await expect( zoomOutButton ).toBeFocused();
 	} );
+
+	test( 'Clicking on inserter while on zoom-out should open the patterns tab on the inserter', async ( {
+		page,
+	} ) => {
+		const zoomOutButton = page.getByRole( 'button', {
+			name: 'Zoom-out View',
+			exact: true,
+		} );
+
+		await zoomOutButton.click();
+		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
+		await page.getByLabel( 'Add pattern' ).first().click();
+		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );
+
+		await expect(
+			page
+				.locator( '#tabs-2-allPatterns-view div' )
+				.filter( { hasText: 'All' } )
+				.nth( 1 )
+		).toBeVisible();
+	} );
 } );

From 15405fdad26359f1922d07da759254fb9100f935 Mon Sep 17 00:00:00 2001
From: Maggie Cabrera <maggie@onemaggie.com>
Date: Thu, 9 May 2024 11:51:24 +0900
Subject: [PATCH 14/17] removed unused class

---
 .../src/components/block-tools/zoom-out-mode-inserters.js        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 49eba1f233a013..acaff48dd8a30c 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -60,7 +60,6 @@ function ZoomOutModeInserters() {
 				key={ index }
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
-				className="block-editor-button-pattern-inserter"
 			>
 				{ insertionPoint.insertionIndex === index && (
 					<div

From ac1bbadb47308ffd0e1ffea7f0a7a91f254b9a0e Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 9 May 2024 12:11:50 +0900
Subject: [PATCH 15/17] Reset insertion point on block order change

---
 .../src/components/block-tools/zoom-out-mode-inserters.js   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index acaff48dd8a30c..5feefbf70d791c 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -40,6 +40,12 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
+	useEffect( () => {
+		// reset insertion point when the block order changes
+		setInserterIsOpened( true );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ blockOrder ] );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {

From 874ac90c73cf4828570d898611e1108074abee41 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 9 May 2024 12:30:54 +0900
Subject: [PATCH 16/17] Don't reset insertion point on mount

---
 .../src/components/block-tools/zoom-out-mode-inserters.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 5feefbf70d791c..4396f54b19707b 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
@@ -40,7 +40,13 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
+	const isMounted = useRef( false );
+
 	useEffect( () => {
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
 		// reset insertion point when the block order changes
 		setInserterIsOpened( true );
 		// eslint-disable-next-line react-hooks/exhaustive-deps

From 6df631d7b5a92cf7458c95ec9b96131a19d5aa5f Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 9 May 2024 12:33:02 +0900
Subject: [PATCH 17/17] Remove unnecessary props

---
 packages/block-editor/src/components/inserter/menu.js | 2 --
 packages/block-editor/src/components/inserter/tabs.js | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index ded08f4bb0bc49..f30edcf13894cb 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -236,7 +236,6 @@ function InserterMenu(
 						category={ selectedPatternCategory }
 						patternFilter={ patternFilter }
 						showTitlesAsTooltip
-						initialCategory={ __experimentalInitialCategory }
 					/>
 				) }
 			</BlockPatternsTab>
@@ -249,7 +248,6 @@ function InserterMenu(
 		patternFilter,
 		selectedPatternCategory,
 		showPatternPanel,
-		__experimentalInitialCategory,
 	] );
 
 	const mediaTab = useMemo( () => {
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index aadd73cec76035..d3ce5d80993d3f 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -33,7 +33,7 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onClose, onSelect, children, selectedTab }, ref ) {
+function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (