Ticket #34204: 34204.2.diff

Gruntfile.js

@@ -233 +233 @@
 
                                         // Exceptions
                                         '!wp-includes/css/dashicons.css',
-                                        '!wp-includes/css/wp-oembed-embed.css'
+                                        '!wp-includes/css/wp-oembed-embed.css',
+                                        '!wp-includes/css/wp-oembed-embed-ie.css'
                                 ]
                         },
                         colors: {

new file src/wp-includes/css/wp-oembed-embed-ie.css

@@ +1 @@
+/* Dashicons */
+.dashicons {
+        *display: inline;
+        *zoom: 1;
+}
+
+.dashicons-no {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAcElEQVR4AdXRVxmEMBAGwJMQCUhAIhKQECmRsFJwMFfp7HfP/E8pk0173CuKpt/0R+WaBaaZqogLagBMuh+DdoKbyRCwqZ/SnM0R5oQuZ2UHS8Z6k23qPxZCTrV5UlHMi8bsfHVXP7K/GXZHaTO7S54CWLdHlN2YIwAAAABJRU5ErkJggg==);
+        *background-image: url(../images/embed/close.png);
+}
+
+.dashicons-admin-comments {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAATUlEQVR4AWMYWqCpvUcAiA8A8X9iMFStAD4DG0AKScQNVDZw1MBRAwvIMLCA5jmFlCD4AMQGlOTtBgoNwzQQ3TCKDaTcMMxYN2AYVgAAYPKsEBxN0PIAAAAASUVORK5CYII=);
+        *background-image: url(../images/embed/comment.png);
+        *background-position: 0 0;
+}
+
+.wp-embed-comments a:hover .dashicons-admin-comments {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAATElEQVR4AWMYYqB4lQAQHwDi/8RgqFoBfAY2gBSSiBuobOCogaMGFpBhYAEdcwrhIPgAxAaU5O0GCg3DNBDdMIoNpNwwzFg3YBhWAABG71qAFYcFqgAAAABJRU5ErkJggg==);
+        *background-image: url(../images/embed/comment.png);
+        *background-position: 0 -40px;
+}
+
+.dashicons-share {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAc0lEQVR4AWMYfqCpvccAiBcA8X8gfgDEBZQaeAFkGBoOoMR1/7HgDeQa2ECZgQiDHID4AMwAor0MCmBoQP+HBnwAskFQdgBRkQJViGk7wiAHUr21AYdhDTA1dDOQHl6mPFLokmwoT9j0z3qUFw70L77oDwAiuzCIub1XpQAAAABJRU5ErkJggg==);
+        *background-image: url(../images/embed/share.png);
+        *background-position: 0 0;
+}
+
+.wp-embed-share-dialog-open:hover .dashicons-share {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAc0lEQVR4AWMYhqB4lQEQLwDi/0D8AIgLKDXwAsgwNBxAiev+Y8EbyDWwgTIDEQY5APEBmAFEexkUwNCA/g8N+ABkg6DsAKIiBaoQ03aEQQ6kemsDDsMaYEroZiA9vEx5pNAl2VCesOmf9SgvHOhffNEfAAAMqPR5IEZH5wAAAABJRU5ErkJggg==);
+        *background-image: url(../images/embed/share.png);
+        *background-position: 0 -40px;
+}
+
+.wp-embed-share-dialog {
+        *background-color: #222;
+}
+ No newline at end of file

src/wp-includes/css/wp-oembed-embed.css

@@ -19 +19 @@
 /* Dashicons */
 .dashicons {
         display: inline-block;
+        *display: inline;
+        *zoom: 1;
         width: 20px;
         height: 20px;
         background-color: transparent;
@@ -139 +141 @@
 .wp-embed-site-title a {
         position: relative;
         display: inline-block;
+        *display: inline;
+        *zoom: 1;
         padding-left: 35px;
 }
 
 .wp-embed-site-title,
 .wp-embed-meta {
         display: table-cell;
+        *display: inline;
+        *zoom: 1;
 }
 
 .wp-embed-meta {
@@ -156 +162 @@
 .wp-embed-comments,
 .wp-embed-share {
         display: inline;
+        *zoom: 1;
 }
 
 .wp-embed-meta a:hover {
@@ -166 +173 @@
 .wp-embed-comments a {
         line-height: 25px;
         display: inline-block;
+        *display: inline;
+        *zoom: 1;
 }
 
 .wp-embed-comments + .wp-embed-share {
@@ -178 +187 @@
         left: 0;
         right: 0;
         bottom: 0;
+        background-color: #222;
         background-color: rgba(10, 10, 10, 0.9);
         color: #fff;
         opacity: 1;
@@ -254 +264 @@
 }
 
 .wp-embed-share-tab-button {
-        display: inline;
+        display: inline-block;
+        *display: inline;
+        *zoom: 1;
 }
 
 .wp-embed-share-tab-button button {

src/wp-includes/default-filters.php

@@ -444 +444 @@
 add_action( 'wp_head',              'wp_oembed_add_discovery_links'        );
 add_action( 'wp_head',              'wp_oembed_add_host_js'                );
 
+add_action( 'oembed_head',          'wp_oembed_enqueue_scripts',     1     );
 add_action( 'oembed_head',          'print_emoji_detection_script'         );
 add_action( 'oembed_head',          'print_emoji_styles'                   );
 add_action( 'oembed_head',          'print_oembed_embed_styles'            );

src/wp-includes/embed-functions.php

@@ -802 +802 @@
 }
 
 /**
+ * Enqueue embed iframe default CSS and JS & fire do_action('wp_oembed_enqueue_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 wp_oembed_enqueue_scripts() {
+        wp_enqueue_style( 'open-sans' );
+        wp_enqueue_style( 'wp-oembed-embed-ie' );
+        /**
+         * Fires when scripts and styles are enqueued for the embed iframe.
+         *
+         * @since 4.4.0
+         */
+        do_action( 'wp_oembed_enqueue_scripts' );
+}
+
+/**
  * Prints the CSS in the embed iframe header.
  *
  * @since 4.4.0

src/wp-includes/embed-template.php

@@ -14 +14 @@
         header( 'X-WP-oembed: true' );
 }
 
-wp_enqueue_style( 'open-sans' );
-
 ?>
 <!DOCTYPE html>
 <html <?php language_attributes(); ?>>
@@ -170 +168 @@
                                                 </div>
                                         <?php endif; ?>
                                         <div class="wp-embed-share">
-                                                <button type="button" class="wp-embed-share-dialog-open"
+                                                <button type="button" id="wp-embed-share-dialog-open"
+                                                        class="wp-embed-share-dialog-open"
                                                         aria-label="<?php esc_attr_e( 'Open sharing dialog' ); ?>">
                                                         <span class="dashicons dashicons-share"></span>
                                                 </button>
                                         </div>
                                 </div>
                         </div>
-                        <div class="wp-embed-share-dialog hidden">
+                        <div id="wp-embed-share-dialog" class="wp-embed-share-dialog hidden">
                                 <div class="wp-embed-share-dialog-content">
                                         <div class="wp-embed-share-dialog-text">
-                                                <ul class="wp-embed-share-tabs" role="tablist">
+                                                <ul id="wp-embed-share-tabs" class="wp-embed-share-tabs" role="tablist">
                                                         <li id="wp-embed-share-tab-button-wordpress" class="wp-embed-share-tab-button" role="presentation">
                                                                 <button role="tab" aria-controls="wp-embed-share-tab-wordpress" aria-selected="true" tabindex="0"><?php esc_html_e( 'WordPress Embed' ); ?></button>
                                                         </li>
@@ -204 +203 @@
                                                 </div>
                                         </div>
 
-                                        <button type="button" class="wp-embed-share-dialog-close" aria-label="<?php esc_attr_e( 'Close sharing dialog' ); ?>">
+                                        <button type="button" id="wp-embed-share-dialog-close"
+                                                class="wp-embed-share-dialog-close"
+                                                aria-label="<?php esc_attr_e( 'Close sharing dialog' ); ?>">
                                                 <span class="dashicons dashicons-no"></span>
                                         </button>
                                 </div>

src/wp-includes/js/wp-oembed-embed.js

@@ -1 +1 @@
 (function ( window, document ) {
-        'use strict';
 
         var secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' ),
+                querySelectorExists = ( 'querySelector' in document ),
+                loaded = false,
                 resizing;
 
         function sendEmbedMessage( message, value ) {
@@ -13 +14 @@
         }
 
         function onLoad() {
-                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' ),
-                        share_input = document.querySelectorAll( '.wp-embed-share-input' ),
-                        share_dialog_tabs = document.querySelectorAll( '.wp-embed-share-tab-button button' ),
+                if ( loaded ) {
+                        return;
+                }
+                loaded = true;
+
+                var share_dialog = getElementById( 'wp-embed-share-dialog' ),
+                        share_dialog_open = getElementById( 'wp-embed-share-dialog-open' ),
+                        share_dialog_close = getElementById( 'wp-embed-share-dialog-close' ),
                         links = document.getElementsByTagName( 'a' ),
+                        share_input,
+                        share_dialog_tabs,
+                        current_dialog_tab,
                         i;
 
-                if ( share_input ) {
-                        for ( i = 0; i < share_input.length; i++ ) {
-                                share_input[ i ].addEventListener( 'click', function ( e ) {
-                                        e.target.select();
-                                } );
+                share_dialog_tabs = getElementById( 'wp-embed-share-tabs' );
+                if ( share_dialog_tabs ) {
+                        share_dialog_tabs = share_dialog_tabs.getElementsByTagName( 'button' );
+                }
+
+                if ( querySelectorExists ) {
+                        share_input = document.querySelectorAll( '.wp-embed-share-input' );
+                        if ( share_input ) {
+                                for ( i = 0; i < share_input.length; i++ ) {
+                                        if ( !( 'select' in share_input[ i ] ) ) {
+                                                // select unavailable, no need for events
+                                                break;
+                                        }
+                                        addEvent( share_input[ i ], 'click', clickShareInput );
+                                }
                         }
                 }
 
+                function clickShareInput() {
+                        this.select();
+                }
+
                 function openSharingDialog() {
                         share_dialog.className = share_dialog.className.replace( 'hidden', '' );
-                        share_input[ 0 ].select();
+                        if ( share_input && ( 'select' in share_input[ 0 ] ) ) {
+                                share_input[ 0 ].select();
+                        }
                 }
 
                 function closeSharingDialog() {
                         share_dialog.className += ' hidden';
-                        document.querySelector( '.wp-embed-share-dialog-open' ).focus();
+                        if ( 'focus' in share_dialog_open ) {
+                                share_dialog_open.focus();
+                        }
                 }
 
                 if ( share_dialog_open ) {
-                        share_dialog_open.addEventListener( 'click', function ( e ) {
+                        addEvent( share_dialog_open, 'click', function ( e ) {
                                 openSharingDialog();
                                 e.preventDefault();
                         } );
                 }
 
                 if ( share_dialog_close ) {
-                        share_dialog_close.addEventListener( 'click', function ( e ) {
+                        addEvent( share_dialog_close, 'click', function ( e ) {
                                 closeSharingDialog();
                                 e.preventDefault();
                         } );
                 }
 
-                function shareClickHandler( e ) {
-                        var currentTab = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
-                        currentTab.setAttribute( 'aria-selected', 'false' );
-                        document.querySelector( '#' + currentTab.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
+                function shareClickHandler() {
+                        if ( current_dialog_tab ) {
+                                current_dialog_tab.setAttribute( 'aria-selected', 'false' );
+                                getElementById( current_dialog_tab.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
+                        }
 
-                        e.target.setAttribute( 'aria-selected', 'true' );
-                        document.querySelector( '#' + e.target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
+                        this.setAttribute( 'aria-selected', 'true' );
+                        getElementById( this.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
+                        current_dialog_tab = this;
                 }
 
                 function shareKeyHandler( e ) {
-                        var target = e.target,
+                        var target = this,
                                 previousSibling = target.parentElement.previousElementSibling,
                                 nextSibling = target.parentElement.nextElementSibling,
                                 newTab, newTabChild;
@@ -85 +112 @@
 
                                 target.setAttribute( 'tabindex', '-1' );
                                 target.setAttribute( 'aria-selected', false );
-                                document.querySelector( '#' + target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
+                                getElementById( target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
 
                                 newTabChild.setAttribute( 'tabindex', '0' );
                                 newTabChild.setAttribute( 'aria-selected', 'true' );
                                 newTabChild.focus();
-                                document.querySelector( '#' + newTabChild.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
+                                getElementById( newTabChild.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
                         }
                 }
 
                 if ( share_dialog_tabs ) {
                         for ( i = 0; i < share_dialog_tabs.length; i++ ) {
-                                share_dialog_tabs[ i ].addEventListener( 'click', shareClickHandler );
+                                addEvent( share_dialog_tabs[ i ], 'click', shareClickHandler );
+
+                                addEvent( share_dialog_tabs[ i ], 'keydown', shareKeyHandler );
 
-                                share_dialog_tabs[ i ].addEventListener( 'keydown', shareKeyHandler );
+                                if ( 'true' === share_dialog_tabs[ i ].getAttribute( 'aria-selected' ) ) {
+                                        current_dialog_tab = share_dialog_tabs[ i ];
+                                }
                         }
                 }
 
-                document.addEventListener( 'keydown', function ( e ) {
+                addEvent( document, 'keydown', function ( e ) {
                         if ( e.keyCode === 27 && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
                                 closeSharingDialog();
                         }
-                }, false );
+                });
 
                 if ( window.self === window.top ) {
                         return;
@@ -121 +152 @@
                  * Detect clicks to external (_top) links.
                  */
                 function linkClickHandler( e ) {
-                        var target = e.target,
+                        var target = this,
                                 href;
                         if ( target.hasAttribute( 'href' ) ) {
                                 href = target.getAttribute( 'href' );
@@ -137 +168 @@
                 }
 
                 for ( i = 0; i < links.length; i++ ) {
-                        links[ i ].addEventListener( 'click', linkClickHandler );
+                        addEvent( links[ i ], 'click', linkClickHandler );
                 }
         }
 
-        document.addEventListener( 'DOMContentLoaded', onLoad, false );
-
         /**
          * Iframe resize handler.
          */
@@ -158 +187 @@
                 }, 100 );
         }
 
-        window.addEventListener( 'resize', onResize, false );
+        /**
+         * Internal function simplifying document.getElementById
+         */
+        function getElementById( id ) {
+                return document.getElementById( id );
+        }
+
+        /**
+         * Cross browser event handling
+         *
+         * Source: http://dean.edwards.name/weblog/2005/10/add-event/
+         */
+        function addEvent(element, type, handler) {
+                if (element.addEventListener) {
+                        element.addEventListener(type, handler, false);
+                } else {
+                        // assign each event handler a unique ID
+                        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
+                        // create a hash table of event types for the element
+                        if (!element.events) element.events = {};
+                        // create a hash table of event handlers for each element/event pair
+                        var handlers = element.events[type];
+                        if (!handlers) {
+                                handlers = element.events[type] = {};
+                                // store the existing event handler (if there is one)
+                                if (element['on' + type]) {
+                                        handlers[0] = element['on' + type];
+                                }
+                        }
+                        // store the event handler in the hash table
+                        handlers[handler.$$guid] = handler;
+                        // assign a global event handler to do all the work
+                        element['on' + type] = handleEvent;
+                }
+        }
+        // a counter used to create unique IDs
+        addEvent.guid = 1;
+
+        function handleEvent(event) {
+                var returnValue = true;
+                // grab the event object (IE uses a global event object)
+                event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
+                // get a reference to the hash table of event handlers
+                var handlers = this.events[event.type];
+                // execute each event handler
+                for (var i in handlers) {
+                        this.$$handleEvent = handlers[i];
+                        if (this.$$handleEvent(event) === false) {
+                                returnValue = false;
+                        }
+                }
+                return returnValue;
+        }
+
+        function fixEvent(event) {
+                // add W3C standard event methods
+                event.preventDefault = fixEvent.preventDefault;
+                event.stopPropagation = fixEvent.stopPropagation;
+                return event;
+        }
+
+        fixEvent.preventDefault = function() {
+                this.returnValue = false;
+        };
+
+        fixEvent.stopPropagation = function() {
+                this.cancelBubble = true;
+        };
+
+        addEvent( document, 'DOMContentLoaded', onLoad, false );
+        addEvent( window, 'load', onLoad, false );
+        addEvent( window, 'resize', onResize, false );
 })( window, document );

src/wp-includes/js/wp-oembed.js

@@ -44 +44 @@
                 }
         };
 
-        window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
-
         function onLoad() {
+                window.removeEventListener( 'load', onLoad, false );
+
                 var isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ),
                         isIE11 = !!navigator.userAgent.match( /Trident.*rv\:11\./ );
 
@@ -63 +63 @@
                 }
         }
 
-        document.addEventListener( 'DOMContentLoaded', onLoad, false );
+        /**
+         * Ensure required features exist.
+         */
+        function featurePass() {
+                if ( ( 'addEventListener' in window ) &&
+                         ( 'querySelector'    in document ) ) {
+                                return true;
+                }
+                return false;
+        }
+
+        if ( featurePass() ) {
+                document.addEventListener( 'DOMContentLoaded', onLoad, false );
+                window.addEventListener( 'load', onLoad, false );
+                window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
+        }
 })( window, document );

src/wp-includes/script-loader.php

@@ -728 +728 @@
         $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-oembed-embed-ie', "/wp-includes/css/wp-oembed-embed-ie$suffix.css" );
+        $styles->add_data( 'wp-oembed-embed-ie', 'conditional', 'lte IE 8' );
 
         // External libraries and friends
         $styles->add( 'imgareaselect',       '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );