Changeset 41985

Timestamp:

10/24/2017 04:06:23 AM (7 years ago)

Author:

westonruter

Message:

Editor: Specify maxwidth in parse-embed requests based on width of editor iframe so that TinyMCE view embeds fit, particularly in Text widgets.

See #40854, #34115.

Location:

trunk/src

Files:

• wp-admin/includes/ajax-actions.php (modified) (2 diffs)
• wp-includes/js/mce-view.js (modified) (4 diffs)
• wp-includes/js/tinymce/plugins/wpview/plugin.js (modified) (1 diff)

trunk/src/wp-admin/includes/ajax-actions.php

@@ -2994 +2994 @@
  * @global WP_Embed   $wp_embed   Embed API instance.
  * @global WP_Scripts $wp_scripts
+ * @global int        $content_width
  */
 function wp_ajax_parse_embed() {
-    global $post, $wp_embed;
+    global $post, $wp_embed, $content_width;
 
     if ( empty( $_POST['shortcode'] ) ) {
@@ -3035 +3036 @@
         if ( ! $parsed ) {
             $no_ssl_support = true;
+        }
+    }
+
+    // Set $content_width so any embeds fit in the destination iframe.
+    if ( isset( $_POST['maxwidth'] ) && is_numeric( $_POST['maxwidth'] ) && $_POST['maxwidth'] > 0 ) {
+        if ( ! isset( $content_width ) ) {
+            $content_width = intval( $_POST['maxwidth'] );
+        } else {
+            $content_width = min( $content_width, intval( $_POST['maxwidth'] ) );
         }
     }

trunk/src/wp-includes/js/mce-view.js

@@ -86 +86 @@
          *
          * @param {String} content The string to scan.
+         * @param {tinymce.Editor} editor The editor.
          *
          * @return {String} The string with markers.
          */
-        setMarkers: function( content ) {
+        setMarkers: function( content, editor ) {
             var pieces = [ { content: content } ],
                 self = this,
@@ -116 +117 @@
                         }
 
+                        result.options.editor = editor;
                         instance = self.createInstance( type, result.content, result.options );
                         text = instance.loader ? '.' : instance.text;
@@ -851 +853 @@
 
         initialize: function() {
-            var self = this;
+            var self = this, maxwidth = null;
 
             if ( this.url ) {
@@ -860 +862 @@
             }
 
+            // Obtain the target width for the embed.
+            if ( self.editor ) {
+                maxwidth = self.editor.iframeElement.clientWidth - 20; // Minus the sum of horizontal margins and borders.
+            }
+
             wp.ajax.post( this.action, {
                 post_ID: media.view.settings.post.id,
                 type: this.shortcode.tag,
-                shortcode: this.shortcode.string()
+                shortcode: this.shortcode.string(),
+                maxwidth: maxwidth
             } )
             .done( function( response ) {

trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -89 +89 @@
             }
 
-            event.content = wp.mce.views.setMarkers( event.content );
+            event.content = wp.mce.views.setMarkers( event.content, editor );
         } );