Block editor: make all BlockEdit hooks pure

packages/block-editor/src/hooks/align.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -108,9 +108,9 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAlignmentToolbarControls( {
+function BlockEditAlignmentToolbarControlsPure( {
 	blockName,
-	attributes,
+	align,
 	setAttributes,
 } ) {
 	// Compute the block valid alignments by taking into account,
@@ -144,14 +144,21 @@ function BlockEditAlignmentToolbarControls( {
 	return (
 		<BlockControls group="block" __experimentalShareWithChildBlocks>
 			<BlockAlignmentControl
-				value={ attributes.align }
+				value={ align }
 				onChange={ updateAlignment }
 				controls={ validAlignments }
 			/>
 		</BlockControls>
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+const BlockEditAlignmentToolbarControls = pure(
+	BlockEditAlignmentToolbarControlsPure
+);
+
 /**
  * Override the default edit UI to include new toolbar controls for block
  * alignment, if block defines support.
@@ -173,7 +180,8 @@ export const withAlignmentControls = createHigherOrderComponent(
 				{ hasAlignmentSupport && (
 					<BlockEditAlignmentToolbarControls
 						blockName={ props.name }
-						attributes={ props.attributes }
+						// This component is pure, so only pass needed props!
+						align={ props.attributes.align }
 						setAttributes={ props.setAttributes }
 					/>
 				) }

packages/block-editor/src/hooks/anchor.js

@@ -5,7 +5,7 @@ import { addFilter } from '@wordpress/hooks';
 import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
 import { Platform } from '@wordpress/element';
 
 /**
@@ -52,7 +52,7 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
+function BlockEditAnchorControlPure( { blockName, anchor, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 
 	const isWeb = Platform.OS === 'web';
@@ -79,7 +79,7 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 					) }
 				</>
 			}
-			value={ attributes.anchor || '' }
+			value={ anchor || '' }
 			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
 			onChange={ ( nextValue ) => {
 				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
@@ -116,6 +116,11 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+const BlockEditAnchorControl = pure( BlockEditAnchorControlPure );
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the anchor ID, if block supports anchor.
@@ -133,7 +138,9 @@ export const withAnchorControls = createHigherOrderComponent( ( BlockEdit ) => {
 					hasBlockSupport( props.name, 'anchor' ) && (
 						<BlockEditAnchorControl
 							blockName={ props.name }
-							attributes={ props.attributes }
+							// This component is pure, so only pass needed
+							// props!
+							anchor={ props.attributes.anchor }
 							setAttributes={ props.setAttributes }
 						/>
 					) }

packages/block-editor/src/hooks/background.js

@@ -318,4 +318,7 @@ function BackgroundImagePanelPure( props ) {
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
 export const BackgroundImagePanel = pure( BackgroundImagePanelPure );

packages/block-editor/src/hooks/block-hooks.js

@@ -9,7 +9,7 @@ import {
 	PanelBody,
 	ToggleControl,
 } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
@@ -21,7 +21,7 @@ import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
 
-function BlockHooksControl( props ) {
+function BlockHooksControlPure( props ) {
 	const blockTypes = useSelect(
 		( select ) => select( blocksStore ).getBlockTypes(),
 		[]
@@ -235,6 +235,11 @@ function BlockHooksControl( props ) {
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+const BlockHooksControl = pure( BlockHooksControlPure );
+
 export const withBlockHooksControls = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {

packages/block-editor/src/hooks/block-renaming.js

@@ -3,7 +3,7 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 
@@ -47,30 +47,46 @@ export function addLabelCallback( settings ) {
 	return settings;
 }
 
+function BlockRenameControlPure( { name, metadata, setAttributes } ) {
+	const { canRename } = useBlockRename( name );
+
+	if ( ! canRename ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				label={ __( 'Block name' ) }
+				value={ metadata?.name || '' }
+				onChange={ ( newName ) => {
+					setAttributes( {
+						metadata: { ...metadata, name: newName },
+					} );
+				} }
+			/>
+		</InspectorControls>
+	);
+}
+
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+const BlockRenameControl = pure( BlockRenameControlPure );
+
 export const withBlockRenameControl = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name, attributes, setAttributes, isSelected } = props;
-
-		const { canRename } = useBlockRename( name );
-
 		return (
 			<>
-				{ isSelected && canRename && (
-					<InspectorControls group="advanced">
-						<TextControl
-							__nextHasNoMarginBottom
-							label={ __( 'Block name' ) }
-							value={ attributes?.metadata?.name || '' }
-							onChange={ ( newName ) => {
-								setAttributes( {
-									metadata: {
-										...attributes?.metadata,
-										name: newName,
-									},
-								} );
-							} }
-						/>
-					</InspectorControls>
+				{ isSelected && (
+					<BlockRenameControl
+						name={ name }
+						// This component is pure, so only pass needed props!
+						metadata={ attributes.metadata }
+						setAttributes={ setAttributes }
+					/>
 				) }
 				<BlockEdit key="edit" { ...props } />
 			</>

packages/block-editor/src/hooks/border.js

@@ -175,6 +175,9 @@ function BorderPanelPure( { clientId, name, setAttributes } ) {
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
 export const BorderPanel = pure( BorderPanelPure );
 
 /**

packages/block-editor/src/hooks/color.js

@@ -361,6 +361,9 @@ function ColorEditPure( { clientId, name, setAttributes } ) {
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
 export const ColorEdit = pure( ColorEditPure );
 
 /**