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

List View: Add media previews to list view for gallery and image blocks #53381

Merged
merged 5 commits into from
Aug 10, 2023

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Aug 7, 2023

What?

An exploration into #46015 — add media previews for gallery and image blocks in the list view.

Why?

In large documents with many images or galleries, adding media thumbnails to the list view row should (hopefully) make it easier to identify which image or gallery is which, and improve navigating around documents within the list view.

In this PR:

  • Displays images for the Gallery block, but only when it is collapsed
  • Images overlap slightly, and max out at 3 in the row for now (we can adjust this if there's a better number to go with)
  • Any Image block in the list view will display a single image in the row

How?

  • Add a hook to the list view for grabbing images for the preview
  • The image is displayed via a background image with background size to set to cover
  • For now, hard-code the logic to look for images via the Image block, or children of the Gallery block. I've added a TODO item in the comments that eventually we could move to a consistent API for this. For now, by hard-coding, we can retain the same entrypoint for the list view (the useListViewImages hook), but in follow-ups we can refactor the internals to use a block API of some kind (i.e. either via something in block.json, or via a method like __experimentalLabel but for images)

To-do

  • Style the images so that they always fill a square (e.g. cover the background)
  • For gallery block, layer the images over one-another, with a maximum number of images displayed

Testing Instructions

  1. Add a gallery block with a couple of images
  2. Add another gallery block with > 3 images
  3. Play around with expanding and collapsing the gallery block within the list view
  4. Check that adding / removing / updating images in an existing block updates the list view item

Screenshots or screencast

The following screenshot includes:

  • Selected collapsed Gallery block (with and without lock status)
  • Deselected collapsed Gallery block
  • Expanded Gallery block with images
  • Standalone Image block
image

@andrewserong andrewserong added [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Experimental Experimental feature or API. labels Aug 7, 2023
@andrewserong andrewserong self-assigned this Aug 7, 2023
@github-actions
Copy link

github-actions bot commented Aug 7, 2023

Size Change: +373 B (0%)

Total Size: 1.5 MB

Filename Size Change
build/block-editor/index.min.js 211 kB +224 B (0%)
build/block-editor/style-rtl.css 14.9 kB +75 B (+1%)
build/block-editor/style.css 14.9 kB +74 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.26 kB
build/block-editor/content.css 4.25 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 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/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 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 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 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-interactivity.min.js 317 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.42 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.46 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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 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.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view-interactivity.min.js 988 B
build/block-library/blocks/navigation/view-modal.min.js 2.85 kB
build/block-library/blocks/navigation/view.min.js 469 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/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 314 B
build/block-library/blocks/post-template/style.css 314 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 335 B
build/block-library/blocks/pullquote/style.css 335 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 302 B
build/block-library/blocks/query-pagination/style.css 299 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 450 B
build/block-library/blocks/query/editor.css 449 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 608 B
build/block-library/blocks/search/style.css 608 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 631 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 645 B
build/block-library/blocks/table/style.css 644 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 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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/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.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 202 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.7 kB
build/block-library/style.css 13.8 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51 kB
build/commands/index.min.js 15.3 kB
build/commands/style-rtl.css 849 B
build/commands/style.css 843 B
build/components/index.min.js 245 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.1 kB
build/core-commands/index.min.js 2.44 kB
build/core-data/index.min.js 16.8 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.38 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 35.7 kB
build/edit-post/style-rtl.css 7.59 kB
build/edit-post/style.css 7.59 kB
build/edit-site/index.min.js 90.5 kB
build/edit-site/style-rtl.css 13.2 kB
build/edit-site/style.css 13.2 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/index.min.js 45.3 kB
build/editor/style-rtl.css 3.55 kB
build/editor/style.css 3.55 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.59 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 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/index.min.js 10.4 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 951 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.71 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.85 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 kB
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 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

*/
import { store as blockEditorStore } from '../../store';

function getImageUrl( block ) {
Copy link
Member

Choose a reason for hiding this comment

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

Not for this PR, but it's be good to think through an API that goes beyond hard-coding core blocks and builds similarly to the custom label support. For example, it might be a side effect of attribute types, so that a Cover block can show an image if one is set as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, thanks for taking an early look! Yes, I've just hard-coded things in at the moment while I hack around, but it'd be preferable in the longer-term to have a consistent API for it.

I imagine we'd likely keep things fairly hard-coded for the first round, but thinking through an API could be handy so that custom blocks / plugins can have image previews, too.

Copy link
Member

Choose a reason for hiding this comment

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

Indeed, one step at a time :)

Copy link
Member

Choose a reason for hiding this comment

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

Maybe in addition to the save and edit functions there could be a list function or something that returns JSX that appears in the List View. This could replace __experimentalLabel.

list( { attributes } ) {
	return (
		<Row>
			__( 'Image' )
			<ImagePreview attributes={ attributes } />
		</Row>
	);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hrm, interesting idea! One thing we'd probably want to be careful about is that it's quite a restricted area visually, so we might not want custom blocks to arbitrarily add elements, but rather provide data that the UI already knows how to display without anything overflowing or breaking out of the available space? There isn't very much real estate available, and the text truncation, etc for __experimentalLabel is handled automatically by the list view rather than individual blocks having to worry about it.

Copy link
Member

Choose a reason for hiding this comment

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

It's a similar problem to BlockToolbar. In theory you can put anything inside a <BlockControls> and it will appear in the toolbar but we trust that extenders use the components we provide that are designed for this purpose e.g. ToolbarButton.

In fact the problems are so similar that maybe instead of a list() function we just have ListViewControls which is rendered by edit() 😀

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In fact the problems are so similar that maybe instead of a list() function we just have ListViewControls which is rendered by edit() 😀

Yeah, something like that could work. Though I'd imagine that would likely be in addition to a label function? __experimentalLabel works for other contexts than just the list view, since it winds up being called internally by useBlockDisplayTitle.

In any case, definitely worth hacking around with in follow-ups to see if it's more ergonomic for the block code to decide what's rendered, or for the block code to provide data that the list view renders in an opinionated way.

@andrewserong andrewserong changed the title [WIP] List View: Add media previews to list view for gallery and image blocks List View: Add media previews to list view for gallery and image blocks Aug 8, 2023
@andrewserong andrewserong marked this pull request as ready for review August 8, 2023 04:50
@andrewserong
Copy link
Contributor Author

Alrighty, I think this is ready for design feedback / review now. @jameskoster is this roughly what you had in mind for this one? Happy to adjust any of the styling, I mostly put it together based on the screenshot in #46015, but I might have gotten some of the numbers wrong for overlap, border-radius, etc 🙂

@andrewserong andrewserong added [Type] Enhancement A suggestion for improvement. and removed [Type] Experimental Experimental feature or API. labels Aug 8, 2023
@mtias mtias added Needs Design Feedback Needs general design feedback. [Feature] Media Anything that impacts the experience of managing media labels Aug 8, 2023
@jameskoster
Copy link
Contributor

Thanks for the ping. This is looking pretty nice already!

  • The thumbnails are perhaps a little large – let's try 20px.
  • We can probably omit the 2px shadow on individual images – it's most useful in the stacked display.
  • Should we display a count when images aren't accounted for in the stack? IE:
Screenshot 2023-08-08 at 11 46 19

Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

This worked well for me, it's a great improvement. I agree that having a +N after the thumbs of gallery images if there are more would be useful.

Screen.Recording.2023-08-08.at.3.21.09.PM.mp4

@andrewserong
Copy link
Contributor Author

Thanks for the ping. This is looking pretty nice already!

Nice one, thanks for testing, folks! I'll tweak the styling a bit — I really like the idea of the +N idea, too, I'll give that a try 🙂

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

This is working well for me so far!

.block-editor-list-view-block-select-button__images {
display: flex;
align-items: center;
flex-direction: row;
Copy link
Contributor

Choose a reason for hiding this comment

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

row is the default direction so we shouldn't need to specify it here, unless I'm missing something? align-items also shouldn't be needed if the images are always the same size (and if they aren't, would it be better to leave it as stretch so they all take up the same height?)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, thank you! Those were stray rules left over from hacking around, I'll remove them 🙂

}
}

function getImagesFromGallery( block ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Would it make sense to expand this to other container blocks that may have images, such as Group or Column? (Not necessarily as part of this PR)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes — I was thinking we'd start with Gallery + Image for now, and look at other blocks such as Cover, etc in a follow-up where we can look at how an API for it might work, as in the other discussion above.

I like the idea of Group, Column, or other container blocks also showing what's in them, that's a cool idea! And if the API discussion winds up being a bit complex, then it'll be a simple follow-up to add hard-coded rules to allow Group, Column, etc in, too.

Copy link
Member

Choose a reason for hiding this comment

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

We can try it, but it may be more distracting than necessary to have images also visible in parent group/columns blocks, and not just image/media related blocks.

Copy link
Member

Choose a reason for hiding this comment

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

I'd keep it just for galleries and blocks that can have an image as an attribute (Cover, Media and Text).

Copy link
Member

Choose a reason for hiding this comment

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

Wrote a follow-up issue to add support for other image-attribute-based blocks: #53684

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nice, that sounds good to me 👍

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

Great stuff. This is working well for me.

✅ Displays for image and gallery blocks only
✅ Handles multiple and nested galleries on a page pretty well (I tried 10)
✅ Looks the same in FF, Safari, Chrome and Edge

+1 on the +N indicator

@andrewserong
Copy link
Contributor Author

andrewserong commented Aug 9, 2023

Alrighty, thanks for all the testing, folks! 🙇 I think this is ready for another design review now.

@jameskoster I've done the following:

  • Reduced the image size down to 20px.
  • Added an image count when the number of images to display is greater than 5, with the +N number referring to the number of additional images in the block.
  • The image count is set to use 12px font-size via $helptext-font-size.
  • I used an opacity of 0.6 for the text color so that it'd be relative depending on whether or not the block is selected.
  • For the styling of subsequent images, the margin offset is -5px (I tried to get close to the screenshots, but this might need to be tweaked further).

Here's how it's looking (I included an example with the Lock icon so we can see how the text feels next to other icons):

image

Happy to keep tweaking, and let me know if there are any specific values you'd like to go with for any of the above, of course 🙂

<span className="block-editor-list-view-block-select-button__image-count">
{ sprintf(
/* translators: %d: Number of additional images within a block. */
__( '+%d' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

This is really just a plus with a number, does it need translation? And if we assume the plus could be translated to something with more than one character, would it fit in the available space?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's mostly about whether or not it's to the left or to the right of the number, rather than being translated to another character. Happy to remove the translation call if we think it's not needed, though!

Copy link
Member

Choose a reason for hiding this comment

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

I'd tend towards keeping the translation just in case some locales use a different symbol or order.

@mtias
Copy link
Member

mtias commented Aug 9, 2023

No strong opinion, but I think we can do without the number count on collapsed galleries, we could also probably show less images as well—it's just a cue.

@jameskoster
Copy link
Contributor

Yeah I think we can simplify.

A couple of images are probably adequate in helping folks identify a given gallery, which is the main purpose of this affordance. Displaying only three thumbnails and removing the count will reduce the overall noise a lot. Sorry for the detour with the count!

@andrewserong
Copy link
Contributor Author

Displaying only three thumbnails and removing the count will reduce the overall noise a lot. Sorry for the detour with the count!

Sounds good, and no apology necessary! I think we only find the sweet spot with some of these things once we throw everything in there and see what feels good. I'll update 🙂

@apeatling
Copy link
Contributor

Seeing the numbers now I do agree it's a bit much. :D

@andrewserong
Copy link
Contributor Author

Update: I've removed the image count, and reduced it to a max of 3 images. Here's how it's looking now:

image

I think this is ready for a final review now, @jameskoster! Let me know if there's anything else you'd like to tweak.

@mtias
Copy link
Member

mtias commented Aug 10, 2023

This is looking good :)

Copy link
Contributor

@jameskoster jameskoster left a comment

Choose a reason for hiding this comment

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

Nice! It's working well for me in post and site editors.

Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

Retested and working well, looks clean!

@andrewserong
Copy link
Contributor Author

Thanks for the collaboration and reviews, everyone! 🙇

@andrewserong andrewserong merged commit e522dd9 into trunk Aug 10, 2023
51 checks passed
@andrewserong andrewserong deleted the try/add-images-to-list-view branch August 10, 2023 22:27
@github-actions github-actions bot added this to the Gutenberg 16.5 milestone Aug 10, 2023
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 29, 2023
@femkreations femkreations added [Block] Image Affects the Image Block [Block] Gallery Affects the Gallery Block - used to display groups of images labels Oct 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Block] Image Affects the Image Block [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Feature] Media Anything that impacts the experience of managing media Needs Design Feedback Needs general design feedback. Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

9 participants