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.


Built from https://develop.svn.wordpress.org/trunk@35466


git-svn-id: http://core.svn.wordpress.org/trunk@35430 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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==);
+}

wp-includes/css/wp-embed-template-ie.min.css

@@ -0,0 +1 @@
+.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==)}

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 {

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    );

wp-includes/embed-template.php

@@ -14,11 +14,9 @@ if ( ! headers_sent() ) {
 	header( 'X-WP-embed: true' );
 }
 
-wp_enqueue_style( 'open-sans' );
-
 ?>
 <!DOCTYPE html>
-<html <?php language_attributes(); ?>>
+<html <?php language_attributes(); ?> class="no-js">
 <head>
 	<title><?php echo wp_get_document_title(); ?></title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">

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 );

wp-includes/js/wp-embed-template.min.js

@@ -1 +1 @@
-!function(a,b){"use strict";function c(b,c){a.parent.postMessage({message:b,value:c,secret:g},"*")}function d(){function d(){j.className=j.className.replace("hidden",""),m[0].select()}function e(){j.className+=" hidden",b.querySelector(".wp-embed-share-dialog-open").focus()}function f(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');c.setAttribute("aria-selected","false"),b.querySelector("#"+c.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),a.target.setAttribute("aria-selected","true"),b.querySelector("#"+a.target.getAttribute("aria-controls")).setAttribute("aria-hidden","false")}function g(a){var c,d,e=a.target,f=e.parentElement.previousElementSibling,g=e.parentElement.nextElementSibling;if(37===a.keyCode)c=f;else{if(39!==a.keyCode)return!1;c=g}"rtl"===b.documentElement.getAttribute("dir")&&(c=c===f?g:f),c&&(d=c.firstElementChild,e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected",!1),b.querySelector("#"+e.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),d.setAttribute("tabindex","0"),d.setAttribute("aria-selected","true"),d.focus(),b.querySelector("#"+d.getAttribute("aria-controls")).setAttribute("aria-hidden","false"))}function h(a){var b,d=a.target;b=d.hasAttribute("href")?d.getAttribute("href"):d.parentElement.getAttribute("href"),c("link",b),a.preventDefault()}var i,j=b.querySelector(".wp-embed-share-dialog"),k=b.querySelector(".wp-embed-share-dialog-open"),l=b.querySelector(".wp-embed-share-dialog-close"),m=b.querySelectorAll(".wp-embed-share-input"),n=b.querySelectorAll(".wp-embed-share-tab-button button"),o=b.getElementsByTagName("a");if(m)for(i=0;i<m.length;i++)m[i].addEventListener("click",function(a){a.target.select()});if(k&&k.addEventListener("click",function(a){d(),a.preventDefault()}),l&&l.addEventListener("click",function(a){e(),a.preventDefault()}),n)for(i=0;i<n.length;i++)n[i].addEventListener("click",f),n[i].addEventListener("keydown",g);if(b.addEventListener("keydown",function(a){27===a.keyCode&&-1===j.className.indexOf("hidden")&&e()},!1),a.self!==a.top)for(c("height",Math.ceil(b.body.getBoundingClientRect().height)),i=0;i<o.length;i++)o[i].addEventListener("click",h)}function e(){a.self!==a.top&&(clearTimeout(f),f=setTimeout(function(){c("height",Math.ceil(b.body.getBoundingClientRect().height))},100))}var f,g=a.location.hash.replace(/.*secret=([\d\w]{10}).*/,"$1");b.addEventListener("DOMContentLoaded",d,!1),a.addEventListener("resize",e,!1)}(window,document);
+!function(a,b){"use strict";function c(b,c){a.parent.postMessage({message:b,value:c,secret:g},"*")}function d(){function d(){k.className=k.className.replace("hidden",""),n[0].select()}function e(){k.className+=" hidden",b.querySelector(".wp-embed-share-dialog-open").focus()}function f(a){var c=b.querySelector('.wp-embed-share-tab-button [aria-selected="true"]');c.setAttribute("aria-selected","false"),b.querySelector("#"+c.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),a.target.setAttribute("aria-selected","true"),b.querySelector("#"+a.target.getAttribute("aria-controls")).setAttribute("aria-hidden","false")}function g(a){var c,d,e=a.target,f=e.parentElement.previousElementSibling,g=e.parentElement.nextElementSibling;if(37===a.keyCode)c=f;else{if(39!==a.keyCode)return!1;c=g}"rtl"===b.documentElement.getAttribute("dir")&&(c=c===f?g:f),c&&(d=c.firstElementChild,e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected",!1),b.querySelector("#"+e.getAttribute("aria-controls")).setAttribute("aria-hidden","true"),d.setAttribute("tabindex","0"),d.setAttribute("aria-selected","true"),d.focus(),b.querySelector("#"+d.getAttribute("aria-controls")).setAttribute("aria-hidden","false"))}function h(a){var b,d=a.target;b=d.hasAttribute("href")?d.getAttribute("href"):d.parentElement.getAttribute("href"),c("link",b),a.preventDefault()}if(!i){i=!0;var j,k=b.querySelector(".wp-embed-share-dialog"),l=b.querySelector(".wp-embed-share-dialog-open"),m=b.querySelector(".wp-embed-share-dialog-close"),n=b.querySelectorAll(".wp-embed-share-input"),o=b.querySelectorAll(".wp-embed-share-tab-button button"),p=b.getElementsByTagName("a");if(n)for(j=0;j<n.length;j++)n[j].addEventListener("click",function(a){a.target.select()});if(l&&l.addEventListener("click",function(a){d(),a.preventDefault()}),m&&m.addEventListener("click",function(a){e(),a.preventDefault()}),o)for(j=0;j<o.length;j++)o[j].addEventListener("click",f),o[j].addEventListener("keydown",g);if(b.addEventListener("keydown",function(a){27===a.keyCode&&-1===k.className.indexOf("hidden")&&e()},!1),a.self!==a.top)for(c("height",Math.ceil(b.body.getBoundingClientRect().height)),j=0;j<p.length;j++)p[j].addEventListener("click",h)}}function e(){a.self!==a.top&&(clearTimeout(f),f=setTimeout(function(){c("height",Math.ceil(b.body.getBoundingClientRect().height))},100))}var f,g=a.location.hash.replace(/.*secret=([\d\w]{10}).*/,"$1"),h=b.querySelector&&a.addEventListener,i=!1;h&&(b.documentElement.className=b.documentElement.className.replace(/\bno-js\b/,"")+" js",b.addEventListener("DOMContentLoaded",d,!1),a.addEventListener("load",d,!1),a.addEventListener("resize",e,!1))}(window,document);

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.replaceChild( iframeClone, iframes[ i ] );
-				iframes[ i ].parentNode.removeChild( 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 );

wp-includes/js/wp-embed.min.js

@@ -1 +1 @@
-!function(a,b){"use strict";function c(){var a,c,d,e=-1!==navigator.appVersion.indexOf("MSIE 10"),f=!!navigator.userAgent.match(/Trident.*rv\:11\./);if(e||f)for(a=b.querySelectorAll(".wp-embedded-content[security]"),d=0;d<a.length;d++)c=a[d].cloneNode(!0),c.removeAttribute("security"),a[d].parentNode.insertBefore(c,a[d].nextSibling),a[d].parentNode.removeChild(a[d])}a.wp=a.wp||{},a.wp.receiveEmbedMessage||(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)f=j[e],f.style.display="","height"===d.message&&(g=d.value,g>1e3?g=1e3:200>g&&(g=200),f.height=g+"px"),"link"===d.message&&(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host&&b.activeElement===f&&(a.top.location.href=d.value))}},a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1))}(window,document);
+!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f=-1!==navigator.appVersion.indexOf("MSIE 10"),g=!!navigator.userAgent.match(/Trident.*rv\:11\./);if(f||g)for(a=b.querySelectorAll(".wp-embedded-content[security]"),d=0;d<a.length;d++)c=a[d].cloneNode(!0),c.removeAttribute("security"),a[d].parentNode.replaceChild(c,a[d])}}var d=b.querySelector&&a.addEventListener,e=!1;a.wp=a.wp||{},a.wp.receiveEmbedMessage||(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)f=j[e],f.style.display="","height"===d.message&&(g=d.value,g>1e3?g=1e3:200>g&&(g=200),f.height=g+"px"),"link"===d.message&&(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host&&b.activeElement===f&&(a.top.location.href=d.value))}},d&&(a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)))}(window,document);

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( '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( '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( '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( '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( 'wp-pointer',           "/wp-includes/css/wp-pointer$suffix.css", array( 'dashicons' ) );
-	$styles->add( 'customize-preview', "/wp-includes/css/customize-preview$suffix.css" );
+	$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' );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-beta2-35465';
+$wp_version = '4.4-beta2-35466';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.