From b944428f3705c8470bb829cd7ba9bf8b059f791e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 30 Sep 2022 15:58:38 +0800 Subject: [PATCH 1/2] Try to improve the performance of rendering 1000 empty paragraphs --- .../block-library/src/paragraph/drop-zone.js | 76 ++++++------------- packages/block-library/src/paragraph/edit.js | 32 ++++++-- .../block-library/src/paragraph/editor.scss | 6 -- 3 files changed, 48 insertions(+), 66 deletions(-) diff --git a/packages/block-library/src/paragraph/drop-zone.js b/packages/block-library/src/paragraph/drop-zone.js index e51fb84acf8062..b3f374dfeba533 100644 --- a/packages/block-library/src/paragraph/drop-zone.js +++ b/packages/block-library/src/paragraph/drop-zone.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { __experimentalUseOnBlockDrop as useOnBlockDrop, @@ -11,11 +10,7 @@ import { __experimentalUseDropZone as useDropZone, useReducedMotion, } from '@wordpress/compose'; -import { - Popover, - __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, -} from '@wordpress/components'; +import { Popover, __unstableMotion as motion } from '@wordpress/components'; const animateVariants = { hide: { opacity: 0, scaleY: 0.75 }, @@ -23,7 +18,11 @@ const animateVariants = { exit: { opacity: 0, scaleY: 0.9 }, }; -export default function DropZone( { paragraphElement, clientId } ) { +export default function DropZone( { + paragraphElement, + clientId, + setIsDropZoneVisible, +} ) { const { rootClientId, blockIndex } = useSelect( ( select ) => { const selectors = select( blockEditorStore ); @@ -37,23 +36,10 @@ export default function DropZone( { paragraphElement, clientId } ) { const onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, { action: 'replace', } ); - const [ isDragging, setIsDragging ] = useState( false ); - const [ isVisible, setIsVisible ] = useState( false ); - const popoverRef = useDropZone( { - onDragStart: () => { - setIsDragging( true ); - }, - onDragEnd: () => { - setIsDragging( false ); - }, - } ); const dropZoneRef = useDropZone( { onDrop: onBlockDrop, - onDragEnter: () => { - setIsVisible( true ); - }, onDragLeave: () => { - setIsVisible( false ); + setIsDropZoneVisible( false ); }, } ); const reducedMotion = useReducedMotion(); @@ -67,39 +53,23 @@ export default function DropZone( { paragraphElement, clientId } ) { flip={ false } resize={ false } className="wp-block-paragraph__drop-zone" - ref={ popoverRef } > - { isDragging ? ( -
- - { isVisible ? ( - - ) : null } - -
- ) : null } + ); } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index c049b0b72bd249..b94207a5b54805 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -12,6 +12,7 @@ import { ToolbarButton, ToggleControl, __experimentalToolsPanelItem as ToolsPanelItem, + __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; import { AlignmentControl, @@ -21,7 +22,10 @@ import { useBlockProps, useSetting, } from '@wordpress/block-editor'; -import { useMergeRefs } from '@wordpress/compose'; +import { + useMergeRefs, + __experimentalUseDropZone as useDropZone, +} from '@wordpress/compose'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; @@ -63,10 +67,20 @@ function ParagraphBlock( { const { align, content, direction, dropCap, placeholder } = attributes; const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' ); const [ paragraphElement, setParagraphElement ] = useState( null ); + const [ isDropZoneVisible, setIsDropZoneVisible ] = useState( false ); + const dragEventsRef = useDropZone( { + onDragEnd() { + setIsDropZoneVisible( false ); + }, + onDragEnter() { + setIsDropZoneVisible( true ); + }, + } ); const blockProps = useBlockProps( { ref: useMergeRefs( [ useOnEnter( { clientId, content } ), setParagraphElement, + dragEventsRef, ] ), className: classnames( { 'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap, @@ -130,12 +144,16 @@ function ParagraphBlock( { ) } - { ! content && ( - - ) } + + { ! content && isDropZoneVisible && ( + + ) } + Date: Fri, 30 Sep 2022 16:20:43 +0800 Subject: [PATCH 2/2] Try a different approach to always call useOnBlockProps --- .../block-library/src/paragraph/drop-zone.js | 36 ++----------------- packages/block-library/src/paragraph/edit.js | 25 ++++++++++--- .../block-library/src/paragraph/editor.scss | 1 + 3 files changed, 23 insertions(+), 39 deletions(-) diff --git a/packages/block-library/src/paragraph/drop-zone.js b/packages/block-library/src/paragraph/drop-zone.js index b3f374dfeba533..36564ee5cb74bb 100644 --- a/packages/block-library/src/paragraph/drop-zone.js +++ b/packages/block-library/src/paragraph/drop-zone.js @@ -1,15 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; -import { - __experimentalUseOnBlockDrop as useOnBlockDrop, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { - __experimentalUseDropZone as useDropZone, - useReducedMotion, -} from '@wordpress/compose'; +import { useReducedMotion } from '@wordpress/compose'; import { Popover, __unstableMotion as motion } from '@wordpress/components'; const animateVariants = { @@ -18,30 +10,7 @@ const animateVariants = { exit: { opacity: 0, scaleY: 0.9 }, }; -export default function DropZone( { - paragraphElement, - clientId, - setIsDropZoneVisible, -} ) { - const { rootClientId, blockIndex } = useSelect( - ( select ) => { - const selectors = select( blockEditorStore ); - return { - rootClientId: selectors.getBlockRootClientId( clientId ), - blockIndex: selectors.getBlockIndex( clientId ), - }; - }, - [ clientId ] - ); - const onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, { - action: 'replace', - } ); - const dropZoneRef = useDropZone( { - onDrop: onBlockDrop, - onDragLeave: () => { - setIsDropZoneVisible( false ); - }, - } ); +export default function DropZone( { paragraphElement } ) { const reducedMotion = useReducedMotion(); return ( @@ -55,7 +24,6 @@ export default function DropZone( { className="wp-block-paragraph__drop-zone" > { + const selectors = select( blockEditorStore ); + return { + rootClientId: selectors.getBlockRootClientId( clientId ), + blockIndex: selectors.getBlockIndex( clientId ), + }; }, + [ clientId ] + ); + const onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, { + action: 'replace', + } ); + const dragEventsRef = useDropZone( { + onDrop: onBlockDrop, onDragEnter() { setIsDropZoneVisible( true ); }, + onDragLeave() { + setIsDropZoneVisible( false ); + }, } ); const blockProps = useBlockProps( { ref: useMergeRefs( [ @@ -148,9 +165,7 @@ function ParagraphBlock( { { ! content && isDropZoneVisible && ( ) } diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss index 66448f15513192..1fc0fa06e88303 100644 --- a/packages/block-library/src/paragraph/editor.scss +++ b/packages/block-library/src/paragraph/editor.scss @@ -28,6 +28,7 @@ .wp-block-paragraph__drop-zone-foreground { position: absolute; background-color: var(--wp-admin-theme-color); + pointer-events: none; border-radius: 2px; } }