Figure / Insert Media Functionality

Hi,

So we noticed some strange behavior when inserting media (images) into our posts. We know there are several ways to do this (Yes, we are using the latest version of the 2017 Theme):

Method 1: Insert it as pure / straight HTML.
Example:

<figure class="imgFloatRight"><img src="https://DomainName/wordpress/wp-content/uploads/2014/08/tesla_model_s.jpg" alt="Tesla Model S" /><figcaption class="wp-caption-text">Here is a caption on an image that was floating right.</figcaption></figure>

Method 2: Insert an image with “Add Media” button, pick the image and then give it a caption at the same time.

Resulting HTML:

<figure class="alignnone"><img class="imgFloatLeft alignnone" src="https://DomainName/wordpress/wp-content/uploads/2017/10/2017-Brand-keys_cmyk-226x300-226x300.jpg" alt="" width="226" height="300" /><figcaption>This image has a caption.</figcaption></figure>

While the HTML is correct, doing it this way results in the caption being “tied” to the image, so if we wanted to use the same image elsewhere with a different caption, we would not be able to.

That’s actually ok.

Method 3: Here is where things get strange. Insert an image with “Add Media” button and insert it into the post. Then edit the image in the post and add a caption to the image.

Resulting HTML:

<figure class="alignnone">
<p></p><div style="width: 85px" class="wp-caption alignnone"><img src="https://DomainName/wp-content/uploads/sites/2/2018/01/KMBS_Logo_headshot.jpg" alt="" width="75" height="75"><p class="wp-caption-text">Test Caption.</p></div></figure>

Note the blank <p> tag under the <figure> and how a <div> now wraps the image and the caption. If that’s not bad enough, what should be a <figcaption> element is instead a <p>. Question: How do we make this HTML5 compliant? (In the editor, preferably.) We could fix it dynamically with JS, but that’s not really the best option.

Please let me know. Thank you.

*Of course DomainName is just a placeholder for the real thing. ??