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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41985 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-10-24 04:06:23 +00:00
parent ace979586b
commit ac68181c94
3 changed files with 23 additions and 5 deletions

View File

@ -2993,9 +2993,10 @@ function wp_ajax_query_themes() {
* @global WP_Post $post Global $post. * @global WP_Post $post Global $post.
* @global WP_Embed $wp_embed Embed API instance. * @global WP_Embed $wp_embed Embed API instance.
* @global WP_Scripts $wp_scripts * @global WP_Scripts $wp_scripts
* @global int $content_width
*/ */
function wp_ajax_parse_embed() { function wp_ajax_parse_embed() {
global $post, $wp_embed; global $post, $wp_embed, $content_width;
if ( empty( $_POST['shortcode'] ) ) { if ( empty( $_POST['shortcode'] ) ) {
wp_send_json_error(); wp_send_json_error();
@ -3037,6 +3038,15 @@ function wp_ajax_parse_embed() {
} }
} }
// 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'] ) );
}
}
if ( $url && ! $parsed ) { if ( $url && ! $parsed ) {
$parsed = $wp_embed->run_shortcode( $shortcode ); $parsed = $wp_embed->run_shortcode( $shortcode );
} }

View File

@ -85,10 +85,11 @@
* and creates a new instance for every match. * and creates a new instance for every match.
* *
* @param {String} content The string to scan. * @param {String} content The string to scan.
* @param {tinymce.Editor} editor The editor.
* *
* @return {String} The string with markers. * @return {String} The string with markers.
*/ */
setMarkers: function( content ) { setMarkers: function( content, editor ) {
var pieces = [ { content: content } ], var pieces = [ { content: content } ],
self = this, self = this,
instance, current; instance, current;
@ -115,6 +116,7 @@
pieces.push( { content: remaining.substring( 0, result.index ) } ); pieces.push( { content: remaining.substring( 0, result.index ) } );
} }
result.options.editor = editor;
instance = self.createInstance( type, result.content, result.options ); instance = self.createInstance( type, result.content, result.options );
text = instance.loader ? '.' : instance.text; text = instance.loader ? '.' : instance.text;
@ -850,7 +852,7 @@
action: 'parse-media-shortcode', action: 'parse-media-shortcode',
initialize: function() { initialize: function() {
var self = this; var self = this, maxwidth = null;
if ( this.url ) { if ( this.url ) {
this.loader = false; this.loader = false;
@ -859,10 +861,16 @@
} ); } );
} }
// 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, { wp.ajax.post( this.action, {
post_ID: media.view.settings.post.id, post_ID: media.view.settings.post.id,
type: this.shortcode.tag, type: this.shortcode.tag,
shortcode: this.shortcode.string() shortcode: this.shortcode.string(),
maxwidth: maxwidth
} ) } )
.done( function( response ) { .done( function( response ) {
self.render( response ); self.render( response );

View File

@ -88,7 +88,7 @@
} }
} }
event.content = wp.mce.views.setMarkers( event.content ); event.content = wp.mce.views.setMarkers( event.content, editor );
} ); } );
// Replace any new markers nodes with views. // Replace any new markers nodes with views.