Fix/block img tag sizes #5776
Fix/block img tag sizes #5776
Conversation
addresses incorrect w/h values in core/image block img tags
remove preamble comment, remove informal test
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #5776 +/- ##
=============================================
- Coverage 30.27% 30.26% -0.02%
Complexity 4812 4812
=============================================
Files 287 288 +1
Lines 20711 20719 +8
=============================================
Hits 6271 6271
- Misses 14440 14448 +8 ☔ View full report in Codecov by Sentry. |
fix-block-img-tag-sizes.php
Outdated
| // Add the width and height attributes to the img tag | ||
| $block_content = preg_replace( | ||
| '/<img ([^>]+)>/', | ||
| '<img foo="bar" $1 width="' . esc_attr($width) . '" height="' . esc_attr($height) . '">', |
There was a problem hiding this comment.
Is this foo="bar" thing really necessary? :-)
There was a problem hiding this comment.
Also, can the <img> tag contain other attributes (say, alt)? If so, is it possible to avoid overwriting them?
There was a problem hiding this comment.
Oops, that foo is a testing leftover! Thanks for the spot. And yeah, the img and figure tags can contain other values and classes too.
There was a problem hiding this comment.
See the first commit: it has the now-removed add_block_bits, which I was using for as an informal test for extra values in the tags by filtering a bunch of extra stuff into the block markup just upstream.
fix-block-img-tag-sizes.php
Outdated
| $height = $metadata['sizes'][$size_name]['height']; | ||
| $new_file = $metadata['sizes'][$size_name]['file']; | ||
|
|
||
| if ($resizearg) { |
There was a problem hiding this comment.
This condition is always false because we don't seem to set $resizearg to true anywhere.
There was a problem hiding this comment.
Indeed, we don't set it true anywhere - yet. I'm deferring to y'all as to how we should let the user set this (if we include it at all).
fix-block-img-tag-sizes.php
Outdated
| } | ||
| return $block_content; | ||
| } | ||
| add_filter('render_block', 'fix_img_block_sizes', 10, 3); |
There was a problem hiding this comment.
Since we're only handling core/image blocks, perhaps we can hook into render_block_core/image here? https://github.com/WordPress/wordpress-develop/blob/50af37a9083f003f8e98d089091d2cc428797cc5/src/wp-includes/class-wp-block.php#L581
There was a problem hiding this comment.
Good point - Should behave exactly the same on that filter, since it's right after the first one and uses the same values. Will give that a try too.
There was a problem hiding this comment.
Works well and makes the function smaller. Nice, thx!
I'd left a foo=bar in the returned img tag from testing on non-VIP envs, so I took it out.
|
Looking at the |
removed resizearg switch, used render_block_core/image filter, added skip for fullsize, prepended vip to function name to avoid collisions with existing fix_img_block_sizes filters in use
|
Removed |
|
|
Description
Addresses incorrect
imgtagwidth|heightvalues incore/imageblocks by filteringrender_block, where it can get the attachment ID and intended size from the classes of theimgandfiguretags.From there it looks for the intended size's w|h values in the attachment's postmeta, and add them to the
imgtag for the return.Also fixes incorrect srcsets for block images without having to touch them, since it's upstream of them and supplies the values they need.
Returns original safely and silently on failure. Matches narrowly, and can operate on already-filtered blocks as long as they have the required size and ID classes.
Optional switch for
resizeargs can be omitted, but it could be nice to give folks the choice. I defer to plat as to how to make this switchable (or if we should just lose it for simplicity and brevity).Changelog Description
Added
fix_img_block_sizes filterforrender_blockFixed
Pre-review checklist
Please make sure the items below have been covered before requesting a review:
Pre-deploy checklist
Steps to Test
widthandheightvalues and srcset should all be congruent with its intended size