WordPress.org
Get WordPress

Make WordPress Core

Changeset 31620


Ignore:
Timestamp:
03/05/2015 05:59:10 AM (10 years 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.