Add bindings panel to inspector controls with tabs

WordPress · May 9, 2024 · c5dd1b7 · c5dd1b7
1 parent 74a900c
commit c5dd1b7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -23,6 +23,7 @@ export default function InspectorControlsTabs( {
 	clientId,
 	hasBlockStyles,
 	tabs,
+	block,
 } ) {
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
@@ -52,7 +53,10 @@ export default function InspectorControlsTabs( {
 					) ) }
 				</Tabs.TabList>
 				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
-					<SettingsTab showAdvancedControls={ !! blockName } />
+					<SettingsTab
+						showAdvancedControls={ !! blockName }
+						block={ block }
+					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_STYLES.name } focusable={ false }>
 					<StylesTab

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
@@ -5,18 +5,26 @@ import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 import SettingsTabHint from './settings-tab-hint';
+import { BindingsPanel } from '../inspector-controls/bindings-panel';
 
-const SettingsTab = ( { showAdvancedControls = false } ) => (
-	<>
-		<InspectorControls.Slot />
-		<PositionControls />
-		{ showAdvancedControls && (
-			<div>
-				<AdvancedControls />
-			</div>
-		) }
-		<SettingsTabHint />
-	</>
-);
+function SettingsTab( { showAdvancedControls = false, block } ) {
+	const hasBindings = block?.attributes?.metadata?.bindings
+		? Object.keys( block.attributes.metadata.bindings ).length > 0
+		: false;
+
+	return (
+		<>
+			{ hasBindings && <BindingsPanel block={ block } /> }
+			<InspectorControls.Slot />
+			<PositionControls />
+			{ showAdvancedControls && (
+				<div>
+					<AdvancedControls />
+				</div>
+			) }
+			<SettingsTabHint />
+		</>
+	);
+}
 
 export default SettingsTab;