Skip to content

Commit

Permalink
create a function to check when we can add the separators
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@MaggieCabrera
MaggieCabrera committed Jul 25, 2024
1 parent 3336ee9 commit 92daad1
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 38 deletions.
5 changes: 5 additions & 0 deletions packages/block-editor/src/components/block-list/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
142 changes: 104 additions & 38 deletions packages/block-editor/src/components/block-list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
useViewportMatch,
useMergeRefs,
useDebounce,
useReducedMotion,
} from '@wordpress/compose';
import {
createContext,
Expand All @@ -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';
Expand Down Expand Up @@ -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 }>
Expand All @@ -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 }
Expand Down
32 changes: 32 additions & 0 deletions packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -31,23 +39,45 @@ 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,
selectedBlockClientId: getSelectedBlockClientId(),
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( () => {
Expand Down Expand Up @@ -79,6 +109,7 @@ function ZoomOutModeInserters() {
hoveredBlockClientId === previousClientId ||
hoveredBlockClientId === nextClientId;

const { showInsertionPoint } = unlock( dispatch );
return (
<BlockPopoverInbetween
key={ index }
Expand All @@ -97,6 +128,7 @@ function ZoomOutModeInserters() {
className="block-editor-block-list__insertion-point-indicator"
/>
) }

{ ! shouldRenderInsertionPoint && (
<ZoomOutModeInserterButton
isVisible={ isSelected || isHovered }
Expand Down

0 comments on commit 92daad1

Please sign in to comment.