Skip to content

Commit

Permalink
Header toolbar: useCallback to avoid unnecessary rerenders (#32406)
Browse files Browse the repository at this point in the history
  • Loading branch information
gwwar authored Jun 3, 2021
1 parent 6da0390 commit 979fb04
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 29 deletions.
34 changes: 20 additions & 14 deletions packages/edit-post/src/components/header/header-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -26,6 +26,10 @@ 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(
Expand Down Expand Up @@ -73,6 +77,10 @@ function HeaderToolbar() {
/* translators: accessibility text for the editor toolbar */
const toolbarAriaLabel = __( 'Document tools' );

const toggleListView = useCallback(
() => setIsListViewOpened( ! isListViewOpen ),
[ setIsListViewOpened, isListViewOpen ]
);
const overflowItems = (
<>
<ToolbarItem
Expand All @@ -90,13 +98,20 @@ function HeaderToolbar() {
isPressed={ isListViewOpen }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'List View' ) }
onClick={ () => 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 (
<NavigableToolbar
className="edit-post-header-toolbar"
Expand All @@ -109,17 +124,8 @@ function HeaderToolbar() {
className="edit-post-header-toolbar__inserter-toggle"
variant="primary"
isPressed={ isInserterOpened }
onMouseDown={ ( event ) => {
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
Expand Down
37 changes: 22 additions & 15 deletions packages/edit-site/src/components/header/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { useRef } from '@wordpress/element';
import { useCallback, useRef } from '@wordpress/element';
import { useViewportMatch } from '@wordpress/compose';
import {
ToolSelector,
Expand All @@ -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,
Expand Down Expand Up @@ -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 (
<div className="edit-site-header">
<div className="edit-site-header_start">
Expand All @@ -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',
Expand All @@ -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 }
/>
</>
Expand Down

0 comments on commit 979fb04

Please sign in to comment.