Ticket #40507: 40507.0.diff

src/wp-admin/css/themes.css

@@ -1520 +1520 @@
         box-shadow: none !important;
         -webkit-border-radius: 0 !important;
         border-radius: 0 !important;
-        z-index: -1; /* Below device buttons */
 }
 
 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
@@ -1622 +1621 @@
         background: #eee;
 }
 
-.wp-full-overlay-footer .devices {
+.wp-full-overlay-footer .devices-wrapper {
         float: right;
+}
+
+.wp-full-overlay-footer .devices {
+        position: relative;
         background: #eee;
         -webkit-box-shadow: -20px 0 10px -5px #eee;
         box-shadow: -20px 0 10px -5px #eee;

src/wp-admin/customize.php

@@ -171 +171 @@
                 </div>
 
                 <div id="customize-footer-actions" class="wp-full-overlay-footer">
-                        <?php $previewable_devices = $wp_customize->get_previewable_devices(); ?>
-                        <?php if ( ! empty( $previewable_devices ) ) : ?>
-                        <div class="devices">
-                                <?php foreach ( (array) $previewable_devices as $device => $settings ) : ?>
-                                        <?php
-                                        if ( empty( $settings['label'] ) ) {
-                                                continue;
-                                        }
-                                        $active = ! empty( $settings['default'] );
-                                        $class = 'preview-' . $device;
-                                        if ( $active ) {
-                                                $class .= ' active';
-                                        }
-                                        ?>
-                                        <button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ) ?>" data-device="<?php echo esc_attr( $device ); ?>">
-                                                <span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span>
-                                        </button>
-                                <?php endforeach; ?>
-                        </div>
-                        <?php endif; ?>
                         <button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php echo esc_attr( _x( 'Hide Controls', 'label for hide controls button without length constraints' ) ); ?>">
                                 <span class="collapse-sidebar-arrow"></span>
                                 <span class="collapse-sidebar-label"><?php _ex( 'Hide Controls', 'short (~12 characters) label for hide controls button' ); ?></span>
                         </button>
+                        <?php $previewable_devices = $wp_customize->get_previewable_devices(); ?>
+                        <?php if ( ! empty( $previewable_devices ) ) : ?>
+                        <div class="devices-wrapper">
+                                <div class="devices">
+                                        <?php foreach ( (array) $previewable_devices as $device => $settings ) : ?>
+                                                <?php
+                                                if ( empty( $settings['label'] ) ) {
+                                                        continue;
+                                                }
+                                                $active = ! empty( $settings['default'] );
+                                                $class = 'preview-' . $device;
+                                                if ( $active ) {
+                                                        $class .= ' active';
+                                                }
+                                                ?>
+                                                <button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ) ?>" data-device="<?php echo esc_attr( $device ); ?>">
+                                                        <span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span>
+                                                </button>
+                                        <?php endforeach; ?>
+                                </div>
+                        </div>
+                        <?php endif; ?>
                 </div>
         </form>
         <div id="customize-preview" class="wp-full-overlay-main"></div>