From 92daad1b1bb2192e21209b80018ed079296e7683 Mon Sep 17 00:00:00 2001 From: Maggie Cabrera Date: Wed, 24 Jul 2024 11:38:15 +0100 Subject: [PATCH] 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 --- .../src/components/block-list/content.scss | 5 + .../src/components/block-list/index.js | 142 +++++++++++++----- .../block-tools/zoom-out-mode-inserters.js | 32 ++++ 3 files changed, 141 insertions(+), 38 deletions(-) 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 ( + + { isVisible && ( + + ) } + ); + }; return ( @@ -230,10 +283,23 @@ function Items( { ! selectedBlocks.includes( clientId ) } > + { renderZoomOutSeparator( + isSectionBlock( clientId, sectionClientIds ) && + blockInsertionPoint.index === 0 && + clientId === + sectionClientIds[ blockInsertionPoint.index ] + ) } + { renderZoomOutSeparator( + isSectionBlock( clientId, sectionClientIds ) && + clientId === + sectionClientIds[ + blockInsertionPoint.index - 1 + ] + ) } ) ) } { 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 ( ) } + { ! shouldRenderInsertionPoint && (