Skip to content

Extensibility: Make Block Bindings work with editor.BlockEdit hook (2nd try) #67519

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

Closed
wants to merge 7 commits into from
Closed

Extensibility: Make Block Bindings work with editor.BlockEdit hook (2nd try) #67519

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c2a1f55
Block Bindings: Move the place when the attributes get overriden
gziolo Nov 28, 2024
8c972ff
Fix failing unit tests
gziolo Nov 28, 2024
0144f01
Wrap Edit with bindings logic only when the block supports it
gziolo Nov 28, 2024
f3fa0d5
Extend the test plugin with `editor.BlockEdit` filter
gziolo Nov 29, 2024
02805fc
Add a new test covering the extensibility inside inspector controls
gziolo Nov 29, 2024
5365702
Fix the issue with missing context established by sources
gziolo Nov 29, 2024
ba9c483
Remove the HOC for Block Bindings to verify performance implications
gziolo 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
Prev Previous commit
Next Next commit
Fix the issue with missing context established by sources
  • Loading branch information
@gziolo
gziolo committed Dec 3, 2024
commit 53657027aa154d0bee792259ded7ca9dc98aaec0
12 changes: 10 additions & 2 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,6 +49,8 @@ const Edit = ( props ) => {

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

const EditWithFiltersAndBindings = withBlockBindingsSupport( EditWithFilters );

const EditWithGeneratedProps = ( props ) => {
const { attributes = {}, name } = props;
const blockType = getBlockType( name );
Expand All @@ -67,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 @@ -82,7 +90,7 @@ const EditWithGeneratedProps = ( props ) => {
);

return (
<EditWithFilters
<EditComponent
{ ...props }
context={ context }
className={ className }
Expand Down
7 changes: 1 addition & 6 deletions packages/block-editor/src/components/block-edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { hasBlockSupport } from '@wordpress/blocks';
* Internal dependencies
*/
import Edit from './edit';
import { withBlockBindingsSupport } from './with-block-bindings-support';
import {
BlockEditContextProvider,
useBlockEditContext,
Expand All @@ -20,9 +19,6 @@ import {
} from './context';
import { MultipleUsageWarning } from './multiple-usage-warning';
import { PrivateBlockContext } from '../block-list/private-block-context';
import { canBindBlock } from '../../utils/block-bindings';

const BlockEditWithBindings = withBlockBindingsSupport( Edit );

/**
* The `useBlockEditContext` hook provides information about the block this hook is being used in.
Expand Down Expand Up @@ -56,7 +52,6 @@ export default function BlockEdit( {
hasBlockSupport( name, 'layout', false ) ||
hasBlockSupport( name, '__experimentalLayout', false );
const { originalBlockClientId } = useContext( PrivateBlockContext );
const EditComponent = canBindBlock( name ) ? BlockEditWithBindings : Edit;

return (
<BlockEditContextProvider
Expand Down Expand Up @@ -93,7 +88,7 @@ export default function BlockEdit( {
]
) }
>
<EditComponent { ...props } />
<Edit { ...props } />
{ originalBlockClientId && (
<MultipleUsageWarning
originalBlockClientId={ originalBlockClientId }
Expand Down
14 changes: 6 additions & 8 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
Expand Up @@ -247,14 +247,12 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
);

return (
<>
<BlockEdit
{ ...props }
attributes={ { ...props.attributes, ...boundAttributes } }
setAttributes={ _setAttributes }
context={ { ...context, ...updatedContext } }
/>
</>
<BlockEdit
{ ...props }
attributes={ { ...props.attributes, ...boundAttributes } }
setAttributes={ _setAttributes }
context={ { ...context, ...updatedContext } }
/>
);
},
'withBlockBindingSupport'
Expand Down
Loading