Wp-calypso: Editing captions in the Gallery Block creates conflict

[marianearchimbaud]

Date from the user's report: October 26th

After editing some captions from the images in the gallery block, images are not visible anymore

Steps to reproduce

1. Add a gallery block.
2. Edit the image captions from the Gallery block on the editor.
3. Images are replaced by a white/gray square. Screenshot: https://prnt.sc/v79cse

4. If images are replaced, a link is displayed. Screenshot: https://prnt.sc/v78lf1

5. I created a new test post on the user's site, and the result was the same. Images disappear after adding/editing the image caption on the editor.

6. Images and captions are displayed correctly when editing captions on the media library. Screenshot: https://prnt.sc/v79mn9

7. Suggested the user editing the image caption in the media library before placing them in a gallery block, and replace the gallery blocks for new ones. It worked, but there are other posts with the same issue too:

http://bitchinchickens.com/2020/10/01/case-study-burn-survivors/ Screenshot: https://prnt.sc/v7ytvp

Context / Source

25176210-hc
3438940-zd

Screenshot:

https://prnt.sc/v78lf1
https://prnt.sc/v79cse
https://prnt.sc/v7ytvp

[wprhunt]

I also have an example of this occurring and it seems to be that adding links to these captions is the issue. I found that once a link was applied that image broke on the front end.

Whats odd is reverting to a revision when the image did load with a image caption that links to another page, it still is broken implying that a recent update to Gutenburg might be the culprit:

25080976-hc
Screenshot: https://monosnap.com/direct/DUt1WxBPBfGMkPwb0g5vLvPlpqUzoT

Going to be helping them add a list of image blocks instead with galleries as a work around.

They were using the Luxury theme

[lizkarkoski]

Looks like this is the same issue appearing on https://jgeilsband.wordpress.com/j-geils-band-atlantic-tapes-1970-1982/
Reported in the WordPress.com forums: https://wordpress.com/forums/topic/gallery-block-problem/

[ockham]

I can reproduce on WP.com. The crucial part is to have a link in the image caption :+1:
To clarify, the issue is visible on the frontend (but not on the editor).

Going to test on vanilla Gutenberg now.

[ockham]

Doesn't seem present in vanilla Gutenberg, so I'm suspecting some of WP.com's sanitization (wp_kses filters?), apparently in combination with something that changed in Gutenberg 9.2 over previous versions.

Edit: Note that in order to repro, you need to open the gallery block's sidebar, and make sure that in the 'Link to' dropdown, you select 'Media file':

That setting wraps the <img /> tag in an <a />. On WP.com, the <img /> tag is then escaped:

<figure class="wp-block-gallery columns-3 is-cropped">
    <ul data-carousel-extra='{"blog_id":89417913,"permalink":"https:\/\/example.com\/2020\/10\/28\/gallery\/"}'
        class="blocks-gallery-grid">
        <li class="blocks-gallery-item">
            <figure><a
                    href="https://example.files.wordpress.com/2019/02/cat-pet-animal-domestic-104827-1.jpeg">&lt;img
                    src=&quot;https://example.files.wordpress.com/2019/02/cat-pet-animal-domestic-104827-1.jpeg?w=580&quot;
                    alt=&quot;&lt;a href=&quot;https://example.com/&quot;&gt;Caption</a></a>
                <figcaption class="blocks-gallery-item__caption"><a
                        href="https://example.com/">Caption</a></figcaption>
            </figure>

Edit: Also note that the last character of the caption needs to be part of the link. (There's apparently no problem if only the beginning or middle parts of the caption are linked.) The reason seems to be that there's then two subsequent <a/>s (</a></a>, as seen in the code sample above) -- the first of them isn't escaped, as it should be.

Edit: The resulting HTML seems to be a bit unpredictable on WP.com, possibly because of however WP.com sanitizes HTML, and e.g. closes an open HTML tag early, or leaves it overall empty. E.g. I've seen totally empty <img /> tags (no attributes at all) in my testing. This seems largely dependent on what parts of the caption are a link, and if there are multiple images in the gallery with captions that include links.

[synora]

Another report of this 3445774-zen. The user will try the workaround mentioned in step 7 above.

[ockham]

Potentially relevant GB PR: https://github.com/WordPress/gutenberg/pull/26082

[supernovia]

Noting a couple of cases: https://wordpress.com/forums/topic/galleries-not-showing-up-right/
https://wordpress.com/forums/topic/unreadable-appearance-of-gallery-page-after-editing/

[macmanx2]

Another case: https://wordpress.com/forums/topic/cant-make-changes-to-website-and-drop-down-menus-are-not-working/

[macmanx2]

Another: https://wordpress.com/forums/topic/galleries-not-showing-up-right/

[designsimply]

Another report:

Good Afternoon... on my page Shop Amazon theres been an issue with viewing the image and the link...

^{(internal reference: 3446502-zen)}

^{Tested with Chrome 85.0.4183.121 on macOS 10.15.6.}

I tested and confirmed the bug, but I had to try editing captions a few different times and the problem seemed to happen after editing a pre-existing gallery, adding a new image, and then making the entire caption into a link.

Post: https://made4testing0318.blog/2020/10/28/gallery/

Screenshot:

^{Tested with Firefox 81.0.1 on macOS 10.15.6.}

[ockham]

Filed a request to fix the underlying GB issue: https://github.com/WordPress/gutenberg/issues/26549

We might be able to tackle this at JP level, to get an expedited workaround.

[jjchrisdiehl]

Seems to be an issue for captions that are added via the editor that do not exist in the media library. Example: https://personaltestsite123.wordpress.com/2020/10/29/2031/

Middle caption was added in the media library, hyperlink works fine. The third image I added the caption in the editor and it breaks the image.

[ockham]

Seems to be an issue for captions that are added via the editor that do not exist in the media library. Example: p9RHoS-wL-p2

Middle caption was added in the media library, hyperlink works fine. The third image I added the caption in the editor and it breaks the image.

Yeah, captions set from the media library are really alt attributes, which by definition are text-only. Captions set in the gallery editor are rich text and can include HTML (e.g. links). Since https://github.com/WordPress/gutenberg/pull/26082, GB has used the gallery-set caption as a fallback for the alt if it's not set through the media library. Unfortunately, it doesn't strip the HTML, which causes the issue.

We're working on a fix here: https://github.com/WordPress/gutenberg/pull/26574

[dcoleonline]

Another in 23487450-hc. Will follow up once this is patched.

[as-esu]

Another related ticket zen-3450533

[ash1eygrace]

Another related: hc-25305530

[gwensmithx]

Another issue here: #3447618-zd (simple site)

Can replicate on my test site.

Screenshots of Editor and front-end:

[lizkarkoski]

Report from the WordPress.com forums: https://wordpress.com/forums/topic/lost-image-2/

Screen shot: https://d.pr/i/QWnhrH

[lizkarkoski]

Report from the WordPress.com forums: https://github.com/Automattic/wp-calypso/issues/46813 There are linked screen shots in that thread.

[poojashetty18]

Another issue here: #24990893-hc (simple site)

Screenshots attached of the Editor and frontend page:

Editor page:

Frontend page:

[khristiansnyder]

Another case in #23248587-hc.
Showing in both editor and front end.

[gwensmithx]

Another one here: #23545276-hc

Showing in Editor and also front-end. Simple site on Stow theme.

[taftina]

Another one here : #3462496-hc

Redhill theme

[ockham]

Fixed by https://github.com/WordPress/gutenberg/pull/26676, which will be part of Gutenberg 9.3, and hopefully land on WP.com soon.

This will probably not un-break gallery blocks that had been broken by this issue. Instead, users will probably have to revert to the last working revision of the affected post.

[xpurichan]

Reported in 15739493-hc.

[susanjanec]

Another report in 3455554-zd - showing in editor and front end.

[khristiansnyder]

Another report in 3452471-zd

[abcrsol]

Another case reported here 3458054-zd

[abcrsol]

Reported also in 3462496-zd

[allanftd]

Hi, I have some more inputs from the user who reported the original issue on this thread:

• I opened this published post to edit a category and when I updated all the photos look like this: https://bitchinchickens.com/2020/09/21/chicken-mating-injuries/
• I opened this published post and when I updated one photo disappeared: https://bitchinchickens.com/2020/10/15/how-to-preserve-eggs/
• If I open and close a published post something happens with the photos regardless of whether I made an update or not, whether it was to add a photo or to make edits to text -- just opening the post is enough to trigger the problem with the photos.

Update: Looks like the bug fix has already taken effect on her website.

Just now, I tried reproducing the bug using a test post on the user's site but I can no longer replicate the issue. Here's the test page https://bitchinchickens.com/2020/10/27/test-jade-artist-for-animals/. The last Image gallery with three pictures captioned "nov6" is the most recent one I used.

Looks like it is working perfectly on my tests but still awaiting feedback from user to confirm.

[susanjanec]

Another report in 3466824-zen

[wprhunt]

Got another. They're using the TextBook theme:
25460678-hc

[gwensmithx]

Another here: #21950117-hc and #3470026-zd

Is there any workaround that anyone can find in the meantime without us having to completely recreate the page? I thought maybe removing the captions in the HTML might work but that doesn't seem to help.

[scosgro]

Another report in #3471922-zen

[poojashetty18]

Another report in 3471828-zen

[allanftd]

Update from original user who reported this issue: she tried Tiled Gallery and there were no issues uploading and publishing the images. However, captions are not supported so she would still prefer using Image Gallery block.

Fixed by WordPress/gutenberg#26676, which will be part of Gutenberg 9.3, and hopefully land on WP.com soon.

This will probably not un-break gallery blocks that had been broken by this issue. Instead, users will probably have to revert to the last working revision of the affected post.

Hi @ockham, should the update apply by now on WordPress.com? Please advise.
Thanks for your help on this!

[ockham]

Update from original user who reported this issue: she tried Tiled Gallery and there were no issues uploading and publishing the images. However, captions are not supported so she would still prefer using Image Gallery block.

Fixed by WordPress/gutenberg#26676, which will be part of Gutenberg 9.3, and hopefully land on WP.com soon.
This will probably not un-break gallery blocks that had been broken by this issue. Instead, users will probably have to revert to the last working revision of the affected post.

Hi @ockham, should the update apply by now on WordPress.com? Please advise.
Thanks for your help on this!

Hey @allanftd, we're still working on getting the 9.3 upgrade ready for WordPress.com. I'll update this issue once we've landed it.

[jonnyruzek]

3478625-zen

[allanftd]

Thank you, @ockham! :)

[fresatomica]

Another report in https://wordpress.com/forums/topic/gallery-glitch-2/.

[edequalsawesome]

Also reported in 25568823-hc, follow-up for the user set up here: 3481646-zen

[JessBoctor]

Another report of this issue in 14297746-HC. Set up follow up here: 3482074-Zen

[jerrysarcastic]

Also reported in https://wordpress.com/forums/topic/image-links-not-working-2

[wpniall]

Update from 3438940-zd:

User said they scheduled a post and the photos disappeared after hitting the preview button. Only the captions boxes were left.
Opening the editor showed that the photos were still there. So the photos appear in the editor but not when previewed.

When they tried again, the images completely disappeared from the editor as happened in the original issue.

[adminhappymondays]

One more report here (in Spanish, sorry): https://wordpress.com/es/forums/topic/error-en-bloque-galeria/

After many tests, in my case, the problem appears when I convert a simple text caption of a picture into a link through the visual editor. It looks like the HTML conversion of the changes I made into the gallery has changed. Some of the content of the tags disappeared (I don't know why) and if you try to see the code, includes so much mistakes.

here an example: https://happymondays.es/actrices-2/
here another one with and without a link: https://happymondays.es/pruebas-galeria-nueva/

Hope the developer can fix the problem SOON.
Thanks

[poojashetty18]

Another report in 3489909-zen

[wpniall]

Another report in 25666333-hc. Follow-up at https://woothemes.zendesk.com/agent/tickets/3493156.

[ockham]

This should no longer occur per D52264-code (p9o2xV-19f-p2 for Atomic). Existing broken galleries unfortunately have to be fixed manually (e.g. by reverting to a previous revision of the post or page).

[ockham]

Reopening, since we had to revert the 9.3.0 upgrade :confused:

[ajaykj]

Another report in 25687636-hc.

Follow-up at 3495510-zen.

[jonnyruzek]

25728275-hc / 3500403-zen

[lakellie]

Closing this per the discussion in p1605780791157700-slack-wpcom-happy-announce. This was resolved with the re-release of Gutenberg 9.3 on simple sites.

This release will not resolve the issue on existing galleries. To fix those, users will need to either:

1. Recreate the gallery
2. Restore a revision of the page from when the gallery was working