From 89b97ba137836b60524685fbb498f2f4d46edbd4 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Wed, 20 Sep 2023 21:01:02 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@56639 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css |  9 +--------
 src/wp-admin/css/themes.css             | 19 ++++++++-----------
 src/wp-admin/includes/theme.php         | 13 +++++++------
 src/wp-admin/themes.php                 | 12 ++++++------
 src/wp-includes/css/buttons.css         |  4 ++++
 5 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 4bd63832f9..3548f12e9c 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -2317,7 +2317,7 @@ p.customize-section-description {
 
 .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,13 +2326,6 @@ p.customize-section-description {
 	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. */
 }
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index c1a1eb22dd..268cc558f3 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -506,10 +506,12 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	z-index: 30;
 	box-sizing: border-box;
 	border-top: 1px solid #f0f0f1;
+	display: flex;
+	justify-content: center;
+	gap: 5px;
 }
 
-.theme-overlay .theme-actions a {
-	margin-right: 5px;
+.theme-overlay .theme-actions .button {
 	margin-bottom: 5px;
 }
 
@@ -521,26 +523,21 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .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,
diff --git a/src/wp-admin/includes/theme.php b/src/wp-admin/includes/theme.php
index ea73d8650d..b5579052a1 100644
--- a/src/wp-admin/includes/theme.php
+++ b/src/wp-admin/includes/theme.php
@@ -1058,12 +1058,7 @@ function customize_themes_print_templates() {
 				<# 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,6 +1074,12 @@ function customize_themes_print_templates() {
 							<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>
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index d5d8c150e3..80486748f4 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -1221,23 +1221,23 @@ function wp_theme_auto_update_setting_template() {
 					/* 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>
 
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 6da6da51e0..787efacab6 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -385,6 +385,10 @@ TABLE OF CONTENTS:
 		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;