Ticket #59372: 59372.3.3.diff

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

@@ -2317 +2317 @@
 
 .wp-customizer .theme-overlay .theme-actions {
         text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
-        padding: 10px 25px;
+        padding: 10px 25px 5px;
         background: #f0f0f1;
         border-top: 1px solid #dcdcde;
 }
@@ -2326 +2326 @@
         margin-left: 8px;
 }
 
-.control-panel-themes .theme-actions .delete-theme {
-        left: 15px; /* these override themes.css on mobile */
-        right: auto;
-        bottom: auto;
-        position: absolute;
-}
-
 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
         overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
 }

src/wp-admin/css/themes.css

@@ -506 +506 @@
         z-index: 30;
         box-sizing: border-box;
         border-top: 1px solid #f0f0f1;
+        display: flex;
+        justify-content: center;
+        gap: 5px;
 }
 
-.theme-overlay .theme-actions a {
+.theme-overlay .theme-actions .button {
         margin-right: 5px;
         margin-bottom: 5px;
 }
@@ -521 +524 @@
 
 .broken-themes a.delete-theme,
 .theme-overlay .theme-actions .delete-theme {
-        color: #d63638;
+        color: #b32d2e;
         text-decoration: none;
         border-color: transparent;
         box-shadow: none;
         background: transparent;
 }
 
-.theme-overlay .theme-actions .delete-theme {
-        position: absolute;
-        right: 10px;
-        bottom: 5px;
-}
-
 .broken-themes a.delete-theme:hover,
 .broken-themes a.delete-theme:focus,
 .theme-overlay .theme-actions .delete-theme:hover,
 .theme-overlay .theme-actions .delete-theme:focus {
-        background: #d63638;
+        background: #b32d2e;
         color: #fff;
-        border-color: #d63638;
+        border-color: #b32d2e;
+        box-shadow: 0 0 0 1px #b32d2e;
 }
 
 .theme-overlay .theme-actions .active-theme,

src/wp-admin/includes/theme.php

@@ -1058 +1058 @@
                                 <# if ( data.active ) { #>
                                         <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></button>
                                 <# } else if ( 'installed' === data.type ) { #>
-                                        <?php if ( current_user_can( 'delete_themes' ) ) { ?>
-                                                <# if ( data.actions && data.actions['delete'] ) { #>
-                                                        <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
-                                                <# } #>
-                                        <?php } ?>
-
+                                        <div class="theme-inactive-actions">
                                         <# if ( data.blockTheme ) { #>
                                                 <?php
                                                         /* translators: %s: Theme name. */
@@ -1079 +1074 @@
                                                         <button class="button button-primary disabled"><?php _e( 'Live Preview' ); ?></button>
                                                 <# } #>
                                         <# } #>
+                                        </div>
+                                        <?php if ( current_user_can( 'delete_themes' ) ) { ?>
+                                                <# if ( data.actions && data.actions['delete'] ) { #>
+                                                        <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
+                                                <# } #>
+                                        <?php } ?>
                                 <# } else { #>
                                         <# if ( data.compatibleWP && data.compatiblePHP ) { #>
                                                 <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>

src/wp-admin/themes.php

@@ -1221 +1221 @@
                                         /* translators: %s: Theme name. */
                                         $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
                                         ?>
-                                        <# if ( data.actions.activate ) { #>
-                                                <a href="{{{ data.actions.activate }}}" class="button activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
-                                        <# } #>
                                         <# if ( ! data.blockTheme ) { #>
                                                 <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
                                         <# } #>
+                                        <# if ( data.actions.activate ) { #>
+                                                <a href="{{{ data.actions.activate }}}" class="button activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
+                                        <# } #>
                                 <# } else { #>
                                         <?php
                                         /* translators: %s: Theme name. */
                                         $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
                                         ?>
-                                        <# if ( data.actions.activate ) { #>
-                                                <a class="button disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
-                                        <# } #>
                                         <# if ( ! data.blockTheme ) { #>
                                                 <a class="button button-primary hide-if-no-customize disabled"><?php _e( 'Live Preview' ); ?></a>
                                         <# } #>
+                                        <# if ( data.actions.activate ) { #>
+                                                <a class="button disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
+                                        <# } #>
                                 <# } #>
                         </div>
 

src/wp-includes/css/buttons.css

@@ -385 +385 @@
                 vertical-align: inherit;
         }
 
+        .wp-customizer .theme-overlay .theme-actions .button {
+                margin-bottom: 5px;
+        }
+
         .media-modal-content .media-toolbar-primary .media-button {
                 margin-top: 10px;
                 margin-left: 5px;