From 47e6c78d88dea855fffdb8008de5ebb6f0ad08fc Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Sat, 31 Oct 2015 04:37:41 +0000 Subject: [PATCH] Embeds: Add fallbacks for IE7-9. Older IE versions need just that little bit of extra tender care to keep them going. Props peterwilsoncc, swissspidy, pento. Fixes #34204. git-svn-id: https://develop.svn.wordpress.org/trunk@35466 602fd350-edb4-49c9-b593-d223f7449a82 --- Gruntfile.js | 3 ++- src/wp-includes/css/wp-embed-template-ie.css | 19 ++++++++++++++++ src/wp-includes/css/wp-embed-template.css | 12 +++++----- src/wp-includes/default-filters.php | 2 +- src/wp-includes/embed-functions.php | 23 +++++++++++++++++++- src/wp-includes/embed-template.php | 4 +--- src/wp-includes/js/wp-embed-template.js | 16 +++++++++++--- src/wp-includes/js/wp-embed.js | 19 +++++++++++----- src/wp-includes/script-loader.php | 14 +++++++----- 9 files changed, 87 insertions(+), 25 deletions(-) create mode 100644 src/wp-includes/css/wp-embed-template-ie.css diff --git a/Gruntfile.js b/Gruntfile.js index 9038f5560d..696d2d910d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -233,7 +233,8 @@ module.exports = function(grunt) { // Exceptions '!wp-includes/css/dashicons.css', - '!wp-includes/css/wp-embed-template.css' + '!wp-includes/css/wp-embed-template.css', + '!wp-includes/css/wp-embed-template-ie.css' ] }, colors: { diff --git a/src/wp-includes/css/wp-embed-template-ie.css b/src/wp-includes/css/wp-embed-template-ie.css new file mode 100644 index 0000000000..cec05c9eeb --- /dev/null +++ b/src/wp-includes/css/wp-embed-template-ie.css @@ -0,0 +1,19 @@ +.dashicons-no { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAcElEQVR4AdXRVxmEMBAGwJMQCUhAIhKQECmRsFJwMFfp7HfP/E8pk0173CuKpt/0R+WaBaaZqogLagBMuh+DdoKbyRCwqZ/SnM0R5oQuZ2UHS8Z6k23qPxZCTrV5UlHMi8bsfHVXP7K/GXZHaTO7S54CWLdHlN2YIwAAAABJRU5ErkJggg==); +} + +.dashicons-admin-comments { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAATUlEQVR4AWMYWqCpvUcAiA8A8X9iMFStAD4DG0AKScQNVDZw1MBRAwvIMLCA5jmFlCD4AMQGlOTtBgoNwzQQ3TCKDaTcMMxYN2AYVgAAYPKsEBxN0PIAAAAASUVORK5CYII=); +} + +.wp-embed-comments a:hover .dashicons-admin-comments { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAATElEQVR4AWMYYqB4lQAQHwDi/8RgqFoBfAY2gBSSiBuobOCogaMGFpBhYAEdcwrhIPgAxAaU5O0GCg3DNBDdMIoNpNwwzFg3YBhWAABG71qAFYcFqgAAAABJRU5ErkJggg==); +} + +.dashicons-share { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAc0lEQVR4AWMYfqCpvccAiBcA8X8gfgDEBZQaeAFkGBoOoMR1/7HgDeQa2ECZgQiDHID4AMwAor0MCmBoQP+HBnwAskFQdgBRkQJViGk7wiAHUr21AYdhDTA1dDOQHl6mPFLokmwoT9j0z3qUFw70L77oDwAiuzCIub1XpQAAAABJRU5ErkJggg==); +} + +.wp-embed-share-dialog-open:hover .dashicons-share { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAc0lEQVR4AWMYhqB4lQEQLwDi/0D8AIgLKDXwAsgwNBxAiev+Y8EbyDWwgTIDEQY5APEBmAFEexkUwNCA/g8N+ABkg6DsAKIiBaoQ03aEQQ6kemsDDsMaYEroZiA9vEx5pNAl2VCesOmf9SgvHOhffNEfAAAMqPR5IEZH5wAAAABJRU5ErkJggg==); +} diff --git a/src/wp-includes/css/wp-embed-template.css b/src/wp-includes/css/wp-embed-template.css index 9ea586b3be..d91bdb65f2 100644 --- a/src/wp-includes/css/wp-embed-template.css +++ b/src/wp-includes/css/wp-embed-template.css @@ -46,6 +46,11 @@ body { .dashicons-share { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E"); + display: none; +} + +.js .dashicons-share { + display: inline-block; } .wp-embed-share-dialog-open:hover .dashicons-share { @@ -53,7 +58,6 @@ body { } .wp-embed { - width: 100%; padding: 25px; font: 400 14px/1.5 'Open Sans', sans-serif; color: #82878c; @@ -61,9 +65,6 @@ body { border: 1px solid #e5e5e5; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; /* Clearfix */ overflow: auto; zoom: 1; @@ -178,6 +179,7 @@ p.wp-embed-heading { left: 0; right: 0; bottom: 0; + background-color: #222; background-color: rgba(10, 10, 10, 0.9); color: #fff; opacity: 1; @@ -254,7 +256,7 @@ p.wp-embed-heading { } .wp-embed-share-tab-button { - display: inline; + display: inline-block; } .wp-embed-share-tab-button button { diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index 684bea4a37..8ee28edf3f 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -447,8 +447,8 @@ add_filter( 'rest_pre_serve_request', '_oembed_rest_pre_serve_request', 10, 4 ); add_action( 'wp_head', 'wp_oembed_add_discovery_links' ); add_action( 'wp_head', 'wp_oembed_add_host_js' ); +add_action( 'embed_head', 'enqueue_embed_scripts', 1 ); add_action( 'embed_head', 'print_emoji_detection_script' ); -add_action( 'embed_head', 'print_emoji_styles' ); add_action( 'embed_head', 'print_embed_styles' ); add_action( 'embed_head', 'wp_print_head_scripts', 20 ); add_action( 'embed_head', 'wp_print_styles', 20 ); diff --git a/src/wp-includes/embed-functions.php b/src/wp-includes/embed-functions.php index 360399e208..2f430b5283 100644 --- a/src/wp-includes/embed-functions.php +++ b/src/wp-includes/embed-functions.php @@ -372,7 +372,6 @@ function wp_oembed_add_host_js() { wp_enqueue_script( 'wp-embed' ); } - /** * Retrieves the URL to embed a specific post in an iframe. * @@ -863,6 +862,28 @@ function wp_embed_excerpt_attachment( $content ) { return $content; } +/** + * Enqueue embed iframe default CSS and JS & fire do_action('enqueue_embed_scripts') + * + * Enqueue PNG fallback CSS for embed iframe for legacy versions of IE. + * + * Allows plugins to queue scripts for the embed iframe end using wp_enqueue_script(). + * Runs first in oembed_head(). + * + * @since 4.4.0 + */ +function enqueue_embed_scripts() { + wp_enqueue_style( 'open-sans' ); + wp_enqueue_style( 'wp-embed-template-ie' ); + + /** + * Fires when scripts and styles are enqueued for the embed iframe. + * + * @since 4.4.0 + */ + do_action( 'enqueue_embed_scripts' ); +} + /** * Prints the CSS in the embed iframe header. * diff --git a/src/wp-includes/embed-template.php b/src/wp-includes/embed-template.php index a7f948f720..120ae3b37e 100644 --- a/src/wp-includes/embed-template.php +++ b/src/wp-includes/embed-template.php @@ -14,11 +14,9 @@ if ( ! headers_sent() ) { header( 'X-WP-embed: true' ); } -wp_enqueue_style( 'open-sans' ); - ?> -> + class="no-js"> <?php echo wp_get_document_title(); ?> diff --git a/src/wp-includes/js/wp-embed-template.js b/src/wp-includes/js/wp-embed-template.js index 847ebcfd95..b1dc73a8b1 100644 --- a/src/wp-includes/js/wp-embed-template.js +++ b/src/wp-includes/js/wp-embed-template.js @@ -2,6 +2,8 @@ 'use strict'; var secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' ), + supportedBrowser = ( document.querySelector && window.addEventListener ), + loaded = false, resizing; function sendEmbedMessage( message, value ) { @@ -13,6 +15,11 @@ } function onLoad() { + if ( loaded ) { + return; + } + loaded = true; + var share_dialog = document.querySelector( '.wp-embed-share-dialog' ), share_dialog_open = document.querySelector( '.wp-embed-share-dialog-open' ), share_dialog_close = document.querySelector( '.wp-embed-share-dialog-close' ), @@ -141,8 +148,6 @@ } } - document.addEventListener( 'DOMContentLoaded', onLoad, false ); - /** * Iframe resize handler. */ @@ -158,5 +163,10 @@ }, 100 ); } - window.addEventListener( 'resize', onResize, false ); + if ( supportedBrowser ) { + document.documentElement.className = document.documentElement.className.replace( /\bno-js\b/, '' ) + ' js'; + document.addEventListener( 'DOMContentLoaded', onLoad, false ); + window.addEventListener( 'load', onLoad, false ); + window.addEventListener( 'resize', onResize, false ); + } })( window, document ); diff --git a/src/wp-includes/js/wp-embed.js b/src/wp-includes/js/wp-embed.js index 3829d0d9da..db1fe5b2dd 100644 --- a/src/wp-includes/js/wp-embed.js +++ b/src/wp-includes/js/wp-embed.js @@ -1,6 +1,9 @@ (function ( window, document ) { 'use strict'; + var supportedBrowser = ( document.querySelector && window.addEventListener ), + loaded = false; + window.wp = window.wp || {}; if ( !! window.wp.receiveEmbedMessage ) { @@ -54,9 +57,12 @@ } }; - window.addEventListener( 'message', window.wp.receiveEmbedMessage, false ); - function onLoad() { + if ( loaded ) { + return; + } + loaded = true; + var isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ), isIE11 = !!navigator.userAgent.match( /Trident.*rv\:11\./ ), iframes, iframeClone, i; @@ -68,11 +74,14 @@ for ( i = 0; i < iframes.length; i++ ) { iframeClone = iframes[ i ].cloneNode( true ); iframeClone.removeAttribute( 'security' ); - iframes[ i ].parentNode.insertBefore( iframeClone, iframes[ i ].nextSibling ); - iframes[ i ].parentNode.removeChild( iframes[ i ] ); + iframes[ i ].parentNode.replaceChild( iframeClone, iframes[ i ] ); } } } - document.addEventListener( 'DOMContentLoaded', onLoad, false ); + if ( supportedBrowser ) { + window.addEventListener( 'message', window.wp.receiveEmbedMessage, false ); + document.addEventListener( 'DOMContentLoaded', onLoad, false ); + window.addEventListener( 'load', onLoad, false ); + } })( window, document ); diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 72a7575053..1c7efbbfbe 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -727,12 +727,14 @@ function wp_default_styles( &$styles ) { $styles->add( 'open-sans', $open_sans_font_url ); // Includes CSS - $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array( 'open-sans', 'dashicons' ) ); - $styles->add( 'wp-auth-check', "/wp-includes/css/wp-auth-check$suffix.css", array( 'dashicons' ) ); - $styles->add( 'editor-buttons', "/wp-includes/css/editor$suffix.css", array( 'dashicons' ) ); - $styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css", array( 'buttons', 'dashicons', 'wp-mediaelement' ) ); - $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array( 'dashicons' ) ); - $styles->add( 'customize-preview', "/wp-includes/css/customize-preview$suffix.css" ); + $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array( 'open-sans', 'dashicons' ) ); + $styles->add( 'wp-auth-check', "/wp-includes/css/wp-auth-check$suffix.css", array( 'dashicons' ) ); + $styles->add( 'editor-buttons', "/wp-includes/css/editor$suffix.css", array( 'dashicons' ) ); + $styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css", array( 'buttons', 'dashicons', 'wp-mediaelement' ) ); + $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array( 'dashicons' ) ); + $styles->add( 'customize-preview', "/wp-includes/css/customize-preview$suffix.css" ); + $styles->add( 'wp-embed-template-ie', "/wp-includes/css/wp-embed-template-ie$suffix.css" ); + $styles->add_data( 'wp-embed-template-ie', 'conditional', 'lte IE 8' ); // External libraries and friends $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );