Make WordPress Core

Changeset 56639


Ignore:
Timestamp:
09/20/2023 09:01:02 PM (8 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r55150 r56639  
    23182318.wp-customizer .theme-overlay .theme-actions {
    23192319    text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
    2320     padding: 10px 25px;
     2320    padding: 10px 25px 5px;
    23212321    background: #f0f0f1;
    23222322    border-top: 1px solid #dcdcde;
     
    23252325.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
    23262326    margin-left: 8px;
    2327 }
    2328 
    2329 .control-panel-themes .theme-actions .delete-theme {
    2330     left: 15px; /* these override themes.css on mobile */
    2331     right: auto;
    2332     bottom: auto;
    2333     position: absolute;
    23342327}
    23352328
  • trunk/src/wp-admin/css/themes.css

    r56279 r56639  
    507507    box-sizing: border-box;
    508508    border-top: 1px solid #f0f0f1;
    509 }
    510 
    511 .theme-overlay .theme-actions a {
    512     margin-right: 5px;
     509    display: flex;
     510    justify-content: center;
     511    gap: 5px;
     512}
     513
     514.theme-overlay .theme-actions .button {
    513515    margin-bottom: 5px;
    514516}
     
    522524.broken-themes a.delete-theme,
    523525.theme-overlay .theme-actions .delete-theme {
    524     color: #d63638;
     526    color: #b32d2e;
    525527    text-decoration: none;
    526528    border-color: transparent;
     
    529531}
    530532
    531 .theme-overlay .theme-actions .delete-theme {
    532     position: absolute;
    533     right: 10px;
    534     bottom: 5px;
    535 }
    536 
    537533.broken-themes a.delete-theme:hover,
    538534.broken-themes a.delete-theme:focus,
    539535.theme-overlay .theme-actions .delete-theme:hover,
    540536.theme-overlay .theme-actions .delete-theme:focus {
    541     background: #d63638;
     537    background: #b32d2e;
    542538    color: #fff;
    543     border-color: #d63638;
     539    border-color: #b32d2e;
     540    box-shadow: 0 0 0 1px #b32d2e;
    544541}
    545542
  • trunk/src/wp-admin/includes/theme.php

    r56635 r56639  
    10591059                    <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></button>
    10601060                <# } else if ( 'installed' === data.type ) { #>
    1061                     <?php if ( current_user_can( 'delete_themes' ) ) { ?>
    1062                         <# if ( data.actions && data.actions['delete'] ) { #>
    1063                             <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
    1064                         <# } #>
    1065                     <?php } ?>
    1066 
     1061                    <div class="theme-inactive-actions">
    10671062                    <# if ( data.blockTheme ) { #>
    10681063                        <?php
     
    10801075                        <# } #>
    10811076                    <# } #>
     1077                    </div>
     1078                    <?php if ( current_user_can( 'delete_themes' ) ) { ?>
     1079                        <# if ( data.actions && data.actions['delete'] ) { #>
     1080                            <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
     1081                        <# } #>
     1082                    <?php } ?>
    10821083                <# } else { #>
    10831084                    <# if ( data.compatibleWP && data.compatiblePHP ) { #>
  • trunk/src/wp-admin/themes.php

    r56600 r56639  
    12221222                    $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    12231223                    ?>
     1224                    <# if ( ! data.blockTheme ) { #>
     1225                        <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
     1226                    <# } #>
    12241227                    <# if ( data.actions.activate ) { #>
    12251228                        <a href="{{{ data.actions.activate }}}" class="button activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    12261229                    <# } #>
    1227                     <# if ( ! data.blockTheme ) { #>
    1228                         <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
    1229                     <# } #>
    12301230                <# } else { #>
    12311231                    <?php
     
    12331233                    $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
    12341234                    ?>
     1235                    <# if ( ! data.blockTheme ) { #>
     1236                        <a class="button button-primary hide-if-no-customize disabled"><?php _e( 'Live Preview' ); ?></a>
     1237                    <# } #>
    12351238                    <# if ( data.actions.activate ) { #>
    12361239                        <a class="button disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
    1237                     <# } #>
    1238                     <# if ( ! data.blockTheme ) { #>
    1239                         <a class="button button-primary hide-if-no-customize disabled"><?php _e( 'Live Preview' ); ?></a>
    12401240                    <# } #>
    12411241                <# } #>
  • trunk/src/wp-includes/css/buttons.css

    r52171 r56639  
    386386    }
    387387
     388    .wp-customizer .theme-overlay .theme-actions .button {
     389        margin-bottom: 5px;
     390    }
     391
    388392    .media-modal-content .media-toolbar-primary .media-button {
    389393        margin-top: 10px;
Note: See TracChangeset for help on using the changeset viewer.