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

Gallery block: Move add/edit media to block toolbar #38036

Merged
merged 9 commits into from
Jan 19, 2022

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Jan 17, 2022

Description

Related to: #21247

Moves the Gallery block image add/edit from the placeholder at the bottom of the Gallery to a button in the toolbar.

This is the first step in updating the adding of images to the Gallery. The next step will be to enable the inline block inserter, but there are currently some issues with this not working in the Gallery horizontal layout that needs to be resolved.

How to test

Add a Gallery block and make sure that images can be added from the block placeholder, and also from the 'Add' button that appears in block toolbar once a Gallery contains images.

Screenshots

gallery-toolbar

@glendaviesnz glendaviesnz self-assigned this Jan 17, 2022
@glendaviesnz glendaviesnz added the [Status] In Progress Tracking issues with work in progress label Jan 17, 2022
@github-actions
Copy link

github-actions bot commented Jan 17, 2022

Size Change: +669 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/block-editor/index.min.js 141 kB +94 B (0%)
build/block-library/blocks/navigation/editor-rtl.css 1.99 kB +57 B (+3%)
build/block-library/blocks/navigation/editor.css 2 kB +59 B (+3%)
build/block-library/blocks/navigation/style-rtl.css 1.85 kB +21 B (+1%)
build/block-library/blocks/navigation/style.css 1.84 kB +25 B (+1%)
build/block-library/blocks/navigation/view.min.js 2.81 kB -11 B (0%)
build/block-library/editor-rtl.css 10.1 kB +44 B (0%)
build/block-library/editor.css 10.1 kB +42 B (0%)
build/block-library/index.min.js 165 kB +349 B (0%)
build/block-library/style-rtl.css 10.8 kB +18 B (0%)
build/block-library/style.css 10.8 kB +18 B (0%)
build/blocks/index.min.js 46.4 kB +13 B (0%)
build/components/index.min.js 215 kB +7 B (0%)
build/edit-post/index.min.js 29.6 kB +16 B (0%)
build/edit-post/style-rtl.css 7.15 kB -14 B (0%)
build/edit-post/style.css 7.14 kB -15 B (0%)
build/edit-site/index.min.js 37.7 kB -58 B (0%)
build/editor/index.min.js 38.4 kB +4 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 14.6 kB
build/block-editor/style.css 14.6 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 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 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 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 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 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-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 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/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.22 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 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 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 965 B
build/block-library/blocks/gallery/editor.css 967 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.6 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 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 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 810 B
build/block-library/blocks/image/editor.css 809 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 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 493 B
build/block-library/blocks/media-text/style.css 490 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 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 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-submenu/view.min.js 343 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 402 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 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 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/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 305 B
build/block-library/blocks/post-template/style.css 305 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 389 B
build/block-library/blocks/pullquote/style.css 388 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 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 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 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 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 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 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/editor-rtl.css 744 B
build/block-library/blocks/site-logo/editor.css 744 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 214 B
build/block-library/blocks/tag-cloud/style.css 215 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 908 B
build/block-library/common.css 905 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 676 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/components/style-rtl.css 15.5 kB
build/components/style.css 15.5 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 13.3 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.49 kB
build/date/index.min.js 31.9 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-site/style-rtl.css 6.85 kB
build/edit-site/style.css 6.84 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.17 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.58 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.75 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.72 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 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.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.58 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@glendaviesnz glendaviesnz added [Block] Gallery Affects the Gallery Block - used to display groups of images and removed [Status] In Progress Tracking issues with work in progress labels Jan 18, 2022
@glendaviesnz glendaviesnz marked this pull request as ready for review January 18, 2022 00:56
Copy link
Contributor

@stacimc stacimc left a comment

Choose a reason for hiding this comment

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

This tests well for me and seems like a great improvement 😄

  • Adding a single image works
  • Adding multiple images works
  • No regressions seen with the MediaUpload & Replace flows with individual Image blocks inside/outside of the gallery, or with the Video block
  • The new toolbar button is not present in the placeholder state (when the Gallery is empty)
  • You can still add images from the placeholder state

This feels much better in the toolbar than fixed to the bottom of the block, since it scrolls with you and is always visible when the block is selected, especially in large galleries. If you do choose to Add images while scrolled to the top of the block, though, it may not be apparent that the operation was successful, because the images actually get inserted at the end of the gallery. That is what I'd expect, but maybe it would be helpful to automatically scroll to the bottom of the block when images are added this way?

Here's an example:

gallery-toolbar-inserter.mov

@glendaviesnz
Copy link
Contributor Author

but maybe it would be helpful to automatically scroll to the bottom of the block when images are added this way?

Good idea, I will take a look at doing that.

@ramonjd
Copy link
Member

ramonjd commented Jan 18, 2022

Also works great for me!

Screen Shot 2022-01-19 at 9 12 53 am

Screen Shot 2022-01-19 at 9 12 10 am

maybe it would be helpful to automatically scroll to the bottom of the block when images are added this way?

I'm just throwing this out there: what if we selected the latest image block(s) after adding it?

Not necessarily in this PR, but maybe an option if it improves UX.

@glendaviesnz
Copy link
Contributor Author

I'm just throwing this out there: what if we selected the latest image block(s) after adding it?

@ramonjd, @stacimc I have added a scroll to the first of the latest images, but Ramon your suggestion of just selecting the first of these might avoid the need to pull on the new scroll library dependency - I will have a play with that approach.

@ramonjd
Copy link
Member

ramonjd commented Jan 18, 2022

selecting the first of these might avoid the need to pull on the new scroll library dependency

I didn't search around much, but it looks like we'd get it out of the box of block detects that it's selected:

https://github.com/WordPress/gutenberg/blob/release/12.4/packages/block-editor/src/components/block-list/use-block-props/index.js#L119

@stacimc
Copy link
Contributor

stacimc commented Jan 18, 2022

Selecting the block is an even better idea IMO ✨ It addresses the scrolling issue and, now you mention it, also feels like appropriate behavior after adding new images. If it ends up being tricky to get working I think it could always be an improvement/follow-up, but I think that would be great!

@glendaviesnz
Copy link
Contributor Author

@stacimc, @ramonjd with selecting the blocks we have two options:

  1. Select all of the blocks that were just added:

select-multi

  1. Just select the first of the new blocks added, which causes its toolbar to show and caption to be focused for edit:

select-single

any views on which of these is the best UX? Both of these approaches are committed if you want to try locally - single, multiple

@ramonjd
Copy link
Member

ramonjd commented Jan 19, 2022

Thanks for trying out both options @glendaviesnz

Both work as described in the screencasts above for me.

I don't have a definitive answer on this one, but I asked myself: what do I want to do after I've added a single or multiple images?

Definitely see what the gallery looks like. 😄 Just having the auto-scroll in place makes a huge difference already.

Just select the first of the new blocks added, which causes its toolbar to show and caption to be focused for edit:

For first-item selected, it's curious to see the caption focussed. I can't reproduce that when selecting blocks from the list view.

list-select.mp4

Still, it's consistent between adding one block vs adding multiple, and it brings me to the point at which the images are selected and, with one click, I can carry on even if I rarely want to add a caption.

Select all of the blocks that were just added:

When I add a few blocks at a time the Block Inspector reveals an empty Image settings panel so there's not much I can really do any way except toggle the border radius. This is current behaviour for the image block anyway.

Screen Shot 2022-01-19 at 12 43 52 pm

One advantage is that I easily delete the newly-added image all at once.

But what makes me prefer this option is when I add one image only: it selects the individual block and I can do a lot more straight away.

For me, the scroll-to improvement outweighs any select behaviour, which I guess we can tweak/swap later on which ever way we decide.

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.

This is an excellent improvement.

I've tested with multiple galleries, adding single and multiple images.

Adding/uploading images works as expected, and the page scrolls to the newly-added and selected images.

The 'select all' option after adding multiple images, I think, works well and doesn't distract from editing.

Thank you!

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

This works great for me @glendaviesnz! I like that we're keeping the placeholder when there are no images, and this helps the presentation of the block when there are images look more closely like the front end of the block while editing it. Like the others mentioned, it's nice having the persistent ability to add images in a really tall gallery block, too, feels like a good improvement to me!

I also really like the behaviour where multiple added images are selected after adding them — makes it really clear which are the new ones:

Kapture.2022-01-19.at.14.02.15.mp4

Just left an optional comment about potentially optimising checking for allowed types, but otherwise the logic all looks good to me!

@@ -134,8 +154,13 @@ const MediaReplaceFlow = ( {
<>
<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
<MediaUpload
value={ mediaId }
onSelect={ ( media ) => selectMedia( media ) }
gallery={ multiple && onlyAllowsImages() }
Copy link
Contributor

Choose a reason for hiding this comment

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

It looks like this gets re-calculated on every render. I'm not sure if it's really needed as an optimisation, but if the value changes only when allowedTypes changes, could we replace the definition of onlyAllowsImages with a useMemo call and store the result in a const?

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 don't think there was a performance issue here, but I have moved the function call out of the prop just to be sure. Because onlyAllowsImages is inexpensive and returns a boolean I didn't think useMemo was needed though?

Copy link
Contributor

Choose a reason for hiding this comment

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

It's probably not needed — I think I just had useMemo on my brain after looking @aaronrobertshaw's recent efforts on improving performance in the ToolsPanel. Just a good one for us to keep in the back of our minds in case we want to optimise anything further down the track. Looks good to me!

packages/block-library/src/gallery/edit.js Outdated Show resolved Hide resolved
@glendaviesnz glendaviesnz merged commit ebbc7d8 into trunk Jan 19, 2022
@glendaviesnz glendaviesnz deleted the update/gallery-media-add-to-be-in-toolbar branch January 19, 2022 23:16
@fluiddot
Copy link
Contributor

fluiddot commented Jan 26, 2022

👋 We spotted an issue related to these changes in the native version of the Gallery block. It will be addressed in this PR, but since the changes also involve changes in the web version, I'd appreciate it if you could take a quick look, thanks for your help 🙇 !

cc @glendaviesnz

@fluiddot
Copy link
Contributor

I also noticed that uploading multiple images from the Add button is not working properly (see attached video capture), looks like the block is adding the same number of images but all of them are the same. I checked this behavior on a site with Gutenberg version v12.4.1 via the media placeholder, and I couldn't reproduce it.

Not sure if you're already aware of the issue, if not I'll be more than happy to open a ticket 🙇 .

Screen.Capture.on.2022-01-26.at.13-04-36.mp4

@glendaviesnz
Copy link
Contributor Author

I also noticed that uploading multiple images from the Add button is not working properly

Thanks @fluiddot, we hadn't seen this issue - I have added a PR for it now #38259

@fluiddot
Copy link
Contributor

Thanks @fluiddot, we hadn't seen this issue - I have added a PR for it now #38259

Great, I'll take a look at the PR in case I can help out 👀 .

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants