Ticket #42215: 42215.2.diff

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

@@ -2020 +2020 @@
         display: none; /* Hide "installed" notice on installed themes tab. */
 }
 
-.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
-        margin: 0 0 0 8px;
-}
-
 .customize-control-theme .theme {
         width: 100%;
         margin: 0;
@@ -2094 +2090 @@
         font-size: 15px;
 }
 
+.theme-id-container {
+        position: relative;
+}
+
+.theme-browser .theme.active .theme-actions,
+.wp-customizer .theme-browser .theme .theme-actions {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        padding: 0 15px;
+}
+
 #customize-controls .theme-overlay .theme-name {
         font-size: 32px;
 }
@@ -2118 +2127 @@
 
 .themes-filter-bar .wp-filter-search {
         line-height: 25px;
-        padding: 3px 5px;
+        padding: 6px 10px 6px 30px;
         max-width: 100%;
         width: 40%;
         min-width: 300px;
         position: absolute;
         top: 6px;
         left: 25px;
+        height: 32px;
+        margin: 1px 0;
 }
 
 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
@@ -2233 +2244 @@
         .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
                 left: 0;
                 top: 0;
-                height: 42px;
+                height: 46px;
                 width: 26px;
                 display: block;
                 line-height: 46px;
@@ -2253 +2264 @@
         .showing-themes #customize-header-actions {
                 display: none;
         }
+
+        #customize-controls {
+                width: 100%;
+        }
 }
 
 /* Details View */
@@ -2363 +2378 @@
                 top: 0;
                 bottom: 0;
         }
+
+        .wp-customizer .theme-browser .themes {
+                padding-right: 25px;
+        }
 }
 
 /* Handle cheaters. */
@@ -2677 +2696 @@
 }
 
 #available-menu-items-search .search-icon:after,
-#available-widgets-filter .search-icon:after {
+.themes-filter-bar .search-icon:after {
         content: "\f179";
         font: normal 20px/1 dashicons;
         vertical-align: middle;
@@ -2685 +2704 @@
         -moz-osx-font-smoothing: grayscale;
 }
 
+.themes-filter-bar .search-icon {
+        position: absolute;
+        top: 7px;
+        left: 26px;
+        z-index: 1;
+        color: #72777c;
+        height: 30px;
+        width: 30px;
+        line-height: 2;
+        text-align: center;
+}
+
 .no-widgets-found-message {
         display: none;
         margin: 0;
@@ -2797 +2828 @@
         .media-widget-control .media-widget-buttons .button.select-media {
                 margin-top: 12px;
         }
+
+        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
+                margin: 3px 0 3px 25px;
+        }
 }
 
 @media screen and ( max-width: 1200px ) {
@@ -2808 +2843 @@
 }
 
 @media screen and ( max-width: 640px ) {
-        #customize-controls {
-                width: 100%;
-        }
 
         .wp-full-overlay.expanded,
         .outer-section-open .wp-full-overlay.expanded {
@@ -2846 +2878 @@
         }
 
         #customize-footer-actions,
-        #customize-preview,
+        /*#customize-preview,*/
         .customize-controls-preview-toggle .controls,
         .preview-only .wp-full-overlay-sidebar-content,
         .preview-only .customize-controls-preview-toggle .preview {
@@ -2879 +2911 @@
                 display: block;
         }
 
-        #customize-preview {
-                top: 45px;
-                bottom: 0;
-                height: auto;
+        .wp-full-overlay.expanded {
+                margin-left: 300px;
         }
 
         .wp-core-ui.wp-customizer .button {
@@ -2891 +2921 @@
                 font-size: 14px;
                 vertical-align: middle;
                 height: auto;
-                margin-bottom: 4px;
-                margin-top: 12px;
         }
 
         #publish-settings {
@@ -2974 +3002 @@
         .reordering .reorder-done {
                 padding: 8px;
         }
+
+        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
+                margin: 0;
+        }
 }

src/wp-admin/css/themes.css

@@ -97 +97 @@
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         opacity: 0;
         transition: opacity 0.1s ease-in-out;
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        height: 38px;
-        padding: 9px 10px 0 10px;
+        height: auto;
         background: rgba(244, 244, 244, 0.7);
         border-left: 1px solid rgba(0,0,0,0.05);
 }

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

@@ -99 +99 @@
                         <# } #>
 
                         <# if ( data.theme.active ) { #>
-                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
-                                        <?php
-                                        /* translators: %s: theme name */
-                                        printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
-                                        ?>
-                                </h3>
-                                <div class="theme-actions">
-                                        <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
-                                </div>
+                <div class="theme-id-container">
+                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
+                        <?php
+                        /* translators: %s: theme name */
+                        printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
+                        ?>
+                    </h3>
+                    <div class="theme-actions">
+                        <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
+                    </div>
+                </div>
                                 <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
                         <# } else if ( 'installed' === data.theme.type ) { #>
-                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
-                                <div class="theme-actions">
-                                        <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
-                                </div>
+                <div class="theme-id-container">
+                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
+                    <div class="theme-actions">
+                        <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
+                    </div>
+                </div>
                                 <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
                         <# } else { #>
-                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
-                                <div class="theme-actions">
-                                        <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
-                                </div>
+                <div class="theme-id-container">
+                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
+                    <div class="theme-actions">
+                        <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
+                    </div>
+                </div>
                         <# } #>
                 </div>
         <?php

src/wp-includes/customize/class-wp-customize-themes-section.php

@@ -114 +114 @@
                         <div class="search-form">
                                 <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
                                 <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
-                                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                <div class="search-icon" aria-hidden="true"></div>
+                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
                         </div>
                         <button type="button" class="button feature-filter-toggle">
                                 <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
@@ -144 +145 @@
                         <div class="themes-filter-container">
                                 <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
                                 <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
-                                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                <div class="search-icon" aria-hidden="true"></div>
+                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
                         </div>
                 <# } #>
                 <div class="filter-themes-count">