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

View File

@@ -5756,8 +5756,7 @@ function _print_emoji_detection_script() {
'svgExt' => apply_filters( 'emoji_svg_ext', '.svg' ),
);
$version = 'ver=' . get_bloginfo( 'version' );
$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/javascript"';
$version = 'ver=' . get_bloginfo( 'version' );
if ( SCRIPT_DEBUG ) {
$settings['source'] = array(
@@ -5766,36 +5765,17 @@ function _print_emoji_detection_script() {
/** This filter is documented in wp-includes/class.wp-scripts.php */
'twemoji' => apply_filters( 'script_loader_src', includes_url( "js/twemoji.js?$version" ), 'twemoji' ),
);
?>
<script<?php echo $type_attr; ?>>
window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
<?php readfile( ABSPATH . WPINC . '/js/wp-emoji-loader.js' ); ?>
</script>
<?php
} else {
$settings['source'] = array(
/** This filter is documented in wp-includes/class.wp-scripts.php */
'concatemoji' => apply_filters( 'script_loader_src', includes_url( "js/wp-emoji-release.min.js?$version" ), 'concatemoji' ),
);
/*
* If you're looking at a src version of this file, you'll see an "include"
* statement below. This is used by the `npm run build` process to directly
* include a minified version of wp-emoji-loader.js, instead of using the
* readfile() method from above.
*
* If you're looking at a build version of this file, you'll see a string of
* minified JavaScript. If you need to debug it, please turn on SCRIPT_DEBUG
* and edit wp-emoji-loader.js directly.
*/
?>
<script<?php echo $type_attr; ?>>
window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
include "js/wp-emoji-loader.min.js"
</script>
<?php
}
wp_print_inline_script_tag(
sprintf( 'window._wpemojiSettings = %s;', wp_json_encode( $settings ) ) .
file_get_contents( sprintf( ABSPATH . WPINC . '/js/wp-emoji-loader' . wp_scripts_get_suffix() . '.js' ) )
);
}
/**