@luisherranz After going over this again, it does not appear that there have been any changes to the standard image markup since you documented it above. I think I was confused by the inconsistent image markup that depends on alignment.
Iāve further narrowed down issues with align left/right/center and non-aligned images.
For align left/right:
The images donāt display when floated left or right. The images themselves are absolutely positioned, and none of its parents have an explicit width set. If I set an explicit width on the wrapping figure element, the image is visible and is able to scale as needed when the constrained by the screen width.
The span in between the figure and img elements has both āwidthā and āheightā properties set. However, this syntax is not valid on spans, only images. Was this meant to be added as CSS properties instead?
If so, I am seeing issues when trying to set the CSS of the span with the width and height. If I try going that route, the image does not display in the right aspect ratio as soon as there isnāt enough room for the full image size. It becomes distorted, or doesnāt scale, or has a bunch of extra padding, depending on other CSS added.
Iām not sure about all the other scenarios listed at the top of this thread, but as far as just adding an image block with left or right alignment, the only thing that works for me without running into the issues I mentioned is if I set an explicit width on the figure with a max width of 100%.
For aligncenter and images with no alignment:
Aligncenter and images with no alignment are filling the entire available space, greater than the width should be for the given size. Setting an explicit width on the figure also resolves the problem here.
Looking at the HTML2react image processor, I donāt see a way to modify the wrapping figure element, nor a way to target the image markup differently based on alignment.
Other than the previously mentioned CSS that overrides the āpadding hackā, I was also able to āfixā this by targeting the size classes added by Gutenberg, which get added to the figure element. However, this requires adding specific styles for each avaialable image size. It would be nice if these extra steps werenāt necessary.
Hereās example CSS to fix things for the āmediumā image size:
figure.wp-block-image.size-medium,
div.wp-block-image .size-medium {
width: 300px;
max-width: 100%;
}
Lastly, the images in the Gallery block suffer from these same issues. I was not able to apply the same fix as above with the gallery, because there arenāt image size classnames added to the figures in this case. The only solution I found here was to override the āpadding hackā.