Ticket #35943: 35943.1.diff

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

@@ -956 +956 @@
 .customize-control-image img,
 .customize-control-background img,
 .customize-control-cropped_image img,
-.customize-control-site_icon img,
 .customize-control-header img {
         width: 100%;
         -webkit-border-radius: 2px;

src/wp-admin/css/site-icon.css

@@ -24 +24 @@
 
 .site-icon-preview .browser-title {
         left: 109px;
+        width: 72px;
+        white-space: nowrap;
 }
 
 .site-icon-preview .app-icon-preview {
@@ -35 +37 @@
         width: 64px;
         margin-top: 5px;
 }
+
+.customize-control-site_icon .favicon-preview {
+        float: left;
+        margin-right: 15px;
+        margin-bottom: 0;
+}
+
+.customize-control-site_icon .favicon,
+.customize-control-site_icon .browser-title {
+        top: 35px;
+ }
+
+.customize-control-site_icon .app-icon {
+        float: left;
+        margin-top: 5px;
+}

src/wp-includes/customize/class-wp-customize-site-icon-control.php

@@ -62 +62 @@
                 <div class="current">
                         <div class="container">
                                 <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }} site-icon-preview">
-                                        <strong><?php _e( 'As a browser icon' ); ?></strong>
                                         <div class="favicon-preview">
-                                                <img src="images/browser.png" class="browser-preview" width="182" height="" alt="" />
+                                                <strong><?php _e( 'Browser icon' ); ?></strong>
+                                                <img src="images/browser.png" class="browser-preview" width="182" alt="<?php esc_attr_e( 'Browser interface preview' ); ?>" />
 
                                                 <div class="favicon">
                                                         <img id="preview-favicon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
                                                 </div>
                                                 <span class="browser-title"><?php bloginfo( 'name' ); ?></span>
                                         </div>
-
-                                        <strong><?php _e( 'As an app icon' ); ?></strong>
-                                        <p class="app-icon-preview">
-                                                <img id="preview-app-icon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
-                                        </p>
+                                        <div class="app-icon">
+                                                <strong><?php _e( 'App icon' ); ?></strong>
+                                                <div class="app-icon-preview">
+                                                        <img id="preview-app-icon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
+                                                </div>
+                                        </div>
                                 </div>
                         </div>
                 </div>