From a728b0d9937d134deb22b2a24a11013cfefd0150 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 | 38 ++--- 3 files changed, 121 insertions(+), 64 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 5f5b0401b512e0..c4dd6e698cdfeb 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 @@ -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,19 +29,13 @@ 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, @@ -49,7 +43,7 @@ function ZoomOutModeInserters() { 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 ( - { shouldRenderInsertionPoint && ( -
- ) } { shouldRenderInserter && ( ) }