Changeset 56639

Timestamp:

09/20/2023 09:01:02 PM (18 months ago)

Author:

joedolson

Message:

Administration: Improve control proximity in theme details modal.

Make the theme details modals in the Customizer and at Appearance > Themes consistent. Change the order of controls so both modals are in the same sequence, center all controls in both desktop and mobile views, and change delete link color to meet color contrast requirements.

Props trishasalas, afercia, melchoyce, karmatosed, cathibosco1, michaelarestad, joedolson, petitphp, mikinc860.
Fixes #59372. See #59371, #40822.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (2 diffs)
• wp-admin/css/themes.css (modified) (3 diffs)
• wp-admin/includes/theme.php (modified) (2 diffs)
• wp-admin/themes.php (modified) (2 diffs)
• wp-includes/css/buttons.css (modified) (1 diff)

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

@@ -2318 +2318 @@
 .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;
@@ -2325 +2325 @@
 .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
     margin-left: 8px;
-}
-
-.control-panel-themes .theme-actions .delete-theme {
-    left: 15px; /* these override themes.css on mobile */
-    right: auto;
-    bottom: auto;
-    position: absolute;
 }
 

trunk/src/wp-admin/css/themes.css

@@ -507 +507 @@
     box-sizing: border-box;
     border-top: 1px solid #f0f0f1;
-}
-
-.theme-overlay .theme-actions a {
-    margin-right: 5px;
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+}
+
+.theme-overlay .theme-actions .button {
     margin-bottom: 5px;
 }
@@ -522 +524 @@
 .broken-themes a.delete-theme,
 .theme-overlay .theme-actions .delete-theme {
-    color: #d63638;
+    color: #b32d2e;
     text-decoration: none;
     border-color: transparent;
@@ -529 +531 @@
 }
 
-.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;
 }
 

trunk/src/wp-admin/includes/theme.php

@@ -1059 +1059 @@
                     <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
@@ -1080 +1075 @@
                         <# } #>
                     <# } #>
+                    </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 ) { #>

trunk/src/wp-admin/themes.php

@@ -1222 +1222 @@
                     $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
                     ?>
+                    <# 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>
                     <# } #>
-                    <# if ( ! data.blockTheme ) { #>
-                        <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
-                    <# } #>
                 <# } else { #>
                     <?php
@@ -1233 +1233 @@
                     $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
                     ?>
+                    <# 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>
-                    <# } #>
-                    <# if ( ! data.blockTheme ) { #>
-                        <a class="button button-primary hide-if-no-customize disabled"><?php _e( 'Live Preview' ); ?></a>
                     <# } #>
                 <# } #>

trunk/src/wp-includes/css/buttons.css

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