Block Bindings: Allow only admin users to create and modify bindings …

…by default (#64570) * Remove block bindings UI experiment * Use block settings preferences * Add "bindings" group * Make changes to the helper text * Fix tests * Fix remaining test * Import `useSelect` * Change comment * Hide controls in templates * Adapt preference phrasing and capabilities * Change name in tests * Remove preference * Add `canUpdateBlockBindings` in Gutenberg * Update comment * Add backport changelog Unlinked contributors: jarekmorawski. Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: artemiomorales <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: bacoords <[email protected]> Co-authored-by: cbravobernal <[email protected]>
WordPress · Sep 4, 2024 · b4676ad · b4676ad
1 parent fae4d1b
commit b4676ad
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 73 deletions.
diff --git a/backport-changelog/6.7/7258.md b/backport-changelog/6.7/7258.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7258
+
+* https://github.com/WordPress/gutenberg/pull/64570
diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php
@@ -38,3 +38,18 @@ function gutenberg_add_server_block_bindings_sources_to_editor_settings( $editor
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_add_server_block_bindings_sources_to_editor_settings', 10 );
+
+/**
+ * Initialize `canUpdateBlockBindings` editor setting if it doesn't exist. By default, it is `true` only for admin users.
+ *
+ * @param array $settings The block editor settings from the `block_editor_settings_all` filter.
+ * @return array The editor settings including `canUpdateBlockBindings`.
+ */
+function gutenberg_add_can_update_block_bindings_editor_setting( $editor_settings ) {
+	if ( empty( $editor_settings['canUpdateBlockBindings'] ) ) {
+		$editor_settings['canUpdateBlockBindings'] = current_user_can( 'manage_options' );
+	}
+	return $editor_settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_add_can_update_block_bindings_editor_setting', 10 );
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -31,9 +31,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-bindings-ui', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalBlockBindingsUI = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -163,18 +163,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-block-bindings-ui',
-		__( 'UI to create block bindings', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Add UI to create and update block bindings in block inspector controls.', 'gutenberg' ),
-			'id'    => 'gutenberg-block-bindings-ui',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-media-processing',
 		__( 'Client-side media processing', 'gutenberg' ),

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -322,6 +322,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					/>
 					<InspectorControls.Slot group="styles" />
 					<PositionControls />
+					<InspectorControls.Slot group="bindings" />
 					<div>
 						<AdvancedControls />
 					</div>

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
@@ -9,6 +9,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
 		<PositionControls />
+		<InspectorControls.Slot group="bindings" />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />

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
@@ -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
@@ -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
@@ -12,7 +12,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';
 
@@ -27,6 +27,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 );
 
@@ -196,6 +197,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 		}
 	} );
 
+	const { canUpdateBlockBindings } = useSelect( ( select ) => {
+		return {
+			canUpdateBlockBindings:
+				select( blockEditorStore ).getSettings().canUpdateBlockBindings,
+		};
+	}, [] );
+
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 		return null;
 	}
@@ -231,17 +239,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 (
-		<InspectorControls>
+		<InspectorControls group="bindings">
 			<ToolsPanel
 				label={ __( 'Attributes' ) }
 				resetAll={ () => {
@@ -263,9 +270,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 						/>
 					) }
 				</ItemGroup>
-				<Text variant="muted">
-					{ __( 'Attributes connected to various sources.' ) }
-				</Text>
+				<ItemGroup>
+					<Text variant="muted">
+						{ __(
+							'Attributes connected to custom fields or other dynamic data.'
+						) }
+					</Text>
+				</ItemGroup>
 			</ToolsPanel>
 		</InspectorControls>
 	);

diff --git 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
@@ -1441,20 +1441,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',
 				} );
@@ -1464,11 +1454,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: {
@@ -1483,12 +1468,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' )
@@ -1586,20 +1566,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',
 				} );
@@ -1786,11 +1756,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: [
@@ -2121,11 +2086,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',
 				} );
@@ -2414,11 +2374,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' );
 		} );
 	} );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		https://github.com/WordPress/wordpress-develop/pull/7258

		* https://github.com/WordPress/gutenberg/pull/64570