Add Block Bindings Panel to Block Inspector

[artemiomorales]

What?

Adds a panel that shows the current active block bindings to the Block Inspector.

Why?

Addresses https://github.com/WordPress/gutenberg/issues/61404 We want to begin adding a UI for block bindings, which will make the feature easier to understand and use.

How?

It creates a new Block Bindings Panel component and includes it inside the Block Inspector based on whether the currently selected block has any bindings.

Testing Instructions

1. Register post meta by adding this snippet to your theme's functions.php

add_action( 'init', 'test_block_bindings' );

function test_block_bindings() {
	register_meta(
		'post',
		'text_from_meta_ui',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'default text from registered meta',
		)
	);

	register_meta(
		'post',
		'text_from_meta_long',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'longer text from registered meta: A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.',
		)
	);

	register_meta(
		'post',
		'url_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'esc_url_raw',
			'default'           => 'https://wpmovies.dev/wp-content/uploads/2023/04/goncharov-poster-original-1-682x1024.jpeg',
		)
	);

	register_meta(
		'post',
		'image_alt_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'some meaningful alt text',
		)
	);

	register_meta(
		'post',
		'image_title_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'some meaningful title text',
		)
	);

	register_meta(
		'post',
		'button_text_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'This is the bound button text',
		)
	);

	register_meta(
		'post',
		'button_url_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'esc_url_raw',
			'default'           => 'https://wordpress.org',
		)
	);

	register_meta(
		'post',
		'button_linkTarget_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'hello',
		)
	);

	register_meta(
		'post',
		'button_rel_from_meta_value',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => 'lalala',
		)
	);
}

2. Add some bound blocks to a new post using the Code Editor

<!-- wp:heading {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_from_meta_ui"}}}}} -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_from_meta_long"}}}}} -->
<p>Paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"url_from_meta_value"}},"alt":{"source":"core/post-meta","args":{"key":"image_alt_from_meta_value"}},"title":{"source":"core/post-meta","args":{"key":"image_title_from_meta_value"}}}}} -->
<figure class="wp-block-image"><img src="" alt="" title=""/></figure>
<!-- /wp:image -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-meta","args":{"key":"button_text_from_meta_value"}},"url":{"source":"core/post-meta","args":{"key":"button_url_from_meta_value"}},"linkTarget":{"source":"core/post-meta","args":{"key":"button_linkTarget_from_meta_value"}},"rel":{"source":"core/post-meta","args":{"key":"button_rel_from_meta_value"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="" target="" rel="noopener">asd</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

3. Click on the bound blocks — see that there is now a Bindings Panel in the Block Inspector where you can see the active bindings.
4. Try also adding a pattern and checking for the Bindings Panel after enabling pattern overrides

You may also create your own blocks and bindings if you prefer.

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions[bot]]

Size Change: +1.15 kB (+0.07%)

Total Size: 1.75 MB

Filename	Size	Change
build/block-editor/index.min.js	259 kB	+210 B (+0.08%)
build/block-editor/style-rtl.css	15.5 kB	+35 B (+0.23%)
build/block-editor/style.css	15.5 kB	+34 B (+0.22%)
build/block-library/index.min.js	217 kB	+3 B (0%)
build/blocks/index.min.js	51.7 kB	-2 B (0%)
build/components/index.min.js	222 kB	+21 B (+0.01%)
build/edit-site/index.min.js	216 kB	-3.13 kB (-1.43%)
build/edit-site/style-rtl.css	12.6 kB	-67 B (-0.53%)
build/edit-site/style.css	12.6 kB	-72 B (-0.57%)
build/editor/index.min.js	90.2 kB	+3.85 kB (+4.45%)
build/editor/style-rtl.css	8.35 kB	+12 B (+0.14%)
build/editor/style.css	8.35 kB	+11 B (+0.13%)
build/interactivity/debug.min.js	16.4 kB	+125 B (+0.77%)
build/interactivity/index.min.js	13.2 kB	+131 B (+1%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.27 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.1 kB
build/blob/index.min.js	578 B
build/block-directory/index.min.js	7.26 kB
build/block-directory/style-rtl.css	1.03 kB
build/block-directory/style.css	1.03 kB
build/block-editor/content-rtl.css	4.57 kB
build/block-editor/content.css	4.57 kB
build/block-editor/default-editor-styles-rtl.css	395 B
build/block-editor/default-editor-styles.css	395 B
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	133 B
build/block-library/blocks/audio/theme.css	133 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/block/editor-rtl.css	277 B
build/block-library/blocks/block/editor.css	277 B
build/block-library/blocks/button/editor-rtl.css	415 B
build/block-library/blocks/button/editor.css	414 B
build/block-library/blocks/button/style-rtl.css	627 B
build/block-library/blocks/button/style.css	626 B
build/block-library/blocks/buttons/editor-rtl.css	337 B
build/block-library/blocks/buttons/editor.css	337 B
build/block-library/blocks/buttons/style-rtl.css	332 B
build/block-library/blocks/buttons/style.css	332 B
build/block-library/blocks/calendar/style-rtl.css	239 B
build/block-library/blocks/calendar/style.css	239 B
build/block-library/blocks/categories/editor-rtl.css	113 B
build/block-library/blocks/categories/editor.css	112 B
build/block-library/blocks/categories/style-rtl.css	124 B
build/block-library/blocks/categories/style.css	124 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	421 B
build/block-library/blocks/columns/style.css	421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	199 B
build/block-library/blocks/comment-template/style.css	198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	840 B
build/block-library/blocks/comments/editor.css	839 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	636 B
build/block-library/blocks/cover/editor-rtl.css	671 B
build/block-library/blocks/cover/editor.css	674 B
build/block-library/blocks/cover/style-rtl.css	1.7 kB
build/block-library/blocks/cover/style.css	1.69 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	312 B
build/block-library/blocks/embed/editor.css	312 B
build/block-library/blocks/embed/style-rtl.css	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	133 B
build/block-library/blocks/embed/theme.css	133 B
build/block-library/blocks/file/editor-rtl.css	326 B
build/block-library/blocks/file/editor.css	327 B
build/block-library/blocks/file/style-rtl.css	280 B
build/block-library/blocks/file/style.css	281 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	201 B
build/block-library/blocks/footnotes/style.css	199 B
build/block-library/blocks/form-input/editor-rtl.css	227 B
build/block-library/blocks/form-input/editor.css	227 B
build/block-library/blocks/form-input/style-rtl.css	343 B
build/block-library/blocks/form-input/style.css	343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	340 B
build/block-library/blocks/form-submission-notification/editor.css	340 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	471 B
build/block-library/blocks/freeform/editor-rtl.css	2.61 kB
build/block-library/blocks/freeform/editor.css	2.61 kB
build/block-library/blocks/gallery/editor-rtl.css	956 B
build/block-library/blocks/gallery/editor.css	960 B
build/block-library/blocks/gallery/style-rtl.css	1.72 kB
build/block-library/blocks/gallery/style.css	1.72 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	403 B
build/block-library/blocks/group/editor.css	403 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	189 B
build/block-library/blocks/heading/style.css	189 B
build/block-library/blocks/html/editor-rtl.css	336 B
build/block-library/blocks/html/editor.css	337 B
build/block-library/blocks/image/editor-rtl.css	891 B
build/block-library/blocks/image/editor.css	891 B
build/block-library/blocks/image/style-rtl.css	1.6 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	133 B
build/block-library/blocks/image/theme.css	133 B
build/block-library/blocks/image/view.min.js	1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css	357 B
build/block-library/blocks/latest-comments/style.css	357 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	478 B
build/block-library/blocks/latest-posts/style.css	478 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	306 B
build/block-library/blocks/media-text/editor.css	305 B
build/block-library/blocks/media-text/style-rtl.css	505 B
build/block-library/blocks/media-text/style.css	503 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	668 B
build/block-library/blocks/navigation-link/editor.css	669 B
build/block-library/blocks/navigation-link/style-rtl.css	193 B
build/block-library/blocks/navigation-link/style.css	192 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	296 B
build/block-library/blocks/navigation-submenu/editor.css	295 B
build/block-library/blocks/navigation/editor-rtl.css	2.26 kB
build/block-library/blocks/navigation/editor.css	2.26 kB
build/block-library/blocks/navigation/style-rtl.css	2.26 kB
build/block-library/blocks/navigation/style.css	2.25 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	377 B
build/block-library/blocks/page-list/editor.css	377 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	235 B
build/block-library/blocks/paragraph/editor.css	235 B
build/block-library/blocks/paragraph/style-rtl.css	335 B
build/block-library/blocks/paragraph/style.css	335 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	508 B
build/block-library/blocks/post-comments-form/style.css	508 B
build/block-library/blocks/post-content/editor-rtl.css	74 B
build/block-library/blocks/post-content/editor.css	74 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	141 B
build/block-library/blocks/post-excerpt/style.css	141 B
build/block-library/blocks/post-featured-image/editor-rtl.css	734 B
build/block-library/blocks/post-featured-image/editor.css	732 B
build/block-library/blocks/post-featured-image/style-rtl.css	342 B
build/block-library/blocks/post-featured-image/style.css	342 B
build/block-library/blocks/post-navigation-link/style-rtl.css	215 B
build/block-library/blocks/post-navigation-link/style.css	214 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	397 B
build/block-library/blocks/post-template/style.css	396 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	69 B
build/block-library/blocks/post-time-to-read/style.css	69 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 B
build/block-library/blocks/preformatted/style-rtl.css	125 B
build/block-library/blocks/preformatted/style.css	125 B
build/block-library/blocks/pullquote/editor-rtl.css	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	354 B
build/block-library/blocks/pullquote/style.css	353 B
build/block-library/blocks/pullquote/theme-rtl.css	174 B
build/block-library/blocks/pullquote/theme.css	174 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	288 B
build/block-library/blocks/query-pagination/style.css	284 B
build/block-library/blocks/query-title/style-rtl.css	63 B
build/block-library/blocks/query-title/style.css	63 B
build/block-library/blocks/query/editor-rtl.css	486 B
build/block-library/blocks/query/editor.css	486 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	237 B
build/block-library/blocks/quote/style.css	237 B
build/block-library/blocks/quote/theme-rtl.css	233 B
build/block-library/blocks/quote/theme.css	235 B
build/block-library/blocks/read-more/style-rtl.css	140 B
build/block-library/blocks/read-more/style.css	140 B
build/block-library/blocks/rss/editor-rtl.css	101 B
build/block-library/blocks/rss/editor.css	101 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	184 B
build/block-library/blocks/search/editor.css	184 B
build/block-library/blocks/search/style-rtl.css	690 B
build/block-library/blocks/search/style.css	689 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/search/view.min.js	478 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	239 B
build/block-library/blocks/separator/style.css	239 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	286 B
build/block-library/blocks/shortcode/editor.css	286 B
build/block-library/blocks/site-logo/editor-rtl.css	805 B
build/block-library/blocks/site-logo/editor.css	805 B
build/block-library/blocks/site-logo/style-rtl.css	204 B
build/block-library/blocks/site-logo/style.css	204 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	116 B
build/block-library/blocks/site-title/editor.css	116 B
build/block-library/blocks/site-title/style-rtl.css	57 B
build/block-library/blocks/site-title/style.css	57 B
build/block-library/blocks/social-link/editor-rtl.css	324 B
build/block-library/blocks/social-link/editor.css	324 B
build/block-library/blocks/social-links/editor-rtl.css	676 B
build/block-library/blocks/social-links/editor.css	675 B
build/block-library/blocks/social-links/style-rtl.css	1.5 kB
build/block-library/blocks/social-links/style.css	1.5 kB
build/block-library/blocks/spacer/editor-rtl.css	350 B
build/block-library/blocks/spacer/editor.css	350 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	395 B
build/block-library/blocks/table/editor.css	395 B
build/block-library/blocks/table/style-rtl.css	639 B
build/block-library/blocks/table/style.css	639 B
build/block-library/blocks/table/theme-rtl.css	152 B
build/block-library/blocks/table/theme.css	152 B
build/block-library/blocks/tag-cloud/style-rtl.css	251 B
build/block-library/blocks/tag-cloud/style.css	253 B
build/block-library/blocks/template-part/editor-rtl.css	393 B
build/block-library/blocks/template-part/editor.css	393 B
build/block-library/blocks/template-part/theme-rtl.css	107 B
build/block-library/blocks/template-part/theme.css	107 B
build/block-library/blocks/term-description/style-rtl.css	111 B
build/block-library/blocks/term-description/style.css	111 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	99 B
build/block-library/blocks/verse/style.css	99 B
build/block-library/blocks/video/editor-rtl.css	552 B
build/block-library/blocks/video/editor.css	555 B
build/block-library/blocks/video/style-rtl.css	185 B
build/block-library/blocks/video/style.css	185 B
build/block-library/blocks/video/theme-rtl.css	133 B
build/block-library/blocks/video/theme.css	133 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.11 kB
build/block-library/common.css	1.11 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	12.2 kB
build/block-library/editor.css	12.2 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.8 kB
build/block-library/style.css	14.8 kB
build/block-library/theme-rtl.css	707 B
build/block-library/theme.css	713 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/commands/index.min.js	15.1 kB
build/commands/style-rtl.css	953 B
build/commands/style.css	951 B
build/components/style-rtl.css	12 kB
build/components/style.css	12 kB
build/compose/index.min.js	12.8 kB
build/core-commands/index.min.js	2.81 kB
build/core-data/index.min.js	72.5 kB
build/customize-widgets/index.min.js	10.9 kB
build/customize-widgets/style-rtl.css	1.36 kB
build/customize-widgets/style.css	1.36 kB
build/data-controls/index.min.js	640 B
build/data/index.min.js	9 kB
build/date/index.min.js	17.9 kB
build/deprecated/index.min.js	451 B
build/dom-ready/index.min.js	324 B
build/dom/index.min.js	4.65 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	578 B
build/edit-post/index.min.js	14.6 kB
build/edit-post/style-rtl.css	2.68 kB
build/edit-post/style.css	2.68 kB
build/edit-widgets/index.min.js	17.5 kB
build/edit-widgets/style-rtl.css	4.18 kB
build/edit-widgets/style.css	4.18 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.07 kB
build/format-library/style-rtl.css	493 B
build/format-library/style.css	492 B
build/hooks/index.min.js	1.55 kB
build/html-entities/index.min.js	448 B
build/i18n/index.min.js	3.58 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.67 kB
build/interactivity/navigation.min.js	1.17 kB
build/interactivity/query.min.js	740 B
build/interactivity/router.min.js	2.79 kB
build/interactivity/search.min.js	618 B
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.3 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.11 kB
build/list-reusable-blocks/style-rtl.css	851 B
build/list-reusable-blocks/style.css	851 B
build/media-utils/index.min.js	2.92 kB
build/modules/importmap-polyfill.min.js	12.2 kB
build/notices/index.min.js	948 B
build/nux/index.min.js	1.57 kB
build/nux/style-rtl.css	748 B
build/nux/style.css	744 B
build/patterns/index.min.js	6.46 kB
build/patterns/style-rtl.css	595 B
build/patterns/style.css	595 B
build/plugins/index.min.js	1.8 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.85 kB
build/preferences/style-rtl.css	710 B
build/preferences/style.css	712 B
build/primitives/index.min.js	809 B
build/priority-queue/index.min.js	1.52 kB
build/private-apis/index.min.js	1 kB
build/react-i18n/index.min.js	623 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.78 kB
build/redux-routine/index.min.js	2.7 kB
build/reusable-blocks/index.min.js	2.7 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	10.1 kB
build/router/index.min.js	1.93 kB
build/server-side-render/index.min.js	1.96 kB
build/shortcode/index.min.js	1.39 kB
build/style-engine/index.min.js	2.02 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.74 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react.min.js	4.03 kB
build/viewport/index.min.js	957 B
build/warning/index.min.js	249 B
build/widgets/index.min.js	7.11 kB
build/widgets/style-rtl.css	1.17 kB
build/widgets/style.css	1.17 kB
build/wordcount/index.min.js	1.02 kB

_{compressed-size-action}

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: artemiomorales <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: SantosGuillamot <[email protected]>
Co-authored-by: cbravobernal <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: mirka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[artemiomorales]

@jasmussen @richtabor I pinged you so you can see a live version of the Block Bindings Panel and see how it feels. I'm thinking to remove prior UI from the canvas in a separate PR to keep the code easy to review.

[SantosGuillamot]

I didn't take a deep look at the code yet, but I am not sure we should modify the existing components for the inspector just to include the bindings and also exposing a new component that won't probably be reused outside of this use case.

Can't we use a block-editor hook and the InspectorControls component like we are doing with block hooks for example?

[artemiomorales]

Can't we use a block-editor hook and the InspectorControls component like we are doing with block hooks for example?

Yeah that makes sense! I'll take a look at it more closely soon, and would also like to give space for thoughts from other folks.

[jasmussen]

Nice, progress!

Just at a quick glance, this panel feels like a great way to add clarity to connected blocks. As soon as you select one, the panel appearing in the inspector makes it very clear this is a connected block.

Unrelated to this, we need to make progress on the ItemGroup items, they are 42px tall and should be 40px. @mirka do you know if there might be an easy fix here?

[artemiomorales]

@SantosGuillamot I've refactored this PR and put the Block Bindings Panel inside of the hooks folder, similar to how the Block Hooks are included. This also resolves all of the questions i had regarding how to include the rendering logic. Let me know what you think!

[gziolo]

I left some comments that are related to performance optimizations. In this case, it probably doesn't matter much, but those are good practices to follow and should be straightforward to apply. Nice work overall. 👍

Some e2e test fail. It might be two things. There is a new panel present in the sidebar so some existing tests might make assumptions about the order of panels. In the case of the multiselection tests, it might require showing this panel only when a single block is selected.

[artemiomorales]

@gziolo

I left some comments that are related to performance optimizations. In this case, it probably doesn't matter much, but those are good practices to follow and should be straightforward to apply. Nice work overall. 👍

Ok I changed the implementation to retrieve bindings using the context instead.

Some e2e test fail. It might be two things. There is a new panel present in the sidebar so some existing tests might make assumptions about the order of panels. In the case of the multiselection tests, it might require showing this panel only when a single block is selected.

Thanks for the pointer! Will be looking at this next.

[mirka]

Unrelated to this, we need to make progress on the ItemGroup items, they are 42px tall and should be 40px. @mirka do you know if there might be an easy fix here?

These heights are currently determined by the content height and paddings, rather than an absolute height value. Looks like we can get irregular heights in the block editor due to the cascading body line-height coming from common.css. I'd suggest we add an explicit line-height to the ItemGroup styles so we consistently end up with the height we want.

[artemiomorales]

@jasmussen As revealed by the end to end tests, I realized that we should probably have an error state when users try to use a binding source that hasn't been registered. How does this look?

[jasmussen]

How does this look?

This will likely very quickly get cramped. We can try and see if an error message can fit there, otherwise I'd be tempted to put an alert icon, and instead put a far more verbose error message in the actual flyout, which would fit translations.

As far as text, use sentence case across. And I wonder, is "Unknown source" or "No source" sufficient?

[gziolo]

And I wonder, is "Unknown source" or "No source" sufficient?

I like the "unknown" more. It could be also "unsupported" or "unrecognized". Should we also use some title attribute to hint the machine-readable name of the source so the admin of the site could debug it or maybe print it on the Browser Console instead?

[jasmussen]

You all should decide, as you have context I don't. The main piece is to seek as short a term as possible, as it's a really constrained context.

[SantosGuillamot]

I agree that we should probably change the Error message. I tried to explain it here, but basically, it doesn't imply it is an error.

I believe I would personally fall back to the name used in the bindings instead of the label if it is not defined. It would be something like "plugin/custom-source" instead of "Plugin Custom Source", for example.