Background: render media library images as <img> for srcset/lazy-loading#11050
Background: render media library images as <img> for srcset/lazy-loading#11050JosVelasco wants to merge 7 commits intoWordPress:trunkfrom
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
…x with strpos The preg_match regex pattern had a backspace control character (\x08) where \b should have been, causing the regex to never match and the <img> to never be inserted into the wrapper. Replace the entire regex+preg_match block with a simple strpos() call to find the first '>' (the end of the opening tag). WP_HTML_Tag_Processor::get_updated_html() guarantees attribute values are properly escaped, so the first raw '>' is always the closing bracket of the opening wrapper tag.
1 participant
Description
For Group blocks (and any block using the background block support) with an uploaded background image sized Cover or Contain and no tiling repeat,
wp_render_background_support()now injects a native<img>element as the first child of the block wrapper instead of using CSSbackground-image.This gives browsers access to:
srcset/sizesfor responsive image selectionloading="lazy"— deferred loading for below-fold imagesdecoding="async"— non-blocking image decode<img>references to the same attachment)'no-repeat'is treated identically to unset — both are compatible withobject-fit. Only explicit tiling values (repeat,repeat-x,repeat-y) require CSSbackground-image.background-attachment: fixed(parallax) also stays on the CSS path since it has no<img>equivalent.The wrapper receives
position: relativeto contain the absolutely-positioned<img>. A guard prevents stomping any existingposition:rule already on the wrapper.Changes
src/wp-includes/block-supports/background.php: Added$use_img_elementcheck and<img>injection before the CSS fallback path. Added@since 6.8.0docblock entry.tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php: Added two data provider cases (tiling repeat and fixed attachment fall back to CSS) and two standalone test methods (cover and contain+no-repeat inject<img>).Trac ticket
https://core.trac.wordpress.org/ticket/64725
Gutenberg PR
WordPress/gutenberg#75885
Testing
Run the updated test class:
🤖 This PR was prepared as a core backport for WordPress/gutenberg#75885. All code was human-reviewed before submission.