WordPress.org
Get WordPress

Make WordPress Core

Changeset 29615


Ignore:
Timestamp:
08/26/2014 04:45:54 AM (9 years ago)
Author:
wonderboymusic
Message:

MCE View sandboxes:

  • Use a MutationObserver to listen to the body class of the parent editor frame.
  • In wpview_media_sandbox_styles(), only return the MEjs stylesheets.
  • In wp_ajax_parse_media_shortcode() and wp_ajax_parse_embed(), return an object instead of an HTML blob to allow passing body and head separately

Props avryl, azaozz.
Fixes #29048.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r29577 r29615  
    27062706    }
    27072707
    2708     wp_send_json_success( $parsed );
     2708    wp_send_json_success( array(
     2709        'body' => $parsed
     2710    ) );
    27092711}
    27102712
    … …  
    27302732    }
    27312733
    2732     ob_start();
    2733 
     2734    $head = '';
    27342735    $styles = wpview_media_sandbox_styles();
     2736
    27352737    foreach ( $styles as $style ) {
    2736         printf( '<link rel="stylesheet" href="%s"/>', $style );
    2737     }
    2738 
    2739     echo $shortcode;
     2738        $head .= '<link type="text/css" rel="stylesheet" href="' . $style . '">';
     2739    }
    27402740
    27412741    if ( ! empty( $wp_scripts ) ) {
    27422742        $wp_scripts->done = array();
    27432743    }
     2744
     2745    ob_start();
     2746
     2747    echo $shortcode;
    27442748
    27452749    if ( 'playlist' === $_REQUEST['type'] ) {
    … …  
    27512755    }
    27522756
    2753     wp_send_json_success( ob_get_clean() );
    2754 }
     2757    wp_send_json_success( array(
     2758        'head' => $head,
     2759        'body' => ob_get_clean()
     2760    ) );
     2761}

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

    r29579 r29615  
    124124        },
    125125        /* jshint scripturl: true */
    126         setIframes: function ( html ) {
    127             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    128 
    129             if ( html.indexOf( '<script' ) !== -1 ) {
     126        setIframes: function ( head, body ) {
     127            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
     128                importStyles = this.type === 'video' || this.type === 'audio' || this.type === 'playlist';
     129
     130            if ( head || body.indexOf( '<script' ) !== -1 ) {
    130131                this.getNodes( function ( editor, node, content ) {
    131132                    var dom = editor.dom,
     133                        styles = '',
     134                        bodyClasses = editor.getBody().className || '',
    132135                        iframe, iframeDoc, i, resize;
    133136
    134137                    content.innerHTML = '';
     138
     139                    if ( importStyles ) {
     140                        if ( ! wp.mce.views.sandboxStyles ) {
     141                            tinymce.each( dom.$( 'link[rel="stylesheet"]', editor.getDoc().head ), function( link ) {
     142                                if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
     143                                    link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) {
     144
     145                                    styles += dom.getOuterHTML( link ) + '\n';
     146                                }
     147                            });
     148
     149                            wp.mce.views.sandboxStyles = styles;
     150                        } else {
     151                            styles = wp.mce.views.sandboxStyles;
     152                        }
     153                    }
    135154
    136155                    // Seems Firefox needs a bit of time to insert/set the view nodes, or the iframe will fail
    … …  
    157176                                '<head>' +
    158177                                    '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
     178                                    head +
     179                                    styles +
    159180                                    '<style>' +
    160181                                        'html {' +
    … …  
    165186                                        'body#wpview-iframe-sandbox {' +
    166187                                            'background: transparent;' +
    167                                             'padding: 1px 0;' +
    168                                             'margin: -1px 0 0;' +
     188                                            'padding: 1px 0 !important;' +
     189                                            'margin: -1px 0 0 !important;' +
     190                                        '}' +
     191                                        'body#wpview-iframe-sandbox:before,' +
     192                                        'body#wpview-iframe-sandbox:after {' +
     193                                            'display: none;' +
     194                                            'content: "";' +
    169195                                        '}' +
    170196                                    '</style>' +
    171197                                '</head>' +
    172                                 '<body id="wpview-iframe-sandbox">' +
    173                                     html +
     198                                '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' +
     199                                    body +
    174200                                '</body>' +
    175201                            '</html>'
    … …  
    196222                            }
    197223                        }
     224
     225                        if ( importStyles ) {
     226                            editor.on( 'wp-body-class-change', function() {
     227                                iframeDoc.body.className = editor.getBody().className;
     228                            });
     229                        }
    198230                    }, 50 );
    199231                });
    200232            } else {
    201                 this.setContent( html );
     233                this.setContent( body );
    202234            }
    203235        },
    … …  
    561593            setNodes: function () {
    562594                if ( this.parsed ) {
    563                     this.setIframes( this.parsed );
     595                    this.setIframes( this.parsed.head, this.parsed.body );
    564596                } else {
    565597                    this.fail();
    … …  
    580612                    if ( response ) {
    581613                        self.parsed = response;
    582                         self.setIframes( response );
     614                        self.setIframes( response.head, response.body );
    583615                    } else {
    584616                        self.fail( true );

  • trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

    r29564 r29615  
    1 #wpview-iframe-sandbox {
    2     color: #444;
    3     font-family: "Open Sans", sans-serif;
    4     font-size: 13px;
    5     line-height: 1.4em;
    6 }
    7 
    81.mejs-container {
    92    clear: both;

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

    r29606 r29615  
    261261    editor.on( 'init', function() {
    262262        var scrolled = false,
    263             selection = editor.selection;
     263            selection = editor.selection,
     264            MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    264265
    265266        // When a view is selected, ensure content that is being pasted
    … …  
    334335            }
    335336        }, true );
     337
     338        if ( MutationObserver ) {
     339            new MutationObserver( function() {
     340                editor.fire( 'wp-body-class-change' );
     341            } )
     342            .observe( editor.getBody(), {
     343                attributes: true,
     344                attributeFilter: ['class']
     345            } );
     346        }
    336347    });
    337348

  • trunk/src/wp-includes/media.php

    r29564 r29615  
    33113311function wpview_media_sandbox_styles() {
    33123312    $version = 'ver=' . $GLOBALS['wp_version'];
    3313     $open_sans = "//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=$version";
    3314     $dashicons = includes_url( "css/dashicons.css?$version" );
    33153313    $mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
    33163314    $wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );
    33173315
    3318     /**
    3319      * For use by themes that need to override the styling of MediaElement based previews in the Visual editor.
    3320      * Not intended for adding editor-style.css. Ideally these styles will be applied by using
    3321      * the 'seamless' iframe attribute in the future.
    3322      *
    3323      * @since 4.0
    3324      *
    3325      * @param array The URLs to the stylesheets that will be loaded in the sandbox iframe.
    3326      */
    3327     return apply_filters( 'wpview_media_sandbox_styles', array( $open_sans, $dashicons, $mediaelement, $wpmediaelement ) );
    3328 }
     3316    return array( $mediaelement, $wpmediaelement );
     3317}
Note: See TracChangeset for help on using the changeset viewer.