Ticket #21785: 21785-suggested-dimensions.diff

src/wp-admin/js/customize-controls.js

@@ -420 +420 @@
                  * @param {event} event
                  */
                 openMedia: function(event) {
-                        var suggestedWidth, suggestedHeight,
-                                l10n = _wpMediaViewsL10n;
+                        var l10n = _wpMediaViewsL10n;
 
                         event.preventDefault();
 
-                        suggestedWidth = l10n.suggestedWidth.replace('%d', _wpCustomizeHeader.data.width);
-                        suggestedHeight = l10n.suggestedHeight.replace('%d', _wpCustomizeHeader.data.height);
-
-                        /* '<span class="suggested-dimensions">' + suggestedWidth + ' ' + suggestedHeight + '</span>' */
-
                         this.frame = wp.media({
                                 title: l10n.chooseImage,
                                 library: {
@@ -440 +434 @@
                                         close: false
                                 },
                                 multiple: false,
+                                crop: {
+                                        suggestedDimensions: {
+                                                width: _wpCustomizeHeader.data.width,
+                                                height: _wpCustomizeHeader.data.height
+                                        }
+                                },
                                 imgSelectOptions: this.calculateImageSelectOptions
                         });
 

src/wp-includes/js/media-views.js

@@ -5127 +5127 @@
 
                 createSingle: function() {
                         var sidebar = this.sidebar,
-                                single = this.options.selection.single();
+                                single = this.options.selection.single(),
+                                cropOptions = this.controller.options.crop;
 
-                        sidebar.set( 'details', new media.view.Attachment.Details({
-                                controller: this.controller,
-                                model:      single,
-                                priority:   80
-                        }) );
+                        if ( cropOptions ) {
+                                single.set( cropOptions );
+                                sidebar.set( 'suggested', new media.view.Attachment.SuggestedDimensions({
+                                        controller: this.controller,
+                                        model:      single,
+                                        priority:   80
+                                }) );
+                        } else {
+                                sidebar.set( 'details', new media.view.Attachment.Details({
+                                        controller: this.controller,
+                                        model:      single,
+                                        priority:   80
+                                }) );
+                        }
 
                         sidebar.set( 'compat', new media.view.AttachmentCompat({
                                 controller: this.controller,
@@ -5531 +5541 @@
                 template:  media.template('playlist-settings')
         });
 
+        media.view.Attachment.SuggestedDimensions = media.view.Attachment.extend({
+                tagName:   'div',
+                className: 'attachment-details',
+                template:  media.template('crop-suggested-dimensions'),
+
+                initialize: function() {
+                        /**
+                         * @member {wp.media.view.FocusManager}
+                         */
+                        this.focusManager = new media.view.FocusManager({
+                                el: this.el
+                        });
+                        /**
+                         * call 'initialize' directly on the parent class
+                         */
+                        media.view.Attachment.prototype.initialize.apply( this, arguments );
+                },
+                /**
+                 * @returns {wp.media.view..Attachment.Details} Returns itself to allow chaining
+                 */
+                render: function() {
+                        /**
+                         * call 'render' directly on the parent class
+                         */
+                        media.view.Attachment.prototype.render.apply( this, arguments );
+                        this.focusManager.focus();
+                        return this;
+                }
+
+        });
         /**
          * wp.media.view.Attachment.Details
          *

src/wp-includes/media-template.php

@@ -277 +277 @@
                 <# } #>
         </script>
 
+        <script type="text/html" id="tmpl-crop-suggested-dimensions">
+                <h3>
+                        <?php _e('Suggested Dimensions'); ?>
+                </h3>
+                <div class="crop-suggested-dimensions">
+                        {{ data.suggestedDimensions.width }} &times; {{ data.suggestedDimensions.height }}
+                </div>
+                <h3>
+                        <?php _e('Image Details'); ?>
+
+                        <span class="settings-save-status">
+                                <span class="spinner"></span>
+                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
+                        </span>
+                </h3>
+                <div class="attachment-info">
+                        <div class="thumbnail">
+                                <# if ( data.uploading ) { #>
+                                        <div class="media-progress-bar"><div></div></div>
+                                <# } else if ( 'image' === data.type ) { #>
+                                        <img src="{{ data.size.url }}" draggable="false" />
+                                <# } else { #>
+                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
+                                <# } #>
+                        </div>
+                        <div class="details">
+                                <div class="filename">{{ data.filename }}</div>
+                                <div class="uploaded">{{ data.dateFormatted }}</div>
+
+                                <# if ( 'image' === data.type && ! data.uploading ) { #>
+                                        <# if ( data.width && data.height ) { #>
+                                                <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
+                                        <# } #>
+                                <# } #>
+                        </div>
+                </div>
+        </script>
+
         <script type="text/html" id="tmpl-attachment-details">
                 <h3>
                         <?php _e('Attachment Details'); ?>