Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-21 20:35:00 +02:00
Code Issues Projects Releases Wiki Activity

Administration: Improve control proximity in theme details modal.

Browse Source 
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.
Built from https://develop.svn.wordpress.org/trunk@56639


git-svn-id: http://core.svn.wordpress.org/trunk@56151 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2023-09-20 21:03:20 +00:00
parent 09d8bc184b
commit 48dfebac74
15 changed files with 46 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
wp-admin/css/customize-controls-rtl.css
View File

@ -2318,7 +2318,7 @@ p.customize-section-description {
.wp-customizer .theme-overlay .theme-actions {
text-align: left; /* 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;
}
@ -2327,13 +2327,6 @@ p.customize-section-description {
margin-right: 8px;
}
.control-panel-themes .theme-actions .delete-theme {
right: 15px; /* these override themes.css on mobile */
left: 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. */
}

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/customize-controls.css
View File

@ -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. */
}

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
wp-admin/css/themes-rtl.css
View File

@ -507,10 +507,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-left: 5px;
.theme-overlay .theme-actions .button {
margin-bottom: 5px;
}
@ -522,26 +524,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;
left: 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,

2
wp-admin/css/themes-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
wp-admin/css/themes.css
View File

@ -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,

2
wp-admin/css/themes.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
wp-admin/includes/theme.php
View File

@ -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>

12
wp-admin/themes.php
View File

@ -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>

4
wp-includes/css/buttons-rtl.css
View File

@ -386,6 +386,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-right: 5px;

2
wp-includes/css/buttons-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-includes/css/buttons.css
View File

@ -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;

2
wp-includes/css/buttons.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.4-alpha-56638';
$wp_version = '6.4-alpha-56639';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.