Embeds: Conditionally enqueue wp-embed only if needed and send ready message in case script loads after post embed windows.

* Prevent loading `wp-embed` script unconditionally on every page in favor of conditionally enqueueing when a post embed is detected. The `wp-embed` script is also explicitly marked as being in the footer group. Sites which currently disable post embed scripts from being enqueued via `remove_action( 'wp_head', 'wp_oembed_add_host_js' )` will continue to do so.
* Send a `ready` message from the host page to each post embed window in case the `iframe` loads before the `wp-embed` script does. When the `ready` message is received by the post embed window, it sends the same `height` message as it sends when it loads.
* Eliminate use of `grunt-include` to inject emoji script and the post embed script. Instead obtain the script contents via `file_get_contents()` (as is done elsewhere in core) and utilize `wp_print_inline_script_tag()`/`wp_get_inline_script_tag()` to construct out the script. This simplifies the logic and allows the running of src without `SCRIPT_DEBUG` enabled.
* For the embed code that users are provided to copy for embedding outside of WP, add the `secret` on the `blockquote` and `iframe`. This ensures the `blockquote` will be hidden when the `iframe` loads. The embed code in question is accessed here via `get_post_embed_html()`.

Props westonruter, swissspidy, pento, flixos90, ocean90.
Fixes #44632, #44306.


git-svn-id: https://develop.svn.wordpress.org/trunk@52132 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2021-11-11 02:47:10 +00:00
parent 1e785fa0c3
commit 02a2f9c9f5
10 changed files with 160 additions and 86 deletions
+22 -4
View File
@@ -12,6 +12,24 @@ class Tests_oEmbed_Response_Data extends WP_UnitTestCase {
self::touch( ABSPATH . WPINC . '/js/wp-embed.js' );
}
private function normalize_secret_attribute( $data ) {
if ( is_array( $data ) ) {
$html = $data['html'];
} else {
$html = $data;
}
$html = preg_replace( '/secret=("?)\w+\1/', 'secret=__SECRET__', $html );
if ( is_array( $data ) ) {
$data['html'] = $html;
} else {
$data = $html;
}
return $data;
}
public function test_get_oembed_response_data_non_existent_post() {
$this->assertFalse( get_oembed_response_data( 0, 100 ) );
}
@@ -36,9 +54,9 @@ class Tests_oEmbed_Response_Data extends WP_UnitTestCase {
'type' => 'rich',
'width' => 400,
'height' => 225,
'html' => get_post_embed_html( 400, 225, $post ),
'html' => $this->normalize_secret_attribute( get_post_embed_html( 400, 225, $post ) ),
),
$data
$this->normalize_secret_attribute( $data )
);
}
@@ -72,9 +90,9 @@ class Tests_oEmbed_Response_Data extends WP_UnitTestCase {
'type' => 'rich',
'width' => 400,
'height' => 225,
'html' => get_post_embed_html( 400, 225, $post ),
'html' => $this->normalize_secret_attribute( get_post_embed_html( 400, 225, $post ) ),
),
$data
$this->normalize_secret_attribute( $data )
);
}
+39 -3
View File
@@ -4,6 +4,21 @@
* @group oembed
*/
class Tests_Embed_Template extends WP_UnitTestCase {
public function set_up() {
parent::set_up();
global $wp_scripts;
$wp_scripts = null;
}
public function tear_down() {
parent::tear_down();
global $wp_scripts;
$wp_scripts = null;
}
public function test_oembed_output_post() {
$user = self::factory()->user->create_and_get(
array(
@@ -281,15 +296,36 @@ class Tests_Embed_Template extends WP_UnitTestCase {
)
);
$expected = '<iframe sandbox="allow-scripts" security="restricted" src="' . esc_url( get_post_embed_url( $post_id ) ) . '" width="200" height="200" title="' . $title . '" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>';
$expected = '<iframe sandbox="allow-scripts" security="restricted" src="' . esc_url( get_post_embed_url( $post_id ) ) . '#?secret=__SECRET__" width="200" height="200" title="' . $title . '" data-secret=__SECRET__ frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>';
$actual = get_post_embed_html( 200, 200, $post_id );
$actual = preg_replace( '/secret=("?)\w+\1/', 'secret=__SECRET__', $actual );
$this->assertStringEndsWith( $expected, get_post_embed_html( 200, 200, $post_id ) );
$this->assertStringEndsWith( $expected, $actual );
}
/** @covers ::wp_oembed_add_host_js() */
public function test_add_host_js() {
remove_all_filters( 'embed_oembed_html' );
wp_oembed_add_host_js();
$this->assertTrue( wp_script_is( 'wp-embed' ) );
$this->assertEquals( 10, has_filter( 'embed_oembed_html', 'wp_maybe_enqueue_oembed_host_js' ) );
}
/** @covers ::wp_maybe_enqueue_oembed_host_js() */
function test_wp_maybe_enqueue_oembed_host_js() {
$scripts = wp_scripts();
$this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );
$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>';
$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>';
wp_maybe_enqueue_oembed_host_js( $non_post_embed );
$this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );
wp_maybe_enqueue_oembed_host_js( $post_embed );
$this->assertTrue( $scripts->query( 'wp-embed', 'enqueued' ) );
}
/**