Search code examples
wordpresswordpress-gutenberggutenberg-blocks

Customize WP block gallery


Is there any option to change the output of the WP block gallery component in Gutenberg editor? Currently I set some images with external links (link to media attachment) and I get this result:

<ul class="wp-block-gallery columns-2">
    <li class="blocks-gallery-item">
        <figure>
            <a href="...">
                <img src="..." alt="" data-id="" data-link="" class="">
            </a>
            <figcaption>Some text</figcaption>
        </figure>
    </li>
    <li class="blocks-gallery-item">
        <figure>
            <a href="...">
                <img src="..." alt="" data-id="" data-link="" class="">
            </a>
            <figcaption>Some text</figcaption>
        </figure>
    </li>
</ul>

But I want to also set the title attribute for anchor element. This is the result that I want:

<ul class="wp-block-gallery columns-2">
    <li class="blocks-gallery-item">
        <figure>
            <a href="..." title="some title">
                <img src="..." alt="" data-id="" data-link="" class="">
            </a>
            <figcaption>Some text</figcaption>
        </figure>
    </li>
    <li class="blocks-gallery-item">
        <figure>
            <a href="..." title="some title">
                <img src="..." alt="" data-id="" data-link="" class="">
            </a>
            <figcaption>Some text</figcaption>
        </figure>
    </li>
</ul>

Thanks


Solution

  • You can use the blocks.getSaveElement filter to alter existing blocks. Take a look at this post on Wordpress Development