From 69143d368434348171cdedd5d931d53cc444d03c Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Fri, 4 Jun 2021 13:30:40 -0700 Subject: [PATCH 1/7] Try memoing BlockListItems to avoid rerenders --- packages/block-editor/src/components/block-list/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 46e5d56f9f031..bfd690ca4287b 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { AsyncModeProvider, useSelect } from '@wordpress/data'; import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; -import { createContext, useState, useMemo } from '@wordpress/element'; +import { createContext, useState, useMemo, memo } from '@wordpress/element'; /** * Internal dependencies @@ -144,7 +144,7 @@ function Items( { ); } -export function BlockListItems( props ) { +function _BlockListItems( props ) { // This component needs to always be synchronous as it's the one changing // the async mode depending on the block selection. return ( @@ -153,3 +153,5 @@ export function BlockListItems( props ) { ); } + +export const BlockListItems = memo( _BlockListItems ); From 97ad1d129bede1be8a440202c06dd0762b043cc9 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Fri, 4 Jun 2021 14:32:22 -0700 Subject: [PATCH 2/7] Memo hotspots with persistent list view and sidebar options closed --- .../src/components/block-breadcrumb/index.js | 8 +++++++- .../src/components/block-switcher/index.js | 3 ++- .../src/components/block-tools/block-popover.js | 12 ++++++++++-- .../edit-post/src/components/device-preview/index.js | 5 ++++- .../components/header/fullscreen-mode-close/index.js | 3 ++- .../src/components/header/header-toolbar/index.js | 4 ++-- .../src/components/header/more-menu/index.js | 3 ++- .../editor/src/components/post-saved-state/index.js | 5 +++-- packages/editor/src/components/post-title/index.js | 5 +++-- .../components/complementary-area-toggle/index.js | 3 ++- 10 files changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index bc88e370ce4a1..617fdc368768d 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -4,6 +4,7 @@ import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { memo } from '@wordpress/element'; /** * Internal dependencies @@ -89,4 +90,9 @@ function BlockBreadcrumb( { rootLabelText } ) { ); } -export default BlockBreadcrumb; +/** + * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb. + * + * @return {WPElement} Block Breadcrumb. + */ +export default memo( BlockBreadcrumb ); diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 7c580817f8370..146f2d0dfe8e5 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -21,6 +21,7 @@ import { } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { stack } from '@wordpress/icons'; +import { memo } from '@wordpress/element'; /** * Internal dependencies @@ -227,4 +228,4 @@ export const BlockSwitcher = ( { clientIds } ) => { ); }; -export default BlockSwitcher; +export default memo( BlockSwitcher ); diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js index 8371cfff9bbba..2fc7552f64c2d 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/packages/block-editor/src/components/block-tools/block-popover.js @@ -7,7 +7,13 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, useCallback, useRef, useEffect } from '@wordpress/element'; +import { + useState, + useCallback, + useRef, + useEffect, + memo, +} from '@wordpress/element'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { Popover } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -321,7 +327,7 @@ function wrapperSelector( select ) { }; } -export default function WrappedBlockPopover( { +function WrappedBlockPopover( { __unstablePopoverSlot, __unstableContentRef, } ) { @@ -356,3 +362,5 @@ export default function WrappedBlockPopover( { /> ); } + +export default memo( WrappedBlockPopover ); diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js index f1744e86e242b..78d1cf8a7e13b 100644 --- a/packages/edit-post/src/components/device-preview/index.js +++ b/packages/edit-post/src/components/device-preview/index.js @@ -7,13 +7,14 @@ import { external } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; +import { memo } from '@wordpress/element'; /** * Internal dependencies */ import { store as editPostStore } from '../../store'; -export default function DevicePreview() { +export function DevicePreview() { const { hasActiveMetaboxes, isPostSaveable, @@ -62,3 +63,5 @@ export default function DevicePreview() { ); } + +export default memo( DevicePreview ); diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js index 5f63c8108af57..a3d6bc0cc86d6 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js @@ -13,6 +13,7 @@ import { addQueryArgs } from '@wordpress/url'; import { wordpress } from '@wordpress/icons'; import { store as editorStore } from '@wordpress/editor'; import { store as coreStore } from '@wordpress/core-data'; +import { memo } from '@wordpress/element'; /** * Internal dependencies @@ -85,4 +86,4 @@ function FullscreenModeClose( { showTooltip, icon, href } ) { ); } -export default FullscreenModeClose; +export default memo( FullscreenModeClose ); diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index f3e16a6f2b398..5ca8a079da804 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -17,7 +17,7 @@ import { } from '@wordpress/editor'; import { Button, ToolbarItem } from '@wordpress/components'; import { listView, plus } from '@wordpress/icons'; -import { useRef, useCallback } from '@wordpress/element'; +import { useRef, useCallback, memo } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** @@ -170,4 +170,4 @@ function HeaderToolbar() { ); } -export default HeaderToolbar; +export default memo( HeaderToolbar ); diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index 17b763b26f374..c6e0d16aafbc5 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/header/more-menu/index.js @@ -6,6 +6,7 @@ import { DropdownMenu, MenuGroup } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { ActionItem, PinnedItems } from '@wordpress/interface'; import { useViewportMatch } from '@wordpress/compose'; +import { memo } from '@wordpress/element'; /** * Internal dependencies @@ -65,4 +66,4 @@ const MoreMenu = ( { showIconLabels } ) => { ); }; -export default MoreMenu; +export default memo( MoreMenu ); diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js index a6e2bca9e5bbb..7d58a69cc9214 100644 --- a/packages/editor/src/components/post-saved-state/index.js +++ b/packages/editor/src/components/post-saved-state/index.js @@ -12,7 +12,7 @@ import { } from '@wordpress/components'; import { usePrevious, useViewportMatch } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useState, memo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Icon, check, cloud, cloudUpload } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; @@ -35,7 +35,7 @@ import { store as editorStore } from '../../store'; * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons * @return {import('@wordpress/element').WPComponent} The component. */ -export default function PostSavedState( { +export function PostSavedState( { forceIsDirty, forceIsSaving, showIconLabels = false, @@ -176,3 +176,4 @@ export default function PostSavedState( { ); } +export default memo( PostSavedState ); diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 374af843f8a3f..e2121fc01fd0c 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useEffect, useRef, useState } from '@wordpress/element'; +import { useEffect, useRef, useState, memo } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; import { ENTER } from '@wordpress/keycodes'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -28,7 +28,7 @@ import { store as editorStore } from '../../store'; */ const REGEXP_NEWLINES = /[\r\n]+/g; -export default function PostTitle() { +function PostTitle() { const instanceId = useInstanceId( PostTitle ); const ref = useRef(); const [ isSelected, setIsSelected ] = useState( false ); @@ -202,3 +202,4 @@ export default function PostTitle() { ); } +export default memo( PostTitle ); diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index a4ba7e095d43b..32dae4a61991f 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/packages/interface/src/components/complementary-area-toggle/index.js @@ -8,6 +8,7 @@ import { omit } from 'lodash'; */ import { Button } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; +import { memo } from '@wordpress/element'; /** * Internal dependencies @@ -48,4 +49,4 @@ function ComplementaryAreaToggle( { ); } -export default complementaryAreaContext( ComplementaryAreaToggle ); +export default memo( complementaryAreaContext( ComplementaryAreaToggle ) ); From c052d4975c99f38902443cc25f0a034d3c483de1 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Fri, 4 Jun 2021 20:31:35 -0700 Subject: [PATCH 3/7] Update snapshot for more menu --- .../header/more-menu/test/__snapshots__/index.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap index 9ffdb5a699ff0..6ae50b8c62bc0 100644 --- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MoreMenu should match snapshot 1`] = ` - + - + `; From 031f34afea81eb6e8a5b0f5c88e92e6f45650fa8 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Fri, 4 Jun 2021 21:08:22 -0700 Subject: [PATCH 4/7] useMemo on style for useBlockProps to avoid updating each time. add useCallback on paragraph handlers --- .../block-list/use-block-props/index.js | 9 ++- packages/block-library/src/paragraph/edit.js | 80 +++++++++++-------- 2 files changed, 54 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index b7449439e7234..2f0173d6c2994 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useContext } from '@wordpress/element'; +import { useContext, useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { __unstableGetBlockProps as getBlockProps, @@ -128,6 +128,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { } ), ] ); + const updatedStyle = { ...wrapperProps.style, ...props.style }; + const style = useMemo( () => updatedStyle, [ + JSON.stringify( updatedStyle ), + ] ); + return { ...wrapperProps, ...props, @@ -152,7 +157,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { useBlockCustomClassName( clientId ), useBlockMovingModeClassNames( clientId ) ), - style: { ...wrapperProps.style, ...props.style }, + style, }; } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index e88bfc3c72117..804e9af1d5a68 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -22,6 +22,7 @@ import { } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; +import { useCallback } from '@wordpress/element'; const name = 'core/paragraph'; @@ -64,20 +65,54 @@ function ParagraphBlock( { style: { direction }, } ); + const updateContent = useCallback( + ( newContent ) => setAttributes( { content: newContent } ), + [ setAttributes ] + ); + + const splitParagraph = useCallback( + ( value, isOriginal ) => { + let newAttributes; + + if ( isOriginal || value ) { + newAttributes = { + ...attributes, + content: value, + }; + } + + const block = createBlock( name, newAttributes ); + + if ( isOriginal ) { + block.clientId = clientId; + } + + return block; + }, + [ attributes, createBlock ] + ); + + const updateAlign = useCallback( ( newAlign ) => + setAttributes( { align: newAlign }, [ setAttributes ] ) + ); + + const setDirection = useCallback( + ( newDirection ) => setAttributes( { direction: newDirection } ), + [] + ); + + const setDropCap = useCallback( + () => setAttributes( { dropCap: ! dropCap } ), + [ setAttributes ] + ); + return ( <> - - setAttributes( { align: newAlign } ) - } - /> + - setAttributes( { direction: newDirection } ) - } + setDirection={ setDirection } /> { isDropCapFeatureEnabled && ( @@ -86,9 +121,7 @@ function ParagraphBlock( { - setAttributes( { dropCap: ! dropCap } ) - } + onChange={ setDropCap } help={ dropCap ? __( 'Showing large initial letter.' ) @@ -105,27 +138,8 @@ function ParagraphBlock( { tagName="p" { ...blockProps } value={ content } - onChange={ ( newContent ) => - setAttributes( { content: newContent } ) - } - onSplit={ ( value, isOriginal ) => { - let newAttributes; - - if ( isOriginal || value ) { - newAttributes = { - ...attributes, - content: value, - }; - } - - const block = createBlock( name, newAttributes ); - - if ( isOriginal ) { - block.clientId = clientId; - } - - return block; - } } + onChange={ updateContent } + onSplit={ splitParagraph } onMerge={ mergeBlocks } onReplace={ onReplace } onRemove={ onRemove } From 3c63f19e0f6fd2744164b1b89f6122375734df09 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Mon, 7 Jun 2021 10:12:30 -0700 Subject: [PATCH 5/7] Temporarily add a lot of buttons to the performance test post --- packages/e2e-tests/assets/large-post.html | 314 ++++++++++++++++++++++ 1 file changed, 314 insertions(+) diff --git a/packages/e2e-tests/assets/large-post.html b/packages/e2e-tests/assets/large-post.html index 16a314c5ba60f..108521648e0cc 100644 --- a/packages/e2e-tests/assets/large-post.html +++ b/packages/e2e-tests/assets/large-post.html @@ -2,6 +2,320 @@

At iam decimum annum in spelunca iacet.

+ +
+
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+ + + +
Foo
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit enim idem caecus, debilis. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Quis non odit sordidos, vanos, leves, futtiles? Age sane, inquam. Duo Reges: constructio interrete. Nam ante Aristippus, et ille melius. Sed quamvis comis in amicis tuendis fuerit, tamen, si haec vera sunt-nihil enim affirmo-, non satis acutus fuit.

From a02c86a8cbc58c393032dab1dd83731d4d27b595 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Mon, 7 Jun 2021 10:52:32 -0700 Subject: [PATCH 6/7] remove buttons from test post --- packages/e2e-tests/assets/large-post.html | 314 ---------------------- 1 file changed, 314 deletions(-) diff --git a/packages/e2e-tests/assets/large-post.html b/packages/e2e-tests/assets/large-post.html index 108521648e0cc..16a314c5ba60f 100644 --- a/packages/e2e-tests/assets/large-post.html +++ b/packages/e2e-tests/assets/large-post.html @@ -2,320 +2,6 @@

At iam decimum annum in spelunca iacet.

- -
-
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
- - - -
Foo
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit enim idem caecus, debilis. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Quis non odit sordidos, vanos, leves, futtiles? Age sane, inquam. Duo Reges: constructio interrete. Nam ante Aristippus, et ille melius. Sed quamvis comis in amicis tuendis fuerit, tamen, si haec vera sunt-nihil enim affirmo-, non satis acutus fuit.

From fa34895f6925f28100dcf8661488d1bc214897e2 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Tue, 8 Jun 2021 11:03:42 -0700 Subject: [PATCH 7/7] rollback useBlockProp and paragraph edit changes --- .../block-list/use-block-props/index.js | 9 +-- packages/block-library/src/paragraph/edit.js | 80 ++++++++----------- 2 files changed, 35 insertions(+), 54 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 2f0173d6c2994..b7449439e7234 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useContext, useMemo } from '@wordpress/element'; +import { useContext } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { __unstableGetBlockProps as getBlockProps, @@ -128,11 +128,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { } ), ] ); - const updatedStyle = { ...wrapperProps.style, ...props.style }; - const style = useMemo( () => updatedStyle, [ - JSON.stringify( updatedStyle ), - ] ); - return { ...wrapperProps, ...props, @@ -157,7 +152,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { useBlockCustomClassName( clientId ), useBlockMovingModeClassNames( clientId ) ), - style, + style: { ...wrapperProps.style, ...props.style }, }; } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 804e9af1d5a68..e88bfc3c72117 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -22,7 +22,6 @@ import { } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; -import { useCallback } from '@wordpress/element'; const name = 'core/paragraph'; @@ -65,54 +64,20 @@ function ParagraphBlock( { style: { direction }, } ); - const updateContent = useCallback( - ( newContent ) => setAttributes( { content: newContent } ), - [ setAttributes ] - ); - - const splitParagraph = useCallback( - ( value, isOriginal ) => { - let newAttributes; - - if ( isOriginal || value ) { - newAttributes = { - ...attributes, - content: value, - }; - } - - const block = createBlock( name, newAttributes ); - - if ( isOriginal ) { - block.clientId = clientId; - } - - return block; - }, - [ attributes, createBlock ] - ); - - const updateAlign = useCallback( ( newAlign ) => - setAttributes( { align: newAlign }, [ setAttributes ] ) - ); - - const setDirection = useCallback( - ( newDirection ) => setAttributes( { direction: newDirection } ), - [] - ); - - const setDropCap = useCallback( - () => setAttributes( { dropCap: ! dropCap } ), - [ setAttributes ] - ); - return ( <> - + + setAttributes( { align: newAlign } ) + } + /> + setAttributes( { direction: newDirection } ) + } /> { isDropCapFeatureEnabled && ( @@ -121,7 +86,9 @@ function ParagraphBlock( { + setAttributes( { dropCap: ! dropCap } ) + } help={ dropCap ? __( 'Showing large initial letter.' ) @@ -138,8 +105,27 @@ function ParagraphBlock( { tagName="p" { ...blockProps } value={ content } - onChange={ updateContent } - onSplit={ splitParagraph } + onChange={ ( newContent ) => + setAttributes( { content: newContent } ) + } + onSplit={ ( value, isOriginal ) => { + let newAttributes; + + if ( isOriginal || value ) { + newAttributes = { + ...attributes, + content: value, + }; + } + + const block = createBlock( name, newAttributes ); + + if ( isOriginal ) { + block.clientId = clientId; + } + + return block; + } } onMerge={ mergeBlocks } onReplace={ onReplace } onRemove={ onRemove }