Block Bindings: Add warning when block attribute is connected to an invalid binding

[SantosGuillamot]

What?

Now that the sources registered in the server are bootstrapped in the client after this pull request, I believe it is safe to assume that if the source doesn't exist in the editor, it is an error.

In this pull request, I'm adding a warning while checking the bindings.

Why?

It should help notify users that the block won't possibly work as expected.

How?

While going through the bindings, checks if the source is registered and if not, it throws a warning and provide a button to remove the connection.

Testing Instructions

1. Go to a page and insert a paragraph connected to an undefined source.

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/undefined"}}}} -->
<p>Default content</p>
<!-- /wp:paragraph -->

2. Check that the warning is shown.

3. Click on "Remove connection" and check it shows the default content.

You can repeat the process with an image with multiple attributes:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/undefined"},"alt":{"source":"core/undefined"},"title":{"source":"core/undefined"}}}} -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

[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: SantosGuillamot <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: cbravobernal <[email protected]>
Co-authored-by: artemiomorales <[email protected]>
Co-authored-by: jasmussen <[email protected]>

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

[github-actions[bot]]

Size Change: +458 B (+0.03%)

Total Size: 1.78 MB

Filename	Size	Change
build/block-editor/index.min.js	257 kB	+140 B (+0.05%)
build/block-editor/style-rtl.css	16.2 kB	-22 B (-0.14%)
build/block-editor/style.css	16.2 kB	-19 B (-0.12%)
build/block-library/index.min.js	217 kB	+100 B (+0.05%)
build/components/index.min.js	224 kB	+203 B (+0.09%)
build/core-data/index.min.js	73.2 kB	+13 B (+0.02%)
build/edit-site/index.min.js	217 kB	+43 B (+0.02%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	951 B
build/annotations/index.min.js	2.26 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.31 kB
build/block-directory/style-rtl.css	1.01 kB
build/block-directory/style.css	1.01 kB
build/block-editor/content-rtl.css	4.57 kB
build/block-editor/content.css	4.56 kB
build/block-editor/default-editor-styles-rtl.css	394 B
build/block-editor/default-editor-styles.css	394 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	149 B
build/block-library/blocks/audio/editor.css	151 B
build/block-library/blocks/audio/style-rtl.css	132 B
build/block-library/blocks/audio/style.css	132 B
build/block-library/blocks/audio/theme-rtl.css	134 B
build/block-library/blocks/audio/theme.css	134 B
build/block-library/blocks/avatar/editor-rtl.css	115 B
build/block-library/blocks/avatar/editor.css	115 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/button/editor-rtl.css	265 B
build/block-library/blocks/button/editor.css	265 B
build/block-library/blocks/button/style-rtl.css	538 B
build/block-library/blocks/button/style.css	538 B
build/block-library/blocks/buttons/editor-rtl.css	291 B
build/block-library/blocks/buttons/editor.css	291 B
build/block-library/blocks/buttons/style-rtl.css	328 B
build/block-library/blocks/buttons/style.css	328 B
build/block-library/blocks/calendar/style-rtl.css	240 B
build/block-library/blocks/calendar/style.css	240 B
build/block-library/blocks/categories/editor-rtl.css	132 B
build/block-library/blocks/categories/editor.css	131 B
build/block-library/blocks/categories/style-rtl.css	152 B
build/block-library/blocks/categories/style.css	152 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	122 B
build/block-library/blocks/code/theme.css	122 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	420 B
build/block-library/blocks/columns/style.css	420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	124 B
build/block-library/blocks/comment-author-avatar/editor.css	124 B
build/block-library/blocks/comment-author-name/style-rtl.css	72 B
build/block-library/blocks/comment-author-name/style.css	72 B
build/block-library/blocks/comment-content/style-rtl.css	120 B
build/block-library/blocks/comment-content/style.css	120 B
build/block-library/blocks/comment-date/style-rtl.css	65 B
build/block-library/blocks/comment-date/style.css	65 B
build/block-library/blocks/comment-template/style-rtl.css	200 B
build/block-library/blocks/comment-template/style.css	199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	228 B
build/block-library/blocks/comments-pagination/editor.css	217 B
build/block-library/blocks/comments-pagination/style-rtl.css	234 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	832 B
build/block-library/blocks/comments/editor.css	832 B
build/block-library/blocks/comments/style-rtl.css	632 B
build/block-library/blocks/comments/style.css	631 B
build/block-library/blocks/cover/editor-rtl.css	641 B
build/block-library/blocks/cover/editor.css	642 B
build/block-library/blocks/cover/style-rtl.css	1.62 kB
build/block-library/blocks/cover/style.css	1.6 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	331 B
build/block-library/blocks/embed/editor.css	331 B
build/block-library/blocks/embed/style-rtl.css	419 B
build/block-library/blocks/embed/style.css	419 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	326 B
build/block-library/blocks/file/style-rtl.css	278 B
build/block-library/blocks/file/style.css	279 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	198 B
build/block-library/blocks/footnotes/style.css	197 B
build/block-library/blocks/form-input/editor-rtl.css	229 B
build/block-library/blocks/form-input/editor.css	229 B
build/block-library/blocks/form-input/style-rtl.css	342 B
build/block-library/blocks/form-input/style.css	342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	344 B
build/block-library/blocks/form-submission-notification/editor.css	341 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	470 B
build/block-library/blocks/freeform/editor-rtl.css	2.6 kB
build/block-library/blocks/freeform/editor.css	2.6 kB
build/block-library/blocks/gallery/editor-rtl.css	955 B
build/block-library/blocks/gallery/editor.css	958 B
build/block-library/blocks/gallery/style-rtl.css	1.83 kB
build/block-library/blocks/gallery/style.css	1.82 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	344 B
build/block-library/blocks/group/editor.css	344 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	79 B
build/block-library/blocks/group/theme.css	79 B
build/block-library/blocks/heading/style-rtl.css	188 B
build/block-library/blocks/heading/style.css	188 B
build/block-library/blocks/html/editor-rtl.css	346 B
build/block-library/blocks/html/editor.css	347 B
build/block-library/blocks/image/editor-rtl.css	894 B
build/block-library/blocks/image/editor.css	892 B
build/block-library/blocks/image/style-rtl.css	1.59 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
build/block-library/blocks/image/view.min.js	1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css	355 B
build/block-library/blocks/latest-comments/style.css	354 B
build/block-library/blocks/latest-posts/editor-rtl.css	179 B
build/block-library/blocks/latest-posts/editor.css	179 B
build/block-library/blocks/latest-posts/style-rtl.css	509 B
build/block-library/blocks/latest-posts/style.css	510 B
build/block-library/blocks/list/style-rtl.css	107 B
build/block-library/blocks/list/style.css	107 B
build/block-library/blocks/loginout/style-rtl.css	61 B
build/block-library/blocks/loginout/style.css	61 B
build/block-library/blocks/media-text/editor-rtl.css	304 B
build/block-library/blocks/media-text/editor.css	303 B
build/block-library/blocks/media-text/style-rtl.css	516 B
build/block-library/blocks/media-text/style.css	515 B
build/block-library/blocks/more/editor-rtl.css	427 B
build/block-library/blocks/more/editor.css	427 B
build/block-library/blocks/navigation-link/editor-rtl.css	644 B
build/block-library/blocks/navigation-link/editor.css	645 B
build/block-library/blocks/navigation-link/style-rtl.css	192 B
build/block-library/blocks/navigation-link/style.css	191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	295 B
build/block-library/blocks/navigation-submenu/editor.css	294 B
build/block-library/blocks/navigation/editor-rtl.css	2.2 kB
build/block-library/blocks/navigation/editor.css	2.2 kB
build/block-library/blocks/navigation/style-rtl.css	2.25 kB
build/block-library/blocks/navigation/style.css	2.23 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	392 B
build/block-library/blocks/nextpage/editor.css	392 B
build/block-library/blocks/page-list/editor-rtl.css	378 B
build/block-library/blocks/page-list/editor.css	378 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	236 B
build/block-library/blocks/paragraph/editor.css	236 B
build/block-library/blocks/paragraph/style-rtl.css	341 B
build/block-library/blocks/paragraph/style.css	340 B
build/block-library/blocks/post-author-biography/style-rtl.css	74 B
build/block-library/blocks/post-author-biography/style.css	74 B
build/block-library/blocks/post-author-name/style-rtl.css	69 B
build/block-library/blocks/post-author-name/style.css	69 B
build/block-library/blocks/post-author/editor-rtl.css	107 B
build/block-library/blocks/post-author/editor.css	107 B
build/block-library/blocks/post-author/style-rtl.css	188 B
build/block-library/blocks/post-author/style.css	189 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	527 B
build/block-library/blocks/post-comments-form/style.css	528 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-content/style-rtl.css	79 B
build/block-library/blocks/post-content/style.css	79 B
build/block-library/blocks/post-date/style-rtl.css	62 B
build/block-library/blocks/post-date/style.css	62 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	155 B
build/block-library/blocks/post-excerpt/style.css	155 B
build/block-library/blocks/post-featured-image/editor-rtl.css	729 B
build/block-library/blocks/post-featured-image/editor.css	726 B
build/block-library/blocks/post-featured-image/style-rtl.css	347 B
build/block-library/blocks/post-featured-image/style.css	347 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	399 B
build/block-library/blocks/post-template/style.css	398 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	70 B
build/block-library/blocks/post-time-to-read/style.css	70 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	134 B
build/block-library/blocks/pullquote/editor.css	134 B
build/block-library/blocks/pullquote/style-rtl.css	342 B
build/block-library/blocks/pullquote/style.css	342 B
build/block-library/blocks/pullquote/theme-rtl.css	167 B
build/block-library/blocks/pullquote/theme.css	167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	121 B
build/block-library/blocks/query-pagination-numbers/editor.css	118 B
build/block-library/blocks/query-pagination/editor-rtl.css	225 B
build/block-library/blocks/query-pagination/editor.css	215 B
build/block-library/blocks/query-pagination/style-rtl.css	287 B
build/block-library/blocks/query-pagination/style.css	283 B
build/block-library/blocks/query-title/style-rtl.css	64 B
build/block-library/blocks/query-title/style.css	64 B
build/block-library/blocks/query/editor-rtl.css	452 B
build/block-library/blocks/query/editor.css	451 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	238 B
build/block-library/blocks/quote/style.css	238 B
build/block-library/blocks/quote/theme-rtl.css	233 B
build/block-library/blocks/quote/theme.css	236 B
build/block-library/blocks/read-more/style-rtl.css	138 B
build/block-library/blocks/read-more/style.css	138 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	288 B
build/block-library/blocks/rss/style.css	287 B
build/block-library/blocks/search/editor-rtl.css	199 B
build/block-library/blocks/search/editor.css	199 B
build/block-library/blocks/search/style-rtl.css	672 B
build/block-library/blocks/search/style.css	671 B
build/block-library/blocks/search/theme-rtl.css	113 B
build/block-library/blocks/search/theme.css	113 B
build/block-library/blocks/search/view.min.js	475 B
build/block-library/blocks/separator/editor-rtl.css	100 B
build/block-library/blocks/separator/editor.css	100 B
build/block-library/blocks/separator/style-rtl.css	248 B
build/block-library/blocks/separator/style.css	248 B
build/block-library/blocks/separator/theme-rtl.css	195 B
build/block-library/blocks/separator/theme.css	195 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	806 B
build/block-library/blocks/site-logo/editor.css	803 B
build/block-library/blocks/site-logo/style-rtl.css	218 B
build/block-library/blocks/site-logo/style.css	218 B
build/block-library/blocks/site-tagline/editor-rtl.css	87 B
build/block-library/blocks/site-tagline/editor.css	87 B
build/block-library/blocks/site-tagline/style-rtl.css	65 B
build/block-library/blocks/site-tagline/style.css	65 B
build/block-library/blocks/site-title/editor-rtl.css	85 B
build/block-library/blocks/site-title/editor.css	85 B
build/block-library/blocks/site-title/style-rtl.css	90 B
build/block-library/blocks/site-title/style.css	90 B
build/block-library/blocks/social-link/editor-rtl.css	338 B
build/block-library/blocks/social-link/editor.css	338 B
build/block-library/blocks/social-links/editor-rtl.css	757 B
build/block-library/blocks/social-links/editor.css	756 B
build/block-library/blocks/social-links/style-rtl.css	1.51 kB
build/block-library/blocks/social-links/style.css	1.5 kB
build/block-library/blocks/spacer/editor-rtl.css	346 B
build/block-library/blocks/spacer/editor.css	346 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-of-contents/style-rtl.css	83 B
build/block-library/blocks/table-of-contents/style.css	83 B
build/block-library/blocks/table/editor-rtl.css	394 B
build/block-library/blocks/table/editor.css	394 B
build/block-library/blocks/table/style-rtl.css	640 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/editor-rtl.css	144 B
build/block-library/blocks/tag-cloud/editor.css	144 B
build/block-library/blocks/tag-cloud/style-rtl.css	266 B
build/block-library/blocks/tag-cloud/style.css	265 B
build/block-library/blocks/template-part/editor-rtl.css	368 B
build/block-library/blocks/template-part/editor.css	368 B
build/block-library/blocks/template-part/theme-rtl.css	113 B
build/block-library/blocks/template-part/theme.css	113 B
build/block-library/blocks/term-description/style-rtl.css	126 B
build/block-library/blocks/term-description/style.css	126 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	165 B
build/block-library/blocks/text-columns/style.css	165 B
build/block-library/blocks/verse/style-rtl.css	98 B
build/block-library/blocks/verse/style.css	98 B
build/block-library/blocks/video/editor-rtl.css	396 B
build/block-library/blocks/video/editor.css	397 B
build/block-library/blocks/video/style-rtl.css	192 B
build/block-library/blocks/video/style.css	192 B
build/block-library/blocks/video/theme-rtl.css	134 B
build/block-library/blocks/video/theme.css	134 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	11.8 kB
build/block-library/editor.css	11.8 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	708 B
build/block-library/theme.css	712 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	52.3 kB
build/commands/index.min.js	16.1 kB
build/commands/style-rtl.css	955 B
build/commands/style.css	952 B
build/components/style-rtl.css	12.1 kB
build/components/style.css	12.1 kB
build/compose/index.min.js	12.6 kB
build/core-commands/index.min.js	2.82 kB
build/customize-widgets/index.min.js	11 kB
build/customize-widgets/style-rtl.css	1.35 kB
build/customize-widgets/style.css	1.35 kB
build/data-controls/index.min.js	641 B
build/data/index.min.js	8.98 kB
build/date/index.min.js	18 kB
build/deprecated/index.min.js	458 B
build/dom-ready/index.min.js	325 B
build/dom/index.min.js	4.66 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	580 B
build/edit-post/index.min.js	12.7 kB
build/edit-post/style-rtl.css	2.31 kB
build/edit-post/style.css	2.31 kB
build/edit-site/posts-rtl.css	7.31 kB
build/edit-site/posts.css	7.31 kB
build/edit-site/style-rtl.css	12.6 kB
build/edit-site/style.css	12.6 kB
build/edit-widgets/index.min.js	17.7 kB
build/edit-widgets/style-rtl.css	4.2 kB
build/edit-widgets/style.css	4.2 kB
build/editor/index.min.js	101 kB
build/editor/style-rtl.css	9.28 kB
build/editor/style.css	9.29 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.09 kB
build/format-library/style-rtl.css	476 B
build/format-library/style.css	476 B
build/hooks/index.min.js	1.54 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
build/interactivity/debug.min.js	16.4 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.78 kB
build/interactivity/index.min.js	13.2 kB
build/interactivity/navigation.min.js	1.16 kB
build/interactivity/query.min.js	742 B
build/interactivity/router.min.js	2.8 kB
build/interactivity/search.min.js	615 B
build/is-shallow-equal/index.min.js	526 B
build/keyboard-shortcuts/index.min.js	1.31 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.18 kB
build/list-reusable-blocks/style-rtl.css	846 B
build/list-reusable-blocks/style.css	846 B
build/media-utils/index.min.js	2.92 kB
build/modules/importmap-polyfill.min.js	12.3 kB
build/notices/index.min.js	946 B
build/nux/index.min.js	1.61 kB
build/nux/style-rtl.css	749 B
build/nux/style.css	745 B
build/patterns/index.min.js	7.34 kB
build/patterns/style-rtl.css	687 B
build/patterns/style.css	685 B
build/plugins/index.min.js	1.81 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.9 kB
build/preferences/style-rtl.css	554 B
build/preferences/style.css	554 B
build/primitives/index.min.js	829 B
build/priority-queue/index.min.js	1.54 kB
build/private-apis/index.min.js	1.01 kB
build/react-i18n/index.min.js	630 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.76 kB
build/redux-routine/index.min.js	2.69 kB
build/reusable-blocks/index.min.js	2.55 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.96 kB
build/server-side-render/index.min.js	1.94 kB
build/shortcode/index.min.js	1.4 kB
build/style-engine/index.min.js	2.04 kB
build/token-list/index.min.js	581 B
build/url/index.min.js	3.85 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react-jsx-runtime.min.js	560 B
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	965 B
build/warning/index.min.js	250 B
build/widgets/index.min.js	7.2 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.03 kB

_{compressed-size-action}

[SantosGuillamot]

In this commit, I've removed all the e2e tests where we were checking that the appropriate controls where locked when connected to an undefined source. I kept one to check that the warning message is shown. I feel it is redundant to check it for all the blocks.

Let me know if you think I should change it.

[SantosGuillamot]

As discussed here, I believe there is one remaining decision before merging this pull request:

Should we include a button to remove the invalid connection in this initial version, or should we wait until we receive more feedback on how it should work?

If we decide to keep the button:

Is it okay to show the button to any user with edit access or only admins?

Additionally:

Is the warning message copy clear enough?

Personally, I lean towards keeping the button as it is, available to any user with edit access. But I'd love to know more opinions.

For reference, this is what the warning looks like:

cc: @WordPress/gutenberg-design

[jasmussen]

This is what I see when testing:

In general, showing error messages in the content is not the best idea. It can work when it's highly contextual. A few things, though.

The text here is not the best:

Attribute "content" is connected to unrecognized "core/undefined" source. You can leave this block intact, modify the connection, or remove it.

What does "leave this block intact" actually mean? And how would I modify the connection? If modifying the connection happens in the inspector, probably this isn't the best place to actually show this error message, after all.

The other aspect is, I can't select this as I can other blocks. It's almost as if it stops being a block. This is different from parser error, for example, where I can select this as a block:

You can test that state easily by pasting this into the code editor:

<!-- wp:paragraph -->
<p>Default content
<!-- /wp:paragraph -->

The main reason that's important is that I can select the block, delete it, or press Enter to insert something after. With the text case outlined here, I have to go into the list view in order to insert blocks before or after, because I can't select the error and press "Enter" to add a paragraph below.

If the error is best solved in the inspector, I'd approach this differently, and show the paragraph in this state:

That is: no special treatment, that's just a default paragraph. No action items in the canvas. Just the error message. And then you could show all sorts of error messages here:

Especially in the flyout, you could show ways to remove the connection, delete it, fix it, or otherwise.

What do you think?

[SantosGuillamot]

Thanks a lot for the testing and feedback 🙂

You are right, and the place to "solve" this would be going to the code editor and changing the binding or removing the connection through the call to action we define. And it's true that it might not be accessible to everyone.

If the error is best solved in the inspector, I'd approach this differently, and show the paragraph in this state:

What happens when it is not the paragraph content the one connected to an invalid source? For example, an image title or an image URL.

Do you think fixing the selection issue, changing the text to something like what you shared, and potentially keep the panel to create/modify connections would be better?

[jasmussen]

What happens when it is not the paragraph content the one connected to an invalid source? For example, an image title or an image URL.

Right, good point. Would it be possibl for you to use the existing BlockInvalidWarning component then? Although it is in dire need of visual improvements, it would at least press the issue and we could make improvements across that component.

[SantosGuillamot]

Would it be possible for you to use the existing BlockInvalidWarning component then?

Do you mean this one?

I am not sure if we should directly use it. These are my reasons:

• It seems to be the same as using the Warning component, which is what we were using, but without the possibility of changing the text and button.
• It seems BlockInvalidWarning is not directly used anywhere else in the codebase and other use cases are using Warning.
• I believe the "Attempt recovery" button won't work as expected because we need to remove the connection.
• Without customizing the message, it is unclear what is happening.

For those reasons I would say that, if we want to through a warning, I would personally use the Warning component. If we fix the selection issue, this is how it could look like:

Without button	With button

Bear in mind that after this other pull request, the panel won't live in the paragraph settings tab, it will live in the unique tabs close to the "Advanced" section.

The format is the same as BlockInvalidWarning because it uses the same components, but the message seems clearer, and we can make the button work.

Additionally, users could still see the bindings panel to connect to an existing source.

Let me know what you think 🙂

[SantosGuillamot]

Another possibility we could explore would be adding the recovery options as secondary actions:

[SantosGuillamot]

I made a couple of commits: one to fix the selection issue and another to see how it would look without the button.

With the current code:

• We have a simpler message as Joen suggested here: Attribute "content" is connected to unrecognized "core/invalid" source.
• Users can still select the invalid block.
• When selected, they can see the bindings panel and modify the connections if they have permissions for it.

Personally, I believe this is enough and we can always add a button later after receiving feedback. But I'd love to know more opinions.

[jasmussen]

I guess you can't customize the text or buttons of those warnings, just found that out as part of working on #64997. But the point is, design-wise it should not feel different, and ideally use the same CSS. Can the componentry be updated, refined to address the use case in point here?

[SantosGuillamot]

I'm not sure if I follow. Design-wise they should feel the same and they use the same CSS. Both of the use the Warning component, which is the one defining the CSS: link. It seems BlockInvalidWarning is a specific use case of the Warning component, but it isn't exported outside of the block list.

So my question is: are we supposed to use BlockInvalidWarning or just Warning, which is used by the first one and it is exported as part of the block editor components?

[jasmussen]

Ah, either, I'll definitely refer to you on best practices. I'm mainly noting that, design glitches aside, there's an existing flow for "broken blocks" that should be replicated here, if we go with the in-canvas version.

[SantosGuillamot]

there's an existing flow for "broken blocks" that should be replicated here

Could you describe the "broken blocks" flow to ensure it is replicated? I thought this was the expected workflow because it seems to be used in other places. Other examples could be:

Template part doesn't exist

Type not supported in query title

Post content or post excerpt not available

Comments not enabled in comments form

if we go with the in-canvas version

I'm happy to explore other options

[gziolo]

A few notes, when having:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/undefined"}}}} -->
<p>Default content</p>
<!-- /wp:paragraph -->

This will still render <p>Default content</p> on the frontend, so when the source isn't recognized we should show the fallback.

In some cases, there are multiple attributes that can be connected to the source. In the case of Paragraph, it's the content so I understand that sometimes it might make the block often not functional, in particular if there is no fallback value. However, for other blocks, it can be a less important part of the HTML that doesn't break the experience, so making the entire block marked as broken won't offer the best experience. A good example would be the rel attribute on the Button block. Can we find a middle ground where the block in the canvas is rendered in a way where the fallback is still presented and is marked as connected to the source but move the warning to the sidebar in the case when the user has access to managing the connections? The only scenario where it's difficult to say how to handle it is when the user can't manage the connections. Should there be any feedback if they can't do much about it anyway?

[jasmussen]

Could you describe the "broken blocks" flow to ensure it is replicated? I thought this was the expected workflow because it seems to be used in other places. Other examples could be:

Yep, try this code:

<!-- wp:paragraph -->
<p>Broken block:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Broken block
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Missing block:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph2 -->
<p>Missing block</p>
<!-- /wp:paragraph2 -->

[SantosGuillamot]

Can we find a middle ground where the block in the canvas is rendered in a way where the fallback is still presented and is marked as connected to the source but move the warning to the sidebar in the case when the user has access to managing the connections?

I've created this alternative pull request that instead of breaking the block it:

• Shows the default content (without bindings).
• Add a warning to the relevant attribute in the connections panel using the isDestructive property of the Text component.

That feels less invasive, simpler and safer than this approach. I'm happy to pursue that path and figure out later based on feedback if a more prominent warning is needed.

Let me know what you think.

[SantosGuillamot]

I'm closing this in favor of https://github.com/WordPress/gutenberg/pull/65002. It seems to be enough for the first iteration.

We can always reopen this PR or reuse the code if we decide to follow this approach based on feedback.