Address issues from testing with WordPress 5.0 #1627
Conversation
When <img> tags have an 'aligncenter' class, AMP_Img_Sanitizer::handle_centering() wraps theme in <figure class=aligncenter>. This ensures that the image inside it is centered.
The AMP runtime sets an inline style on an <amp-img> based on the sizes attribute if it's present. For example, <amp-img style="width:calc(50vw)">. Removing the 'sizes' attribute isn't ideal, but it looks like it's not possible to override that inline style. This is only a workaround until the issue is addressed in the amphtml repo.
If the 'gallery' shortcode has a 'size' attribute of 'thumbnail', prevent outputting an <amp-carousel>. That will often get thumbnail images around 150 x 150, while the <amp-carousel> usually has a width of 600 and a height of 480. That often means very low-resolution images. So fall back to the normal 'gallery' shortcode callback, gallery_shortcode().
There's a style rule that prevents these from compressing.
img { object-fit: cover; }
This selector seems to be changed to amp-img in style sanitization,
but it doesn't have the same effect as when applied to img
So copy the style rule verbatim into a stylesheet.
This is in AMP_Gallery_Embed_Handler,
as it's too late to enqueue_style,
'wp_print_styles' has already run by the time
that sanitizer runs.
|
Request For Review Hi @westonruter, Below are the points in that issue: Image Alignment
93a3967 addresses this. To see the issue, see this URL Gallery Block
c9e0f03 addresses this. To see this issue, go to this URL. And to test it locally, create a Gallery block like that. amp-carousel
It's expected to have those images display as an Twenty Nineteen Image
d7de7d1 addresses this. Follow Us
There are AMP components, so they're not expected on non-AMP URLs. amp-carousel
Sometimes, there are The media gallery widget often has thumbnail-size images. And the So 1afa46b prevents outputting an Thanks, Weston! |
kienstra
changed the title
As Weston has mentioned, there's no need to have any more specificity than this, like 5.0-beta5
| * @return void | ||
| */ | ||
| public function enqueue_styles() { | ||
| wp_enqueue_style( |
There was a problem hiding this comment.
Not a big deal, but why have the external CSS file here but not in add_twentynineteen_image_styles? I'm fine with having such a small amount of CSS just being inline in the PHP.
There was a problem hiding this comment.
Good question.
This issue with Gallery block styling exists in all of 4 of the Twenty themes this plugin supports.
What do you think of printing the style rule on wp_print_styles:
add_action( 'wp_print_styles', function() {
?>
<style>
.wp-block-gallery.is-cropped .blocks-gallery-item amp-img > img {
object-fit: cover;
}
</style>
<?php
} );That works locally.
(Shown as an anonymous function just for this example)
There was a problem hiding this comment.
Looks fine. And using an anonymous function works well for me.
There was a problem hiding this comment.
Thanks, how does 6b7d305 look?
Apply Weston's suggestion to change add_filter() to add_action() Co-Authored-By: kienstra <kienstraryan@gmail.com>
As Weston mentioned, it's not necessary to enqueue a stylesheet that only has one rule. So output it in a callback for 'wp_print_styles'
This addresses issues from #1604