Place image caption outside of figure tag (Gutenburg Image Markup)

I control the aspect ratio/crop of my images with padding, like this. Though, new WP blocks styles clash with this method. Resulting in captions behind or on top of the image. By looping through each image block <figure class="wp-block-image"> I was able to insert some markup of my choice, using this method

Almost like the old image_send_to_editor filter.

This moved my styles off the <img> and <figure> tags to my new classes/elements. Which allowed wordpress and my custom theme styles to get along.

myFunc(){
const block = Array.from(document.getElementsByClassName("wp-block-image"));

block.forEach((i) => {
  const org_html = i.innerHTML;
  const new_html =
    "<div class="fig-container">" +
    "<div class="fig-wrapper">" +
    org_html +
    "</div>" +
    "</div>";
  i.innerHTML = new_html;
});
}
myFunc();

Pen

It has tested well with galleries and columns with images. It also works with straight image blocks, though, having some new margin issues with those scenarios.

edited for clarity