Skip to content

Block Bindings: Have block fields panel reflects bound attribute value #72096

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

Merged
ockham merged 10 commits into from
Feb 9, 2026
Merged

Block Bindings: Have block fields panel reflects bound attribute value #72096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
691f11d
Block Bindings: Remove 'Bindings' panel from e2e test plugin
ockham Oct 6, 2025
5b492af
Remove e2e test that was using custom component
ockham Nov 20, 2025
69782e1
Remove el variable
ockham Nov 20, 2025
29e1711
Remove now-obsolete dependencies
ockham Jan 8, 2026
85720c2
Revert "Remove e2e test that was using custom component"
ockham Jan 8, 2026
140d730
Use textbox added by contentOnly experiments for test
ockham Jan 8, 2026
3210d8c
Enable gutenberg-content-only-inspector-fields experiment only
ockham Jan 12, 2026
0a8a932
Add fix
ockham Feb 5, 2026
2571fd5
Remove excess newlines
ockham Feb 5, 2026
82287fa
Guard against non-existing source
ockham Feb 9, 2026
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
31 changes: 29 additions & 2 deletions packages/block-editor/src/hooks/block-fields/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import {
privateApis as blocksPrivateApis,
getBlockType,
store as blocksStore,
} from '@wordpress/blocks';
import {
__experimentalHStack as HStack,
Expand All @@ -19,6 +20,7 @@ import { __ } from '@wordpress/i18n';
*/
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import BlockContext from '../../components/block-context';
import BlockIcon from '../../components/block-icon';
import useBlockDisplayTitle from '../../components/block-title/use-block-display-title';
import useBlockDisplayInformation from '../../components/use-block-display-information';
Expand Down Expand Up @@ -72,9 +74,34 @@ function BlockFields( {

const blockTypeFields = blockType?.[ fieldsKey ];

const blockContext = useContext( BlockContext );

const attributes = useSelect(
( select ) => select( blockEditorStore ).getBlockAttributes( clientId ),
[ clientId ]
( select ) => {
const _attributes =
select( blockEditorStore ).getBlockAttributes( clientId );
if ( ! _attributes?.metadata?.bindings ) {
return _attributes;
}

const { getBlockBindingsSource } = unlock( select( blocksStore ) );
return Object.entries( _attributes.metadata.bindings ).reduce(
( acc, [ attribute, binding ] ) => {
const source = getBlockBindingsSource( binding.source );
Comment thread
ockham marked this conversation as resolved.
if ( ! source ) {
return acc;
}
const values = source.getValues( {
select,
context: blockContext,
bindings: { [ attribute ]: binding },
} );
return { ...acc, ...values };
},
_attributes
);
},
[ blockContext, clientId ]
);

const computedForm = useMemo( () => {
Expand Down
5 changes: 0 additions & 5 deletions packages/e2e-tests/plugins/block-bindings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,6 @@ function gutenberg_test_block_bindings_registration() {
plugins_url( 'block-bindings/index.js', __FILE__ ),
array(
'wp-blocks',
'wp-block-editor',
'wp-components',
'wp-compose',
'wp-element',
'wp-hooks',
),
filemtime( plugin_dir_path( __FILE__ ) . 'block-bindings/index.js' ),
true
Expand Down
44 changes: 0 additions & 44 deletions packages/e2e-tests/plugins/block-bindings/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
const { registerBlockBindingsSource } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, TextControl } = wp.components;
const { createHigherOrderComponent } = wp.compose;
const { createElement: el, Fragment } = wp.element;
const { addFilter } = wp.hooks;
const { fieldsList } = window.testingBindings || {};

const getValues = ( { bindings } ) => {
Expand Down Expand Up @@ -64,42 +59,3 @@ registerBlockBindingsSource( {
getValues,
canUserEditValue: () => true,
} );

const withBlockBindingsInspectorControl = createHigherOrderComponent(
( BlockEdit ) => {
return ( props ) => {
if ( ! props.attributes?.metadata?.bindings?.content ) {
return el( BlockEdit, props );
}

return el(
Fragment,
{},
el( BlockEdit, props ),
el(
InspectorControls,
{},
el(
PanelBody,
{ title: 'Bindings' },
el( TextControl, {
__next40pxDefaultSize: true,
label: 'Content',
value: props.attributes.content,
onChange: ( content ) =>
props.setAttributes( {
content,
} ),
} )
)
)
);
};
}
);

addFilter(
'editor.BlockEdit',
'testing/bindings-inspector-control',
withBlockBindingsInspectorControl
);
19 changes: 16 additions & 3 deletions test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,12 @@ test.describe( 'Post Meta source', () => {
} );

test.describe( 'Movie CPT post', () => {
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.setGutenbergExperiments( [
'gutenberg-content-only-inspector-fields',
] );
} );

test.beforeEach( async ( { admin } ) => {
// CHECK HOW TO CREATE A MOVIE.
await admin.createNewPost( {
Expand All @@ -375,6 +381,11 @@ test.describe( 'Post Meta source', () => {
} );
} );

test.afterAll( async ( { requestUtils } ) => {
// Ensure experiments are disabled after test.
await requestUtils.setGutenbergExperiments( [] );
} );

test( 'should show the custom field value of that specific post', async ( {
editor,
} ) => {
Expand Down Expand Up @@ -536,7 +547,7 @@ test.describe( 'Post Meta source', () => {
).toHaveText( 'new value' );
} );

test( 'should be possible to edit the value of the connected custom fields in the inspector control registered by the plugin', async ( {
test( 'should be possible to edit the value of the connected custom fields in the inspector control registered by Block Fields experiment', async ( {
editor,
page,
} ) => {
Expand All @@ -558,9 +569,9 @@ test.describe( 'Post Meta source', () => {
},
} );
const contentInput = page.getByRole( 'textbox', {
name: 'Content',
label: 'Content',
} );
await expect( contentInput ).toHaveValue(
await expect( contentInput ).toHaveText(
'Movie field default value'
);
await contentInput.fill( 'new value' );
Expand All @@ -583,6 +594,7 @@ test.describe( 'Post Meta source', () => {
await editor.insertBlock( {
name: 'core/paragraph',
} );
await page.getByRole( 'tab', { name: 'Settings' } ).click();
await page.getByLabel( 'Attributes options' ).click();
await page
.getByRole( 'menuitemcheckbox', {
Expand Down Expand Up @@ -611,6 +623,7 @@ test.describe( 'Post Meta source', () => {
await editor.insertBlock( {
name: 'core/paragraph',
} );
await page.getByRole( 'tab', { name: 'Settings' } ).click();
await page.getByLabel( 'Attributes options' ).click();
await page
.getByRole( 'menuitemcheckbox', {
Expand Down
Loading