Glen Davies 4:41 am on March 23, 2021

Gallery Block Update – Call for Testing

A refactor of the core Gallery Block has been worked on over the last couple of months which will move it from a list of image tags within the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. content to nested Image blocks using InnerBlocks. The hope is this change will make things easier for both users and developers.

Why the change?

The fundamental reason for this change is to make images behave the same in the editor whether they are used as single blocks or as part of a gallery. For example, for users, this update means that Gallery images would automatically have the ability to add custom links for each image! It’s also easy now to replace a single image directly. Other benefits include being able to use the standard move, drag and drop, copy, duplicate, and remove block functionalities. Keyboard navigation also benefits from the standard block model.

There have been open issues related to this inconsistency for some time:

To get around this inconsistency, pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers often have to duplicate all of the Image block functionality in custom Gallery block plugins. Tied to this, plugins that extend the image block haven’t been able to benefit galleries directly. With this change making image behaviour more consistent between stand-alone images and those within the gallery, more custom gallery functionality can be implemented as Block Styles or Block Variations of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Gallery block instead of creating a completely new gallery block.

With each image being a block, server operations are also much more straightforward since you can get the image IDs directly.

In depth testing needed

While the expectation is nothing changes in terms of output for the end-user, this is a pretty major change on a technical level for a very popular block, including a change in the underlying markup to align it with the W3C WAI guidelines on the grouping of images, so it’d be a huge help to gather as much testing feedback as possible.

Accessing the new Gallery Block

To test the new Gallery block, you can either checkout the Gallery refactor PR branch and test in a local dev environment, or you can download the Gallery refactor plugin build and install it on any WordPress test site. Once installed you need to enable the experimental setting ‘Enable the refactored gallery block’:

Only new gallery blocks added after the experimental flag is turned on will be in the new format, all existing galleries will be editable and viewable in the current format. You can manually transform an old format gallery to the new format using the block transform menu and choose the ‘Gallery’ option.

Important note — only run the Gallery refactor experimental feature on test data

Although any existing gallery saved content should be unaffected, if you transform these to the new format, or add new gallery blocks in the new format, these blocks will be broken if the experimental feature is removed …. so don’t run the gallery refactor build against any critical data that you don’t have a backup of.

How can I be sure I am seeing the new gallery block?

When adding a Gallery block with the refactored gallery, selecting an individual image in a gallery should show you the same options as for an individual Image block. Currently, the only settings that will be missing are align and resize as these options break the gallery column layout.

Please note that this experimental feature will not currently work in FSE templates. To see the new gallery block you will need to add the block to a standard post or page. This change is also not ported to native mobile builds yet.

What needs testing?

General testing

Here’s a list of areas of functionality that need testing for your convenience that anyone can help test.

Plugin and theme authors

If you are the author of a plugin or theme that extends or restyles either the Image block or the existing Gallery block you should:

Test how running the new Gallery block format affects the display of existing content in the editor or front end.
Test your plugin or theme against an existing gallery that has been migrated to the new format.
Test with new galleries added with the refactored block.
Test how an Image block extensions affect layout, etc. if the Image block is nested within one of the new Gallery blocks.

Where to report issues

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. Please check against the known issues list before reporting.

Jonny Harris 12:20 pm on March 23, 2021

I had this idea in 2018 – https://github.com/WordPress/gutenberg/issues/11849

My ticketticket Created for both bug reports and feature development on the bug tracker. was closed.
- leemon 7:46 pm on March 23, 2021
  
  I’m not sure I understand how nested image blocks didn’t make sense (their words) back when you opened your issue, but now do. Puzzling.
- Daniel Richards 2:05 am on March 24, 2021
  
  I had this idea in 2018 – https://github.com/WordPress/gutenberg/issues/11849
  
  My ticketticket Created for both bug reports and feature development on the bug tracker. was closed.
  
  It looks like you were asked for more info, and didn’t reply. The description is only two sentences.
  
  For a big feature that required a huge amount of dev effort (kudos to Glen for making it happen), it’s only fair to ask for more detail.
  - Jonny Harris 9:19 am on March 24, 2021
    
    Two people said they didn’t like the idea, one of which was the design lead, so didn’t push it forward as I was dismissed.
    
    Also, what else is needed, the idea is not that complex, implemenation is a different matter. I don’t have to write out an implemention for others to pick up the idea.
    - Daniel Richards 1:12 am on March 25, 2021
      
      I can understand that closing it might seem dismissive, but you were directly asked questions and prompted to reply, and that can be done even after an issue has been closed.
      
      As Paal mentions it was a good idea a bit ahead of its time, so well done for suggesting it. I just think it needed a bit more effort to bring others over to your point of view.
      
      In particular, what was briefly written was done so from a technical point of view, so it’s not hard to see why two non-technical triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. folk couldn’t see the value in this for users.
- Paal Joachim Romdahl 3:29 pm on March 24, 2021
  
  Hey Jonny.
  Some issues are just before their time and might become closed. It just happens. Inner blocks work a lot better today than they did a few years ago.
  Let’s focus testing and getting this feature into GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.
Birgit Pauli-Haack 3:04 pm on March 25, 2021
This works really well! Uploading images, selecting images and changing image styles etc.
The conversion of an old gallery blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to the refactored gallery block via the transform button on the toolbar worked well.
PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party tested: Jetpack, EditorsKit, Coblocks
- The Coblock’s gallery toolbar features like filters and animation work also for the new gallery.
- Coblocks different gallery blocks like Slideshow and Masonry still work with the old gallery block.
- The full-screen carousel provided by Jetpack works well with the new gallery block. It’s slideshow gallery block (old Gallery) still works.
- EditorsKit’ gallery image styles work within the new gallery block.
  Also creating a block pattern out of a new gallery block with GoBlock’s filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. and animation worked.
The image block styles don’t persist when adding the new gallery block to a group -> GitHub #30250

Beyond this actual bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority., I have a few things on my wish list:
- Let me select more than one image, so I can apply a style to all selected. Use case, a speaker page has all speakers is circles, a conference has 27 speakers, that’s a lot of repetition.
- Copy ‘Alt’ text from the media library, so I can avoid duplicate typing.
I’d be happy to take the time and create an issue for either one of them, just let me know.

This is only the first impression. I will continue testing
- aaronrobertshaw 1:51 am on March 26, 2021
  Thanks for the great feedback!
  
  I’ve taken the liberty of creating issues for your suggestions. You can find them here:
  - Github #30262
  - Github #30263
  They’ve all also been added to the project board to track.
David Smith 8:00 am on March 26, 2021
First of all, let me say thank you for your work on this blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. refactor. It’s been a problem for a while and this update is a massive improvement. Kudos to everyone who worked on this.

In terms of feedback I noticed the following:

Item hyperlink obscured by caption

Adding a hyperlink to a gallery item which has a caption leaves the hyperlink covering only part of the image area (ie: only the top half of the linked image is clickable). This is because the `figcaption` is positioned using top padding which causes it to overlay ontop of the anchor tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) which surrounds the `img`. Here’s a video.

Rotating and image forces a “portrait” aspect ratio

I added some images that have a “landscape” aspect ratio. I rotated one of the images by 180deg (basically flipped it). Upon clicking “Apply” the image is “stretched” and forces the entire row to a portrait aspect ratio. Surely it should remain as landscape if the original was landscape? Here’s a video.

Transforming the Gallery to a Columns block produces unexpected results.

I appreciate this might not be related to the Gallery but might be worth mentioning. When you transform the Gallery to a Columns block it in fact wraps the entire Gallery in columns. I expected it to move each image into a column. Also, I found that hitting “undo” appeared to have no effect. I think this is because the “transform” actually creates several undo entries and so you have to click “undo” several times to actually “undo” the effect of the transform. Here’s a video.

Consider cloning/ghosting items for drag and drop to avoid layout shifts

In normal content editing flow it makes sense not to have a copy of the block remain in place whilst you drag the block to its new location. However when using drag and drop in Gallery not leaving the original block in place whilst you drag can cause unwanted layout shifts. It might be worth considering cloning the block being dragged and leaving the original block in place until such time as the “ghosted” (cloned) block is dropped into its new position. This would avoid the layout shifts. Here’s a video.

Other notes
- Selecting x2 images within the gallery leaves an empty `Image settings` section in the sidebar.
- I know (can guess) why you haven’t done this, but as a user, I’d like to be able to apply Styles/effects en-masse to all the images in the gallery. Instead, I have to click each individually and go to `Styles` in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and apply the same style for each one.
Thanks again for all the work on this. I will continue to test.
- glendaviesnz 2:49 am on March 30, 2021
  
  Thanks Dave for taking the time to help with testing.
  Item hyperlink obscured by caption
  
  There is an issue for this at https://github.com/WordPress/gutenberg/issues/14304, but have now dragged it into our project board as would be good to sort as part of this refactor if possible.
  Rotating and image forces a “portrait” aspect ratio
  
  Have added an issued for this https://github.com/WordPress/gutenberg/issues/30362
  Transforming the Gallery to a Columns blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. produces unexpected results.
  
  Issue added for this at https://github.com/WordPress/gutenberg/issues/30363
  Consider cloning/ghosting items for drag and drop to avoid layout shifts
  
  Have added this as a suggested enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. – https://github.com/WordPress/gutenberg/issues/30364 – would definitely improve the drag and drop UXUX User experience
  Selecting x2 images within the gallery leaves an empty `Image settings` section in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. & I’d like to be able to apply Styles/effects en-masse to all the images in the gallery
  
  These tie in well with this issue … it would make sense in this instance to show the settings that can be applied to the selected images https://github.com/WordPress/gutenberg/issues/30262, or have an ‘apply to all’ toggle.
David Smith 7:44 pm on March 26, 2021

Just found one more bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority..

If you click to crop an image and then accidentally click into the caption field you cannot dismiss the caption richtext toolbar without cancelling crop mode. It blocks you from cropping effectively.

Here’s a video of that bug in action.

Notice how even selecting a new crop ratio or even moving the image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to a new position within the gallery doesn’t cause the caption’s richtext toolbar to be removed. It is very perssitent!
- aaronrobertshaw 8:49 am on March 29, 2021
  
  Thanks for reporting that one David!
  
  If you’re interested you can track its progress in Github #30334
Paal Joachim Romdahl 11:03 pm on March 26, 2021

Btw I added this issue:
New Gallery blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.: Adding captions in the Select og Upload Media screen does not show caption in gallery. (Error is not consistent.)
https://github.com/WordPress/gutenberg/issues/30196

I also added a response here. Where I went through and tested each check box mentioned area. https://github.com/WordPress/gutenberg/issues/29882
- glendaviesnz 12:50 am on March 31, 2021
  
  Thanks for the detailed testing. I have responded at https://github.com/WordPress/gutenberg/issues/29882#issuecomment-809886431
Nick Halsey 6:31 pm on April 10, 2021
This is a big technical change. I’m not convinced that it’s addressing a problem that needs to be solved. Smaller galleries can be built out with image and column blocks to create more customized layouts. Larger galleries could become harder to manage with the gallery blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. as a result of these changes. As someone who publishes several-dozen-image galleries regularly, I value stability and consistency over the potential for variable styling per image. But I could support this change if existing workflows continue to work seamlessly.

I found several blocking issues in my testing:
- Captions from the media library (attachment posts) are not added to the gallery at all.
- Captions added or edited in the block editor don’t sync with the media library (attachment posts).
- The gallery image size option completely fails to load.
No immediate issues noted with the Full Screen Galleries pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, except:
- The plugin’s fallback compatibility layers are triggered because data-id is missing from the img tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) markup
Numerous issues with the Arbutus theme, which is designed to feature galleries extensively. The theme works with classic and current block galleries and should still work with the refactored block gallery markup.
- .wp-block-gallery.blocks-gallery-grid.has-nested-images figure.wp-block-image img { width: auto; } breaks the layout/widths for some reason
- Custom theme styling for captions is completely missing because the markup and selectors are different. (this applies to all themes tested)
- This theme styles captions to not overlap images, because it’s designed to work with longer captions.
- Theme authors should not need to make any changes to accommodate existing use cases with the revised gallery implementation. It would be reasonable to require themes to update to allow the new features that the change enables.
- Custom gallery excerpts are broken. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher functions get_post_gallery() and get_post_gallery_images() still don’t work, and fallbacks for current block galleries don’t work because images are missing the data-id attribute.
Perhaps the only feature that I would use if this moves forward would be the ability to set different alignments on individual images. In particular, occasional wide and full alignments are nice within single-column galleries. It’s currently possible to build these layouts with separate gallery and image blocks, and the refactor doesn’t support this option yet.
- glendaviesnz 3:40 am on April 12, 2021
  
  Thanks for the feedback and for taking the time to do some detailed testing on this.
  
  Captions from the media library (attachment posts) are not added to the gallery at all.
  
  There is an existing issue for this at https://github.com/WordPress/gutenberg/issues/30196
  
  Captions added or edited in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor don’t sync with the media library (attachment posts).
  
  This is the same for the existing gallery and the image block
  
  and seems like it is the expected behaviour
  
  The gallery image size option completely fails to load.
  
  There was a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. that meant the image size select didn’t load if the particular image set didn’t have any size options. This should be fixed by this recent commit. If you are able to check with a fresh build of the refactor branch let me know if you still see this issue.
  
  The pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party’s fallback compatibility layers are triggered because data-id is missing from the img tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) markup
  
  Have added a PR to fix this https://github.com/WordPress/gutenberg/pull/30710
  
  Numerous issues with the Arbutus theme
  
  Have added an issue for this – https://github.com/WordPress/gutenberg/issues/30711
Dennis Booker 3:24 pm on May 12, 2021

Tried to install the refactored gallery pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and got the following error:
Fatal error: Cannot redeclare gutenberg_menu() (previously declared in /home/youngm7/dev.youngmemorial.org/wp-content/plugins/gutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg//lib/init.php:16) in /home/youngm7/dev.youngmemorial.org/wp-content/plugins/gutenberg-gallery-refactor-1/gutenberg.php on line 29
Thanks,
dennis
- glendaviesnz 10:24 pm on May 12, 2021
  
  Hi Dennis
  
  Thanks for taking the time to test this. The call for testing plugin is the full gutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, so needs to be added as a replacement of the gutenberg plugin on your site, not as an additional plugin. Let me know if that doesn’t solve this for you.