Skip to content

Commit b4889e4

Browse files
westonruterwestonruter
committed
Embeds: Enable lazy-loading of post embeds and fix keyboard a11y for hidden iframes.
Chrome unreliably loads a lazy-loaded iframe when it is hidden using `clip: rect(1px, 1px, 1px, 1px)`. Instead of using `clip`, a lazy-loaded iframe can also be hidden with `visibility:hidden` which results in it loading not only in Chrome but all other browsers. With this change applied, the hard-coded check to prevent lazy-loading post embeds is now removed. An added benefit to using `visibility:hidden` is that the entire iframe in this case is not interactable, meaning that users navigating the document with the keyboard will not unexpectedly encounter tab stops inside of the hidden iframe, as can happen now with `clip` when the JS fails to reveal the loaded iframe. Note also that the `clip` property is deprecated. Lastly, when such a post embed iframe is rendered in an RSS feed, the `style` attribute is now removed using the HTML Tag Processor as opposed to using string replacement. Fixes #58773. Props westonruter, joemcgill, swissspidy, joedolson, adamsilverstein. git-svn-id: https://develop.svn.wordpress.org/trunk@58143 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 841d0f2 commit b4889e4

File tree

5 files changed

+20
-21
lines changed

5 files changed

+20
-21
lines changed

‎src/wp-includes/embed.php‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -966,7 +966,7 @@ function wp_filter_oembed_result( $result, $data, $url ) {
966966

967967
if ( ! empty( $content[1] ) ) {
968968
// We have a blockquote to fall back on. Hide the iframe by default.
969-
$html = str_replace( '<iframe', '<iframe style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"', $html );
969+
$html = str_replace( '<iframe', '<iframe style="position: absolute; visibility: hidden;"', $html );
970970
$html = str_replace( '<blockquote', '<blockquote class="wp-embedded-content"', $html );
971971
}
972972

@@ -1099,7 +1099,13 @@ function print_embed_scripts() {
10991099
* @return string The filtered content.
11001100
*/
11011101
function _oembed_filter_feed_content( $content ) {
1102-
return str_replace( '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"', '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"', $content );
1102+
$p = new WP_HTML_Tag_Processor( $content );
1103+
while ( $p->next_tag( array( 'tag_name' => 'iframe' ) ) ) {
1104+
if ( $p->has_class( 'wp-embedded-content' ) ) {
1105+
$p->remove_attribute( 'style' );
1106+
}
1107+
}
1108+
return $p->get_updated_html();
11031109
}
11041110

11051111
/**

‎src/wp-includes/media.php‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2197,14 +2197,6 @@ function wp_img_tag_add_srcset_and_sizes_attr( $image, $context, $attachment_id
21972197
* @return string Converted `iframe` tag with `loading` attribute added.
21982198
*/
21992199
function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
2200-
/*
2201-
* Iframes with fallback content (see `wp_filter_oembed_result()`) should not be lazy-loaded because they are
2202-
* visually hidden initially.
2203-
*/
2204-
if ( str_contains( $iframe, ' data-secret="' ) ) {
2205-
return $iframe;
2206-
}
2207-
22082200
/*
22092201
* Get loading attribute value to use. This must occur before the conditional check below so that even iframes that
22102202
* are ineligible for being lazy-loaded are considered.

‎tests/phpunit/tests/media.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3257,14 +3257,15 @@ public function test_wp_iframe_tag_add_loading_attr_opt_out() {
32573257

32583258
/**
32593259
* @ticket 52768
3260+
* @ticket 58773
32603261
*/
3261-
public function test_wp_iframe_tag_add_loading_attr_skip_wp_embed() {
3262+
public function test_wp_iframe_tag_add_loading_attr_include_wp_embed() {
32623263
$iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
32633264
$fallback = '<blockquote>Fallback content.</blockquote>';
32643265
$iframe = wp_filter_oembed_result( $fallback . $iframe, (object) array( 'type' => 'rich' ), 'https://www.example.com' );
32653266
$iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
32663267

3267-
$this->assertStringNotContainsString( ' loading=', $iframe );
3268+
$this->assertStringContainsString( ' loading="lazy"', $iframe );
32683269
}
32693270

32703271
/**

‎tests/phpunit/tests/oembed/filterResult.php‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,33 +83,33 @@ public function test_filter_oembed_result_blockquote_adds_style_to_iframe() {
8383
$html = '<blockquote></blockquote><iframe></iframe>';
8484
$actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
8585

86-
$this->assertSame( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"></iframe>', $actual );
86+
$this->assertSame( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;"></iframe>', $actual );
8787
}
8888

8989
public function test_filter_oembed_result_allowed_html() {
9090
$html = '<blockquote class="foo" id="bar"><strong><a href="" target=""></a></strong></blockquote><iframe></iframe>';
9191
$actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
9292

93-
$this->assertSame( '<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"></iframe>', $actual );
93+
$this->assertSame( '<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;"></iframe>', $actual );
9494
}
9595

9696
public function data_wp_filter_pre_oembed_custom_result() {
9797
return array(
9898
array(
9999
'<blockquote></blockquote><iframe title=""></iframe>',
100-
'<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="Hola"></iframe>',
100+
'<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="Hola"></iframe>',
101101
),
102102
array(
103103
'<blockquote class="foo" id="bar"><strong><a href="" target=""></a></strong></blockquote><iframe width=123></iframe>',
104-
'<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="Hola" width="123"></iframe>',
104+
'<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="Hola" width="123"></iframe>',
105105
),
106106
array(
107107
'<blockquote><iframe width="100"></iframe></blockquote><iframe stitle="aaaa"></iframe>',
108-
'<blockquote class="wp-embedded-content"><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="Hola" width="100"></iframe></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="Hola"></iframe>',
108+
'<blockquote class="wp-embedded-content"><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="Hola" width="100"></iframe></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="Hola"></iframe>',
109109
),
110110
array(
111111
"<blockquote><iframe title=' width=\"'></iframe></blockquote><iframe title='' height=' title=' width=\"'' height='123'\"></iframe>",
112-
'<blockquote class="wp-embedded-content"><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title=" width=&quot;"></iframe></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title=" width=&quot;" height=\' title=\' width="\'\' height=\'123\'"></iframe>',
112+
'<blockquote class="wp-embedded-content"><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title=" width=&quot;"></iframe></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title=" width=&quot;" height=\' title=\' width="\'\' height=\'123\'"></iframe>',
113113
),
114114
);
115115
}
@@ -134,6 +134,6 @@ public function test_filter_feed_content() {
134134
$html = '<blockquote></blockquote><iframe></iframe>';
135135
$actual = _oembed_filter_feed_content( wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' ) );
136136

137-
$this->assertSame( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"></iframe>', $actual );
137+
$this->assertSame( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" ></iframe>', $actual );
138138
}
139139
}

‎tests/phpunit/tests/oembed/template.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ public function test_wp_maybe_enqueue_oembed_host_js() {
321321

322322
$this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );
323323

324-
$post_embed = '<blockquote class="wp-embedded-content" data-secret="S24AQCJW9i"><a href="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/">Embeds Changes in WordPress 4.5</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="&#8220;Embeds Changes in WordPress 4.5&#8221; &#8212; Make WordPress Core" src="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/embed/#?secret=S24AQCJW9i" data-secret="S24AQCJW9i" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';
324+
$post_embed = '<blockquote class="wp-embedded-content" data-secret="S24AQCJW9i"><a href="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/">Embeds Changes in WordPress 4.5</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="&#8220;Embeds Changes in WordPress 4.5&#8221; &#8212; Make WordPress Core" src="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/embed/#?secret=S24AQCJW9i" data-secret="S24AQCJW9i" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';
325325
$non_post_embed = '<iframe title="Zoo Cares For 23 Tiny Pond Turtles" width="750" height="422" src="https://www.youtube.com/embed/6ZXHqUjL6f8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
326326

327327
wp_maybe_enqueue_oembed_host_js( $non_post_embed );
@@ -338,7 +338,7 @@ public function test_wp_maybe_enqueue_oembed_host_js_without_wp_head_action() {
338338
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
339339
$this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );
340340

341-
$post_embed = '<blockquote class="wp-embedded-content" data-secret="S24AQCJW9i"><a href="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/">Embeds Changes in WordPress 4.5</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="&#8220;Embeds Changes in WordPress 4.5&#8221; &#8212; Make WordPress Core" src="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/embed/#?secret=S24AQCJW9i" data-secret="S24AQCJW9i" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';
341+
$post_embed = '<blockquote class="wp-embedded-content" data-secret="S24AQCJW9i"><a href="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/">Embeds Changes in WordPress 4.5</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="&#8220;Embeds Changes in WordPress 4.5&#8221; &#8212; Make WordPress Core" src="https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/embed/#?secret=S24AQCJW9i" data-secret="S24AQCJW9i" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';
342342

343343
wp_maybe_enqueue_oembed_host_js( $post_embed );
344344
$this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );

0 commit comments

Comments
 (0)