[wp-trac] [WordPress Trac] #44632: Properly enqueue wp-embed

[WordPress Trac]

#44632: Properly enqueue wp-embed
-------------------------------------+-------------------------------------
 Reporter:  alpipego                 |       Owner:  westonruter
     Type:  enhancement              |      Status:  accepted
 Priority:  normal                   |   Milestone:  5.9
Component:  Embeds                   |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-unit-      |     Focuses:  javascript,
  tests                              |  performance
-------------------------------------+-------------------------------------

Comment (by westonruter):

 Replying to [comment:14 swissspidy]:

 > The host script (`wp-embed.js`) could send a `read` `postMessage` to all
 the embeds on the page once it's loaded. So the individual embeds could
 respond to that by sending the height message in reply.

 So it sounds like (1) iframed windows should send the `height` as soon as
 they load, (2) they should also send the `height` when the parent page
 requests it (in addition to when the page is resized):


 {{{#!diff
 --- a/src/js/_enqueues/wp/embed.js
 +++ b/src/js/_enqueues/wp/embed.js
 @@ -104,7 +104,8 @@
                 for ( i = 0; i < iframes.length; i++ ) {
                         source = iframes[ i ];

 -                       if ( ! source.getAttribute( 'data-secret' ) ) {
 +                       secret = source.getAttribute( 'data-secret' );
 +                       if ( ! secret ) {
                                 /* Add secret to iframe */
                                 secret = Math.random().toString( 36
 ).substr( 2, 10 );
                                 source.src += '#?secret=' + secret;
 @@ -117,6 +118,11 @@
                                 iframeClone.removeAttribute( 'security' );
                                 source.parentNode.replaceChild(
 iframeClone, source );
                         }
 +
 +                       source.contentWindow.postMessage( {
 +                               message: 'ready',
 +                               secret: secret
 +                       } );
                 }
         }
 }}}

 And then `wp-embed-template.js` would to add a `message` event listener to
 listen for `ready`.


 If the height didn't change, then the message should no-op, doing
 something like this:


 {{{#!diff
 --- a/src/js/_enqueues/wp/embed.js
 +++ b/src/js/_enqueues/wp/embed.js
 @@ -57,10 +57,10 @@
                                 continue;
                         }

 -                       source.removeAttribute( 'style' );
 -
                         /* Resize the iframe on request. */
 -                       if ( 'height' === data.message ) {
 +                       if ( 'height' === data.message && data.value !==
 source.height ) {
 +                               source.removeAttribute( 'style' );
 +
                                 height = parseInt( data.value, 10 );
                                 if ( height > 1000 ) {
                                         height = 1000;
 }}}


 The new `ready` message being sent from the host to the post embed would
 depend, naturally, on both WordPress sites being updated to the latest
 version of WordPress.

 Is this what you have in mind?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44632#comment:16>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform