<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50682] trunk: Media: Do not lazy load hidden images or embeds.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/50682">50682</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/50682","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>peterwilsoncc</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-04-07 00:59:18 +0000 (Wed, 07 Apr 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Media: Do not lazy load hidden images or embeds.
Improve the check for sourceless or dimensionless media when determining if the lazy loading attribute should be added to iframes and images. Never include the lazy loading attribute on embeds of WordPress posts as the iframe is initially hidden.
Including `loading="lazy"` on initially hidden iframes and images can prevent the media from loading in some browsers.
Props adamsilverstein, fabianpimminger, flixos90, johnbillion, jonkastonka, joyously, peterwilsoncc, SergeyBiryukov, SirStuey, swissspidy.
Fixes <a href="https://core.trac.wordpress.org/ticket/52768">#52768</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkpackagelockjson">trunk/package-lock.json</a></li>
<li><a href="#trunksrcwpincludesmediaphp">trunk/src/wp-includes/media.php</a></li>
<li><a href="#trunktestsphpunittestsmediaphp">trunk/tests/phpunit/tests/media.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkpackagelockjson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/package-lock.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/package-lock.json 2021-04-06 23:54:02 UTC (rev 50681)
+++ trunk/package-lock.json 2021-04-07 00:59:18 UTC (rev 50682)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4083,6 +4083,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "integrity": "sha512-+JHkqs9LC/JPp51yy1hzs3lQ7qeuWCwOcSzpQNeeY/G7oSpnF61vxt7hRh87zNRTr6ob2ndy0W8rVzhgrcA+Gw==",
</span><span class="cx" style="display: block; padding: 0 10px"> "dev": true
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "puppeteer": {
+ "version": "npm:puppeteer-core@5.5.0",
+ "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
+ "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
+ "dev": true,
+ "requires": {
+ "debug": "^4.1.0",
+ "devtools-protocol": "0.0.818844",
+ "extract-zip": "^2.0.0",
+ "https-proxy-agent": "^4.0.0",
+ "node-fetch": "^2.6.1",
+ "pkg-dir": "^4.2.0",
+ "progress": "^2.0.1",
+ "proxy-from-env": "^1.0.0",
+ "rimraf": "^3.0.2",
+ "tar-fs": "^2.0.0",
+ "unbzip2-stream": "^1.3.3",
+ "ws": "^7.2.3"
+ }
+ },
</ins><span class="cx" style="display: block; padding: 0 10px"> "rimraf": {
</span><span class="cx" style="display: block; padding: 0 10px"> "version": "3.0.2",
</span><span class="cx" style="display: block; padding: 0 10px"> "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5890,7 +5910,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> "browserify-aes": {
</span><span class="cx" style="display: block; padding: 0 10px"> "version": "1.2.0",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
</ins><span class="cx" style="display: block; padding: 0 10px"> "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
</span><span class="cx" style="display: block; padding: 0 10px"> "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px"> "requires": {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18804,80 +18824,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
</span><span class="cx" style="display: block; padding: 0 10px"> "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "puppeteer": {
- "version": "npm:puppeteer-core@5.5.0",
- "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
- "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
- "dev": true,
- "requires": {
- "debug": "^4.1.0",
- "devtools-protocol": "0.0.818844",
- "extract-zip": "^2.0.0",
- "https-proxy-agent": "^4.0.0",
- "node-fetch": "^2.6.1",
- "pkg-dir": "^4.2.0",
- "progress": "^2.0.1",
- "proxy-from-env": "^1.0.0",
- "rimraf": "^3.0.2",
- "tar-fs": "^2.0.0",
- "unbzip2-stream": "^1.3.3",
- "ws": "^7.2.3"
- },
- "dependencies": {
- "find-up": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
- "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
- "dev": true,
- "requires": {
- "locate-path": "^5.0.0",
- "path-exists": "^4.0.0"
- }
- },
- "locate-path": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
- "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
- "dev": true,
- "requires": {
- "p-locate": "^4.1.0"
- }
- },
- "p-locate": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
- "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
- "dev": true,
- "requires": {
- "p-limit": "^2.2.0"
- }
- },
- "path-exists": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
- "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
- "dev": true
- },
- "pkg-dir": {
- "version": "4.2.0",
- "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
- "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
- "dev": true,
- "requires": {
- "find-up": "^4.0.0"
- }
- },
- "rimraf": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
- "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
- "dev": true,
- "requires": {
- "glob": "^7.1.3"
- }
- }
- }
- },
</del><span class="cx" style="display: block; padding: 0 10px"> "q": {
</span><span class="cx" style="display: block; padding: 0 10px"> "version": "1.5.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
</span></span></pre></div>
<a id="trunksrcwpincludesmediaphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/media.php 2021-04-06 23:54:02 UTC (rev 50681)
+++ trunk/src/wp-includes/media.php 2021-04-07 00:59:18 UTC (rev 50682)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1869,6 +1869,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return string Converted `img` tag with `loading` attribute added.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function wp_img_tag_add_loading_attr( $image, $context ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Images should have source and dimension attributes for the `loading` attribute to be added.
+ if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
+ return $image;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Filters the `loading` attribute value to add to an image. Default `lazy`.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1889,11 +1894,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $value = 'lazy';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Images should have source and dimension attributes for the `loading` attribute to be added.
- if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
- return $image;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> return str_replace( '<img', '<img loading="' . esc_attr( $value ) . '"', $image );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1989,6 +1989,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return string Converted `iframe` tag with `loading` attribute added.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Iframes with fallback content (see `wp_filter_oembed_result()`) should not be lazy-loaded because they are
+ // visually hidden initially.
+ if ( false !== strpos( $iframe, ' data-secret="' ) ) {
+ return $iframe;
+ }
+
+ // Iframes should have source and dimension attributes for the `loading` attribute to be added.
+ if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
+ return $iframe;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Filters the `loading` attribute value to add to an iframe. Default `lazy`.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2009,11 +2020,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $value = 'lazy';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Iframes should have source and dimension attributes for the `loading` attribute to be added.
- if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
- return $iframe;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> return str_replace( '<iframe', '<iframe loading="' . esc_attr( $value ) . '"', $iframe );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsphpunittestsmediaphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/media.php 2021-04-06 23:54:02 UTC (rev 50681)
+++ trunk/tests/phpunit/tests/media.php 2021-04-07 00:59:18 UTC (rev 50682)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2941,11 +2941,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> function test_wp_iframe_tag_add_loading_attr_opt_out() {
</span><span class="cx" style="display: block; padding: 0 10px"> $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'wp_iframe_tag_add_loading_attr', '__return_false' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNotContains( ' loading=', $iframe );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 52768
+ */
+ function test_wp_iframe_tag_add_loading_attr_skip_wp_embed() {
+ $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
+ $fallback = '<blockquote>Fallback content.</blockquote>';
+ $iframe = wp_filter_oembed_result( $fallback . $iframe, (object) array( 'type' => 'rich' ), 'https://www.example.com' );
+ $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
+
+ $this->assertNotContains( ' loading=', $iframe );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 44427
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 50425
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span></span></pre>
</div>
</div>
</body>
</html>