diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
index ff68be82a829f1..6a80d47f024816 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -32,6 +32,7 @@ function getShowTabs( blockName, tabSettings = {} ) {
export default function useInspectorControlsTabs( blockName ) {
const tabs = [];
const {
+ bindings: bindingsGroup,
border: borderGroup,
color: colorGroup,
default: defaultGroup,
@@ -64,8 +65,10 @@ export default function useInspectorControlsTabs( blockName ) {
// (i.e. both list view and styles), check only the default and position
// InspectorControls slots. If we have multiple tabs, we'll need to check
// the advanced controls slot as well to ensure they are rendered.
- const advancedFills =
- useSlotFills( InspectorAdvancedControls.slotName ) || [];
+ const advancedFills = [
+ ...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
+ ...( useSlotFills( bindingsGroup.Slot.__unstableName ) || [] ),
+ ];
const settingsFills = [
...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index 9ca1a72b9918a6..34ec49a5e1cb41 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -5,6 +5,7 @@ import { createSlotFill } from '@wordpress/components';
const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBindings = createSlotFill( 'InspectorControlsBindings' );
const InspectorControlsBackground = createSlotFill(
'InspectorControlsBackground'
);
@@ -26,6 +27,7 @@ const groups = {
default: InspectorControlsDefault,
advanced: InspectorControlsAdvanced,
background: InspectorControlsBackground,
+ bindings: InspectorControlsBindings,
border: InspectorControlsBorder,
color: InspectorControlsColor,
dimensions: InspectorControlsDimensions,
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index 961a34f6f858fc..d015eca5af9926 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -13,7 +13,7 @@ import {
__experimentalVStack as VStack,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
import { useContext, Fragment } from '@wordpress/element';
import { useViewportMatch } from '@wordpress/compose';
@@ -28,6 +28,7 @@ import { unlock } from '../lock-unlock';
import InspectorControls from '../components/inspector-controls';
import BlockContext from '../components/block-context';
import { useBlockBindingsUtils } from '../utils/block-bindings';
+import { store as blockEditorStore } from '../store';
const { DropdownMenuV2 } = unlock( componentsPrivateApis );
@@ -201,6 +202,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
}
} );
+ const { canUpdateBlockBindings } = useSelect( ( select ) => {
+ return {
+ canUpdateBlockBindings:
+ select( blockEditorStore ).getSettings().canUpdateBlockBindings,
+ };
+ }, [] );
+
if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
return null;
}
@@ -236,17 +244,16 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
}
} );
- // Lock the UI when the experiment is not enabled or there are no fields to connect to.
+ // Lock the UI when the user can't update bindings or there are no fields to connect to.
const readOnly =
- ! window.__experimentalBlockBindingsUI ||
- ! Object.keys( fieldsList ).length;
+ ! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
if ( readOnly && Object.keys( filteredBindings ).length === 0 ) {
return null;
}
return (
-
+
{
@@ -268,9 +275,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
/>
) }
-
- { __( 'Attributes connected to various sources.' ) }
-
+
+
+ { __(
+ 'Attributes connected to custom fields or other dynamic data.'
+ ) }
+
+
);
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
index 6aa2763cf9db06..48290caefc158e 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -47,6 +47,7 @@ const BLOCK_EDITOR_SETTINGS = [
'allowedMimeTypes',
'bodyPlaceholder',
'canLockBlocks',
+ 'canUpdateBlockBindings',
'capabilities',
'clearBlockSelection',
'codeEditingEnabled',
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
index d0e1f079ce8439..5feda2bdc3334a 100644
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ b/test/e2e/specs/editor/various/block-bindings.spec.js
@@ -1394,20 +1394,10 @@ test.describe( 'Block bindings', () => {
editor,
page,
} ) => {
- // Activate the block bindings UI experiment.
- await page.evaluate( () => {
- window.__experimentalBlockBindingsUI = true;
- } );
-
await editor.insertBlock( {
name: 'core/paragraph',
} );
- await page
- .getByRole( 'tabpanel', {
- name: 'Settings',
- } )
- .getByLabel( 'Attributes options' )
- .click();
+ await page.getByLabel( 'Attributes options' ).click();
const contentAttribute = page.getByRole( 'menuitemcheckbox', {
name: 'Show content',
} );
@@ -1417,11 +1407,6 @@ test.describe( 'Block bindings', () => {
editor,
page,
} ) => {
- // Activate the block bindings UI experiment.
- await page.evaluate( () => {
- window.__experimentalBlockBindingsUI = true;
- } );
-
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
@@ -1436,12 +1421,7 @@ test.describe( 'Block bindings', () => {
},
},
} );
- await page
- .getByRole( 'tabpanel', {
- name: 'Settings',
- } )
- .getByRole( 'button', { name: 'content' } )
- .click();
+ await page.getByRole( 'button', { name: 'content' } ).click();
await page
.getByRole( 'menuitemradio' )
@@ -1539,20 +1519,10 @@ test.describe( 'Block bindings', () => {
editor,
page,
} ) => {
- // Activate the block bindings UI experiment.
- await page.evaluate( () => {
- window.__experimentalBlockBindingsUI = true;
- } );
-
await editor.insertBlock( {
name: 'core/heading',
} );
- await page
- .getByRole( 'tabpanel', {
- name: 'Settings',
- } )
- .getByLabel( 'Attributes options' )
- .click();
+ await page.getByLabel( 'Attributes options' ).click();
const contentAttribute = page.getByRole( 'menuitemcheckbox', {
name: 'Show content',
} );
@@ -1739,11 +1709,6 @@ test.describe( 'Block bindings', () => {
editor,
page,
} ) => {
- // Activate the block bindings UI experiment.
- await page.evaluate( () => {
- window.__experimentalBlockBindingsUI = true;
- } );
-
await editor.insertBlock( {
name: 'core/buttons',
innerBlocks: [
@@ -2074,11 +2039,6 @@ test.describe( 'Block bindings', () => {
editor,
page,
} ) => {
- // Activate the block bindings UI experiment.
- await page.evaluate( () => {
- window.__experimentalBlockBindingsUI = true;
- } );
-
await editor.insertBlock( {
name: 'core/image',
} );
@@ -2367,11 +2327,9 @@ test.describe( 'Block bindings', () => {
},
} );
- const bindingsPanel = page
- .getByRole( 'tabpanel', {
- name: 'Settings',
- } )
- .locator( '.block-editor-bindings__panel' );
+ const bindingsPanel = page.locator(
+ '.block-editor-bindings__panel'
+ );
await expect( bindingsPanel ).toContainText( 'Server Source' );
} );
} );