Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Block Bindings Panel to Block Inspector #61527

Merged
merged 18 commits into from
May 17, 2024

Conversation

artemiomorales
Copy link
Contributor

@artemiomorales artemiomorales commented May 9, 2024

What?

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

Why?

Addresses #61404
We want to begin adding a UI for block bindings, which would 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 -->
  1. Click on the bound blocks — see that there is now a Bindings Panel in the Block Inspector where you can see the active bindings.
  2. 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

Screenshot 2024-05-09 at 7 16 03 PM

Copy link

github-actions bot commented May 9, 2024

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

Copy link
Contributor Author

@artemiomorales artemiomorales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is a first pass at adding a Block Bindings Panel. I aimed mostly to just get it working and am unsure of best practices regarding passing around block instances vs. introducing additional selectors inside of new components. I figured I would open this to start getting some ideas and feedback before refactoring. Any thoughts appreciated!

@artemiomorales artemiomorales marked this pull request as ready for review May 9, 2024 17:31
Copy link

github-actions bot commented May 9, 2024

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 <artemiosans@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

@artemiomorales
Copy link
Contributor Author

@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.

@artemiomorales artemiomorales changed the title Add Block Bindings panel to Block Inspector Add Block Bindings Panel to Block Inspector May 9, 2024
@SantosGuillamot
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor

Nice, progress!

Screenshot 2024-05-13 at 09 52 01

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
Copy link
Contributor Author

@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!

Comment on lines 1 to 12
.components-panel__block-bindings-panel {

.components-item {
display: flex;
justify-content: space-between;

.components-item__block-bindings-source {
color: $gray-700;
}
}

}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How are these styles different from the original components? It'd be great to analyze and discuss if this is something specific to this use case or it is something other cases would benefit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jasmussen Not sure if you'd be able to offer insight here — should we abstract this style so that it's reusable for other features?

To me, this styling here to create a left and right column within the Item group does seem pretty specific to the block bindings panel.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if it is common to other components, but I was thinking of adding properties to handle different use cases.

For example, I can see other components have a color property. Does it make sense for this component? Why?

Addtionally, the structure looks really similar to the fonts panel showed here. Or even for other things like shadows.

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if you'd be able to offer insight here — should we abstract this style so that it's reusable for other features?

Almost certainly, yes. @madhusudhand is working on ItemGroup enhancements as well: #60706 (comment)

Whether we can get the ItemGroup component updated in time for this panel to land in 6.6, or you have to use a local temporary setup, that's actually less important — we can componentize and systematize at a later time.

We know this:

  • ItemGroup is the right component for this panel, and for shadows, and for fonts.
  • We want the ItemGroup component itself to optionally support a "minus" to remove/clear. We need that for fonts, even, for quick removal.
  • An optional help-text or "tip" column on the right, feels like a valid prop to have as well. It might be mutually exclusive with some other items, like the reset button. But here's a recent use case.

All of those cases may initially be separate things, but conceptually, they're all ItemGroups, and ideally we reach a space where the singular ItemGroup component can support those cases, without local CSS to support it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For example, I can see other components have a color property. Does it make sense for this component? Why?

@SantosGuillamot Which components are you looking at?

Addtionally, the structure looks really similar to the fonts panel showed #60706 (comment). Or even for other things like shadows.

The structure looks similar but in the case of fonts, they're actually buttons, whereas each item consists of two span in this PR at the moment. Once we add the functionality to remove bindings, these items will likely also become buttons instead and perhaps the discrepancy in structure will get resolved then.

fonts

I'm currently looking at the Shadows structure and see there are some things that may translate to the Bindings Panel — will give that a shot soon.

Whether we can get the ItemGroup component updated in time for this panel to land in 6.6, or you have to use a local temporary setup, that's actually less important — we can componentize and systematize at a later time.

Ok, what I'm hearing is to give consolidation a shot with what already exists, but if it doesn't yet, let's just get this merged then consolidate everything later. Let me know if that sounds incorrect!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we land the proposed UI first and iterate on abstracting CSS later?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SantosGuillamot Which components are you looking at?

I just clicked something random, but it seems the Heading component has it. Or we could have variant/styles like in the button component.

An optional help-text or "tip" column on the right, feels like a valid prop to have as well.

I like the idea of having a prop like this.

So, if we include two new props to the component, would we still need the custom CSS? I'm thinking of:

  • help-text or "tip".
  • color/variant.

Is this something that could be implemented to be reused?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we land the proposed UI first and iterate on abstracting CSS later?

This sounds good to me.

I like the idea of having a prop like this.

So, if we include two new props to the component, would we still need the custom CSS? I'm thinking of:

  • help-text or "tip".
  • color/variant.

Is this something that could be implemented to be reused?

Seems like they could probably be reused, and seems like this could be good to explore in a separate PR specifically related to the ItemGroup.

Addtionally, the structure looks really similar to the fonts panel showed #60706 (comment). Or even for other things like shadows.

@SantosGuillamot Taking inspiration from shadows, I ended up using the existing HStack component for the Bindings Panel rather than using custom CSS in one of the most recent commits 👍

@gziolo
Copy link
Member

gziolo commented May 15, 2024

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.

@mirka
Copy link
Member

mirka commented May 16, 2024

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
Copy link
Contributor Author

@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?

unknown-source

.label
) : (
<span className="error">
Error: Unknown Source
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be translatable.

What about the case when the source gets registered only on the server? It's all custom sources these days because the client-side API is still private. @SantosGuillamot and I were discussing exposing the registered sources from the server in a different PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the case when the source gets registered only on the server? It's all custom sources these days because the client-side API is still private. @SantosGuillamot and I were discussing exposing the registered sources from the server in a different PR

@gziolo I don't follow 🤔 Sources that get registered on the server using register_block_bindings_source() need to provide a label, which is what we would use here. The error would only arise when users try to bind a block to a source and mistype the source's name, or if they attempt to connect to a source that hasn't been registered. And as far as I see, the panel would get rendered regardless of what kind of block it is, core or custom, as long as it has the metadata.bindings property (though this should probably be tested — will take a look at that).

To clarify, what are you referring to when you say "client-side API", and how does it relate to this scenario?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sources we are consuming in the editor need to be registered in JS as well. They provide functions to know how to get the values and how to update them in the editor. One example could be the post-meta source that is registered here.

Registering in the client is not mandatory, and it doesn't mean it won't work on the server. So it is not exactly an error. I believe right now we are using "Dynamic Data" as a generic message, but we could also fallback to the key maybe.

In the future, as Greg mentions, we would like to reuse the server registration somehow, but that will be handled in a separate PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok got it! Thanks so much for the explanation, that's very helpful 😄
I can revise to use the name in the binding when a label isn't present 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: I've replaced the error with the machine-readable name.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I would display the machine-readable name as a fallback for the source label instead of “Error: Unknown Source” for now because of the consequences noted in my comment.

Everything else looks good.

@jasmussen
Copy link
Contributor

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
Copy link
Member

gziolo commented May 17, 2024

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
Copy link
Contributor

jasmussen commented May 17, 2024

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
Copy link
Contributor

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.

@artemiomorales artemiomorales enabled auto-merge (squash) May 17, 2024 12:33
@artemiomorales artemiomorales merged commit 0e9ad3b into trunk May 17, 2024
63 checks passed
@artemiomorales artemiomorales deleted the add/block-bindings-panel branch May 17, 2024 13:25
@github-actions github-actions bot added this to the Gutenberg 18.5 milestone May 17, 2024
patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
* Add initial pass at bindings panel in Block Inspector

* Add bindings panel to inspector controls with tabs

* Revise classnames and structure, add styles

* Rename BindingsPanel to BlockBindingsPanel

* Include Bindings Panel with hooks instead

* Revert extraneous changes

* Revert deletion of space

* Remove unnecessary unlock

* Remove unused declaration

* Simplify check for bindings

* Rename file; update imports

* Merge useSelect calls

* Use block context to look up bindings

* Add handling for unknown sources

* Remove unnecessary use of index

* Simplify access of bindings

* Use existing HStack instead of CSS

* Remove error state; show source name if label is undefined

Co-authored-by: artemiomorales <artemiosans@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

6 participants