Block bindings: UI for connecting bindings (#62880)

* Initial experiment

* First experiment of raw custom field for P

* use selectors

* Use lists

* Remove

* Fix removing

* Add new ui

* Update attributes

* Check binded number

* Check binded number

* Move bindings panel to editor

* Move code

* Move to utils

* Use tools panel for connections

* Add reset

* Add bordered items

* Fix some styles

* Move utils back to component

* Remove not needed comments

* Some refactor

* Prevent UI with no meta data

* Add helper

* Add helper

* Add simple e2e

* Add one more menuitem to the list

* Update e2e tests now a new tab appears by default

* Another test

* Add e2e to check paragraph

* Remove not needed experiment

* Remove extra blank spaces

* update e2e

* Keep updating e2e

* Remove css to the minimum

* Less CSS

* Abstract fields and move hooks back to block-editor

* Return null when no bindableAttributes

* Add checks to registration

* Fix when the list of fields is empty

* Properly filter footnotes

* Update tests

* Remove classes from component

* Remove all components mention

* Add ignore console error

* Add icons and fix styling

* Remove not needed as p

* Remove icon

* Remove icons, show label only if there are more than one source

* Simplify style names

* Adapt design

* Use `ItemGroup` inside `ToolsPanel`

* Use `Text` component

* Use `getBlockBindingsSources` function

* Revert change to popover max-width

* Remove not used classes

* Remove unused props

* Add fallbacks for undefined keys

* Try: Use `DropdownMenuV2`

* Add button to remove the binding

* Reduce truncate lines to 1

* Fix labels when multiple sources

* Try: Add readOnly support when fields are undefined

* Use RadioItem instead of Checkbox

* Remove "Clear" button

* Remove clear button CSS

* Don't use DropdownItems outside Dropdown

* Move separator inside menu group

* Use onChange to better align with radio behavior

* Add aria-hiddden to group heading

* Update tests

* Reduce custom styles

* Properly add block context after latest changes

* Adapt tests

* Remove `numberOfLines` prop

* Remove unused class

* Fix mobile popover

* Move Separator outside of `DropdownMenuGroup`

* Remove empty sources from `fieldsList`

* Move UI under experimental flag

* Adapt e2e changes to experimental flag

* Remove missing clicks in tests

* Adapt another test

---------

Unlinked contributors: jarekmorawski.

Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: artemiomorales <artemiosans@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: sc0ttkclark <sc0ttkclark@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: seifeldinio <seifradwane@git.wordpress.org>

lib/experimental/editor-settings.php

@@ -34,6 +34,9 @@ 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' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -163,6 +163,18 @@ 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',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'