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

Fix/move context in bindings hook reorder #67524

Closed
wants to merge 4 commits into from
Closed

Fix/move context in bindings hook reorder #67524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84c65da
Revert "Remove the HOC for Block Bindings to verify performance impli…
SantosGuillamot Dec 3, 2024
8147da4
Move bindings context to `useMemo`
SantosGuillamot Dec 3, 2024
03b2224
Move everything to same `useMemo`
SantosGuillamot Dec 3, 2024
6398142
Don't update context prop
SantosGuillamot Dec 3, 2024
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
12 changes: 9 additions & 3 deletions packages/block-editor/src/components/block-edit/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import { useContext, useMemo } from '@wordpress/element';
* Internal dependencies
*/
import BlockContext from '../block-context';
import { withBlockBindingsSupport } from './with-block-bindings-support';
import { canBindBlock } from '../../utils/block-bindings';

/**
* Default value used for blocks which do not define their own context needs,
Expand Down Expand Up @@ -47,7 +49,7 @@ const Edit = ( props ) => {

const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );

// const EditWithFiltersAndBindings = withBlockBindingsSupport( EditWithFilters );
const EditWithFiltersAndBindings = withBlockBindingsSupport( EditWithFilters );

const EditWithGeneratedProps = ( props ) => {
const { attributes = {}, name } = props;
Expand All @@ -69,8 +71,12 @@ const EditWithGeneratedProps = ( props ) => {
return null;
}

const EditComponent = canBindBlock( name )
? EditWithFiltersAndBindings
: EditWithFilters;

if ( blockType.apiVersion > 1 ) {
return <EditWithFilters { ...props } context={ context } />;
return <EditComponent { ...props } context={ context } />;
}

// Generate a class name for the block's editable form.
Expand All @@ -84,7 +90,7 @@ const EditWithGeneratedProps = ( props ) => {
);

return (
<EditWithFilters
<EditComponent
{ ...props }
context={ context }
className={ className }
Expand Down
48 changes: 29 additions & 19 deletions packages/block-editor/src/components/block-edit/with-block-bindings-support.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
/**
* WordPress dependencies
*/
import { store as blocksStore } from '@wordpress/blocks';
import {
store as blocksStore,
getBlockBindingsSources,
} from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useRegistry, useSelect } from '@wordpress/data';
import { useCallback, useMemo, useContext } from '@wordpress/element';
Expand Down Expand Up @@ -67,21 +70,34 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
const sources = useSelect( ( select ) =>
unlock( select( blocksStore ) ).getAllBlockBindingsSources()
);
const { name, clientId, context, setAttributes } = props;
const blockBindings = useMemo(
() =>
replacePatternOverrideDefaultBindings(
const { name, clientId, setAttributes } = props;
const { blockBindings, sourcesContext } = useMemo( () => {
const _sourcesContext = {};
if ( props.attributes?.metadata?.bindings ) {
const registeredSources = getBlockBindingsSources();
Object.values(
props.attributes?.metadata?.bindings || {}
).forEach( ( binding ) => {
registeredSources[ binding?.source ]?.usesContext?.forEach(
( key ) => {
_sourcesContext[ key ] = blockContext[ key ];
}
);
} );
}
return {
blockBindings: replacePatternOverrideDefaultBindings(
name,
props.attributes?.metadata?.bindings
),
[ props.attributes?.metadata?.bindings, name ]
);
sourcesContext: _sourcesContext,
};
}, [ props.attributes?.metadata?.bindings, name, blockContext ] );

// While this hook doesn't directly call any selectors, `useSelect` is
// used purposely here to ensure `boundAttributes` is updated whenever
// there are attribute updates.
// `source.getValues` may also call a selector via `registry.select`.
const updatedContext = {};
const boundAttributes = useSelect(
( select ) => {
if ( ! blockBindings ) {
Expand All @@ -104,11 +120,6 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
continue;
}

// Populate context.
for ( const key of source.usesContext || [] ) {
updatedContext[ key ] = blockContext[ key ];
}

blockBindingsBySource.set( source, {
...blockBindingsBySource.get( source ),
[ attributeName ]: {
Expand All @@ -132,7 +143,7 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
} else {
values = source.getValues( {
select,
context: updatedContext,
context: sourcesContext,
clientId,
bindings,
} );
Expand All @@ -155,10 +166,10 @@ export const withBlockBindingsSupport = createHigherOrderComponent(

return attributes;
},
[ blockBindings, name, clientId, updatedContext, sources ]
[ blockBindings, name, clientId, sourcesContext, sources ]
);

const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
const hasParentPattern = !! sourcesContext[ 'pattern/overrides' ];
const hasPatternOverridesDefaultBinding =
props.attributes?.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
?.source === 'core/pattern-overrides';
Expand Down Expand Up @@ -208,7 +219,7 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
source.setValues( {
select: registry.select,
dispatch: registry.dispatch,
context: updatedContext,
context: sourcesContext,
clientId,
bindings,
} );
Expand Down Expand Up @@ -238,7 +249,7 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
blockBindings,
name,
clientId,
updatedContext,
sourcesContext,
setAttributes,
sources,
hasPatternOverridesDefaultBinding,
Expand All @@ -251,7 +262,6 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
{ ...props }
attributes={ { ...props.attributes, ...boundAttributes } }
setAttributes={ _setAttributes }
context={ { ...context, ...updatedContext } }
/>
);
},
Expand Down
Loading