create a function to check when we can add the separators

Attempt to define sectionClientIds Pass sectionClientIds to isSectionBlock Rename sectionClientIds to sectionRootClientIds check if it's zoom out mode, add some CSS to the separator expand separators when the insertion point is changed fix animation only open the first separator if the insertion point index is 0 conditionally render the separators and animate them using framer instead of on class change remove unused code refactor separators do displacement on drag
WordPress · Jul 25, 2024 · a728b0d · a728b0d
1 parent 368d0ac
commit a728b0d
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 64 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
@@ -17,7 +17,7 @@ function ZoomOutModeInserters() {
 	const {
 		hasSelection,
 		blockOrder,
-		insertionPoint,
+		blockInsertionPoint,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
@@ -29,27 +29,21 @@ function ZoomOutModeInserters() {
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
+			getBlockInsertionPoint,
 		} = 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 {
 			hasSelection: !! getSelectionStart().clientId,
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPoint: getBlockInsertionPoint(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
-
+	const dispatch = useDispatch( blockEditorStore );
 	const isMounted = useRef( false );
 
 	useEffect( () => {
@@ -76,10 +70,9 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
+		const shouldRenderInserter = blockInsertionPoint.index !== index;
 
-		const shouldRenderInsertionPoint =
-			insertionPoint.insertionIndex === index;
+		const shouldRenderInsertionPoint = blockInsertionPoint.index === index;
 
 		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
 			return null;
@@ -97,24 +90,13 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId === previousClientId ||
 			hoveredBlockClientId === nextClientId;
 
+		const { showInsertionPoint } = unlock( dispatch );
 		return (
 			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ shouldRenderInsertionPoint && (
-					<div
-						style={ {
-							borderRadius: '0',
-							height: '12px',
-							opacity: 1,
-							transform: 'translateY(-50%)',
-							width: '100%',
-						} }
-						className="block-editor-block-list__insertion-point-indicator"
-					/>
-				) }
 				{ shouldRenderInserter && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }
@@ -125,6 +107,10 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
 					/>
 				) }