diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 17ebad06c4d78e..5be58bfca08626 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -462,3 +462,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		margin-bottom: auto;
 	}
 }
+
+.zoom-out-separator {
+	/* same color as the iframe's background */
+	background: $gray-300;
+}
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 37dba80511d920..b713ad80f82a02 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -16,6 +16,7 @@ import {
 	useViewportMatch,
 	useMergeRefs,
 	useDebounce,
+	useReducedMotion,
 } from '@wordpress/compose';
 import {
 	createContext,
@@ -27,6 +28,10 @@ import {
 /**
  * Internal dependencies
  */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
@@ -174,49 +179,97 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getBlockOrder,
-					getSelectedBlockClientId,
-					getSelectedBlockClientIds,
-					__unstableGetVisibleBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				const _order = getBlockOrder( rootClientId );
-
-				if ( getSettings().__unstableIsPreviewMode ) {
-					return {
-						order: _order,
-						selectedBlocks: EMPTY_ARRAY,
-						visibleBlocks: EMPTY_SET,
-					};
-				}
+	const {
+		order,
+		selectedBlocks,
+		visibleBlocks,
+		shouldRenderAppender,
+		isZoomOut,
+		sectionRootClientId,
+		sectionClientIds,
+		blockInsertionPoint,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				__unstableGetEditorMode,
+				getBlockInsertionPoint,
+			} = unlock( select( blockEditorStore ) );
+			const _order = getBlockOrder( rootClientId );
 
-				const selectedBlockClientId = getSelectedBlockClientId();
+			if ( getSettings().__unstableIsPreviewMode ) {
 				return {
 					order: _order,
-					selectedBlocks: getSelectedBlockClientIds(),
-					visibleBlocks: __unstableGetVisibleBlocks(),
-					shouldRenderAppender:
-						hasAppender &&
-						__unstableGetEditorMode() !== 'zoom-out' &&
-						( hasCustomAppender
-							? ! getTemplateLock( rootClientId ) &&
-							  getBlockEditingMode( rootClientId ) !== 'disabled'
-							: rootClientId === selectedBlockClientId ||
-							  ( ! rootClientId &&
-									! selectedBlockClientId &&
-									! _order.length ) ),
+					selectedBlocks: EMPTY_ARRAY,
+					visibleBlocks: EMPTY_SET,
 				};
-			},
-			[ rootClientId, hasAppender, hasCustomAppender ]
+			}
+
+			const { sectionRootClientId: root } = unlock( getSettings() );
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const sectionRootClientIds = getBlockOrder( root );
+			return {
+				order: _order,
+				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
+				shouldRenderAppender:
+					hasAppender &&
+					__unstableGetEditorMode() !== 'zoom-out' &&
+					( hasCustomAppender
+						? ! getTemplateLock( rootClientId ) &&
+						  getBlockEditingMode( rootClientId ) !== 'disabled'
+						: rootClientId === selectedBlockClientId ||
+						  ( ! rootClientId &&
+								! selectedBlockClientId &&
+								! _order.length ) ),
+				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				sectionRootClientId: root,
+				sectionClientIds: sectionRootClientIds,
+				blockOrder: getBlockOrder( root ),
+				blockInsertionPoint: getBlockInsertionPoint(),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
+
+	function isSectionBlock( clientId, sectionIds ) {
+		if ( isZoomOut ) {
+			if ( sectionRootClientId && sectionIds ) {
+				if ( sectionIds?.includes( clientId ) ) {
+					return true;
+				}
+			} else if ( clientId && ! rootClientId ) {
+				return true;
+			}
+		}
+	}
+
+	const isReducedMotion = useReducedMotion();
+	const renderZoomOutSeparator = ( isVisible ) => {
+		return (
+			<AnimatePresence>
+				{ isVisible && (
+					<motion.div
+						layout={ ! isReducedMotion }
+						initial={ { height: 0 } }
+						animate={ { height: '20vh' } }
+						exit={ { height: 0 } }
+						transition={ {
+							duration: 0.25,
+							ease: 'easeInOut',
+						} }
+						className="zoom-out-separator"
+					></motion.div>
+				) }
+			</AnimatePresence>
 		);
+	};
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -230,10 +283,23 @@ function Items( {
 						! selectedBlocks.includes( clientId )
 					}
 				>
+					{ renderZoomOutSeparator(
+						isSectionBlock( clientId, sectionClientIds ) &&
+							blockInsertionPoint.index === 0 &&
+							clientId ===
+								sectionClientIds[ blockInsertionPoint.index ]
+					) }
 					<BlockListBlock
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 					/>
+					{ renderZoomOutSeparator(
+						isSectionBlock( clientId, sectionClientIds ) &&
+							clientId ===
+								sectionClientIds[
+									blockInsertionPoint.index - 1
+								]
+					) }
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
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 bb044f9479c024..4c14d4cbbd7b44 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,11 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+<<<<<<< HEAD
 import { useEffect, useState } from '@wordpress/element';
+=======
+import { useEffect, useRef, useState } from '@wordpress/element';
+>>>>>>> a728b0d993 (create a function to check when we can add the separators)
 
 /**
  * Internal dependencies
@@ -18,7 +22,11 @@ function ZoomOutModeInserters() {
 		hasSelection,
 		blockInsertionPoint,
 		blockOrder,
+<<<<<<< HEAD
 		blockInsertionPointVisible,
+=======
+		blockInsertionPoint,
+>>>>>>> a728b0d993 (create a function to check when we can add the separators)
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
@@ -31,14 +39,22 @@ function ZoomOutModeInserters() {
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
+<<<<<<< HEAD
 			isBlockInsertionPointVisible,
+=======
+			getBlockInsertionPoint,
+>>>>>>> a728b0d993 (create a function to check when we can add the separators)
 		} = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
 		return {
 			hasSelection: !! getSelectionStart().clientId,
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
+<<<<<<< HEAD
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+=======
+			blockInsertionPoint: getBlockInsertionPoint(),
+>>>>>>> a728b0d993 (create a function to check when we can add the separators)
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
@@ -46,8 +62,22 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
+<<<<<<< HEAD
 
 	const { showInsertionPoint } = useDispatch( blockEditorStore );
+=======
+	const dispatch = useDispatch( blockEditorStore );
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		// reset insertion point when the block order changes
+		setInserterIsOpened( true );
+	}, [ blockOrder, setInserterIsOpened ] );
+>>>>>>> a728b0d993 (create a function to check when we can add the separators)
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -79,6 +109,7 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId === previousClientId ||
 			hoveredBlockClientId === nextClientId;
 
+		const { showInsertionPoint } = unlock( dispatch );
 		return (
 			<BlockPopoverInbetween
 				key={ index }
@@ -97,6 +128,7 @@ function ZoomOutModeInserters() {
 						className="block-editor-block-list__insertion-point-indicator"
 					/>
 				) }
+
 				{ ! shouldRenderInsertionPoint && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }