tomusborne
Image Block - Consider <picture> element
Description
Many users are running webP converters that swap out <img> elements for <picture> and in the process they move the element classes to the picture tag e.g
<picture class="gb-image gb-image-7178bcec" title="some title">
This means the GB styles now target the picture, which by default is a: non-replaced inline element.
So its height and position is based upon a single line of text.
Check the picture element here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Bottom line is, the picture is not the same height or position as the img
This leads to hidden styles eg. borders and border radius are not seen on the front end.
To resolve that we can force it to a block:
picture.gb-image {
display: block;
}
This issue is here for reference and potential discussion whether we should consider this CSS in the GB Styles
+1 for this! Many people using Imagify, ShortPixel, etc. rely on the <picture> method for WebP. Thanks for opening this David, and keep up the great work.
+1. Picture tags will be default in 2 months https://wptavern.com/webp-by-default-merged-into-core-for-wordpress-6-1
We need to consider a filter to swap out the img for picture in CSS rules that specify the HTML tag.
+1. It's quite annoying to have to copy and paste the CSS generated for the image block, and modify it so the actual <img> is being targeted. So for now I've moved to using Nginx rewrite rules, but I'd rather have it just work with <picture>.
