-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Only animate the blocks that changed index (#17573)
- Loading branch information
1 parent
0c9adfb
commit 41228ed
Showing
5 changed files
with
48 additions
and
89 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
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
84 changes: 6 additions & 78 deletions
84
packages/block-editor/src/components/preserve-scroll-in-reorder/index.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 |
|---|---|---|
| @@ -1,83 +1,11 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Component } from '@wordpress/element'; | ||
| import { withSelect } from '@wordpress/data'; | ||
| import { getScrollContainer } from '@wordpress/dom'; | ||
| import deprecated from '@wordpress/deprecated'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { getBlockDOMNode } from '../../utils/dom'; | ||
|
|
||
| /** | ||
| * Non-visual component which preserves offset of selected block within nearest | ||
| * scrollable container while reordering. | ||
| * | ||
| * @example | ||
| * | ||
| * ```jsx | ||
| * <PreserveScrollInReorder /> | ||
| * ``` | ||
| */ | ||
| class PreserveScrollInReorder extends Component { | ||
| getSnapshotBeforeUpdate( prevProps ) { | ||
| const { blockOrder, selectionStart } = this.props; | ||
| if ( blockOrder !== prevProps.blockOrder && selectionStart ) { | ||
| return this.getOffset( selectionStart ); | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| componentDidUpdate( prevProps, prevState, snapshot ) { | ||
| if ( snapshot ) { | ||
| this.restorePreviousOffset( snapshot ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Given the block client ID of the start of the selection, saves the | ||
| * block's top offset as an instance property before a reorder is to occur. | ||
| * | ||
| * @param {string} selectionStart Client ID of selected block. | ||
| * | ||
| * @return {number?} The scroll offset. | ||
| */ | ||
| getOffset( selectionStart ) { | ||
| const blockNode = getBlockDOMNode( selectionStart ); | ||
| if ( ! blockNode ) { | ||
| return null; | ||
| } | ||
|
|
||
| return blockNode.getBoundingClientRect().top; | ||
| } | ||
|
|
||
| /** | ||
| * After a block reordering, restores the previous viewport top offset. | ||
| * | ||
| * @param {number} offset The scroll offset. | ||
| */ | ||
| restorePreviousOffset( offset ) { | ||
| const { selectionStart } = this.props; | ||
| const blockNode = getBlockDOMNode( selectionStart ); | ||
| if ( blockNode ) { | ||
| const scrollContainer = getScrollContainer( blockNode ); | ||
| if ( scrollContainer ) { | ||
| scrollContainer.scrollTop = scrollContainer.scrollTop + | ||
| blockNode.getBoundingClientRect().top - offset; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return null; | ||
| } | ||
| export default function PreserveScrollInReorder() { | ||
| deprecated( 'PreserveScrollInReorder component', { | ||
| hint: 'This behavior is now built-in the block list', | ||
| } ); | ||
| return null; | ||
| } | ||
|
|
||
| export default withSelect( ( select ) => { | ||
| return { | ||
| blockOrder: select( 'core/block-editor' ).getBlockOrder(), | ||
| selectionStart: select( 'core/block-editor' ).getBlockSelectionStart(), | ||
| }; | ||
| } )( PreserveScrollInReorder ); |
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