From b62b6f4f9260979a80d3d31a10ebb306fba82aa5 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Wed, 2 Jun 2021 08:53:24 -0700 Subject: [PATCH 1/2] Header toolbar: useCallback to avoid unnecessary rerenders --- .../components/header/header-toolbar/index.js | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) 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 223ca61be67d1a..13a0e158a196a3 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 } from '@wordpress/element'; +import { useRef, useCallback } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** @@ -26,6 +26,9 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import TemplateTitle from '../template-title'; import { store as editPostStore } from '../../../store'; +const preventDefault = ( event ) => { + event.preventDefault(); +}; function HeaderToolbar() { const inserterButton = useRef(); const { setIsInserterOpened, setIsListViewOpened } = useDispatch( @@ -73,6 +76,10 @@ function HeaderToolbar() { /* translators: accessibility text for the editor toolbar */ const toolbarAriaLabel = __( 'Document tools' ); + const toggleListView = useCallback( + () => setIsListViewOpened( ! isListViewOpen ), + [ setIsListViewOpened, isListViewOpen ] + ); const overflowItems = ( <> setIsListViewOpened( ! isListViewOpen ) } + onClick={ toggleListView } shortcut={ listViewShortcut } showTooltip={ ! showIconLabels } /> ); - + const openInserter = useCallback( () => { + if ( isInserterOpened ) { + // Focusing the inserter button closes the inserter popover + inserterButton.current.focus(); + } else { + setIsInserterOpened( true ); + } + }, [ isInserterOpened, setIsInserterOpened ] ); return ( { - event.preventDefault(); - } } - onClick={ () => { - if ( isInserterOpened ) { - // Focusing the inserter button closes the inserter popover - inserterButton.current.focus(); - } else { - setIsInserterOpened( true ); - } - } } + onMouseDown={ preventDefault } + onClick={ openInserter } disabled={ ! isInserterEnabled } icon={ plus } /* translators: button label text should, if possible, be under 16 From a22ab634db1d6ae4d8a90506262afdab1e15264b Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Wed, 2 Jun 2021 10:15:02 -0700 Subject: [PATCH 2/2] Header toolbar: useCallback to avoid unnecessary rerenders in site editor --- .../components/header/header-toolbar/index.js | 1 + .../edit-site/src/components/header/index.js | 37 +++++++++++-------- 2 files changed, 23 insertions(+), 15 deletions(-) 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 13a0e158a196a3..f3e16a6f2b398d 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -29,6 +29,7 @@ import { store as editPostStore } from '../../../store'; const preventDefault = ( event ) => { event.preventDefault(); }; + function HeaderToolbar() { const inserterButton = useRef(); const { setIsInserterOpened, setIsListViewOpened } = useDispatch( diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 2a29478b29c81d..2d03cf3e5776ec 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +import { useCallback, useRef } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; import { ToolSelector, @@ -27,6 +27,10 @@ import DocumentActions from './document-actions'; import TemplateDetails from '../template-details'; import { store as editSiteStore } from '../../store'; +const preventDefault = ( event ) => { + event.preventDefault(); +}; + export default function Header( { openEntitiesSavedStates, isEntitiesSavedStatesOpen, @@ -86,6 +90,20 @@ export default function Header( { const isLargeViewport = useViewportMatch( 'medium' ); + const openInserter = useCallback( () => { + if ( isInserterOpen ) { + // Focusing the inserter button closes the inserter popover + inserterButton.current.focus(); + } else { + setIsInserterOpened( true ); + } + }, [ isInserterOpen, setIsInserterOpened ] ); + + const toggleListView = useCallback( + () => setIsListViewOpened( ! isListViewOpen ), + [ setIsListViewOpened, isListViewOpen ] + ); + return (
@@ -95,17 +113,8 @@ export default function Header( { variant="primary" isPressed={ isInserterOpen } className="edit-site-header-toolbar__inserter-toggle" - onMouseDown={ ( event ) => { - event.preventDefault(); - } } - onClick={ () => { - if ( isInserterOpen ) { - // Focusing the inserter button closes the inserter popover - inserterButton.current.focus(); - } else { - setIsInserterOpened( true ); - } - } } + onMouseDown={ preventDefault } + onClick={ openInserter } icon={ plus } label={ _x( 'Toggle block inserter', @@ -123,9 +132,7 @@ export default function Header( { isPressed={ isListViewOpen } /* translators: button label text should, if possible, be under 16 characters. */ label={ __( 'List View' ) } - onClick={ () => - setIsListViewOpened( ! isListViewOpen ) - } + onClick={ toggleListView } shortcut={ listViewShortcut } />