WordPress.org

Make WordPress Core

Ticket #27366: 27366-09.patch

File 27366-09.patch, 10.8 KB (added by gcorne, 6 years ago)
  • src/wp-includes/css/media-views.css

    diff --git src/wp-includes/css/media-views.css src/wp-includes/css/media-views.css
    index 7ee5d1e..8a240af 100644
     
    16401640}
    16411641
    16421642.image-details .advanced-toggle {
    1643         font-style: italic;
    16441643        color: #666;
    16451644        text-decoration: none;
    1646         margin: 20px;
    16471645        display: block;
    16481646}
    16491647
     
    16631661        margin-top: 0;
    16641662}
    16651663
     1664.image-details .embed-media-settings .size {
     1665        margin-bottom: 4px;
     1666}
     1667
     1668.image-details .custom-size span {
     1669        display: block;
     1670}
     1671
     1672.image-details .custom-size label {
     1673        display: block;
     1674        float: left;
     1675}
     1676
     1677.image-details .custom-size span small {
     1678        color: #999;
     1679        font-size: inherit;
     1680}
     1681
     1682.image-details .custom-size input {
     1683        width: 5em;
     1684}
     1685
     1686.image-details .custom-size .sep {
     1687        float: left;
     1688        margin: 26px 6px 0 6px;
     1689}
     1690
     1691.image-details .custom-size::after {
     1692    content: '';
     1693        display: table;
     1694    clear: both;
     1695}
     1696
    16661697.media-embed .thumbnail {
    16671698        max-width: 100%;
    16681699        max-height: 200px;
     
    17241755}
    17251756
    17261757.image-details .embed-media-settings .setting input.link-to-custom,
    1727 .image-details .embed-media-settings .link-target {
     1758.image-details .embed-media-settings .link-target,
     1759.image-details .embed-media-settings .custom-size {
    17281760        margin-left: 27%;
    17291761        width: 70%;
    17301762}
  • src/wp-includes/js/media-models.js

    diff --git src/wp-includes/js/media-models.js src/wp-includes/js/media-models.js
    index 19e9021..9aa8031 100644
    window.wp = window.wp || {}; 
    369369                        this.on( 'change:size', this.updateSize, this );
    370370
    371371                        this.setLinkTypeFromUrl();
     372
     373                        this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
     374                        this.set( 'originalUrl', attributes.url );
    372375                },
    373376
    374377                bindAttachmentListeners: function() {
    window.wp = window.wp || {}; 
    447450                                return;
    448451                        }
    449452
     453                        if ( this.get( 'size' ) === 'custom' ) {
     454                                this.set( 'width', this.get( 'customWidth' ) );
     455                                this.set( 'height', this.get( 'customHeight' ) );
     456                                this.set( 'url', this.get( 'originalUrl' ) );
     457                                return;
     458                        }
     459
    450460                        size = this.attachment.get( 'sizes' )[ this.get( 'size' ) ];
    451461
    452462                        if ( ! size ) {
  • src/wp-includes/js/media-views.js

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
    index def3993..377f020 100644
     
    60596059                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    60606060                        'click .edit-attachment': 'editAttachment',
    60616061                        'click .replace-attachment': 'replaceAttachment',
    6062                         'click .advanced-toggle': 'toggleAdvanced'
     6062                        'click .advanced-toggle': 'toggleAdvanced',
     6063                        'change [data-setting="customWidth"]': 'syncCustomSize',
     6064                        'change [data-setting="customHeight"]': 'syncCustomSize',
     6065                        'keyup [data-setting="customWidth"]': 'syncCustomSize',
     6066                        'keyup [data-setting="customHeight"]': 'syncCustomSize'
    60636067                } ),
    60646068                initialize: function() {
    60656069                        // used in AttachmentDisplay.prototype.updateLinkTo
    60666070                        this.options.attachment = this.model.attachment;
    60676071                        this.listenTo( this.model, 'change:url', this.updateUrl );
    60686072                        this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
     6073                        this.listenTo( this.model, 'change:size', this.toggleCustomSize );
    60696074                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    60706075                },
    60716076
     
    61236128                        }
    61246129                },
    61256130
     6131                toggleCustomSize: function() {
     6132                        if ( this.model.get( 'size' ) !== 'custom' ) {
     6133                                this.$( '.custom-size' ).addClass('hidden');
     6134                        } else {
     6135                                this.$( '.custom-size' ).removeClass('hidden');
     6136                        }
     6137                },
     6138
     6139                syncCustomSize: function( event ) {
     6140                        var dimension = $( event.target ).data('setting'),
     6141                                value;
     6142
     6143                        if ( dimension === 'customWidth' ) {
     6144                                value = Math.round( 1 / this.model.get( 'aspectRatio' ) * $( event.target ).val() );
     6145                                this.model.set( 'customHeight', value, { silent: true } );
     6146                                this.$( '[data-setting="customHeight"]' ).val( value );
     6147                        } else {
     6148                                value = Math.round( this.model.get( 'aspectRatio' ) * $( event.target ).val() );
     6149                                this.$( '[data-setting="customWidth"]' ).val( value );
     6150                                this.model.set( 'customWidth', value, { silent: true } );
     6151                        }
     6152                },
     6153
    61266154                toggleAdvanced: function( event ) {
    61276155                        var $advanced = $( event.target ).closest( '.advanced' );
    61286156                        event.preventDefault();
  • src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    diff --git src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
    index a5af171..9ca0b19 100644
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    123123                        url: false,
    124124                        height: '',
    125125                        width: '',
    126                         size: false,
     126                        customWidth: '',
     127                        customHeight: '',
     128                        size: 'custom',
    127129                        caption: '',
    128130                        alt: '',
    129131                        align: 'none',
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    139141                metadata.url = dom.getAttrib( imageNode, 'src' );
    140142                metadata.alt = dom.getAttrib( imageNode, 'alt' );
    141143                metadata.title = dom.getAttrib( imageNode, 'title' );
    142 
    143144                width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
    144145                height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
    145 
    146146                metadata.width = parseInt( width, 10 );
    147147                metadata.height = parseInt( height, 10 );
     148                metadata.customWidth = metadata.width;
     149                metadata.customHeight = metadata.height;
    148150
    149151                classes = tinymce.explode( imageNode.className, ' ' );
    150152                extraClasses = [];
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    200202        }
    201203
    202204        function updateImage( imageNode, imageData ) {
    203                 var classes, className, width, node, html, parent, wrap,
    204                         captionNode, dd, dl, id, attrs, linkAttrs,
     205                var classes, className, node, html, parent, wrap,
     206                        captionNode, dd, dl, id, attrs, linkAttrs, width, height,
    205207                        dom = editor.dom;
    206208
    207209                classes = tinymce.explode( imageData.extraClasses, ' ' );
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    216218
    217219                if ( imageData.attachment_id ) {
    218220                        classes.push( 'wp-image-' + imageData.attachment_id );
    219                         if ( imageData.size ) {
     221                        if ( imageData.size && imageData.size !== 'custom' ) {
    220222                                classes.push( 'size-' + imageData.size );
    221223                        }
    222224                }
    223225
     226                width = imageData.width;
     227                height = imageData.height;
     228
     229                if ( imageData.size === 'custom' ) {
     230                        width = imageData.customWidth;
     231                        height = imageData.customHeight;
     232                }
     233
    224234                attrs = {
    225235                        src: imageData.url,
    226                         width: imageData.width || null,
    227                         height: imageData.height || null,
     236                        width: width || null,
     237                        height: height || null,
    228238                        alt: imageData.alt,
    229239                        title: imageData.title || null,
    230240                        'class': classes.join( ' ' ) || null
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    239249                        'class': imageData.linkClassName || null
    240250                };
    241251
    242                 if ( imageNode.parentNode.nodeName === 'A' ) {
     252                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
    243253                        if ( imageData.linkUrl ) {
    244254                                dom.setAttribs( imageNode.parentNode, linkAttrs );
    245255                        } else {
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    247257                        }
    248258                } else if ( imageData.linkUrl ) {
    249259                        html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
    250                         dom.outerHTML( imageNode, html );
     260                        dom.setOuterHTML( imageNode, html );
     261                        // Grab the updated image node
     262                        imageNode = dom.select( 'img[data-wp-imgselect]' )[0];
    251263                }
    252264
    253265                captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
    254266
    255                 if ( imageNode.parentNode.nodeName === 'A' ) {
     267                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
    256268                        node = imageNode.parentNode;
    257269                } else {
    258270                        node = imageNode;
    259271                }
    260272
    261273                if ( imageData.caption ) {
    262                         width = parseInt( imageData.width, 10 );
     274
    263275                        id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
    264276                        className = 'wp-caption align' + imageData.align;
    265277
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    312324                }
    313325
    314326                editor.nodeChanged();
    315                 // refresh the toolbar
     327                // Refresh the toolbar
    316328                addToolbar( imageNode );
    317329        }
    318330
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    324336                        return;
    325337                }
    326338
    327                 editor.undoManager.add();
    328 
    329339                frame = wp.media({
    330340                        frame: 'image',
    331341                        state: 'image-details',
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    333343                } );
    334344
    335345                callback = function( imageData ) {
    336                         updateImage( img, imageData );
    337346                        editor.focus();
     347                        editor.undoManager.transact( function() {
     348                                updateImage( img, imageData );
     349                        } );
    338350                        frame.detach();
    339351                };
    340352
  • src/wp-includes/media-template.php

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
    index aa2e11f..fc11870 100644
    function wp_print_media_templates() { 
    689689
    690690                                        <# if ( data.attachment ) { #>
    691691                                                <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
    692                                                         <label class="setting">
     692                                                        <label class="setting size">
    693693                                                                <span><?php _e('Size'); ?></span>
    694694                                                                <select class="size" name="size"
    695695                                                                        data-setting="size"
    function wp_print_media_templates() { 
    705705                                                                                'full'      => __('Full Size'),
    706706                                                                        ) );
    707707
     708
    708709                                                                        foreach ( $sizes as $value => $name ) : ?>
    709710                                                                                <#
    710711                                                                                var size = data.sizes['<?php echo esc_js( $value ); ?>'];
    711712                                                                                if ( size ) { #>
    712                                                                                         <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
     713                                                                                        <option value="<?php echo esc_attr( $value ); ?>">
    713714                                                                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
    714715                                                                                        </option>
    715716                                                                                <# } #>
    716717                                                                        <?php endforeach; ?>
     718                                                                        <option value="<?php echo esc_attr( 'custom' ); ?>">
     719                                                                                <?php _e( 'Custom Size' ); ?>
     720                                                                        </option>
    717721                                                                </select>
    718722                                                        </label>
    719723                                                <# } #>
     724                                                        <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
     725                                                                <label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
     726                                                        </div>
    720727                                        <# } #>
    721728
    722729                                        <div class="setting link-to">
    function wp_print_media_templates() { 
    744751                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
    745752                                        </div>
    746753                                        <div class="advanced">
    747                                                 <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
     754                                                <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
    748755                                                <div class="hidden">
    749756                                                        <label class="setting title-text">
    750757                                                                <span><?php _e('Image Title Attribute'); ?></span>