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 refactor: fix focus issue with gallery figcaption #31216

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Apr 27, 2021

Description

Fixes: #29998, #29994 and part of #30001 (delete with delete key after adding gallery via drag n drop)

Currently if select a Gallery the figcaption immediately grabs focused so the parent gallery is never shown as selected, and can't be deleted with delete key when selected.

Testing

Check out the PR and enable gallery refactor experiment
Add a gallery with some images
Select the gallery from either an image block parent block menu item or the block navigator
Check that the blue selection line appears around the block and that it can be deleted with the delete key once selected
Also check that you can select and edit the gallery fig caption

Screenshots

Before:
focus-before

After:
focus-after

…t stealing focus every time block is selected
@glendaviesnz glendaviesnz added [Type] Bug An existing feature does not function as intended [Block] Gallery Affects the Gallery Block - used to display groups of images labels Apr 27, 2021
@glendaviesnz glendaviesnz self-assigned this Apr 27, 2021
@github-actions
Copy link

Size Change: +301 B (0%)

Total Size: 1.43 MB

Filename Size Change
build/block-library/blocks/gallery/style-rtl.css 1.77 kB +5 B (0%)
build/block-library/blocks/gallery/style.css 1.78 kB +4 B (0%)
build/block-library/index.js 156 kB +286 B (0%)
build/block-library/style-rtl.css 10.1 kB +2 B (0%)
build/block-library/style.css 10.1 kB +4 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.79 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.63 kB 0 B
build/block-directory/style-rtl.css 1 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/index.js 127 kB 0 B
build/block-editor/style-rtl.css 12.4 kB 0 B
build/block-editor/style.css 12.4 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 503 B 0 B
build/block-library/blocks/button/style.css 503 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 364 B 0 B
build/block-library/blocks/buttons/style.css 363 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 436 B 0 B
build/block-library/blocks/columns/style.css 435 B 0 B
build/block-library/blocks/cover/editor-rtl.css 605 B 0 B
build/block-library/blocks/cover/editor.css 605 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB 0 B
build/block-library/blocks/cover/style.css 1.23 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/editor-rtl.css 175 B 0 B
build/block-library/blocks/file/editor.css 174 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB 0 B
build/block-library/blocks/freeform/editor.css 2.44 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 843 B 0 B
build/block-library/blocks/gallery/editor.css 844 B 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 476 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 398 B 0 B
build/block-library/blocks/legacy-widget/editor.css 399 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 597 B 0 B
build/block-library/blocks/navigation-link/editor.css 597 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/navigation-link/style.css 1.07 kB 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.24 kB 0 B
build/block-library/blocks/navigation/editor.css 1.24 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 204 B 0 B
build/block-library/blocks/navigation/style.css 205 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 239 B 0 B
build/block-library/blocks/page-list/editor.css 240 B 0 B
build/block-library/blocks/page-list/style-rtl.css 167 B 0 B
build/block-library/blocks/page-list/style.css 167 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 83 B 0 B
build/block-library/blocks/query-loop/editor.css 82 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 795 B 0 B
build/block-library/blocks/query/editor.css 794 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 189 B 0 B
build/block-library/blocks/search/editor.css 189 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 438 B 0 B
build/block-library/blocks/site-logo/editor.css 438 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 150 B 0 B
build/block-library/blocks/site-logo/style.css 150 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 776 B 0 B
build/block-library/blocks/social-links/editor.css 776 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 402 B 0 B
build/block-library/blocks/table/style.css 402 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 552 B 0 B
build/block-library/blocks/template-part/editor.css 551 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 50 B 0 B
build/block-library/blocks/verse/editor.css 50 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 173 B 0 B
build/block-library/blocks/video/style.css 173 B 0 B
build/block-library/common-rtl.css 1.31 kB 0 B
build/block-library/common.css 1.31 kB 0 B
build/block-library/editor-rtl.css 9.88 kB 0 B
build/block-library/editor.css 9.87 kB 0 B
build/block-library/reset-rtl.css 502 B 0 B
build/block-library/reset.css 503 B 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.5 kB 0 B
build/components/index.js 286 kB 0 B
build/components/style-rtl.css 16.3 kB 0 B
build/components/style.css 16.3 kB 0 B
build/compose/index.js 11.2 kB 0 B
build/core-data/index.js 17.1 kB 0 B
build/customize-widgets/index.js 7.09 kB 0 B
build/customize-widgets/style-rtl.css 630 B 0 B
build/customize-widgets/style.css 631 B 0 B
build/data-controls/index.js 841 B 0 B
build/data/index.js 8.88 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 787 B 0 B
build/dom-ready/index.js 576 B 0 B
build/dom/index.js 5.19 kB 0 B
build/edit-navigation/index.js 17 kB 0 B
build/edit-navigation/style-rtl.css 2.86 kB 0 B
build/edit-navigation/style.css 2.86 kB 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/edit-post/index.js 307 kB 0 B
build/edit-post/style-rtl.css 6.94 kB 0 B
build/edit-post/style.css 6.93 kB 0 B
build/edit-site/index.js 28 kB 0 B
build/edit-site/style-rtl.css 4.61 kB 0 B
build/edit-site/style.css 4.6 kB 0 B
build/edit-widgets/index.js 15.7 kB 0 B
build/edit-widgets/style-rtl.css 2.97 kB 0 B
build/edit-widgets/style.css 2.98 kB 0 B
build/editor/index.js 42.4 kB 0 B
build/editor/style-rtl.css 3.92 kB 0 B
build/editor/style.css 3.92 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.76 kB 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 2.28 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 4.01 kB 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/keyboard-shortcuts/index.js 2.53 kB 0 B
build/keycodes/index.js 1.96 kB 0 B
build/list-reusable-blocks/index.js 3.19 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 5.38 kB 0 B
build/notices/index.js 1.86 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/plugins/index.js 2.95 kB 0 B
build/primitives/index.js 1.42 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/react-i18n/index.js 1.46 kB 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.79 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/rich-text/index.js 13.5 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 3.02 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Nice work 👍

This tests well for me. Regardless of how I select the gallery block, the focus outline displays as I'd expect. Focusing and editing the gallery caption works well.

@glendaviesnz glendaviesnz merged commit 1067a0c into refactor/gallery-to-nested-image-blocks Apr 28, 2021
@glendaviesnz glendaviesnz deleted the refactor/gallery-to-nested-image-blocks-focus-bug branch April 28, 2021 21:38
antonis pushed a commit that referenced this pull request Sep 2, 2021
* Refactor gallery to nested image blocks

* Fix issue with images not loading on first selection from media gallery

* Remove the default columns setting as we don't have access to innerBlocks at the point that the block validation is run

* Revert "Remove the default columns setting as we don't have access to innerBlocks at the point that the block validation is run"

This reverts commit 4d95e95.

* Add image count so we can work out default columns as innerBlocks not available at point of block validation

* Disable the innerBlocks dropzones so drag drop works same as existing gallery - with the idea that we will improve the innerblocks drag and drop in a later PR

* Lint changes

* Revert "Lint changes"

This reverts commit 9b0abcc.

* Revert "Disable the innerBlocks dropzones so drag drop works same as existing gallery - with the idea that we will improve the innerblocks drag and drop in a later PR"

This reverts commit cc05d60.

* Suggested solution for handling multiple file drop into gallery

* Remove non image files from drag and drop and disable individual image drop zone

* Fix transform to individual images

* Fix transform from individual images

* Revert drag and drop transform changes

* Add gallery transform to image block to override the default gallery transform when dragging multiple images onto the gallery

* Move handling of file uploads to Gallery from media placeholder

* split innerblocks mapping into separate effect to reduce chatter

* Add useMemo to currentImageOptions

* reuse existing innerBlocks rather than recreating with every new image selection

* Switch to useMemo for updating local image const instead of local component state

* Fix issue with image sizing not being available on initial load of component some times

* Memoise the useImageSizes hook

* Fix issue with media browser  defaulting to edit gallery view

* Fix missed incorrect use of addToGallery

* Add some extra effects for getting the imageData as the getMedia call is async so need to keep circling through the innerblocks updates until we have all the data we need

* Simplify the imageData by using a useSelect

* Another optimisation - only return a new imageData reference if all images have data resolved

* Refactored Gallery: Add loading state to gallery image size options (#27087)

* Add loading spinner for image size options
Co-authored-by: Glen Davies <[email protected]>

* Initial deprecations commit

* Fix issue with linkDestination not being applied in migration

* Refactor gallery deprecations

* Fix missing attributes from migration

* Update deprecation to set allowResize

The imageEdit component defaults the context value for allowResize to true. The refactored gallery sets this to false by default. Setting allowResize to false when migrating a deprecated gallery allows images to be cropped in the display the same as the gallery when the post is saved and gallery reloaded.

* Fix issue with crop not working when certain plugins are loaded

* Fix SCSS lint errors

* Update the block example

* Linting fixes

* Fix the e2e test and the accessibility issue with having aria group role on a list item

* Fix the e2e test and the accessibility issue with having aria group role on a list item

* Fix frontend omission of wp-block-image class

Also tweaks the gallery styles to remove the margins the use of `wp-block-image` introduces when it is moved to the inner `figure` element.

* change deprecation to use imageCount as isEligible check as it seems that some previous block versions may not have an ids attribute

* Move back to a single deprecations file and reorder in array

* Remove additional check in v5 isEligible

* Fix the v4 migration

* Fix styles for Safari compatibility

* Remove unnecessary gallery editor styles

* Fix typo in deprecations

* Restore styles to render deprecated gallery versions

* Avoid applying flex styles to IE11

* Add additional selector to prevent the hidden individual image drop zones ending up display flex instead of hidden

* IE11 styling improvements

* Apply default style class to new images added to gallery

* fix linting issues

* Move block props to the outer wrapper

* Revert "Move block props to the outer wrapper"

This reverts commit e0723a7.

* Revert "Revert "Move block props to the outer wrapper""

This reverts commit a7504fd.

* Fetch media if isListItem is true

* Change context from isListItem to isGrouped

* Remove wrapper div

* remove extra wrapper around media placeholder and caption and use flex css instead

* Revert "remove extra wrapper around media placeholder and caption and use flex css instead

* Revert "Remove external div wrapper by moving InnerBlocks to a fragment"

* another update to image wrapper

* put media uploader outside figure so structure matches front end

* Replace div with View for the sake of native code

* Move setting of attributes to the child images

* Gallery Block Refactor: Account for null image ids in gallery migrations (#27855)

Co-authored-by: Glen Davies <[email protected]>

* Remove the gradient and put caption under image if is-rounded style applied (#27869)

* Add alignment fixes for non cropped images

Co-authored-by: Glen Davies <[email protected]>

* Remove outer div wrapper

* Keep image margins while dragging sibling

* Fix e2e test expected markup to match new structure

* Gallery Block Refactor: Add handling of short code transforms

* Removed unused prop

* Account for undefined block and innerblocks in conversion to reusable block lifecycle

* Add custom gutter sizes to refactored gallery (#28377)

* Adjust editor styles to match new dom structure

* Remove redundant styles that are duplicated in nested image blocks

* Fix issue with Image block dragged out of Gallery still having inheritedAttributes set

* When dragging an image block into a gallery make sure we don't wipe any custom links

* fix issue with variable declaration order

* Fix bug with custom link being overwritten by gallery linkTo changes

* Fix application of gutter size CSS var (#28759)

* Fix mobile width for gallery images

* Add missing dependency to inner images selector

* remove conversion to cover block if image in gallery

* Add fallback to old gallery edit and save for existing gallery (#28961)

Co-authored-by: Glen Davies <[email protected]>

* Remove duplicate import

* Remove need for temporary imageUploads attribute as we can just create the innerBlocks as part of transform

* Remove handling of gallery attribute updates from child images

* Move updating of attributes back to gallery and show snackbar to indicated to user that change was made to all images in the gallery

* Update transforms to work with both versions of gallery

* Remove redundant changes

* Remove redundant changes

* Remove unused method

* Merge similar Image transforms.

* Fix some issues missed when moving attribute setting back to gallery.

* Simplify handling of images from media placeholder now that drag and drop files handled by transform

* Fix typo

* Fix broken upload from media placeholder

* Fix issue with new file uploads overwriting existing blocks

* Remove isGrouped dependency from call to get image as not needed now attributes handled by gallery

* Remove custom gutter size feature

Reasoning for removal can be found at #25940 (comment)

* Use getMediaItems instead of getMedia for getting image data for all gallery images

* Add back missing context prop from rebase conflict

* Make use of new uniqueByBlock flag on updateBlockAttributes to batch child image updates and allow single undo to revert

* Move the setting of the default attributes on new blocks to a single useEffect (#29328)

Co-authored-by: Glen Davies <[email protected]>

* Add snackbar notice ids (#29364)

* Account for people adding and  removing images from media browser so number of images the same, but list of images different to current.

* Changes from PR feedback

* Fix issue with deprecated constants

* Fix linting and e2e test failures

* Some more e2e fixes

* Add transform from old gallery to new format

* Memoize the allowedBlocks

This allows the shallow equals check in the inner blocks' `useNestedSettingsUpdate` hook to pass successfully preventing the state update loop.

* Add warning about image formats required if uploading to gallery

* Move allowedBlocks outside of component to avoid useMemo use

* Re-apply uncropped alignment changes lost in rebase

* Fix issue with non-cropped images in deprecated gallery

* Don't show media library buttons while images are still uploading as the media library needs the image ids to reconcile which images are already in the gallery

* Remove gallerRef that was no longer doing anything

* Respect sort order from Media Library (#30070)

Co-authored-by: Glen Davies <[email protected]>

* Gallery block refactor: make invalid file type errors consistent (#30396)


Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>

* Fix issue with invalid type message when adding files via media browser 'Upload' button

* Gallery block refactor: check for new images by clientId instead of id to stop link settings being lost when images edited (#30550)

Co-authored-by: Glen Davies <[email protected]>

* Apply changes from rebase to deprecated gallery

* Apply patch from rebase to not select all items in media library when existing images have no ids

* Copy caption across from image selected from media library (#30784)

Co-authored-by: Glen Davies <[email protected]>

* Add data-id to image to help with compatibility of refactored gallery with existing themes and plugins (#30710)

Co-authored-by: Glen Davies <[email protected]>

* Revert "Add data-id to image to help with compatibility of refactored gallery with existing themes and plugins (#30710)"

This reverts commit a2253ec.

* fix bug with image style being lost when gallery grouped (#31068)

Co-authored-by: Glen Davies <[email protected]>

* Only add RichText component if the figcaption is clicked to prevent it stealing focus every time block is selected (#31216)

Co-authored-by: Glen Davies <[email protected]>

* Move native v1 Gallery components to v1 directory

* Use v1 defaultColumnsNumber in native v1 gallery

* Fix bug with alt text not being copied from media library (#31066)

Co-authored-by: Glen Davies <[email protected]>

* Make onFocus optional in MediaPlaceholder

* Add useInnerBlocksProps hook

* Enable __experimentalGalleryRefactor flag under __DEV__

This is only temporary, for testing purposes. This will be replaced with
an actual implementation (which will need to access the flag remotely).

* Add WIP v2 gallery

* Add numColumns to block-list flat list

* Temporarily comment out spinner for pending imagesize option

This will need to be addressed (since we can't have unwrapped text on
mobile). For now, I'm commenting this out to proceed with cherry-picking
the changes from the original mobile refactor branch.

* Fix spacing

* Adjust styles to avoid appender overlap

* Add gallery caption

* Fix lint

Some of these "fixes" are simply disabling lint for the offending lines.
These currently unused variables may be used in a later PR, so I'm
leaving them in, for now, to help simplify reconciling the changes from
the former refactor PR.

* Fix sass lint

* [Mobile] - Refactor gallery - cherry pick image edit native (#31826)

* WIP-commit bring image changes from final state of original mobile PR

This has unresolved / unmarked conflicts which will be resolve in
subsequent commits. I am separating the commit to make the resolution
process more transparent.

* Remove duplicate / conflicting methods from performance refactor

* Use context for imageCrop and isGrouped instead of isGallery

* Remove non-existent inheritedAttributes attribute

* Remove dead code from non-existent context attributes

* Remove unused attributes prop from link settings

* Cherry-pick BlockListItem changes

Note: Since render was changed to renderContent, we should return early
from render too, when blockWidth is falsey.

* Return early from render instead of renderContent

* Cherry-pick plumb blockProps through BlockListBlock

I'm not sure yet whether it still makes sense to use blockProps in this
way. I'm going to cherry-pick the commits by file, and sort out the need
for this mechanism afterwards.

* Cherry-pick add GridItem

Since this is duplicated from the original mobile gallery code (Tiles
component), it might make sense to export it for re-use. Previously, it
was only moved, but now that we will maintain both versions, it has
become a duplicate implementation. I will defer this to a later commit.

* Cherry-pick BlockList

Similar to blockProps mentioned earlier, gridProperties will be
evaluated after cherry-picking the relevant changes, to see if there is
another mechanism that may be more appropriate.

* Cherry-pick StylePreview key change

* Cherry-pick blockProps and gridProperties in InnerBlocks

* Use sass var for galleryAppender padding

Note: This also re-adds fullWidth style, which is still being used in
both v1 and v2 mobile implementations. If this is superceded by a recent
refactor of the block width styles, it may be worth revisiting this and
removing / changing the implementation.

* Cherry-pick remaining gallery changes

Note: as before, blockProps and gridProperties should be re-evaluated in
subsequent commits, if necessary. E.g. `imageCrop` is already recieved
via context, and `isGroup` may be sufficient, eliminating the need for
`isGallery`.

* Remove numColumns

Going back over the older commits, it seems there were a two strategies
used to render the gallery images as a grid. One used the numColumns
(same as used in the Columns block), and the other using the Grid
component. This commit cleans up the unused parts of the former
approach.

* Remove blockProps

This is no longer necessary, since we are using context to pass
gallery-level attributes to the image blocks' rendering.

* Fix gallery block.json (delete extra comma)

* Remove unused imageCrop

* Gallery refactor - Infer version from existing content (#32270)

* Give content precedence over flag in edit wrapper

This modifies the logic in the gallery edit wrapper function to infer
version information from existing content when the editor encounters
content created from the new implementation and the flag is not set.

* Resolve merge conflicts

This brings the gallery edit changes to the v1 directory, and merges the
changes for the image block.

* Use non-deprecated hook when possible

This brings the same change from this PR:
#31027 which may have missed
the deprecated hook in the refactor PR, since it hadn't landed yet.

* Resolve conflict in block editor default settings

This was an update for a new jsdoc linting rule.

* Add back blockWidth contentContainerStyles in block list

I believe this was inadvertantly removed in some earlier commits, so
this commit adds it back.

* Use boolean flags for variants in Platform module

These flags allow for a slightly more flexible, performant, and terse
way of branching by platform. For more details, see:
#18058 (comment)

* Use boolean Platform flags

* Only render imageSizeOptions loading spinner on web

* Add default for destructured context in image edit

This is necessary for unit tests, because they instantiate the block's
edit component directly, and so the default context is not provided.

* Temporarily hard-code experimenal gallery refactor flag to true

This will be reverted once the block settings are fetched from the REST
API. This is enabled for now for testing purposes.

* Revert "Temporarily hard-code experimenal gallery refactor flag to true"

This reverts commit 6fbaed9.

* Update experiments page with warning about the mobile app version

* Resolve conflict in image.js

The conflict was from #33095

* Pass the Gallery v2 Flag over from the editor

* Capture Gallery Refactor in initial props

* Lint Fix

* Minor changes from code review:
* Reward experiments description
* Add documentation about new media placeholder handleUpload flag
* Add additional explanation of v1-6 deprecations
* Rename the edit wrapper components to make useage clearer
* Temporarily remove tranform from v1 gallery to v2 gallery

* Improve naming of save and deprecated save methods

* Rename __experimentalGalleryRefactor flag to __unstableGalleryWithInnerBlocks

* Remove the isGrouped context as no longer needed.

* Rename __unstableGalleryWithInnerBlocks to _unstableGalleryWithImageBlocks

* Gallery block refactor: remove the imageCount attribute  (#33677)

* Remove the imageCount attribute and use CSS instead to set default columns

Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>

* Fix broken scss

* Fix php linting error

* Changes new gallery flag name

* Updates mobile warning

* Removes the imageCount attribute

* Remove the isGrouped context

* Fixes lint issue

* [Mobile] Renames Gallery v2 Flag to __unstableGalleryWithImageBlocks (#33816)

* Renames __experimentalGalleryRefactor to __unstableGalleryWithImageBlocks

* Fixes lint formatting issue

* Fixes lint issue

* Merge mobile refactor of gallery to nested image blocks into desktop refactor PR(#31306)

* Move native v1 Gallery components to v1 directory
* Use v1 defaultColumnsNumber in native v1 gallery
* Make onFocus optional in MediaPlaceholder
* Add useInnerBlocksProps hook
* Enable __experimentalGalleryRefactor flag under __DEV__
* Add numColumns to block-list flat list
* Fix spacing
* Adjust styles to avoid appender overlap
* Add gallery caption
* Fix lint
Some of these "fixes" are simply disabling lint for the offending lines.
These currently unused variables may be used in a later PR, so I'm
leaving them in, for now, to help simplify reconciling the changes from
the former refactor PR.
* Fix sass lint
* [Mobile] - Refactor gallery - cherry pick image edit native (#31826)
* Remove duplicate / conflicting methods from performance refactor
* Use context for imageCrop and isGrouped instead of isGallery
* Remove non-existent inheritedAttributes attribute
* Remove dead code from non-existent context attributes
* Remove unused attributes prop from link settings
* Cherry-pick BlockListItem changes
Note: Since render was changed to renderContent, we should return early
from render too, when blockWidth is falsey.
* Return early from render instead of renderContent
* Cherry-pick plumb blockProps through BlockListBlock
I'm not sure yet whether it still makes sense to use blockProps in this
way. I'm going to cherry-pick the commits by file, and sort out the need
for this mechanism afterwards.
* Cherry-pick add GridItem
Since this is duplicated from the original mobile gallery code (Tiles
component), it might make sense to export it for re-use. Previously, it
was only moved, but now that we will maintain both versions, it has
become a duplicate implementation. I will defer this to a later commit.
* Cherry-pick BlockList
Similar to blockProps mentioned earlier, gridProperties will be
evaluated after cherry-picking the relevant changes, to see if there is
another mechanism that may be more appropriate.
* Cherry-pick StylePreview key change
* Cherry-pick blockProps and gridProperties in InnerBlocks
* Use sass var for galleryAppender padding
Note: This also re-adds fullWidth style, which is still being used in
both v1 and v2 mobile implementations. If this is superceded by a recent
refactor of the block width styles, it may be worth revisiting this and
removing / changing the implementation.
* Cherry-pick remaining gallery changes
Note: as before, blockProps and gridProperties should be re-evaluated in
subsequent commits, if necessary. E.g. `imageCrop` is already recieved
via context, and `isGroup` may be sufficient, eliminating the need for
`isGallery`.
* Remove numColumns
Going back over the older commits, it seems there were a two strategies
used to render the gallery images as a grid. One used the numColumns
(same as used in the Columns block), and the other using the Grid
component. This commit cleans up the unused parts of the former
approach.
* Remove blockProps
This is no longer necessary, since we are using context to pass
gallery-level attributes to the image blocks' rendering.
* Fix gallery block.json (delete extra comma)
* Remove unused imageCrop
* Add back blockWidth contentContainerStyles in block list
* Use boolean flags for variants in Platform module
These flags allow for a slightly more flexible, performant, and terse
way of branching by platform. For more details, see:
#18058 (comment)
* Use boolean Platform flags
* Only render imageSizeOptions loading spinner on web
* Add default for destructured context in image edit
This is necessary for unit tests, because they instantiate the block's
edit component directly, and so the default context is not provided.
* Temporarily hard-code experimenal gallery refactor flag to true
This will be reverted once the block settings are fetched from the REST
API. This is enabled for now for testing purposes.
* Update experiments page with warning about the mobile app version
* Changes new gallery flag name
* Updates mobile warning
* Removes the imageCount attribute
* Remove the isGrouped context
* Fixes lint issue

Co-authored-by: Antonis Lilis <[email protected]>

* [Mobile] Android: Pass the Gallery v2 Flag over from the editor (#33544)

Pass the Gallery v2 Flag over from the editor on Android

Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Matthew Kevins <[email protected]>
Co-authored-by: Matthew Kevins <[email protected]>
Co-authored-by: Antonis Lilis <[email protected]>
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 [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants