-
Notifications
You must be signed in to change notification settings - Fork 382
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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! |
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks fine. And using an anonymous function works well for me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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