WordPress.org

Make WordPress Core

Changeset 31620


Ignore:
Timestamp:
03/05/15 05:59:10 (5 hours ago)
Author:
wonderboymusic
Message:

Allow inline editing of width and height parameters while previewing an embed in the media modal:

  • Use wp.shortcode() instead of manually constructing a shortcode in views/embed/link
  • Allow a URL to transition to a shortcode (and vice versa) when returning an embed to TinyMCE
  • In WP_Embed, store the last URL and last set of attributes requested in class properties
  • wp_ajax_parse_embed(), allow [embed]s to have attributes. Return attr in the response.

This is a first pass to allow broad testing with recent MCE view changes.

See #31139.

Location:
trunk/src
Files:
7 edited

Legend:

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

    r31619 r31620  
    27092709 
    27102710    $shortcode = wp_unslash( $_POST['shortcode'] ); 
    2711     $url = str_replace( '[embed]', '', str_replace( '[/embed]', '', $shortcode ) ); 
     2711 
     2712    preg_match( '/' . get_shortcode_regex() . '/s', $shortcode, $matches ); 
     2713    $atts = shortcode_parse_atts( $matches[3] ); 
     2714    if ( ! empty( $atts[5] ) ) { 
     2715        $url = $atts[5]; 
     2716    } elseif ( ! empty( $atts['src'] ) ) { 
     2717        $url = $atts['src']; 
     2718    } 
     2719 
    27122720    $parsed = false; 
    27132721    setup_postdata( $post ); 
     
    27152723    $wp_embed->return_false_on_fail = true; 
    27162724 
    2717     if ( is_ssl() && preg_match( '%^\\[embed[^\\]]*\\]http://%i', $shortcode ) ) { 
     2725    if ( is_ssl() && 0 === strpos( $url, 'http://' ) ) { 
    27182726        // Admin is ssl and the user pasted non-ssl URL. 
    27192727        // Check if the provider supports ssl embeds and use that for the preview. 
     
    27682776 
    27692777    wp_send_json_success( array( 
    2770         'body' => $parsed 
     2778        'body' => $parsed, 
     2779        'attr' => $wp_embed->last_attr 
    27712780    ) ); 
    27722781} 
  • trunk/src/wp-includes/class-wp-embed.php

    r31066 r31620  
    1212    public $usecache = true; 
    1313    public $linkifunknown = true; 
     14    public $last_attr = array(); 
     15    public $last_url = ''; 
    1416 
    1517    /** 
     
    135137        } 
    136138 
    137         if ( empty( $url ) ) 
     139        $this->last_url = $url; 
     140 
     141        if ( empty( $url ) ) { 
     142            $this->last_attr = $attr; 
    138143            return ''; 
     144        } 
    139145 
    140146        $rawattr = $attr; 
    141147        $attr = wp_parse_args( $attr, wp_embed_defaults( $url ) ); 
     148 
     149        $this->last_attr = $attr; 
    142150 
    143151        // kses converts & into & and we need to undo this 
  • trunk/src/wp-includes/css/media-views.css

    r31616 r31620  
    19451945} 
    19461946 
     1947.embed-link-settings .setting { 
     1948    display: none; 
     1949} 
     1950 
     1951.embed-link-dimensions:after { 
     1952    content: ''; 
     1953    display: block; 
     1954    clear: both; 
     1955} 
     1956 
     1957.embed-link-dimensions .width, 
     1958.embed-link-dimensions .height { 
     1959    float: left; 
     1960    width: 125px; 
     1961    clear: none; 
     1962    margin-right: 10px; 
     1963} 
     1964 
     1965.embed-link-dimensions input { 
     1966    width: auto; 
     1967    max-width: 110px; 
     1968} 
     1969 
    19471970.image-details .embed-media-settings .setting { 
    19481971    float: none; 
     
    19912014    display: block; 
    19922015    width: 200px; 
     2016    max-width: 100%; 
    19932017    font-size: 13px; 
    19942018    line-height: 24px; 
  • trunk/src/wp-includes/js/mce-view.js

    r31612 r31620  
    820820            var media = wp.media.embed, 
    821821                frame = media.edit( text, !! this.url ), 
    822                 self = this; 
     822                self = this, 
     823                events = 'change:url change:width change:height'; 
    823824 
    824825            this.pausePlayers(); 
    825826 
    826             frame.state( 'embed' ).props.on( 'change:url', function( model, url ) { 
    827                 if ( url ) { 
     827            frame.state( 'embed' ).props.on( events, function( model, url ) { 
     828                if ( url && model.get( 'url' ) ) { 
    828829                    frame.state( 'embed' ).metadata = model.toJSON(); 
    829830                } 
     
    831832 
    832833            frame.state( 'embed' ).on( 'select', function() { 
    833                 if ( self.url ) { 
    834                     update( frame.state( 'embed' ).metadata.url ); 
     834                var data = frame.state( 'embed' ).metadata; 
     835 
     836                if ( data.width ) { 
     837                    delete self.url; 
    835838                } else { 
    836                     update( media.shortcode( frame.state( 'embed' ).metadata ).string() ); 
     839                    self.url = data.url; 
     840                } 
     841 
     842                if ( self.url  ) { 
     843                    update( data.url ); 
     844                } else { 
     845                    update( media.shortcode( data ).string() ); 
    837846                } 
    838847            } ); 
  • trunk/src/wp-includes/js/media/views.js

    r31619 r31620  
    45984598        this.spinner = $('<span class="spinner" />'); 
    45994599        this.$el.append( this.spinner[0] ); 
    4600         this.listenTo( this.model, 'change:url', this.updateoEmbed ); 
    4601     }, 
    4602  
    4603     updateoEmbed: function() { 
     4600        this.listenTo( this.model, 'change:url change:width change:height', this.updateoEmbed ); 
     4601    }, 
     4602 
     4603    updateoEmbed: _.debounce( function() { 
    46044604        var url = this.model.get( 'url' ); 
    46054605 
    4606         this.$('.setting.title').show(); 
    46074606        // clear out previous results 
    46084607        this.$('.embed-container').hide().find('.embed-preview').html(''); 
     
    46154614        this.spinner.show(); 
    46164615 
    4617         setTimeout( _.bind( this.fetch, this ), 500 ); 
    4618     }, 
     4616        this.fetch(); 
     4617    }, 600 ), 
    46194618 
    46204619    fetch: function() { 
     4620        var embed; 
     4621 
    46214622        // check if they haven't typed in 500 ms 
    46224623        if ( $('#embed-url-field').val() !== this.model.get('url') ) { 
     
    46244625        } 
    46254626 
     4627        embed = new wp.shortcode({ 
     4628            tag: 'embed', 
     4629            attrs: _.pick( this.model.attributes, [ 'width', 'height', 'src' ] ), 
     4630            content: this.model.get('url') 
     4631        }); 
     4632 
    46264633        wp.ajax.send( 'parse-embed', { 
    46274634            data : { 
    46284635                post_ID: wp.media.view.settings.post.id, 
    4629                 shortcode: '[embed]' + this.model.get('url') + '[/embed]' 
     4636                shortcode: embed.string() 
    46304637            } 
    46314638        } ).done( _.bind( this.renderoEmbed, this ) ); 
     
    46334640 
    46344641    renderoEmbed: function( response ) { 
    4635         var html = ( response && response.body ) || ''; 
     4642        var html = ( response && response.body ) || '', 
     4643            attr = {}, 
     4644            opts = { silent: true }; 
     4645 
     4646        if ( response && response.attr ) { 
     4647            attr = response.attr; 
     4648 
     4649            _.each( [ 'width', 'height' ], function ( key ) { 
     4650                var $el = this.$( '.setting.' + key ), 
     4651                    value = attr[ key ]; 
     4652 
     4653                if ( value ) { 
     4654                    this.model.set( key, value, opts ); 
     4655                    $el.show().find( 'input' ).val( value ); 
     4656                } else { 
     4657                    this.model.unset( key, opts ); 
     4658                    $el.hide().find( 'input' ).val( '' ); 
     4659                } 
     4660            }, this ); 
     4661        } else { 
     4662            this.model.unset( 'height', opts ); 
     4663            this.model.unset( 'width', opts ); 
     4664        } 
    46364665 
    46374666        this.spinner.hide(); 
    4638  
    4639         this.$('.setting.title').hide(); 
     4667         
    46404668        this.$('.embed-container').show().find('.embed-preview').html( html ); 
    46414669    } 
  • trunk/src/wp-includes/js/media/views/embed/link.js

    r31492 r31620  
    2121        this.spinner = $('<span class="spinner" />'); 
    2222        this.$el.append( this.spinner[0] ); 
    23         this.listenTo( this.model, 'change:url', this.updateoEmbed ); 
     23        this.listenTo( this.model, 'change:url change:width change:height', this.updateoEmbed ); 
    2424    }, 
    2525 
    26     updateoEmbed: function() { 
     26    updateoEmbed: _.debounce( function() { 
    2727        var url = this.model.get( 'url' ); 
    2828 
    29         this.$('.setting.title').show(); 
    3029        // clear out previous results 
    3130        this.$('.embed-container').hide().find('.embed-preview').html(''); 
     
    3837        this.spinner.show(); 
    3938 
    40         setTimeout( _.bind( this.fetch, this ), 500 ); 
    41     }, 
     39        this.fetch(); 
     40    }, 600 ), 
    4241 
    4342    fetch: function() { 
     43        var embed; 
     44 
    4445        // check if they haven't typed in 500 ms 
    4546        if ( $('#embed-url-field').val() !== this.model.get('url') ) { 
     
    4748        } 
    4849 
     50        embed = new wp.shortcode({ 
     51            tag: 'embed', 
     52            attrs: _.pick( this.model.attributes, [ 'width', 'height', 'src' ] ), 
     53            content: this.model.get('url') 
     54        }); 
     55 
    4956        wp.ajax.send( 'parse-embed', { 
    5057            data : { 
    5158                post_ID: wp.media.view.settings.post.id, 
    52                 shortcode: '[embed]' + this.model.get('url') + '[/embed]' 
     59                shortcode: embed.string() 
    5360            } 
    5461        } ).done( _.bind( this.renderoEmbed, this ) ); 
     
    5663 
    5764    renderoEmbed: function( response ) { 
    58         var html = ( response && response.body ) || ''; 
     65        var html = ( response && response.body ) || '', 
     66            attr = {}, 
     67            opts = { silent: true }; 
     68 
     69        if ( response && response.attr ) { 
     70            attr = response.attr; 
     71 
     72            _.each( [ 'width', 'height' ], function ( key ) { 
     73                var $el = this.$( '.setting.' + key ), 
     74                    value = attr[ key ]; 
     75 
     76                if ( value ) { 
     77                    this.model.set( key, value, opts ); 
     78                    $el.show().find( 'input' ).val( value ); 
     79                } else { 
     80                    this.model.unset( key, opts ); 
     81                    $el.hide().find( 'input' ).val( '' ); 
     82                } 
     83            }, this ); 
     84        } else { 
     85            this.model.unset( 'height', opts ); 
     86            this.model.unset( 'width', opts ); 
     87        } 
    5988 
    6089        this.spinner.hide(); 
    61  
    62         this.$('.setting.title').hide(); 
     90         
    6391        this.$('.embed-container').show().find('.embed-preview').html( html ); 
    6492    } 
  • trunk/src/wp-includes/media-template.php

    r31619 r31620  
    820820            <input type="text" class="alignment" data-setting="title" /> 
    821821        </label> 
     822        <div class="embed-link-dimensions"> 
     823            <label class="setting width"> 
     824                <span><?php _e( 'Maximum Width' ); ?></span> 
     825                <input type="text" class="alignment" data-setting="width" /> 
     826            </label> 
     827            <label class="setting height"> 
     828                <span><?php _e( 'Maximum Height' ); ?></span> 
     829                <input type="text" class="alignment" data-setting="height" /> 
     830            </label> 
     831        </div> 
    822832        <div class="embed-container" style="display: none;"> 
    823833            <div class="embed-preview"></div> 
Note: See TracChangeset for help on using the changeset viewer.