Skip to content

ToolsPanel: Memoize callbacks and context to prevent unnecessary rerenders #38037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaronrobertshaw merged 5 commits into from
Jan 21, 2022
Merged

ToolsPanel: Memoize callbacks and context to prevent unnecessary rerenders #38037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1abb6b6
Prevent BlockSupportToolsPanel resetAll triggering rerenders
aaronrobertshaw Jan 17, 2022
f88afe0
Add memoization to ToolsPanel callbacks and context
aaronrobertshaw Jan 18, 2022
fd38f4d
Add changelog
aaronrobertshaw Jan 18, 2022
da253ea
Make hook dependency arrays exhaustive
aaronrobertshaw Jan 18, 2022
3e1585c
Update BlockSupportToolsPanel hook dependencies
aaronrobertshaw Jan 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 39 additions & 58 deletions packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -11,74 +12,54 @@ import { store as blockEditorStore } from '../../store';
import { cleanEmptyObject } from '../../hooks/utils';

export default function BlockSupportToolsPanel( { children, group, label } ) {
const { attributes, clientIds, panelId } = useSelect( ( select ) => {
const {
getBlockAttributes,
getMultiSelectedBlockClientIds,
getSelectedBlockClientId,
hasMultiSelection,
} = select( blockEditorStore );

// When we currently have a multi-selection, the value returned from
// `getSelectedBlockClientId()` is `null`. When a `null` value is used
// for the `panelId`, a `ToolsPanel` will still allow panel items to
// register themselves despite their panelIds not matching.
const selectedBlockClientId = getSelectedBlockClientId();

if ( hasMultiSelection() ) {
const selectedBlockClientIds = getMultiSelectedBlockClientIds();
const selectedBlockAttributes = selectedBlockClientIds.reduce(
( blockAttributes, blockId ) => {
blockAttributes[ blockId ] = getBlockAttributes( blockId );
return blockAttributes;
},
{}
);
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const {
getBlockAttributes,
getMultiSelectedBlockClientIds,
getSelectedBlockClientId,
hasMultiSelection,
} = useSelect( blockEditorStore );

return {
panelId: selectedBlockClientId,
clientIds: selectedBlockClientIds,
attributes: selectedBlockAttributes,
};
}
const panelId = getSelectedBlockClientId();
const resetAll = useCallback(
( resetFilters = [] ) => {
const newAttributes = {};

return {
panelId: selectedBlockClientId,
clientIds: [ selectedBlockClientId ],
attributes: {
[ selectedBlockClientId ]: getBlockAttributes(
selectedBlockClientId
),
},
};
}, [] );
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const clientIds = hasMultiSelection()
? getMultiSelectedBlockClientIds()
: [ panelId ];

const resetAll = ( resetFilters = [] ) => {
const newAttributes = {};
clientIds.forEach( ( clientId ) => {
const { style } = getBlockAttributes( clientId );
let newBlockAttributes = { style };

clientIds.forEach( ( clientId ) => {
const { style } = attributes[ clientId ];
let newBlockAttributes = { style };
resetFilters.forEach( ( resetFilter ) => {
newBlockAttributes = {
...newBlockAttributes,
...resetFilter( newBlockAttributes ),
};
} );

resetFilters.forEach( ( resetFilter ) => {
// Enforce a cleaned style object.
newBlockAttributes = {
...newBlockAttributes,
...resetFilter( newBlockAttributes ),
style: cleanEmptyObject( newBlockAttributes.style ),
};
} );

// Enforce a cleaned style object.
newBlockAttributes = {
...newBlockAttributes,
style: cleanEmptyObject( newBlockAttributes.style ),
};

newAttributes[ clientId ] = newBlockAttributes;
} );
newAttributes[ clientId ] = newBlockAttributes;
} );

updateBlockAttributes( clientIds, newAttributes, true );
};
updateBlockAttributes( clientIds, newAttributes, true );
},
[
cleanEmptyObject,
getBlockAttributes,
getMultiSelectedBlockClientIds,
hasMultiSelection,
panelId,
updateBlockAttributes,
]
);

return (
<ToolsPanel
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
- Add missing styles to the `BaseControl.VisualLabel` component. ([#37747](https://github.com/WordPress/gutenberg/pull/37747))
- Prevent keyDown events from propagating up in `CustomSelectControl` ([#30557](https://github.com/WordPress/gutenberg/pull/30557))
- Mark `children` prop as optional in `SelectControl` ([#37872](https://github.com/WordPress/gutenberg/pull/37872))
- Add memoization of callbacks and context to prevent unnecessary rerenders of the `ToolsPanel` ([#38037](https://github.com/WordPress/gutenberg/pull/38037))

## 19.2.0 (2022-01-04)

Expand Down
Loading