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 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.