From 9ae11cb42158a07dad0fd55e2be6abb269e568f3 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 6 Dec 2023 09:13:58 +0200 Subject: [PATCH 1/4] Block editor: make all BlockEdit hooks pure --- packages/block-editor/src/hooks/align.js | 15 +- packages/block-editor/src/hooks/anchor.js | 12 +- .../block-editor/src/hooks/block-hooks.js | 6 +- .../block-editor/src/hooks/block-renaming.js | 53 +++-- .../block-editor/src/hooks/content-lock-ui.js | 222 +++++++++--------- .../src/hooks/custom-class-name.js | 12 +- .../block-editor/src/hooks/custom-fields.js | 25 +- packages/block-editor/src/hooks/duotone.js | 20 +- 8 files changed, 208 insertions(+), 157 deletions(-) diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 563c7bae6cde93..28848ac5143cc7 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/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,7 +144,7 @@ function BlockEditAlignmentToolbarControls( { return ( @@ -152,6 +152,10 @@ function BlockEditAlignmentToolbarControls( { ); } +const BlockEditAlignmentToolbarControls = pure( + BlockEditAlignmentToolbarControlsPure +); + /** * Override the default edit UI to include new toolbar controls for block * alignment, if block defines support. @@ -173,7 +177,8 @@ export const withAlignmentControls = createHigherOrderComponent( { hasAlignmentSupport && ( ) } diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 3d404c4a868116..631a28425e15b5 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/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,8 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) { ); } +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 +135,9 @@ export const withAnchorControls = createHigherOrderComponent( ( BlockEdit ) => { hasBlockSupport( props.name, 'anchor' ) && ( ) } diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js index 0d75999192e5bf..7b420c328f9521 100644 --- a/packages/block-editor/src/hooks/block-hooks.js +++ b/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,8 @@ function BlockHooksControl( props ) { ); } +const BlockHooksControl = pure( BlockHooksControlPure ); + export const withBlockHooksControls = createHigherOrderComponent( ( BlockEdit ) => { return ( props ) => { diff --git a/packages/block-editor/src/hooks/block-renaming.js b/packages/block-editor/src/hooks/block-renaming.js index 48e3b801d4eb91..6e1e0d21ae1f72 100644 --- a/packages/block-editor/src/hooks/block-renaming.js +++ b/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,43 @@ export function addLabelCallback( settings ) { return settings; } +function BlockRenameControlPure( { name, metadata, setAttributes } ) { + const { canRename } = useBlockRename( name ); + + if ( ! canRename ) { + return null; + } + + return ( + + { + setAttributes( { + metadata: { ...metadata, name: newName }, + } ); + } } + /> + + ); +} + +const BlockRenameControl = pure( BlockRenameControlPure ); + export const withBlockRenameControl = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const { name, attributes, setAttributes, isSelected } = props; - - const { canRename } = useBlockRename( name ); - return ( <> - { isSelected && canRename && ( - - { - setAttributes( { - metadata: { - ...attributes?.metadata, - name: newName, - }, - } ); - } } - /> - + { isSelected && ( + ) } diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js index 5d277d6a516d2d..9127b296f812f0 100644 --- a/packages/block-editor/src/hooks/content-lock-ui.js +++ b/packages/block-editor/src/hooks/content-lock-ui.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { ToolbarButton, MenuItem } from '@wordpress/components'; -import { createHigherOrderComponent } from '@wordpress/compose'; +import { createHigherOrderComponent, pure } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; @@ -37,120 +37,126 @@ function StopEditingAsBlocksOnOutsideSelect( { return null; } -export const withContentLockControls = createHigherOrderComponent( - ( BlockEdit ) => ( props ) => { - const { getBlockListSettings, getSettings } = - useSelect( blockEditorStore ); - const focusModeToRevert = useRef(); - const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect( - ( select ) => { - const { - __unstableGetContentLockingParent, - getTemplateLock, - __unstableGetTemporarilyEditingAsBlocks, - } = select( blockEditorStore ); - return { - templateLock: getTemplateLock( props.clientId ), - isLockedByParent: !! __unstableGetContentLockingParent( - props.clientId - ), - isEditingAsBlocks: - __unstableGetTemporarilyEditingAsBlocks() === - props.clientId, - }; - }, - [ props.clientId ] - ); +function ContentLockControlsPure( { clientId, isSelected } ) { + const { getBlockListSettings, getSettings } = useSelect( blockEditorStore ); + const focusModeToRevert = useRef(); + const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect( + ( select ) => { + const { + __unstableGetContentLockingParent, + getTemplateLock, + __unstableGetTemporarilyEditingAsBlocks, + } = select( blockEditorStore ); + return { + templateLock: getTemplateLock( clientId ), + isLockedByParent: + !! __unstableGetContentLockingParent( clientId ), + isEditingAsBlocks: + __unstableGetTemporarilyEditingAsBlocks() === clientId, + }; + }, + [ clientId ] + ); - const { - updateSettings, - updateBlockListSettings, - __unstableSetTemporarilyEditingAsBlocks, - } = useDispatch( blockEditorStore ); - const isContentLocked = - ! isLockedByParent && templateLock === 'contentOnly'; - const { - __unstableMarkNextChangeAsNotPersistent, - updateBlockAttributes, - } = useDispatch( blockEditorStore ); + const { + updateSettings, + updateBlockListSettings, + __unstableSetTemporarilyEditingAsBlocks, + } = useDispatch( blockEditorStore ); + const isContentLocked = + ! isLockedByParent && templateLock === 'contentOnly'; + const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } = + useDispatch( blockEditorStore ); - const stopEditingAsBlock = useCallback( () => { - __unstableMarkNextChangeAsNotPersistent(); - updateBlockAttributes( props.clientId, { - templateLock: 'contentOnly', - } ); - updateBlockListSettings( props.clientId, { - ...getBlockListSettings( props.clientId ), - templateLock: 'contentOnly', - } ); - updateSettings( { focusMode: focusModeToRevert.current } ); - __unstableSetTemporarilyEditingAsBlocks(); - }, [ - props.clientId, - updateSettings, - updateBlockListSettings, - getBlockListSettings, - __unstableMarkNextChangeAsNotPersistent, - updateBlockAttributes, - __unstableSetTemporarilyEditingAsBlocks, - ] ); + const stopEditingAsBlock = useCallback( () => { + __unstableMarkNextChangeAsNotPersistent(); + updateBlockAttributes( clientId, { + templateLock: 'contentOnly', + } ); + updateBlockListSettings( clientId, { + ...getBlockListSettings( clientId ), + templateLock: 'contentOnly', + } ); + updateSettings( { focusMode: focusModeToRevert.current } ); + __unstableSetTemporarilyEditingAsBlocks(); + }, [ + clientId, + updateSettings, + updateBlockListSettings, + getBlockListSettings, + __unstableMarkNextChangeAsNotPersistent, + updateBlockAttributes, + __unstableSetTemporarilyEditingAsBlocks, + ] ); - if ( ! isContentLocked && ! isEditingAsBlocks ) { - return ; - } + if ( ! isContentLocked && ! isEditingAsBlocks ) { + return null; + } + + const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked; + const showStartEditingAsBlocks = + ! isEditingAsBlocks && isContentLocked && isSelected; - const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked; - const showStartEditingAsBlocks = - ! isEditingAsBlocks && isContentLocked && props.isSelected; + return ( + <> + { showStopEditingAsBlocks && ( + <> + + + { + stopEditingAsBlock(); + } } + > + { __( 'Done' ) } + + + + ) } + { showStartEditingAsBlocks && ( + + { ( { onClose } ) => ( + { + __unstableMarkNextChangeAsNotPersistent(); + updateBlockAttributes( clientId, { + templateLock: undefined, + } ); + updateBlockListSettings( clientId, { + ...getBlockListSettings( clientId ), + templateLock: false, + } ); + focusModeToRevert.current = + getSettings().focusMode; + updateSettings( { focusMode: true } ); + __unstableSetTemporarilyEditingAsBlocks( + clientId + ); + onClose(); + } } + > + { __( 'Modify' ) } + + ) } + + ) } + + ); +} +const ContentLockControls = pure( ContentLockControlsPure ); + +export const withContentLockControls = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { return ( <> - { showStopEditingAsBlocks && ( - <> - - - { - stopEditingAsBlock(); - } } - > - { __( 'Done' ) } - - - - ) } - { showStartEditingAsBlocks && ( - - { ( { onClose } ) => ( - { - __unstableMarkNextChangeAsNotPersistent(); - updateBlockAttributes( props.clientId, { - templateLock: undefined, - } ); - updateBlockListSettings( props.clientId, { - ...getBlockListSettings( - props.clientId - ), - templateLock: false, - } ); - focusModeToRevert.current = - getSettings().focusMode; - updateSettings( { focusMode: true } ); - __unstableSetTemporarilyEditingAsBlocks( - props.clientId - ); - onClose(); - } } - > - { __( 'Modify' ) } - - ) } - - ) } + ); diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index 8a3becc8691421..26646effadf9e4 100644 --- a/packages/block-editor/src/hooks/custom-class-name.js +++ b/packages/block-editor/src/hooks/custom-class-name.js @@ -10,7 +10,7 @@ import { addFilter } from '@wordpress/hooks'; import { TextControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { hasBlockSupport } from '@wordpress/blocks'; -import { createHigherOrderComponent } from '@wordpress/compose'; +import { createHigherOrderComponent, pure } from '@wordpress/compose'; /** * Internal dependencies @@ -39,7 +39,7 @@ export function addAttribute( settings ) { return settings; } -function CustomClassNameControls( { attributes, setAttributes } ) { +function CustomClassNameControlsPure( { className, setAttributes } ) { const blockEditingMode = useBlockEditingMode(); if ( blockEditingMode !== 'default' ) { return null; @@ -52,7 +52,7 @@ function CustomClassNameControls( { attributes, setAttributes } ) { __next40pxDefaultSize autoComplete="off" label={ __( 'Additional CSS class(es)' ) } - value={ attributes.className || '' } + value={ className || '' } onChange={ ( nextValue ) => { setAttributes( { className: nextValue !== '' ? nextValue : undefined, @@ -64,6 +64,8 @@ function CustomClassNameControls( { attributes, setAttributes } ) { ); } +const CustomClassNameControls = pure( CustomClassNameControlsPure ); + /** * Override the default edit UI to include a new block inspector control for * assigning the custom class name, if block supports custom class name. @@ -87,7 +89,9 @@ export const withCustomClassNameControls = createHigherOrderComponent( { hasCustomClassName && props.isSelected && ( ) } diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 8ab816abc7352a..f77961b63ae1da 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -5,7 +5,7 @@ import { addFilter } from '@wordpress/hooks'; import { PanelBody, TextControl } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { hasBlockSupport } from '@wordpress/blocks'; -import { createHigherOrderComponent } from '@wordpress/compose'; +import { createHigherOrderComponent, pure } from '@wordpress/compose'; /** * Internal dependencies @@ -34,7 +34,7 @@ function addAttribute( settings ) { return settings; } -function CustomFieldsControl( props ) { +function CustomFieldsControlPure( { name, connections, setAttributes } ) { const blockEditingMode = useBlockEditingMode(); if ( blockEditingMode !== 'default' ) { return null; @@ -44,8 +44,8 @@ function CustomFieldsControl( props ) { // attribute to use for the connection. Only the `content` attribute // of the paragraph block and the `url` attribute of the image block are supported. let attributeName; - if ( props.name === 'core/paragraph' ) attributeName = 'content'; - if ( props.name === 'core/image' ) attributeName = 'url'; + if ( name === 'core/paragraph' ) attributeName = 'content'; + if ( name === 'core/image' ) attributeName = 'url'; return ( @@ -55,19 +55,17 @@ function CustomFieldsControl( props ) { autoComplete="off" label={ __( 'Custom field meta_key' ) } value={ - props.attributes?.connections?.attributes?.[ - attributeName - ]?.value || '' + connections?.attributes?.[ attributeName ]?.value || '' } onChange={ ( nextValue ) => { if ( nextValue === '' ) { - props.setAttributes( { + setAttributes( { connections: undefined, [ attributeName ]: undefined, placeholder: undefined, } ); } else { - props.setAttributes( { + setAttributes( { connections: { attributes: { // The attributeName will be either `content` or `url`. @@ -93,6 +91,8 @@ function CustomFieldsControl( props ) { ); } +const CustomFieldsControl = pure( CustomFieldsControlPure ); + /** * Override the default edit UI to include a new block inspector control for * assigning a connection to blocks that has support for connections. @@ -121,7 +121,12 @@ const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => { <> { hasCustomFieldsSupport && props.isSelected && ( - + ) } ); diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 5442e394e68c78..4b8a9ef00939e5 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -13,7 +13,11 @@ import { getBlockType, hasBlockSupport, } from '@wordpress/blocks'; -import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; +import { + createHigherOrderComponent, + useInstanceId, + pure, +} from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; import { useMemo, useEffect } from '@wordpress/element'; @@ -95,8 +99,7 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) { return preset ? `var:preset|duotone|${ preset.slug }` : undefined; } -function DuotonePanel( { attributes, setAttributes, name } ) { - const style = attributes?.style; +function DuotonePanelPure( { style, setAttributes, name } ) { const duotoneStyle = style?.color?.duotone; const settings = useBlockSettings( name ); const blockEditingMode = useBlockEditingMode(); @@ -176,6 +179,8 @@ function DuotonePanel( { attributes, setAttributes, name } ) { ); } +const DuotonePanel = pure( DuotonePanelPure ); + /** * Filters registered block settings, extending attributes to include * the `duotone` attribute. @@ -227,7 +232,14 @@ const withDuotoneControls = createHigherOrderComponent( // performance. return ( <> - { hasDuotoneSupport && } + { hasDuotoneSupport && ( + + ) } ); From b175f47bd0755a97108f61a731f082066486ac49 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 6 Dec 2023 09:22:07 +0200 Subject: [PATCH 2/4] Do remaining --- packages/block-editor/src/hooks/layout.js | 20 ++++++++++--- packages/block-editor/src/hooks/position.js | 31 ++++++++++++++------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 9b35c3dcd6076b..9a7816ae2629fd 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -6,7 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; +import { + createHigherOrderComponent, + pure, + useInstanceId, +} from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; @@ -133,12 +137,11 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) { return css; } -function LayoutPanel( { setAttributes, attributes, name: blockName } ) { +function LayoutPanelPure( { layout, setAttributes, name: blockName } ) { const settings = useBlockSettings( blockName ); // Block settings come from theme.json under settings.[blockName]. const { layout: layoutSettings } = settings; // Layout comes from block attributes. - const { layout } = attributes; const [ defaultThemeLayout ] = useSettings( 'layout' ); const { themeSupportsLayout } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); @@ -287,6 +290,8 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ); } +const LayoutPanel = pure( LayoutPanelPure ); + function LayoutTypeSwitcher( { type, onChange } ) { return ( @@ -340,7 +345,14 @@ export const withLayoutControls = createHigherOrderComponent( const supportLayout = hasLayoutBlockSupport( props.name ); return [ - supportLayout && , + supportLayout && ( + + ), , ]; }, diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 710dbfaf5ace04..7458924d25f484 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -12,7 +12,11 @@ import { BaseControl, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; +import { + createHigherOrderComponent, + pure, + useInstanceId, +} from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import { useMemo, Platform } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; @@ -207,14 +211,12 @@ export function useIsPositionDisabled( { name: blockName } = {} ) { * * @return {Element} Position panel. */ -export function PositionPanel( props ) { - const { - attributes: { style = {} }, - clientId, - name: blockName, - setAttributes, - } = props; - +export function PositionPanelPure( { + style = {}, + clientId, + name: blockName, + setAttributes, +} ) { const allowFixed = hasFixedPositionSupport( blockName ); const allowSticky = hasStickyPositionSupport( blockName ); const value = style?.position?.type; @@ -316,6 +318,8 @@ export function PositionPanel( props ) { } ); } +const PositionPanel = pure( PositionPanelPure ); + /** * Override the default edit UI to include position controls. * @@ -335,7 +339,14 @@ export const withPositionControls = createHigherOrderComponent( return [ showPositionControls && ( - + ), , ]; From 3bdc170cbb27a9b80c6e94b3a688fdaa81e7bd24 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 6 Dec 2023 10:11:35 +0200 Subject: [PATCH 3/4] Fix mistakes --- packages/block-editor/src/hooks/anchor.js | 2 +- packages/block-editor/src/hooks/custom-class-name.js | 2 +- packages/block-editor/src/hooks/layout.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 631a28425e15b5..6366bb449f8d11 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -137,7 +137,7 @@ export const withAnchorControls = createHigherOrderComponent( ( BlockEdit ) => { blockName={ props.name } // This component is pure, so only pass needed // props! - attributes={ props.attributes.anchor } + anchor={ props.attributes.anchor } setAttributes={ props.setAttributes } /> ) } diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index 26646effadf9e4..aa5de12c2578eb 100644 --- a/packages/block-editor/src/hooks/custom-class-name.js +++ b/packages/block-editor/src/hooks/custom-class-name.js @@ -91,7 +91,7 @@ export const withCustomClassNameControls = createHigherOrderComponent( ) } diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 9a7816ae2629fd..6d7bc06fc75be7 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -348,6 +348,7 @@ export const withLayoutControls = createHigherOrderComponent( supportLayout && ( Date: Wed, 6 Dec 2023 22:47:39 +0200 Subject: [PATCH 4/4] Add comments --- packages/block-editor/src/hooks/align.js | 3 +++ packages/block-editor/src/hooks/anchor.js | 3 +++ packages/block-editor/src/hooks/background.js | 3 +++ packages/block-editor/src/hooks/block-hooks.js | 3 +++ packages/block-editor/src/hooks/block-renaming.js | 3 +++ packages/block-editor/src/hooks/border.js | 3 +++ packages/block-editor/src/hooks/color.js | 3 +++ packages/block-editor/src/hooks/content-lock-ui.js | 3 +++ packages/block-editor/src/hooks/custom-class-name.js | 3 +++ packages/block-editor/src/hooks/custom-fields.js | 3 +++ packages/block-editor/src/hooks/dimensions.js | 3 +++ packages/block-editor/src/hooks/duotone.js | 3 +++ packages/block-editor/src/hooks/layout.js | 3 +++ packages/block-editor/src/hooks/position.js | 3 +++ packages/block-editor/src/hooks/typography.js | 3 +++ 15 files changed, 45 insertions(+) diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 28848ac5143cc7..3b916d9577f1a7 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -152,6 +152,9 @@ function BlockEditAlignmentToolbarControlsPure( { ); } +// 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 ); diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 6366bb449f8d11..9902ed479531c6 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -116,6 +116,9 @@ function BlockEditAnchorControlPure( { blockName, anchor, 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 ); /** diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 342db267ff3315..b75dc95b75241f 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/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 ); diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js index 7b420c328f9521..59c0e3c85486f0 100644 --- a/packages/block-editor/src/hooks/block-hooks.js +++ b/packages/block-editor/src/hooks/block-hooks.js @@ -235,6 +235,9 @@ function BlockHooksControlPure( 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( diff --git a/packages/block-editor/src/hooks/block-renaming.js b/packages/block-editor/src/hooks/block-renaming.js index 6e1e0d21ae1f72..452be6e686dbf4 100644 --- a/packages/block-editor/src/hooks/block-renaming.js +++ b/packages/block-editor/src/hooks/block-renaming.js @@ -70,6 +70,9 @@ function BlockRenameControlPure( { name, metadata, 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 BlockRenameControl = pure( BlockRenameControlPure ); export const withBlockRenameControl = createHigherOrderComponent( diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 29e4afd2f018ca..735d91e76538e5 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/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 ); /** diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 94bcc599dd6371..6addd94d93ee58 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/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 ); /** diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js index 9127b296f812f0..8f95c14d118e56 100644 --- a/packages/block-editor/src/hooks/content-lock-ui.js +++ b/packages/block-editor/src/hooks/content-lock-ui.js @@ -147,6 +147,9 @@ function ContentLockControlsPure( { clientId, isSelected } ) { ); } +// 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 ContentLockControls = pure( ContentLockControlsPure ); export const withContentLockControls = createHigherOrderComponent( diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index aa5de12c2578eb..8c0f58ddda682d 100644 --- a/packages/block-editor/src/hooks/custom-class-name.js +++ b/packages/block-editor/src/hooks/custom-class-name.js @@ -64,6 +64,9 @@ function CustomClassNameControlsPure( { className, 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 CustomClassNameControls = pure( CustomClassNameControlsPure ); /** diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index f77961b63ae1da..19729d00ad61a6 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -91,6 +91,9 @@ function CustomFieldsControlPure( { name, connections, 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 CustomFieldsControl = pure( CustomFieldsControlPure ); /** diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 4e2b17f363bddf..c6d64d4ef785f3 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -132,6 +132,9 @@ function DimensionsPanelPure( { ); } +// 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 DimensionsPanel = pure( DimensionsPanelPure ); /** diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 4b8a9ef00939e5..6e18b44cef1633 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -179,6 +179,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) { ); } +// 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 DuotonePanel = pure( DuotonePanelPure ); /** diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 6d7bc06fc75be7..fdffd4eaf4771f 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -290,6 +290,9 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) { ); } +// 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 LayoutPanel = pure( LayoutPanelPure ); function LayoutTypeSwitcher( { type, onChange } ) { diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 7458924d25f484..32d4f6582969ee 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -318,6 +318,9 @@ export function PositionPanelPure( { } ); } +// 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 PositionPanel = pure( PositionPanelPure ); /** diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 7d0e5e1c318d56..d5bf9ec42ad040 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -153,6 +153,9 @@ function TypographyPanelPure( { ); } +// 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 TypographyPanel = pure( TypographyPanelPure ); export const hasTypographySupport = ( blockName ) => {