Core gallery block refactor

[glendaviesnz]

A major refactor of the Gutenberg core gallery block was recently merged which uses innerBlocks instead of nested img elements in the block content.

This new gallery format is currently behind an experimental feature flag (probably until mid September due to some mobile app backwards compat issues). Even after the flag is removed the old gallery format will still be accepted by the editor, so I don't think there is any panic for the importer to be modified to handle this, but just alerting you to the change so you can plan for adding handling of it.

The existing Gallery block format is as follows:

<!-- wp:gallery {"ids":[141,139],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://s.w.org/images/core/5.8/nature-above-01.jpg" alt="" data-id="141" data-full-url="https://s.w.org/images/core/5.8/nature-above-01.jpg" data-link="https://s.w.org/images/core/5.8/nature-above-01.jpg" class="wp-image-141"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://s.w.org/images/core/5.8/nature-above-02.jpg" alt="" data-id="139" data-full-url="https://s.w.org/images/core/5.8/nature-above-02.jpg" data-link="https://s.w.org/images/core/5.8/nature-above-02.jpg" class="wp-image-139"/></figure></li></ul></figure>
<!-- /wp:gallery -->

and the refactored format is:

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-default is-cropped"><!-- wp:image {"id":141,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://s.w.org/images/core/5.8/nature-above-01.jpg" alt="Image gallery image" class="wp-image-141"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":139,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://s.w.org/images/core/5.8/nature-above-02.jpg" alt="Image gallery image" class="wp-image-139"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

[joyously]

What is the format when links are used?

[glendaviesnz]

What is the format when links are used?

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-default is-cropped"><!-- wp:image {"id":141,"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://www.google.com"><img src="https://s.w.org/images/core/5.8/nature-above-01.jpg" alt="Image gallery image" class="wp-image-141"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"id":139,"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://www.apple.com"><img src="https://s.w.org/images/core/5.8/nature-above-02.jpg" alt="Image gallery image" class="wp-image-139"/></a></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

The nested image blocks should behave the same same as a standalone image block in terms of how the attributes are set.

[joyously]

Uh, I guess I was thinking when the image is linked to the media file or the attachment page.
Are these external images? I see the class indicating the media post ID so I think not.
Why would the initial "linkTo":"none" be there when there are links?

[glendaviesnz]

Uh, I guess I was thinking when the image is linked to the media file or the attachment page.

My apologies, ignore the above examples they are a little confusing due to some bad copying and pasting on my part, the following hopefully gives a better indication of how the linking works with the new gallery format

<!-- wp:gallery {"linkTo":"attachment"} -->
<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-default is-cropped">

<!-- wp:image {"id":242,"sizeSlug":"large","linkDestination":"attachment"} -->
<figure class="wp-block-image size-large"><a href="http://localhost:4759/2021/08/30/106/3-2/"><img src="http://localhost:4759/wp-content/uploads/2021/08/3-2.jpeg" alt="Image gallery image" class="wp-image-242"/></a><figcaption>Some trees</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":241,"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://www.google.com/"><img src="http://localhost:4759/wp-content/uploads/2021/08/Zr6yoV-1.jpeg" alt="Image gallery image" class="wp-image-241"/></a><figcaption>More trees</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":230,"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="http://www.apple.com"><img src="http://localhost:4759/wp-content/uploads/2021/08/images-2-26.jpeg" alt="Image gallery image" class="wp-image-230"/></a></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

With the above the gallery block has a default 'linkTo' set of 'attachment' and the first Image block is inheriting this, but because the gallery is now made up of nested Image blocks it is possible for an individual image to override the gallery setting and define its own link, so above the next two images have defined their own custom links

Why would the initial "linkTo":"none" be there when there are links?

As noted above, the gallery may have not defined a link option, but images within the gallery can be set to their own custom links.

Hopefully this makes more sense, but get back to me if not.

[dd32]

It's not clear from this issue - what change needs to be made to the importer specifically?

The importer doesn't alter the imported post content, aside from performing a string replacement on the old Attachment URL with the new attachment URLs, and even then it does a relatively poor job at it..

If I were to guess, perhaps we need to change the id attributes of the wp:image's? if so, this would go along with #129 (It turns out, we don't adjust the CSS classes already as it is), and #101 where the other block metadata isn't updated either.

[glendaviesnz]

It looks like this is irrelevant as the importer doesn't directly manipulate gallery block content in any way it seems, so closing.