Breaks Gutenberg gallery item markup (with linked caption)

[strarsis]

Issue Overview

When latest version of wp-typography (which is an awesome plugin btw., thank you!) is enabled, the markup of gallery items with a hyperlinked caption of a Gutenberg gallery (core/gallery) is broken and leaks as text.

Steps to Reproduce (for bugs)

1. Insert a gallery block into the Gutenberg editor and two images as gallery items.
2. Assign a caption to first gallery item, also make that caption a link (you can select the hyperlink icon in the edit bar that appears above/next to the selected caption)
3. Ensure wp-typography plugin is enabled.
4. View the page/post in the frontend, notice that the markup of first gallery item is broken and leaks as text.

<figure class="wp-block-gallery columns-3 is-cropped">
    <ul class="blocks-gallery-grid">
        <li class="blocks-gallery-item">
            <figure>
                <a href="https://example.com/some-custom-link/" class="custom-link no-lightbox" title="<span class=" caps"="">IMG_1043 M_1_b_0_1_2_3_4_5" onclick="event.stopPropagation()" target="_self"&gt;
                    <img src="https://example.com/app/uploads/[...].jpg" alt="" data-id="138" data-link="https://example.com/[...]/" class="wp-image-138">
                </a>
                <figcaption class="blocks-gallery-item__caption">
                    <a href="https://example.com/some-custom-link/">Some Link Text</a>
                </figcaption>
            </figure>
        </li>
        <li class="blocks-gallery-item">
            <figure>
                <a href="https://example.com/app/uploads/[...].jpg" class="fancybox image" rel="gallery-0">
                    <img src="https://example.com/app/uploads/[...].jpg" alt="" data-id="133" data-link="https://example.com/some-url/[...]/" class="wp-image-133">
                </a>
            </figure>
        </li>
    </ul>
</figure>

Notice the misplaced HTML like <span class=" caps"="">.

PHP Version: 7.4.5-fpm WordPress Version: 5.4 Gutenberg Plugin Version: 7.9.1 wp-typography Version: 5.6.1 The Easy FancyBox plugin doesn't seem to affect the bug.

Expected Behavior

The markup of the gallery item should not become broken.

Current Behavior

The markup of the gallery item is broken.

Possible Solution

From the broken gallery item markup it appears that some injected typographic markup is not expected and not properly escaped/sanitized by Gutenberg.

[mundschenk-at]

Oh well. They really should use the_title_attribute() or strip the tags themselves if they use the rendered version from REST API on the JS side. Do you mind creating a trac ticket since this is a WP Core bug? I'll see if I can find a workaround other than disabling everything for REST API calls (which I'm not sure I can easily do).

[strarsis]

@mundschenk-at: Thanks for looking into this! Is there a quick, temporary fix I could apply to the gallery block/theme so the link markup is right?

[mundschenk-at]

Sorry, not off the cuff, no.

[strarsis]

@mundschenk-at: OK, the other plugin calls get_the_title and gets a title with unescaped markup in it: https://plugins.trac.wordpress.org/browser/gallery-custom-links/trunk/mgcl_linker.php#L13 Is it allowed/expected for the title returned by get_the_title to contain markup?

[mundschenk-at]

Yes. get_the_title() is the underlying filtering function, both the_title() and the_title_attribute() call it. Note that the_title_attribute() can both echo or return the stripped title string (it's a pretty old WordPress function, so it does both things depending on the parameters).

[mundschenk-at]

(BTW: I didn't realize from your description that a plugin was involved - so it's not a Core issue after all.)

[strarsis]

@mundschenk-at: Is there a way to call get_the_title or related title methods to get the title as plain text? Or is this something that isn't a given anyway in WordPress, hence one should use a strip tags method for getting plain text?

[mundschenk-at]

Sure, that function is called the_title_attribute(['echo' => false]) and it has been around since WordPress 2.3.0.

[strarsis]

@mundschenk-at: Awesome, thank you!

[mundschenk-at]

Don't forget to include the 'echo' => false inside the parameter array, otherwise the function will echo the value instead of returning it as a string (the default is true unfortunately).

[mundschenk-at]

I've left a comment in the bug report at the other plugin. I'll close this issue since it's not a problem with wp-Typography itself.