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

Block Bindings: Allow editing in post meta source #61753

Merged
merged 60 commits into from
May 31, 2024

Conversation

SantosGuillamot
Copy link
Contributor

@SantosGuillamot SantosGuillamot commented May 17, 2024

What?

Use the latest changes to the block bindings API in the editor to allow users to edit the value of the custom fields directly through the blocks when they are connected. For example, when the paragraph content is bound to a specific custom field, and the user start typing, they would be modifying the custom field and not the content.

At least in this first iteration, it should be limited to:

  • Users with the permissions to edit the field.
  • When users are editing a post, and not a template.
  • Custom fields should not be protected and available through the REST API.

How?

Using the setValue function based on the code created by @ellatrix here. Apart from that, we should use the lockAttributesEditing callback added in this pull request to cover the mentioned limitation.

Additionally, it ensure that the split selection work as expected in bound blocks.

Testing Instructions

I added a couple of e2e tests for this use case. You can test it manually by:

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_field',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'default'           => 'default text value',
		)
	);
}
2. Add a paragraph block bound to the custom field using the Code Editor
<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_field"}}}}} -->
<p>Paragraph content</p>
<!-- /wp:paragraph -->
  1. Check that the value of the custom field is shown.
  2. Check you can edit it when you are in the post editor.
  3. Check that modifying the value actually changes the custom field and not the paragraph content.

@SantosGuillamot SantosGuillamot added [Type] Feature New feature to highlight in changelogs. [Feature] Block bindings labels May 17, 2024
@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch from 2a71c24 to 18e6a5c Compare May 17, 2024 07:52
Copy link

github-actions bot commented May 17, 2024

Size Change: +264 B (+0.02%)

Total Size: 1.74 MB

Filename Size Change
build/block-editor/index.min.js 261 kB +147 B (+0.06%)
build/block-library/index.min.js 218 kB +40 B (+0.02%)
build/blocks/index.min.js 51.8 kB +4 B (+0.01%)
build/editor/index.min.js 93.2 kB +73 B (+0.08%)
ℹ️ 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.29 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.58 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-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 kB
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 126 B
build/block-library/blocks/audio/theme.css 126 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/button/editor-rtl.css 307 B
build/block-library/blocks/button/editor.css 307 B
build/block-library/blocks/button/style-rtl.css 539 B
build/block-library/blocks/button/style.css 539 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 667 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.61 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 126 B
build/block-library/blocks/embed/theme.css 126 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 962 B
build/block-library/blocks/gallery/editor.css 965 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 346 B
build/block-library/blocks/html/editor.css 347 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.52 kB
build/block-library/blocks/image/style.css 1.52 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.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 205 B
build/block-library/blocks/latest-posts/editor.css 205 B
build/block-library/blocks/latest-posts/style-rtl.css 512 B
build/block-library/blocks/latest-posts/style.css 512 B
build/block-library/blocks/list/style-rtl.css 102 B
build/block-library/blocks/list/style.css 102 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 341 B
build/block-library/blocks/paragraph/style.css 341 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 344 B
build/block-library/blocks/pullquote/style.css 343 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 223 B
build/block-library/blocks/quote/theme.css 226 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 99 B
build/block-library/blocks/separator/editor.css 99 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 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 218 B
build/block-library/blocks/site-logo/style.css 218 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 124 B
build/block-library/blocks/site-title/editor.css 124 B
build/block-library/blocks/site-title/style-rtl.css 70 B
build/block-library/blocks/site-title/style.css 70 B
build/block-library/blocks/social-link/editor-rtl.css 335 B
build/block-library/blocks/social-link/editor.css 335 B
build/block-library/blocks/social-links/editor-rtl.css 683 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.51 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 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 265 B
build/block-library/blocks/tag-cloud/style.css 266 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 112 B
build/block-library/blocks/template-part/theme.css 112 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 126 B
build/block-library/blocks/video/theme.css 126 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 kB
build/block-library/editor.css 12 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.6 kB
build/block-library/style.css 14.6 kB
build/block-library/theme-rtl.css 703 B
build/block-library/theme.css 706 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.2 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/components/index.min.js 222 kB
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.71 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.01 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 13.4 kB
build/edit-post/style-rtl.css 2.35 kB
build/edit-post/style.css 2.35 kB
build/edit-site/index.min.js 210 kB
build/edit-site/style-rtl.css 12 kB
build/edit-site/style.css 12 kB
build/edit-widgets/index.min.js 17.5 kB
build/edit-widgets/style-rtl.css 4.21 kB
build/edit-widgets/style.css 4.21 kB
build/editor/style-rtl.css 8.86 kB
build/editor/style.css 8.87 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 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/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13.3 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 2.81 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 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.14 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.58 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.51 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 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 719 B
build/preferences/style.css 721 B
build/primitives/index.min.js 831 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 629 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.72 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.97 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/react-dom.min.js 42.8 kB
build/vendors/react-jsx-runtime.min.js 554 B
build/vendors/react.min.js 2.65 kB
build/viewport/index.min.js 964 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.13 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

Base automatically changed from update/block-bindings-lock-with-functions to trunk May 17, 2024 08:47
@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch from 292b7da to fae903b Compare May 17, 2024 10:58
@SantosGuillamot
Copy link
Contributor Author

There is an issue when pressing "Enter" to add a new block, and the rich text is not disabled. I'll take a look at that.

@SantosGuillamot
Copy link
Contributor Author

There is an issue when pressing "Enter" to add a new block, and the rich text is not disabled.

I think the root of the problem is that when we call getBlockAttributes it returns the value of the original content and not the one modified with the custom field value. For this reason, when we call it here during __unstableSplitSelection function, it is not correct and it causes some issues.

Not sure if modifying the attributes in the store itself instead of using the current hook would help in this regard.

@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch from 995607a to b3f4488 Compare May 21, 2024 12:26
@SantosGuillamot SantosGuillamot changed the base branch from trunk to try/move-bindings-logic-outside-hook May 21, 2024 12:26
@SantosGuillamot
Copy link
Contributor Author

I have rebased this branch into this other pull request because it is supposed to solve the issues I was encountering while pressing Enter on bound blocks.

},
} );
},
lockAttributesEditing( { select, context, args } ) {
Copy link
Member

Choose a reason for hiding this comment

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

I was a bit confused when I saw this method name as I expected it's an action that locks attribute editing. What alternatives would help here to better express intent – check whether the connected value can be updated?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right it can be confusing. We could change the intent to just the opposite. Some ideas that come to my mind:

  • allowEditing
  • canEditSource
  • canUpdateSource
  • canUpdateSourceValue

Any ideas are welcome 🙂

Copy link
Member

Choose a reason for hiding this comment

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

One important consideration is that the user might be able to edit source, but not necessarily all posts or individual fields, as permissions are very granular. I don't know if that gets reflected on the client.

I see that permissions are checked only on the post level with canUserEditEntityRecord . In effect, canUserEditValue or canEditValue might resonate better.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've changed the name to canUserEditValue in the latest commit. It looks better to me. Anyways, the API is still private so we can change that if wanted.

One important consideration is that the user might be able to edit source, but not necessarily all posts or individual fields, as permissions are very granular. I don't know if that gets reflected on the client.

Do you mean that the current conditions might not be enough? We are assuming that if these conditions are true, the user can edit the meta field:

  • The user can edit the current post.
  • The meta field is publicly exposed in the REST API.

What else should we consider?

Copy link
Member

Choose a reason for hiding this comment

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

I was thinking about the is_protected_meta function that allows filtering, but you are correct that when the individual meta fields gets exposed through REST API for the current user (and their role) then we can safely assume they can edit it 👍🏻

@SantosGuillamot SantosGuillamot force-pushed the try/move-bindings-logic-outside-hook branch from ed11e1a to 3165915 Compare May 24, 2024 12:16
@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch 2 times, most recently from 5fdbacb to 8e6dd67 Compare May 24, 2024 15:38
Copy link

github-actions bot commented May 26, 2024

Flaky tests detected in 570a4b2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9251566900
📝 Reported issues:

@SantosGuillamot SantosGuillamot force-pushed the try/move-bindings-logic-outside-hook branch from c8fd783 to 629056c Compare May 28, 2024 08:59
@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch from 570a4b2 to d35db11 Compare May 28, 2024 09:02
@SantosGuillamot SantosGuillamot changed the base branch from try/move-bindings-logic-outside-hook to trunk May 28, 2024 09:03
@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch from 9bfc757 to 7f8771e Compare May 28, 2024 11:21
@SantosGuillamot SantosGuillamot changed the base branch from trunk to update/create-utils-for-block-bindings May 28, 2024 11:21
@SantosGuillamot SantosGuillamot force-pushed the try/allow-editing-in-post-meta-bindings branch from 2012ae8 to c72afda Compare May 30, 2024 08:50
@michalczaplinski michalczaplinski removed their request for review May 30, 2024 09:22
@talldan
Copy link
Contributor

talldan commented May 30, 2024

@talldan and @kevin940726, it would also be great to get a sanity check from you and ensure that everything continues to work correctly for Pattern Overrides. Currently, all e2e tests pass, but I saw some failures during the development, so better to stay on the safe side.

Did some testing, I'm not seeing any issues 👍

registry.dispatch( noticesStore );
createWarningNotice(
__(
"Blocks can't be inserted into other blocks with bindings"
Copy link
Contributor

Choose a reason for hiding this comment

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

You can paste a paragraph inside a binded paragraph to update its content right?

I could do that on my testing, so in that case, we may change the warning to
Blocks can't be insterted into different blocks with bindings

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You can paste a paragraph inside a binded paragraph to update its content right?

Mmm, I don't think so. You can paste some text, but not if you copy the entire block I believe.

Copy link
Member

Choose a reason for hiding this comment

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

In my testing, it largely depend when you try to paste blocks. For example, try it with the Heading block, the Verse block, or caption for the Image block. It will get handled differently without any notices in the UI:

Screen.Recording.2024-05-31.at.12.54.22.mov

In effect, my recommendation would be to take some action that fits best in the given scenario and skip the warning.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ideally, we probably want to modify the source value with whatever is supposed to be pasted. But that seemed a bit tricky to me at this point and I thought it could be handled in a follow-up PR. That's why I added the warning in the meantime.

);
return;
}
dispatch.insertAfterBlock( selectionA.clientId );
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
dispatch.insertAfterBlock( selectionA.clientId );

I would remove the enter option, is something we can add in future releases after some UX research.

cbravobernal
cbravobernal previously approved these changes May 30, 2024
Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

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

Works as expected. Apart from the enter behaviour. The PR is ready to land.

@cbravobernal cbravobernal dismissed their stale review May 30, 2024 14:32

I found that if you edit the custom field meta box, the editing stops from working.

Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

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

It seems that the custom fields edit panel never worked well with bindings, so should not be a block for this PR.

},
} );
},
canUserEditValue( { select, context, args } ) {
Copy link
Member

Choose a reason for hiding this comment

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

This is all private right?

Copy link
Member

Choose a reason for hiding this comment

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

Yes, registering block binding sources is still private. If everything goes well in WP 6.6 cycle, we are going to open it to everyone in WP 6.7.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, and we will use next cycle to polish the APIs. There are some changes I would like to explore.

@gziolo
Copy link
Member

gziolo commented May 31, 2024

It's rather unrelated to this PR, but I wanted to surface it as I noticed while testing:

Screenshot 2024-05-31 at 13 01 22

I tried to set a binding on the caption attribute, but it is still not covered. However, it is listed in the sidebar.

@gziolo
Copy link
Member

gziolo commented May 31, 2024

Everything works correctly in my testing. It looks like permissions are respected, so when editing the post as an author, when I use Query block to display other posts, I can't modify meta values for fields I don't have access to:

Screen.Recording.2024-05-31.at.13.17.36.mov

Overall, I can see only two aspects to watch after this very exciting feature gets enabled for users:

  • Iterate on how the pasting behavior works, but that might be a larger effort to unify it, as noted in Block Bindings: Allow editing in post meta source #61753 (comment).
  • "There is an issue when pressing "Enter" to add a new block, and the rich text is not disabled." - that issue seems to be resolved and works pretty decent. The only part that I would pay attention to is how users feel about the fact that pressing enter at any position in the edited text when using RichText creates a new block and moves focus there. It doesn't seem that different to other flows I tested, like when typing an URL, or renaming a block title in the modal triggered from the list view.
Screen.Recording.2024-05-31.at.13.26.20.mov

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.

Excellent work bringing it to the finish line. This is extremely exciting to see how easy it becomes to edit post meta inline 🎉

I did a very extensive testing using the admin and author roles, all supported block types: Paragraph, Heading, Button and Image, product and site editor. I couldn't discover any blockers. I would be in favor of including it in WordPress 6.6 release.

@SantosGuillamot
Copy link
Contributor Author

Thanks a lot for the extensive testing, Greg! Much appreciated ☺️

I totally agree that we will need to keep iterating on the "Enter" and "Paste" workflows, so let's keep an eye on that. Also, once it is out we will get community feedback that can help make decisions.

I tried to set a binding on the caption attribute, but it is still not covered. However, it is listed in the sidebar.

Regarding this, I just created this pull request to remove them from the bindings panel.

@SantosGuillamot SantosGuillamot merged commit 8f74d5c into trunk May 31, 2024
77 of 79 checks passed
@SantosGuillamot SantosGuillamot deleted the try/allow-editing-in-post-meta-bindings branch May 31, 2024 13:29
@github-actions github-actions bot added this to the Gutenberg 18.5 milestone May 31, 2024
@bph bph added [Type] Enhancement A suggestion for improvement. and removed [Type] Feature New feature to highlight in changelogs. labels Jun 3, 2024
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jun 4, 2024
* Create bindings util for transforming block attributes

* Get attributes and name from the store

* Change function to return only the bound attributes

* Add action, selector, and reducer for block context

* Sync store in edit component

* Revert "Sync store in edit component"

This reverts commit 988c4b6.

* Move logic to BlockContextProvider

* Change parent context logic

* Use useLayoutEffect

* Go back to syncing store in edit component

* WIP: Move bindings logic to `getBlockAttributes`

* WIP: Move bindings setAttributes logic to updateBlockBindings

* Pass only `select` to `getValue` functions

* Remove old editor hook

* Add fallback to postId until context is ready

* Remove setValue post-meta code

* Simplify fallback conditional

* Change bindings destructuring

* Check canBindAttribute in updateBlockAttributes

* Update unit tests to expect a dispatch

* Add conditional in block

* Don't use `getBlockAttributes` inside `getValue`

* Revert "Don't use `getBlockAttributes` inside `getValue`"

This reverts commit 0e91129.

* Avoid processing bindings recursively

* Access context through selector

* Update getBlockAttributes logic

* Don't use fallbacks

* Add edit value posibility for post meta, add function to check if is admin

* Revert "Add edit value posibility for post meta, add function to check if is admin"

This reverts commit 9659455.

* Test editing is allowed in paragraph block

* Test protected fields are not editable

* Revert "Enable parallel processing for PHPCS sniffs (WordPress#61700)"

This reverts commit 8331820.

* Add post meta setValue function

* Update tests to check contenteditable

* Update lockAttributesEditing default

* Pass arguments to lockAttributesEditing

* Check user can edit post meta

* Check field is exposed in the REST API

* Disable editing in templates

* Add fallback for postId

* Revert "Revert "Enable parallel processing for PHPCS sniffs (WordPress#61700)""

This reverts commit e74d71c.

* Adapt old tests

* Simplify lockAttributesEditing fallbacks

* Don't use fallback for context

* Add postType fallback when locking controls

* Pass context in rich text

* Check contenteditable attribute in test

* Change name to `canUserEditValue`

* Revert changes caused by rebasing

* Add space back

* Pass block context through rich text

* Change imports

* Transform block attributes into bindings in split selection

* Pass context to in use-input

* Change REST API check

* Use getBoundAttributesValues

* Don't split when attribute is bound

* Revert changes caused by rebase

* Cover more blocks when editing custom fields

* Add a warning when pasting blocks

---------

Co-authored-by: Carlos Bravo <carlos.bravo@automattic.com>
patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
* Create bindings util for transforming block attributes

* Get attributes and name from the store

* Change function to return only the bound attributes

* Add action, selector, and reducer for block context

* Sync store in edit component

* Revert "Sync store in edit component"

This reverts commit 988c4b6.

* Move logic to BlockContextProvider

* Change parent context logic

* Use useLayoutEffect

* Go back to syncing store in edit component

* WIP: Move bindings logic to `getBlockAttributes`

* WIP: Move bindings setAttributes logic to updateBlockBindings

* Pass only `select` to `getValue` functions

* Remove old editor hook

* Add fallback to postId until context is ready

* Remove setValue post-meta code

* Simplify fallback conditional

* Change bindings destructuring

* Check canBindAttribute in updateBlockAttributes

* Update unit tests to expect a dispatch

* Add conditional in block

* Don't use `getBlockAttributes` inside `getValue`

* Revert "Don't use `getBlockAttributes` inside `getValue`"

This reverts commit 0e91129.

* Avoid processing bindings recursively

* Access context through selector

* Update getBlockAttributes logic

* Don't use fallbacks

* Add edit value posibility for post meta, add function to check if is admin

* Revert "Add edit value posibility for post meta, add function to check if is admin"

This reverts commit 9659455.

* Test editing is allowed in paragraph block

* Test protected fields are not editable

* Revert "Enable parallel processing for PHPCS sniffs (WordPress#61700)"

This reverts commit 8331820.

* Add post meta setValue function

* Update tests to check contenteditable

* Update lockAttributesEditing default

* Pass arguments to lockAttributesEditing

* Check user can edit post meta

* Check field is exposed in the REST API

* Disable editing in templates

* Add fallback for postId

* Revert "Revert "Enable parallel processing for PHPCS sniffs (WordPress#61700)""

This reverts commit e74d71c.

* Adapt old tests

* Simplify lockAttributesEditing fallbacks

* Don't use fallback for context

* Add postType fallback when locking controls

* Pass context in rich text

* Check contenteditable attribute in test

* Change name to `canUserEditValue`

* Revert changes caused by rebasing

* Add space back

* Pass block context through rich text

* Change imports

* Transform block attributes into bindings in split selection

* Pass context to in use-input

* Change REST API check

* Use getBoundAttributesValues

* Don't split when attribute is bound

* Revert changes caused by rebase

* Cover more blocks when editing custom fields

* Add a warning when pasting blocks

---------

Co-authored-by: Carlos Bravo <carlos.bravo@automattic.com>
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.

8 participants