Skip to content
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

Jump to bottom

Block editor: make all BlockEdit hooks pure #56813

Merged
merged 4 commits into from
Dec 6, 2023
Merged

Block editor: make all BlockEdit hooks pure #56813

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ae11cb
Block editor: make all BlockEdit hooks pure
ellatrix Dec 6, 2023
b175f47
Do remaining
ellatrix Dec 6, 2023
3bdc170
Fix mistakes
ellatrix Dec 6, 2023
89e37af
Add comments
ellatrix Dec 6, 2023
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
15 changes: 10 additions & 5 deletions packages/block-editor/src/hooks/align.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -144,14 +144,18 @@ function BlockEditAlignmentToolbarControls( {
return (
<BlockControls group="block" __experimentalShareWithChildBlocks>
<BlockAlignmentControl
value={ attributes.align }
value={ align }
onChange={ updateAlignment }
controls={ validAlignments }
/>
</BlockControls>
);
}

const BlockEditAlignmentToolbarControls = pure(
BlockEditAlignmentToolbarControlsPure
);

/**
* Override the default edit UI to include new toolbar controls for block
* alignment, if block defines support.
Expand All @@ -173,7 +177,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 }
/>
) }
Expand Down
12 changes: 8 additions & 4 deletions packages/block-editor/src/hooks/anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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';
Expand All @@ -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, '-' );
Expand Down Expand Up @@ -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.
Expand All @@ -133,7 +135,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 }
/>
) }
Expand Down
6 changes: 4 additions & 2 deletions packages/block-editor/src/hooks/block-hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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(),
[]
Expand Down Expand Up @@ -235,6 +235,8 @@ function BlockHooksControl( props ) {
);
}

const BlockHooksControl = pure( BlockHooksControlPure );

export const withBlockHooksControls = createHigherOrderComponent(
( BlockEdit ) => {
return ( props ) => {
Expand Down
53 changes: 33 additions & 20 deletions packages/block-editor/src/hooks/block-renaming.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -47,30 +47,43 @@ 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>
);
}

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 } />
</>
Expand Down
Loading
Loading