I am making a page with Gutenberg but there is a problem that the link does not work within a . This is the code when I inspect:

<figure>
  <a href="...">
  <img>
  </a>
  <figcaption>
  </figcaption>
</figure>

Is there some way that I could nested the figcaption within the a tags so it could be clickable ? I can not modify the code because it is generated by Wordpress.

The expected output:

<figure>
  <a href="...">
  <img>
  <figcaption>
  </figcaption>
  </a>

</figure>

I am making a page with Gutenberg but there is a problem that the link does not work within a . This is the code when I inspect:

<figure>
  <a href="...">
  <img>
  </a>
  <figcaption>
  </figcaption>
</figure>

Is there some way that I could nested the figcaption within the a tags so it could be clickable ? I can not modify the code because it is generated by Wordpress.

The expected output:

<figure>
  <a href="...">
  <img>
  <figcaption>
  </figcaption>
  </a>

</figure>

• gallery
• links
• block-editor
• captions

1 Answer 1

The only solution I know is manipulating the DOM in Javascript: Select all figure containing an a, look for its figcaption and append it to the a.