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 indicator for metadata changes to Save Panel when reviewing modified entities #61811

Merged
merged 25 commits into from
May 31, 2024

Conversation

artemiomorales
Copy link
Contributor

@artemiomorales artemiomorales commented May 21, 2024

What?

This is a first iteration of adding metadata to the Save Panel when reviewing modified entities.

Why?

Begins addressing #61405
Related to #61753
We want to indicate to the user when they are modifying the value of custom fields.

How?

Overrides existing logic to determine whether to show the Save Panel, while also showing that metadata has changed.

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. Add a normal paragraph block and modify it.
  2. Run the following code in your browser console:
const meta = wp.data.select('core/editor').getEditedPostAttribute('meta');
meta['text_field'] = 'testing change';
wp.data.dispatch('core/editor').editPost( meta );
  1. Press the Save button.
  2. Verify that the Save Panel appears and shows that metadata has changed.

Testing Instructions for Keyboard

Screenshots or screencast

333905890-a40e6c2c-7918-42ce-9f6b-69047fe86971

@artemiomorales artemiomorales changed the base branch from trunk to try/allow-editing-in-post-meta-bindings May 21, 2024 03:08
@artemiomorales artemiomorales changed the title Block Bindings: Add entities to Block Bindings: Add metadata to Save Panel when reviewing modified entities May 21, 2024
@artemiomorales
Copy link
Contributor Author

artemiomorales commented May 21, 2024

With this PR, so far I've aimed to just explore the relevant areas we'd likely need to modify to get this functionality working. Some caveats with it right now:

  • It creates new functions in the stores that are probably unnecessary rather than using existing functionality
  • It currently shows all of the metadata rather than just what's been modified
  • How it parses that data is very rough
  • It doesn't clearly distinguish that what's being changed is the custom field
  • It has console errors around duplicate component keys

One takeaway for me is that we'll likely need to do some refactoring around the use-is-dirty.js, entities-saved-states, and post-publish-button.

Also, as far as i can see, all of the metadata is present in the post entity's edits property, regardless of whether it was actually just recently edited or not, and it also looks like it returns metadata not necessarily associated with the post 🤔

Anyway, potentially this can be a starting point as we look to get this working. Will keep looking at it.

Copy link

github-actions bot commented May 21, 2024

Size Change: +2.6 kB (+0.15%)

Total Size: 1.74 MB

Filename Size Change
build/block-editor/index.min.js 261 kB +595 B (+0.23%)
build/block-editor/style-rtl.css 15.6 kB +37 B (+0.24%)
build/block-editor/style.css 15.6 kB +32 B (+0.21%)
build/block-library/index.min.js 219 kB +370 B (+0.17%)
build/blocks/index.min.js 51.7 kB -22 B (-0.04%)
build/components/index.min.js 222 kB +12 B (+0.01%)
build/core-data/index.min.js 72.5 kB -1 B (0%)
build/edit-post/index.min.js 12.5 kB -907 B (-6.78%)
build/edit-post/style-rtl.css 2.35 kB -2 B (-0.08%)
build/edit-site/index.min.js 209 kB -1.21 kB (-0.58%)
build/edit-site/style-rtl.css 11.8 kB -163 B (-1.36%)
build/edit-site/style.css 11.8 kB -162 B (-1.35%)
build/edit-widgets/index.min.js 17.6 kB +37 B (+0.21%)
build/editor/index.min.js 96.3 kB +3.2 kB (+3.43%)
build/editor/style-rtl.css 9.26 kB +397 B (+4.48%)
build/editor/style.css 9.27 kB +398 B (+4.49%)
build/format-library/index.min.js 8.05 kB -31 B (-0.38%)
build/interactivity/debug.min.js 16.5 kB +15 B (+0.09%)
build/interactivity/index.min.js 13.4 kB +22 B (+0.16%)
build/server-side-render/index.min.js 1.96 kB -8 B (-0.41%)
ℹ️ 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-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/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/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/style.css 2.35 kB
build/edit-widgets/style-rtl.css 4.21 kB
build/edit-widgets/style.css 4.21 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
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.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/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

@jasmussen
Copy link
Contributor

Nice work. Despite following the steps I wasn't able to make the paragraph editable, so I wasn't able to test this myself. That said, from the screenshot, this seems like a very useful disclosure for people who are using this feature, and an important addon to any other affordances we make. Note I did see some errors with the site editor loading, as part of this draft, just in case that's not on my end.

These are all grouped under "Posts", yet all of these are metadata for one post, correct? If yes, then we should group them under under each page item. In the future you could see multiple pages edited in one session, and published together. The following explores collapsibles, icons, separators, I'd love some @WordPress/gutenberg-design input on those pieces.

Collapsibles

Figma, if inspiration strikes.

But the main challenge to solve is to show that all those checkboxes as being related to the particular post, I.e. if you edit multiple posts, or more likely, pages in the site editor, and their bound values, you'd see a list of edited pages. So we need to mainly get that separation right.

@jameskoster
Copy link
Contributor

If yes, then we should group them under under each page item

That was my initial reaction upon seeing the mockup. IE shouldn't each field appear within the associated post?

@jasmussen
Copy link
Contributor

Had a good chat with Artemio around what's feasible for next Friday. So I'd like to clarify a bit what I perceive as important here, and that is, ultimately: to make it clear to a user who's editing bound blocks, that they've done so. The established flow we have for surfacing this, is the pre-publish panel.

Atomically breaking out every single property, adding icons and collapsibles and indentation as I showed above, that can be a future refinement. The important piece here is the clarity of surfacing: hey, you edited bound blocks, are you sure?

And that can be as little as this:

Minimal version

To me that seems a fine V1 to go with.

@artemiomorales artemiomorales force-pushed the try/bindings-add-entities-panel branch from 4b9bbd7 to db7862c Compare May 22, 2024 12:29
@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
@artemiomorales artemiomorales force-pushed the try/bindings-add-entities-panel branch from 462c1bc to b9e7cde Compare May 24, 2024 15:45
@artemiomorales artemiomorales changed the base branch from try/allow-editing-in-post-meta-bindings to try/sync-block-context-in-store May 24, 2024 15:59
@artemiomorales artemiomorales force-pushed the try/bindings-add-entities-panel branch from 144505c to 195a32d Compare May 26, 2024 19:36
@artemiomorales
Copy link
Contributor Author

@jasmussen @SantosGuillamot Ok this is what I've been able to get so far:

Screenshot 2024-05-26 at 9 46 00 PM

I haven't been able to get a checkbox working to granularly handle the editing of the block bindings. I'll keep working on it, but I'm not sure if we'll be able to get that before the WP 6.6 beta.

  • Would just having this indication that bindings changes exist, without a checkbox, be sufficient for the time being?
  • Also, I'm unsure how to use the existing classes and components to get the margins shown in the design. Perhaps @richtabor has ideas?

Note that last I checked, the latest branch for editing the meta fields doesn't work independently, so this PR still has commits from the old version of that branch, which means the code isn't ready to be reviewed, but the UX can be looked at.

@jasmussen
Copy link
Contributor

The added presence of these items in pre-publish, even if you can't uncheck the bindings and omit them separately, is a crucial part of the flow for awareness of bindings. Which is especially important as the block-toolbar/in-canvas UI has been a trickier piece to get right and might need more time in the oven.

And with the deadline looming, we should start merging. So a 👍 👍 on the design aspect, even if there are some spacings, margins, and line heights we need to follow up with.

@@ -686,6 +718,9 @@ export const __experimentalGetDirtyEntityRecords = createSelector(
entityConfig?.getTitle?.( entityRecord ) || '',
name,
kind,
hasMetaChanges: metadataKeys.includes( primaryKey )
Copy link
Member

Choose a reason for hiding this comment

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

Looking at the existing logic, it feels like all the changes required in this selector could get moved to this line. I'm thinking about something like the following:

hasMetaChanges: !! getEntityRecordNonTransientEdits(
	state,
	kind,
	name,
	primaryKey
).?meta,

All the conditions should be satisfied because these operations happen only for primaryKeys computed in the earlier stage.

Copy link
Member

@gziolo gziolo May 27, 2024

Choose a reason for hiding this comment

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

A related question is whether in the long run, the boolean property is going to be sufficient, or it would be preferred to list all individual modified meta changes. I was about to say that hasMetaChanges will become part of the public API, but I see that it's prefixed as experimental so it is less important. Anyway, it's good to answer the question if the boolean value can serve its purpose in the far future. Maybe, it's fine to compute all that locally instead by using getEntityRecordNonTransientEdits when it's clear that a given entity has some edits applied.

Copy link
Contributor

Choose a reason for hiding this comment

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

I was gonna share a similar question. I was wondering if we should abstract it to not include only metaChanges but track the different changes made to the post and do with that information whatever we consider.

I'm thinking that in the future we will probably have the possibility to edit "Post Data" like title, description, excerpt... And we might want to do something similar.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Anyway, it's good to answer the question if the boolean value can serve its purpose in the far future.

I was gonna share a similar question. I was wondering if we should abstract it to not include only metaChanges but track the different changes made to the post and do with that information whatever we consider.

Yes I think we'd ideally have a granular listing of all the meta fields that have changed, which means a simple boolean would not be enough in the future, though the boolean is a good starting point.

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 followed @gziolo's advice and simplified the logic 👍

@@ -125,7 +125,8 @@ export const hasNonPostEntityChanges = createRegistrySelector(
( entityRecord ) =>
entityRecord.kind !== 'postType' ||
entityRecord.name !== type ||
entityRecord.key !== id
entityRecord.key !== id ||
entityRecord.hasMetaChanges
Copy link
Contributor

Choose a reason for hiding this comment

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

I am not sure if the hasNonPostEntityChanges is the proper place to do this. Meta changes are actually part of the post entity, so I find it a bit confusing. I don't know where the selector is used but maybe we need a new one or rename 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.

Ok I introduced a new function called hasMetaChanges in order to make this check independent.

Comment on lines 51 to 62
<PanelRow>
<Flex className="entities-saved-states__block-bindings">
<Icon
className="entities-saved-states__connections-icon"
icon={ connection }
size={ 24 }
/>
<span className="entities-saved-states__bindings-text">
{ __( 'Block Bindings.' ) }
</span>
</Flex>
</PanelRow>
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 the message we show should be "Block Bindings". To me, it seems related to just Post Meta, not Block Bindings. If I am not mistaken, any change made to custom fields (with or without block bindings) will trigger this message, right?

Copy link
Member

Choose a reason for hiding this comment

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

I had the same observation. I don't think we track, nor should we even try to do so, whether an edit was triggered by the established Block Binding. It's more about bringing more detailed information about what has been edited, similar to when folks edit the site settings:

Screenshot 2024-05-27 at 10 47 14

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So should we rename the message to "Post Meta" and remove the icon? cc @jasmussen

Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe, we should flex here to meet the beta deadline to be sure. I do like the icon, and I do think it's important to have some indentation, or space below each post+post-meta chunk, so it's visibly clear that "post meta" is not some single unit you can save globally, it's attached and related to each post.

Copy link
Contributor

@jameskoster jameskoster May 28, 2024

Choose a reason for hiding this comment

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

The tricky thing with 'Post meta' is that the scope is wider than 'Bindings'.

For instance why would a 'Post meta' item be surfaced in the save panel when a block binding is changed, but not when something like the slug, featured image, or discussion settings are changed?

@artemiomorales artemiomorales force-pushed the try/bindings-add-entities-panel branch from 195a32d to 00c9e1f Compare May 27, 2024 10:10
@artemiomorales artemiomorales changed the base branch from try/sync-block-context-in-store to trunk May 27, 2024 10:10
Copy link

github-actions bot commented May 27, 2024

This pull request changed or added PHP files in previous commits, but none have been detected in the latest commit.

Thank you! ❤️

@artemiomorales
Copy link
Contributor Author

artemiomorales commented May 27, 2024

I rebased on trunk and made that the target branch in order to make the code easier to review, though that means this PR loses the in-canvas editing capabilities that were in #61753

With that in mind, it's possible to test this using the store in wp.data and the browser console, though be aware that the Save button doesn't activate and the entities panel doesn't appear on first try for some reason 🤔

If using the console to debug, the best bet is to modify existing content in a post, then use the following commands in the console, though you may need to do this twice before it works, likely due to some inconsistency in updating via code versus the UI.

const meta = wp.data.select('core/editor').getEditedPostAttribute('meta');
meta['text_field'] = 'testing change';
wp.data.dispatch('core/editor').editPost({ meta });

Copy link

github-actions bot commented May 27, 2024

Flaky tests detected in 23d9429.
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/9318524438
📝 Reported issues:

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

SantosGuillamot commented May 31, 2024

Is circumventing the footnotes a blocker for this PR?

In my opinion, I would like to avoid interfering with the current workflows. I'll take a look to see if I can help somehow.

@gziolo
Copy link
Member

gziolo commented May 31, 2024

Is circumventing the footnotes a blocker for this PR?

In my opinion, I would like to avoid interfering with the current workflows. I'll take a look to see if I can help somehow.

I left my observations from testing this PR in #61811 (comment). I don't think that the way footnotes block is connected to the post meta is a blocker alone. The way I see it, we need to have a good strategy for when to interfere with the publishing flow and show proper information. The way I would try to approach the initial version would be:

  • If the post meta changes apply to the current post in the post editor, only add a section in the pre-publish flow if we agree it is important enough. After publishing the post, we could show the save confirmation, but it's also fine to leave it unchanged until we can show more detailed view of the changes applied that would be helpful for the user.
  • If the post meta changes apply to other posts while editing a post in the post editor, then we already surface that, just there information about post meta changes needs to be correctly included.
  • In the site editor, we are always in the template editing context, so any changes to post meta in posts (any post type: page, product) should be also marked for consistency.

@SantosGuillamot
Copy link
Contributor

Regarding adding a workaround for footnotes, until we figure out it getEntityRecordEdits should only return the modified meta fields, I was considering doing something like this:

export const hasPostMetaChanges = createRegistrySelector(
	( select ) => ( state, postType, postId ) => {
		const { type: currentPostType, id: currentPostId } =
			getCurrentPost( state );
		// If no postType or postId is passed, use the current post.
		const edits = select( coreStore ).getEntityRecordNonTransientEdits(
			'postType',
			postType || currentPostType,
			postId || currentPostId
		);

		if ( ! edits?.meta ) {
			return false;
		}

		// Compare if anything apart from `footnotes` has changed.
		const originalPostMeta = select( coreStore ).getEntityRecord(
			'postType',
			postType || currentPostType,
			postId || currentPostId
		)?.meta;

		delete originalPostMeta[ 'footnotes' ];
		delete edits.meta[ 'footnotes' ];

		return ! fastDeepEqual( originalPostMeta, edits.meta );
	}
);

fastDeepEqual is an external dependency used in getEntityRecordEdits: link.

Do you think something like that could make sense? I tested and it seems to work.

@SantosGuillamot
Copy link
Contributor

SantosGuillamot commented May 31, 2024

Okay, so what is needed to merge this pull request? Some thoughts I have in my mind:

Testing

  • When you edit the custom field of a post that is not published: The workflow shouldn’t change (at least from now).
  • When you edit the custom field of a post that is published: It should trigger the entities panel showing that the Post Meta has been modified. Check that the workflow is correct.
  • When you edit the custom field of another posts (query loop): It should trigger the entities panel showing that the Post Meta has been modified.
  • All the site editor testing that Greg shared here.

Remaining tasks/decisions

These are some tasks/decisions that could be relevant:

  • Should we move the modifyPostMetadata util to the specific test? Link.
  • If I am not mistaken, right now when you edit the custom field, after saving the post, it triggers a message saying “Site updated”.
  • Decide if the workaround for footnotes is good enough: link.
  • It seems the hasPostMetaChanges selector is running many times. Is that expected? If I add a console.log, it runs around 500 times:

Screenshot 2024-05-31 at 12 55 27

@SantosGuillamot
Copy link
Contributor

It seems the hasPostMetaChanges selector is running many times. Is that expected? If I add a console.log, it runs around 500 times

Regarding this, it seems to be happening the same for other selectors like hasNonPostEntityChanges, so I assume we don't have to worry too much about it right now?

@artemiomorales
Copy link
Contributor Author

Regarding this, it seems to be happening the same for other selectors like hasNonPostEntityChanges, so I assume we don't have to worry too much about it right now?

I'd say that shouldn't be a blocker for this PR, and we can iterate if need be during the beta period.

Copy link
Contributor

@SantosGuillamot SantosGuillamot left a comment

Choose a reason for hiding this comment

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

Aside from the mentioned follow-ups to improve all the workflows, I think the pull request is good enough 🙂

@artemiomorales
Copy link
Contributor Author

I've tested the following scenarios from @SantosGuillamot's comment and @gziolo's comment, and it all seems to work as expected:

  • When you edit the custom field of a post that is not published: The workflow shouldn’t change (at least from now).

  • When you edit the custom field of a post that is published: It should trigger the entities panel showing that the Post Meta has been modified.

  • When you edit the custom field of another posts (query loop): It should trigger the entities panel showing that the Post Meta has been modified.

  • Regular post with[out] any changes to external post - Save + Publish flow

Regarding the following point, we've added a workaround at least for footnotes thanks to @SantosGuillamot:

  • Regular post with post meta from the same post – show only Publish (covers Footnotes)
    Follow-enhancement could be highlighting post meta in the Pre-publish screen

Regarding metadata besides footnotes, the panel appears intentionally when that metadata has changed; there may be other cases similar to footnotes where we don't want to show the save panel, but I believe we can add any additional exceptions during the beta period.

The behavior in the site editor regarding different combinations of modifying metadata for posts also seems to be working as expected as per the third bullet point above. I've also moved the location of the end-to-end test utils around modifying metadata.

That means that the only outstanding points are the following, which I believe will require more investigation and/or discussion to resolve:

  • If I am not mistaken, right now when you edit the custom field, after saving the post, it triggers a message saying “Site updated”.

  • It seems the hasPostMetaChanges selector is running many times. Is that expected? If I add a console.log, it runs around 500 times

I wouldn't consider either of those blockers though and believe this PR is ready to be merged. Thoughts?

@SantosGuillamot SantosGuillamot enabled auto-merge (squash) May 31, 2024 13:45
@SantosGuillamot SantosGuillamot merged commit 5576d89 into trunk May 31, 2024
62 checks passed
@SantosGuillamot SantosGuillamot deleted the try/bindings-add-entities-panel branch May 31, 2024 14:38
@github-actions github-actions bot added this to the Gutenberg 18.5 milestone May 31, 2024
@artemiomorales
Copy link
Contributor Author

If I am not mistaken, right now when you edit the custom field, after saving the post, it triggers a message saying “Site updated”.

I created an issue for this bug: #62236

carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jun 4, 2024
…ied entities (WordPress#61811)

* Add rough prototype showing meta in entities panel

* Simplify detection of metadata changes

Removed unnecessary code added in previous commit
and instead modified existing functions to add a flag on
existing dirtyEntityRecord structures to indicate when
metadata changes have been made.

* Remove obsolete code

* Add indicator for bindings to save entities panel

* Modify message to read 'Post Meta'

* Add store function to check if meta has changed

* Remove obsolete check

* Simplify logic to check if meta has changed

* Update tests

* Make hasMetaChanges selector private

* Suggestion: Move logic to `hasPostMetaChanges` selector

* Change test formatting

* Don't show save panel in pre-publish

* Get `hasPostMetaChanges` from the proper place

* Add end-to-end test

* Update class name

* Clarify naming

* Show Post Meta in relevant post

* Remove extra change

* Move test metadata test util

* Update comments

* Prevent save panel from appearing when just footnotes are modified

* Update package-lock.json

---------

Co-authored-by: Mario Santos <santosguillamot@gmail.com>
patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
…ied entities (WordPress#61811)

* Add rough prototype showing meta in entities panel

* Simplify detection of metadata changes

Removed unnecessary code added in previous commit
and instead modified existing functions to add a flag on
existing dirtyEntityRecord structures to indicate when
metadata changes have been made.

* Remove obsolete code

* Add indicator for bindings to save entities panel

* Modify message to read 'Post Meta'

* Add store function to check if meta has changed

* Remove obsolete check

* Simplify logic to check if meta has changed

* Update tests

* Make hasMetaChanges selector private

* Suggestion: Move logic to `hasPostMetaChanges` selector

* Change test formatting

* Don't show save panel in pre-publish

* Get `hasPostMetaChanges` from the proper place

* Add end-to-end test

* Update class name

* Clarify naming

* Show Post Meta in relevant post

* Remove extra change

* Move test metadata test util

* Update comments

* Prevent save panel from appearing when just footnotes are modified

* Update package-lock.json

---------

Co-authored-by: Mario Santos <santosguillamot@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants