-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Zoom out: Try vertical displacement when dragging a pattern between e…
…xisting patterns/sections (#63896) * 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 * Don’t show seperator if opertation is not insert * Fix bug where rootClientId was not within sectionRoot * Ignore Group operations on drag in Zoom Out mode * Check for ZoomOut separators when firing onDragEnd * Refine function to detect zoom out separator * Update detection based on data attribute * Make generic * Add comment for clarity * Improve code comments * Remove blue line inserter in ZoomOutmode * Move logic into consuming hook * Consume new API for getting root * Move pure function * Fix background showing through * Add UI feedback on dragover separator --------- Co-authored-by: Dave Smith <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: richtabor <[email protected]>
- Loading branch information
8 people
authored
Sep 6, 2024
1 parent
e706d67
commit 95c1995
Showing
7 changed files
with
226 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
packages/block-editor/src/components/block-list/zoom-out-separator.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import clsx from 'clsx'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __unstableMotion as motion, | ||
| __unstableAnimatePresence as AnimatePresence, | ||
| } from '@wordpress/components'; | ||
| import { useReducedMotion } from '@wordpress/compose'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useState } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as blockEditorStore } from '../../store'; | ||
| import { unlock } from '../../lock-unlock'; | ||
|
|
||
| export function ZoomOutSeparator( { | ||
| clientId, | ||
| rootClientId = '', | ||
| position = 'top', | ||
| } ) { | ||
| const [ isDraggedOver, setIsDraggedOver ] = useState( false ); | ||
| const { | ||
| sectionRootClientId, | ||
| sectionClientIds, | ||
| blockInsertionPoint, | ||
| blockInsertionPointVisible, | ||
| } = useSelect( ( select ) => { | ||
| const { | ||
| getBlockInsertionPoint, | ||
| getBlockOrder, | ||
| isBlockInsertionPointVisible, | ||
| getSectionRootClientId, | ||
| } = unlock( select( blockEditorStore ) ); | ||
|
|
||
| const root = getSectionRootClientId(); | ||
| const sectionRootClientIds = getBlockOrder( root ); | ||
| return { | ||
| sectionRootClientId: root, | ||
| sectionClientIds: sectionRootClientIds, | ||
| blockOrder: getBlockOrder( root ), | ||
| blockInsertionPoint: getBlockInsertionPoint(), | ||
| blockInsertionPointVisible: isBlockInsertionPointVisible(), | ||
| }; | ||
| }, [] ); | ||
|
|
||
| const isReducedMotion = useReducedMotion(); | ||
|
|
||
| if ( ! clientId ) { | ||
| return; | ||
| } | ||
|
|
||
| let isVisible = false; | ||
|
|
||
| const isSectionBlock = | ||
| rootClientId === sectionRootClientId && | ||
| sectionClientIds && | ||
| sectionClientIds.includes( clientId ); | ||
|
|
||
| if ( ! isSectionBlock ) { | ||
| return null; | ||
| } | ||
|
|
||
| if ( position === 'top' ) { | ||
| isVisible = | ||
| blockInsertionPointVisible && | ||
| blockInsertionPoint.index === 0 && | ||
| clientId === sectionClientIds[ blockInsertionPoint.index ]; | ||
| } | ||
|
|
||
| if ( position === 'bottom' ) { | ||
| isVisible = | ||
| blockInsertionPointVisible && | ||
| clientId === sectionClientIds[ blockInsertionPoint.index - 1 ]; | ||
| } | ||
|
|
||
| return ( | ||
| <AnimatePresence> | ||
| { isVisible && ( | ||
| <motion.div | ||
| as="button" | ||
| layout={ ! isReducedMotion } | ||
| initial={ { height: 0 } } | ||
| animate={ { height: '120px' } } | ||
| exit={ { height: 0 } } | ||
| transition={ { | ||
| type: 'tween', | ||
| duration: 0.2, | ||
| ease: [ 0.6, 0, 0.4, 1 ], | ||
| } } | ||
| className={ clsx( | ||
| 'block-editor-block-list__zoom-out-separator', | ||
| { | ||
| 'is-dragged-over': isDraggedOver, | ||
| } | ||
| ) } | ||
| data-is-insertion-point="true" | ||
| onDragOver={ () => setIsDraggedOver( true ) } | ||
| onDragLeave={ () => setIsDraggedOver( false ) } | ||
| ></motion.div> | ||
| ) } | ||
| </AnimatePresence> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters