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

WIP: Add caption to post featured image #46883

Closed
wants to merge 13 commits into from

Conversation

carolinan
Copy link
Contributor

@carolinan carolinan commented Jan 4, 2023

What?

This is an experiment for #40946.

Why?

The post featured image block does not have support for captions, which makes it inconsistent with the image block.

Many sites have existing image captions stored in the media library. Users who are switching from classic editing to using blocks can not easily reuse this data. This makes it difficult for users who are required to show image credits to switch to using blocks.

How?

The plan is to try something like the following:

  1. Enable the caption for the post featured image block.
  1. When placed in the block editor, the caption can be customized per block. If there is a media library caption, there is an option to show that instead of the customized caption text.
  2. In the query loop, the caption can be toggled on and off, but it displays the caption from the image post in the database (the caption in the media library). The caption text can not be edited as part of the block since the block is repeated for each post in the loop.
  3. In templates, the caption can be toggled on and off but shows a placeholder text. On the front, it displays the caption from the image post in the database.

Video

Single post featured image with caption:

caption.mov

Longer video with more block settings:
https://user-images.githubusercontent.com/7422055/221135017-3e3ed808-ed4e-4708-98b7-f37461fdb1f7.mov

@carolinan carolinan added [Status] In discussion Used to indicate that an issue is in the process of being discussed [Block] Post Featured Image Affects the Post Featured Image Block labels Jan 4, 2023
@github-actions
Copy link

github-actions bot commented Jan 4, 2023

Size Change: +5.1 kB (0%)

Total Size: 1.34 MB

Filename Size Change
build/block-editor/index.min.js 197 kB +2.21 kB (+1%)
build/block-editor/style-rtl.css 14.4 kB +32 B (0%)
build/block-editor/style.css 14.4 kB +31 B (0%)
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB -1 B (0%)
build/block-library/blocks/navigation/editor.css 2.14 kB -1 B (0%)
build/block-library/blocks/page-list/editor-rtl.css 401 B +25 B (+7%) 🔍
build/block-library/blocks/page-list/editor.css 401 B +25 B (+7%) 🔍
build/block-library/blocks/post-featured-image/style-rtl.css 322 B +4 B (+1%)
build/block-library/blocks/post-featured-image/style.css 322 B +4 B (+1%)
build/block-library/blocks/site-logo/editor-rtl.css 489 B -1 B (0%)
build/block-library/blocks/site-logo/editor.css 489 B -1 B (0%)
build/block-library/editor-rtl.css 11.6 kB +2 B (0%)
build/block-library/editor.css 11.6 kB +4 B (0%)
build/block-library/index.min.js 201 kB +1.63 kB (+1%)
build/block-library/style-rtl.css 12.7 kB -1 B (0%)
build/block-library/style.css 12.7 kB -1 B (0%)
build/blocks/index.min.js 51 kB +12 B (0%)
build/components/index.min.js 208 kB +1.09 kB (+1%)
build/components/style-rtl.css 11.7 kB +23 B (0%)
build/components/style.css 11.7 kB +22 B (0%)
build/compose/index.min.js 12.4 kB +21 B (0%)
build/customize-widgets/index.min.js 12.2 kB +6 B (0%)
build/edit-post/index.min.js 34.8 kB +20 B (0%)
build/edit-site/index.min.js 64.9 kB -346 B (-1%)
build/edit-site/style-rtl.css 9.98 kB +15 B (0%)
build/edit-site/style.css 9.97 kB +16 B (0%)
build/edit-widgets/index.min.js 17.3 kB +4 B (0%)
build/editor/index.min.js 45.8 kB +7 B (0%)
build/editor/style-rtl.css 3.54 kB +2 B (0%)
build/editor/style.css 3.53 kB +2 B (0%)
build/format-library/index.min.js 7.26 kB -9 B (0%)
build/private-apis/index.min.js 937 B -3 B (0%)
build/rich-text/index.min.js 11 kB +223 B (+2%)
build/url/index.min.js 3.74 kB +44 B (+1%)
build/widgets/index.min.js 7.3 kB -10 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 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 138 B
build/block-library/blocks/audio/theme.css 138 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 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 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 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 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 406 B
build/block-library/blocks/columns/style.css 406 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 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 265 B
build/block-library/blocks/file/style.css 265 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 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 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
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/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 134 B
build/block-library/blocks/post-excerpt/style.css 134 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 282 B
build/block-library/blocks/post-template/style.css 282 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-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 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 326 B
build/block-library/blocks/pullquote/style.css 325 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 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 463 B
build/block-library/blocks/query/editor.css 463 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 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 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 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/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/core-data/index.min.js 16.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.58 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.72 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/style-rtl.css 7.53 kB
build/edit-post/style.css 7.52 kB
build/edit-widgets/style-rtl.css 4.55 kB
build/edit-widgets/style.css 4.55 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@carolinan carolinan added the [Focus] Blocks Adoption For issues that directly impact the ability to adopt features of Gutenberg. label Jan 4, 2023
@github-actions
Copy link

github-actions bot commented Jan 13, 2023

Flaky tests detected in c6dedbd.
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/4260628325
📝 Reported issues:

@carolinan carolinan removed the [Status] In discussion Used to indicate that an issue is in the process of being discussed label Mar 6, 2023
@carolinan
Copy link
Contributor Author

The PR is ready for early feedback about the user experience when selecting between the custom caption and media library caption.

@carolinan carolinan marked this pull request as ready for review March 6, 2023 10:05
@jameskoster jameskoster requested a review from a team March 6, 2023 11:01
@jasmussen
Copy link
Contributor

Oh that's an interesting one, thanks for taking a stab. So just to be sure I'm getting this right, not only does this PR enable the caption button for the post featured image block, but it allows you to choose between the caption stored for the media item, or using a custom one, is that right?

This actually surfaces a bit of a disconnect we have with captions, including the one we have for images. There's a caption field in the database, but the caption feature is not connected with it at all. Should it be, in both cases? I.e. when you add a caption, it also saves it for the image? (My instinct is probably not, especially since the disconnected version is out there. But I feel like it's an important question to ask!)

Same unknown around the other fields, title, description, alt text.

Caption and alt text feel like the odd ones out, and almost anachronistic in the block editor world. So approaching it from the opposite end: if we were to rebuild the media library today, from scratch, would we add a field called "Caption"? I'm not suggesting retiring those fields, but would we build such a media library and have it save alt text and captions separately from the block content? Either answer seems like it could inform next steps on this one, and both feel relevant to noodle on for this one. What do you think?

@carolinan
Copy link
Contributor Author

not only does this PR enable the caption button for the post featured image block, but it allows you to choose between the caption stored for the media item, or using a custom one

Yes that is correct.


Image block:
The caption in the media library is used if it exists or if you enter one when you upload the image.
But if you toggle the caption off in the toolbar, and toggle the caption on again, it no longer uses the media library caption but the editable custom caption.
So there is no way to get the media library caption to show again without deleting the image and adding it again.


I think both the caption, alt and title attribute can be situational and that they should not be saved to the image data in the media library.
For example you might want a short caption in a gallery block. And you might want to use a longer when the image is used alone.

If you upload an image and its data is imported and saved to the database, or if you add a caption in the media library, then changing the caption in the block editor should not replace the text.

@richtabor
Copy link
Member

With what we have today, the caption won't be visible the majority of the editing experience — only if you add the Post Featured Image block to the block editor. When we have content editing within the Site Editor, it'll be more front-and-center.

When placed in the block editor, the caption can be customized per block.

I think the caption should be tied to the featured image, not the block (just like the image is the featured image). If I edit the featured image, the post's featured image is updated. Its caption should work the same: if I edit the featured image's caption, it is consistent wherever the post featured image is leveraged.

Also, I'm cool with making the button a show/hide functionality, rather than an add/remove. I'd say the same for the Image block as well. Having a caption — and whether or not it is visible — should be treated differently.

Should it be, in both cases? I.e. when you add a caption, it also saves it for the image? (My instinct is probably not, especially since the disconnected version is out there. But I feel like it's an important question to ask!)

Yea, I agree.

@richtabor
Copy link
Member

I don't think it's important to indicate it's a "Media Library" caption:

CleanShot 2023-03-06 at 16 16 37

@richtabor
Copy link
Member

Noticed an issue with overlay color applied as well:

CleanShot 2023-03-06 at 16 18 13

@carolinan
Copy link
Contributor Author

carolinan commented Mar 7, 2023

The existing caption feature, ignoring this PR, does not save the caption to the image. I believe it is too late to make it save to the image since there are already images placed with custom captions.
I believe we need to keep the features of the different image blocks as close as possible to reduce the risk of confusion.

"The caption wont be visible... unless you are in the block editor"
I did not understand. Featured images are not usually in the block editor so I would say the opposit. You can't edit the custom caption inside a query loop but you can show the media library caption inside the query.
The label is used to distinguish that it is always the media library caption and you can't customize it.
The problem that the PR tries to solve is that there is no way for users in countries like Germany to display the image credits which they are required to do. So some type of websites will show it more than others.

Edit: I mentioned that the issue had a discussion about image credit in Germany, but it was actually a discussion in the WordPress Slack channel that referenced the issue. An account is needed to read it: https://wordpress.slack.com/archives/C015GUFFC00/p1672557641127699?thread_ts=1672500070.405439&cid=C015GUFFC00

@richtabor
Copy link
Member

The existing caption feature, ignoring this PR, does not save the caption to the image. I believe it is too late to make it save to the image since there are already images placed with custom captions.

Agreed.

I did not understand. Featured images are not usually in the block editor so I would say the opposit. You can't edit the custom caption inside a query loop but you can show the media library caption inside the query.

You can't see the actual post's featured image caption in the Site Editor, it's a placeholder.

Once we have content-editing you will be able to see it. With this PR the only way to actually see your caption, is to use it within the Block Editor, yea?

I believe we need to keep the features of the different image blocks as close as possible to reduce the risk of confusion.
The label is used to distinguish that it is always the media library caption and you can't customize it.

Then perhaps we make it work 100% like the image block's caption? Why not make it editable?

@carolinan
Copy link
Contributor Author

carolinan commented Mar 9, 2023

You can't see the actual post's featured image caption in the Site Editor, it's a placeholder.

It depends where in the Site Editor. If it is in the Site Editor and inside a query loop, and the featured image has a media library caption, the media library caption can be toggled on and off.
If it does not have a media library caption, the option will not show in the toolbar.
It is not customizable, unless you open the image in the media library.

(Forgive my test content I was testing the post excerpt block)
https://user-images.githubusercontent.com/7422055/223979540-5bb60bc1-697b-43cb-b045-f6989aac7eae.mp4

In a post template, without the query loop, it can be toggled on and off, it will display the media library caption on the front depending on the featured image that is used on that post.

@carolinan
Copy link
Contributor Author

I believe we need to keep the features of the different image blocks as close as possible to reduce the risk of confusion.
The label is used to distinguish that it is always the media library caption and you can't customize it.

Then perhaps we make it work 100% like the image block's caption? Why not make it editable?

I did not understand. Can you be more specific? It is already editable when in the block editor, outside a query.
You have the option to:

  • Not display a caption
  • Customize the caption for that single instance
  • Display the media library caption, which is the same for all copies of the image

Currently without this PR, in the image block, you can't choose to display the media library caption if you have done one of the following:
-Toggled the caption off
-Toggled the caption off and on and added a custom caption

@richtabor
Copy link
Member

Let's maybe back up a little.

Should the caption work the same as other media captions do?

I think yes.

That means you can edit the caption via RichText component, if it's turned on — regardless of if it comes from the Media Library caption field or not.

Example: If I press "Remove caption" then the caption is removed. If I press "Add caption" then I can type in a caption. The toolbar item for caption is always there, not dependent if there's a caption in the Media Library entry.

Editing the caption

All that is assuming you see the caption (to edit it like the Image block's caption).

If you add the post featured image block to a template (likely), you'll see the placeholder caption (as you should). There's no relative content templates; everything's a placeholder.

placeholder-caption

In Query loop, you can toggle the caption on — but can't edit it. There's actually not a way to edit the caption as-is, unless you go back to the Media Library — probably via WP admin. I would expect that I could click on the caption in this context (when it's not a placeholder) to edit it — same as I can for all other media blocks.

within-site-editor-query-loop

Media Library v. Custom Captions

I don't think we need to separate "Media Library caption" and "Custom caption", but just like the Image block, use the Media Library caption, unless it has been edited. We should push for one-to-one experiences for blocks within the Post and Site Editors, and like-blocks as well.

CleanShot 2023-03-09 at 12 11 50

@carolinan
Copy link
Contributor Author

Doing that you still can't choose to display the media library caption if you have done one of the following:
-Toggled the caption off
-Toggled the caption off and on and added a custom caption

But do you see a way to edit the caption for individual posts inside a query without saving the caption to the image, which I thought we agreed we couldn't do?
It can't be saved to the block in this case since all the blocks are repeated.

@carolinan
Copy link
Contributor Author

This round I have assumed that with "make it editable" you meant make the media library caption editable and save the updated text as the block's caption attribute. It would have helped me if the suggestion had been more specific.

I spent more hours on this than I would like but I was not able to solve it and make it work exactly like for the other media blocks. 😞
I tried many different things, the code that I have pushed now was only one of the tries: Know that it is much much buggier than the previous commits.

One of the problems is making the media library caption show by default without clicking the caption button.
In the other media blocks, the caption block attribute is updated when the media is selected.
But that does not work for featured image unless you are selecting the image when adding the block. It doesn't work if the image is already assigned.

@carolinan
Copy link
Contributor Author

Closing this experiment in favor of a simpler solution.

@carolinan carolinan closed this Mar 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Focus] Blocks Adoption For issues that directly impact the ability to adopt features of Gutenberg.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants