Ticket #36175: 36175.diff

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

@@ -720 +720 @@
 
 /* Media controls */
 
-.customize-control-media .current,
-.customize-control-upload .current,
-.customize-control-image .current,
-.customize-control-background .current,
-.customize-control-cropped_image .current,
-.customize-control-site_icon .current,
-.customize-control-header .current {
-        margin-bottom: 8px;
+.customize-control-media .actions,
+.customize-control-upload .actions,
+.customize-control-image .actions,
+.customize-control-background .actions,
+.customize-control-cropped_image .actions,
+.customize-control-site_icon .actions,
+.customize-control-header .actions {
+        margin-top: 8px;
+        clear: both;
 }
 
 .customize-control-header .uploaded {
@@ -853 +854 @@
         top: 8px;
 }
 
+.customize-control .attachment-media-view-image .remove-button {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        margin: 0;
+        padding: 0;
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+}
+
+.customize-control .attachment-media-view-image {
+        position: relative;
+}
+
+.customize-control .attachment-media-view-image .remove-button:before {
+        content: "\f158";
+        font: 20px/1 dashicons;
+        padding: 4px;
+        position: relative;
+        top: 4px;
+}
+
+.customize-control .attachment-media-view-image .remove-button:hover:before {
+        color: #a00;
+}
+
+.customize-control .attachment-media-view-image img {
+        width: auto;
+        max-width: 100%;
+        max-height: 258px; /* Vertically constrain portrait images to avoid taking up too much space in the customizer controls pane. */
+        min-width: 45px; /* Ensure that a clickable portion of the image remains so that it may be edited. */
+}
+
 .customize-control-header .list .inner,
 .customize-control-header .list .inner .dashicons {
         top: 9px;

src/wp-includes/customize/class-wp-customize-media-control.php

@@ -159 +159 @@
                                         <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
                                                 <div class="thumbnail thumbnail-{{ data.attachment.type }}">
                                                         <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
-                                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
+                                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="<?php _e( 'Click to change image.' ); ?>" />
                                                         <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
-                                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
+                                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="<?php _e( 'Click to change image.' ); ?>" />
                                                         <# } else if ( 'audio' === data.attachment.type ) { #>
                                                                 <# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
                                                                         <img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
@@ -190 +190 @@
                                                                 <p class="attachment-title">{{ data.attachment.title }}</p>
                                                         <# } #>
                                                 </div>
+                                                <div class="actions">
+                                                        <# if ( data.canUpload ) { #>
+                                                        <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
+                                                                <# if ( 'image' !== data.attachment.type ) { #>
+                                                                        <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
+                                                                <# } #>
+                                                        <div style="clear:both"></div>
+                                                        <# } #>
+                                                </div>
                                         </div>
                                 </div>
                         </div>
-                        <div class="actions">
-                                <# if ( data.canUpload ) { #>
-                                <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
-                                <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
-                                <div style="clear:both"></div>
-                                <# } #>
-                        </div>
                 <# } else { #>
                         <div class="current">
                                 <div class="container">