Make WordPress Core

Changeset 62516 for trunk


Ignore:
Timestamp:
06/17/2026 10:56:19 AM (2 months ago)
Author:
wildworks
Message:

Admin Reskin: Fix interactive control heights on mobile.

Give interactive elements a consistent 40px height in the admin mobile viewport on the Add Plugins, Media Library grid, Settings > General, and Add Themes screens.

Follow-up to [61645].

Props abcd95, wildworks.
Fixes #64999.

Location:
trunk/src
Files:
10 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/button/select-mode-toggle.js

    r47122 r62516  
    4141        render: function() {
    4242                Button.prototype.render.apply( this, arguments );
    43                 this.$el.addClass( 'select-mode-toggle-button' );
     43                this.$el.addClass( 'select-mode-toggle-button button-compact' );
    4444                return this;
    4545        },
  • trunk/src/wp-admin/css/common.css

    r62400 r62516  
    14181418                width: 50%;
    14191419        }
     1420
     1421        .wp-filter .search-form input[type="search"] {
     1422                min-height: 40px;
     1423                padding: 0 12px;
     1424        }
     1425
     1426        .wp-filter .search-form select,
     1427        .wp-filter .filter-items select {
     1428                min-height: 40px;
     1429                padding: 0 24px 0 12px;
     1430        }
    14201431}
    14211432
  • trunk/src/wp-admin/css/forms.css

    r62400 r62516  
    17991799        p.search-box input[type="text"] {
    18001800                min-height: 40px;
    1801         }
    1802 
    1803         p.search-box input[type="submit"] {
     1801                padding: 0 12px;
     1802        }
     1803
     1804        p.search-box input[type="submit"].button {
    18041805                margin-bottom: 10px;
    18051806        }
     
    19451946                max-width: 6.25em;
    19461947                margin: 0;
     1948                min-height: 40px;
    19471949        }
    19481950
  • trunk/src/wp-admin/css/list-tables.css

    r62446 r62516  
    15381538}
    15391539
    1540 /* Use compact size for space-constrained plugin cards */
    1541 .plugin-action-buttons li .button {
    1542         min-height: 32px;
    1543         line-height: 2.30769231; /* 30px for 32px min-height */
    1544         padding: 0 12px;
    1545 }
    1546 
    15471540.plugin-card h3 {
    15481541        margin: 0 12px 16px 0;
  • trunk/src/wp-admin/css/media.css

    r62481 r62516  
    374374        .find-box-inside {
    375375                bottom: 57px;
     376        }
     377
     378        #delete_all {
     379                margin-bottom: 0;
    376380        }
    377381}
     
    13971401                float: none;
    13981402                width: 100%;
    1399                 margin-bottom: 20px;
    14001403                display: flex;
    14011404                flex-wrap: nowrap;
     
    14131416                top: 46px;
    14141417                right: 10px;
     1418        }
     1419
     1420        .media-frame.mode-grid .media-toolbar select {
     1421                min-height: 40px;
     1422                padding: 0 24px 0 12px;
     1423        }
     1424
     1425        .media-frame.mode-grid .media-toolbar input[type="search"] {
     1426                min-height: 40px;
     1427                padding: 0 12px;
     1428        }
     1429
     1430        .wp-filter p.search-box {
     1431                margin-bottom: 0;
    14151432        }
    14161433}
  • trunk/src/wp-admin/css/themes.css

    r62294 r62516  
    120120        float: none;
    121121        margin-left: 3px;
    122         min-height: 32px;
    123         line-height: 2.30769231; /* 30px for 32px min-height */
    124         padding: 0 12px;
    125122}
    126123
     
    19691966        float: right;
    19701967        margin: 7px 10px 0 0; /* Vertically center 32px button in 45px header */
     1968        min-height: 32px;
     1969        line-height: 2.30769231; /* 30px for 32px height with 13px font */
    19711970}
    19721971
  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r62400 r62516  
    248248                                && current_user_can( 'edit_others_posts' )
    249249                        ) {
    250                                 submit_button( __( 'Empty Trash' ), 'apply', 'delete_all', false );
     250                                submit_button( __( 'Empty Trash' ), 'apply button-compact', 'delete_all', false );
    251251                        }
    252252                        ?>
     
    352352                                        </label>
    353353                                        <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
    354                                         <input id="search-submit" type="submit" class="button" value="<?php esc_attr_e( 'Search Media' ); ?>">
     354                                        <input id="search-submit" type="submit" class="button button-compact" value="<?php esc_attr_e( 'Search Media' ); ?>">
    355355                                </p>
    356356                        </div>
  • trunk/src/wp-admin/includes/plugin-install.php

    r61456 r62516  
    941941                                        if ( $compatible_php && $compatible_wp && $all_plugin_dependencies_installed && ! empty( $data->download_link ) ) {
    942942                                                $button = sprintf(
    943                                                         '<a class="install-now button" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
     943                                                        '<a class="install-now button button-compact" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
    944944                                                        esc_attr( $data->slug ),
    945945                                                        esc_url( $status['url'] ),
     
    951951                                        } else {
    952952                                                $button = sprintf(
    953                                                         '<button type="button" class="install-now button button-disabled" disabled="disabled">%s</button>',
     953                                                        '<button type="button" class="install-now button button-compact button-disabled" disabled="disabled">%s</button>',
    954954                                                        _x( 'Install Now', 'plugin' )
    955955                                                );
     
    962962                                        if ( $compatible_php && $compatible_wp ) {
    963963                                                $button = sprintf(
    964                                                         '<a class="update-now button aria-button-if-js" data-plugin="%s" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
     964                                                        '<a class="update-now button button-compact aria-button-if-js" data-plugin="%s" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
    965965                                                        esc_attr( $status['file'] ),
    966966                                                        esc_attr( $data->slug ),
     
    973973                                        } else {
    974974                                                $button = sprintf(
    975                                                         '<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
     975                                                        '<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
    976976                                                        _x( 'Update Now', 'plugin' )
    977977                                                );
     
    984984                                if ( is_plugin_active( $status['file'] ) ) {
    985985                                        $button = sprintf(
    986                                                 '<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
     986                                                '<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
    987987                                                _x( 'Active', 'plugin' )
    988988                                        );
     
    10091009
    10101010                                                $button = sprintf(
    1011                                                         '<a href="%1$s" data-name="%2$s" data-slug="%3$s" data-plugin="%4$s" class="button button-primary activate-now" aria-label="%5$s" role="button">%6$s</a>',
     1011                                                        '<a href="%1$s" data-name="%2$s" data-slug="%3$s" data-plugin="%4$s" class="button button-compact button-primary activate-now" aria-label="%5$s" role="button">%6$s</a>',
    10121012                                                        esc_url( $activate_url ),
    10131013                                                        esc_attr( $name ),
     
    10191019                                        } else {
    10201020                                                $button = sprintf(
    1021                                                         '<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
     1021                                                        '<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
    10221022                                                        is_network_admin() ? _x( 'Network Activate', 'plugin' ) : _x( 'Activate', 'plugin' )
    10231023                                                );
     
    10251025                                } else {
    10261026                                        $button = sprintf(
    1027                                                 '<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
     1027                                                '<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
    10281028                                                _x( 'Installed', 'plugin' )
    10291029                                        );
  • trunk/src/wp-admin/theme-install.php

    r62353 r62516  
    409409                                        <# if ( data.activate_url ) { #>
    410410                                                <# if ( ! data.active ) { #>
    411                                                         <a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
     411                                                        <a class="button button-primary button-compact activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    412412                                                <# } else { #>
    413                                                         <button class="button button-primary disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
     413                                                        <button class="button button-primary button-compact disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
    414414                                                <# } #>
    415415                                        <# } #>
     
    417417                                                <# if ( ! data.active ) { #>
    418418                                                        <# if ( ! data.block_theme ) { #>
    419                                                                 <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
     419                                                                <a class="button button-compact load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
    420420                                                        <# } #>
    421421                                                <# } else { #>
    422                                                         <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Customize' ); ?></a>
     422                                                        <a class="button button-compact load-customize" href="{{ data.customize_url }}"><?php _e( 'Customize' ); ?></a>
    423423                                                <# } #>
    424424                                        <# } else { #>
    425                                                 <button class="button preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
     425                                                <button class="button button-compact preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
    426426                                        <# } #>
    427427                                <# } else { #>
     
    431431                                        ?>
    432432                                        <# if ( data.activate_url ) { #>
    433                                                 <a class="button button-primary disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     433                                                <a class="button button-primary button-compact disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
    434434                                        <# } #>
    435435                                        <# if ( data.customize_url ) { #>
    436                                                 <a class="button disabled"><?php _e( 'Live Preview' ); ?></a>
     436                                                <a class="button button-compact disabled"><?php _e( 'Live Preview' ); ?></a>
    437437                                        <# } else { #>
    438                                                 <button class="button disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
     438                                                <button class="button button-compact disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
    439439                                        <# } #>
    440440                                <# } #>
     
    445445                                        $aria_label = sprintf( _x( 'Install %s', 'theme' ), '{{ data.name }}' );
    446446                                        ?>
    447                                         <a class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a>
    448                                         <button class="button preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
     447                                        <a class="button button-primary button-compact theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a>
     448                                        <button class="button button-compact preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
    449449                                <# } else { #>
    450450                                        <?php
     
    452452                                        $aria_label = sprintf( _x( 'Cannot Install %s', 'theme' ), '{{ data.name }}' );
    453453                                        ?>
    454                                         <a class="button button-primary disabled" data-name="{{ data.name }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Install', 'theme' ); ?></a>
    455                                         <button class="button disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
     454                                        <a class="button button-primary button-compact disabled" data-name="{{ data.name }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Install', 'theme' ); ?></a>
     455                                        <button class="button button-compact disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
    456456                                <# } #>
    457457                        <# } #>
     
    488488                                        ?>
    489489                                        <# if ( ! data.active ) { #>
    490                                                 <a class="button button-primary button-compact activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
     490                                                <a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    491491                                        <# } else { #>
    492                                                 <button class="button button-primary button-compact disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
     492                                                <button class="button button-primary disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
    493493                                        <# } #>
    494494                                <# } else { #>
    495                                         <a class="button button-primary button-compact disabled" ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     495                                        <a class="button button-primary disabled" ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
    496496                                <# } #>
    497497                        <# } else { #>
    498498                                <# if ( data.compatible_wp && data.compatible_php ) { #>
    499                                         <a href="{{ data.install_url }}" class="button button-primary button-compact theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></a>
     499                                        <a href="{{ data.install_url }}" class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></a>
    500500                                <# } else { #>
    501                                         <a class="button button-primary button-compact disabled" ><?php _ex( 'Cannot Install', 'theme' ); ?></a>
     501                                        <a class="button button-primary disabled" ><?php _ex( 'Cannot Install', 'theme' ); ?></a>
    502502                                <# } #>
    503503                        <# } #>
  • trunk/src/wp-admin/themes.php

    r61195 r62516  
    382382
    383383                        if ( file_exists( WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}" ) || ! empty( $menu_hook ) ) {
    384                                 $current_theme_actions[] = "<a class='button$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
     384                                $current_theme_actions[] = "<a class='button button-compact$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
    385385                        } else {
    386                                 $current_theme_actions[] = "<a class='button$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
     386                                $current_theme_actions[] = "<a class='button button-compact$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
    387387                        }
    388388                } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
     
    391391                        if ( current_user_can( 'customize' ) ) {
    392392                                if ( 'custom-header' === $menu_file ) {
    393                                         $current_theme_actions[] = "<a class='button hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
     393                                        $current_theme_actions[] = "<a class='button button-compact hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
    394394                                } elseif ( 'custom-background' === $menu_file ) {
    395                                         $current_theme_actions[] = "<a class='button hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
     395                                        $current_theme_actions[] = "<a class='button button-compact hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
    396396                                }
    397397                        }
     
    403403
    404404                        if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) {
    405                                 $current_theme_actions[] = "<a class='button$class' href='{$item[2]}'>{$item[0]}</a>";
     405                                $current_theme_actions[] = "<a class='button button-compact$class' href='{$item[2]}'>{$item[0]}</a>";
    406406                        } else {
    407                                 $current_theme_actions[] = "<a class='button$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
     407                                $current_theme_actions[] = "<a class='button button-compact$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
    408408                        }
    409409                }
     
    610610                                $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
    611611                                ?>
    612                                 <a class="button button-primary customize load-customize hide-if-no-customize"
     612                                <a class="button button-compact button-primary customize load-customize hide-if-no-customize"
    613613                                        href="<?php echo esc_url( $theme['actions']['customize'] ); ?>"
    614614                                        aria-label="<?php echo esc_attr( $customize_aria_label ); ?>"
     
    620620                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    621621                        ?>
    622                         <a class="button activate"
     622                        <a class="button button-compact activate"
    623623                                href="<?php echo esc_url( $theme['actions']['activate'] ); ?>"
    624624                                aria-label="<?php echo esc_attr( $aria_label ); ?>"
     
    631631                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
    632632                                ?>
    633                                 <a class="button button-primary load-customize hide-if-no-customize"
     633                                <a class="button button-compact button-primary load-customize hide-if-no-customize"
    634634                                        href="<?php echo esc_url( $theme['actions']['customize'] ); ?>"
    635635                                        aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
     
    641641                        $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
    642642                        ?>
    643                         <a class="button disabled"
     643                        <a class="button button-compact disabled"
    644644                                aria-label="<?php echo esc_attr( $aria_label ); ?>"
    645645                        ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     
    650650                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
    651651                                ?>
    652                                 <a class="button button-primary hide-if-no-customize disabled"
     652                                <a class="button button-compact button-primary hide-if-no-customize disabled"
    653653                                        aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
    654654                                ><?php _e( 'Live Preview' ); ?></a>
     
    10021002                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
    10031003                                        ?>
    1004                                         <a class="button button-primary customize load-customize hide-if-no-customize"
     1004                                        <a class="button button-compact button-primary customize load-customize hide-if-no-customize"
    10051005                                                href="{{{ data.actions.customize }}}"
    10061006                                                aria-label="<?php echo esc_attr( $customize_aria_label ); ?>"
     
    10131013                                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    10141014                                        ?>
    1015                                         <a class="button activate"
     1015                                        <a class="button button-compact activate"
    10161016                                                href="{{{ data.actions.activate }}}"
    10171017                                                aria-label="<?php echo esc_attr( $aria_label ); ?>"
     
    10221022                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
    10231023                                        ?>
    1024                                         <a class="button button-primary load-customize hide-if-no-customize"
     1024                                        <a class="button button-compact button-primary load-customize hide-if-no-customize"
    10251025                                                href="{{{ data.actions.customize }}}"
    10261026                                                aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
     
    10311031                                        $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
    10321032                                        ?>
    1033                                         <a class="button disabled"
     1033                                        <a class="button button-compact disabled"
    10341034                                                aria-label="<?php echo esc_attr( $aria_label ); ?>"
    10351035                                        ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     
    10391039                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
    10401040                                        ?>
    1041                                         <a class="button button-primary hide-if-no-customize disabled"
     1041                                        <a class="button button-compact button-primary hide-if-no-customize disabled"
    10421042                                                aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
    10431043                                        ><?php _e( 'Live Preview' ); ?></a>
     
    12521252                <div class="theme-actions">
    12531253                        <div class="active-theme">
    1254                                 <a class="button button-primary customize load-customize hide-if-no-customize"
     1254                                <a class="button button-compact button-primary customize load-customize hide-if-no-customize"
    12551255                                        href="{{{ data.actions.customize }}}"
    12561256                                ><?php _e( 'Customize' ); ?></a>
     
    12641264                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
    12651265                                        ?>
    1266                                         <a class="button button-primary load-customize hide-if-no-customize"
     1266                                        <a class="button button-compact button-primary load-customize hide-if-no-customize"
    12671267                                                href="{{{ data.actions.customize }}}"
    12681268                                                aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
     
    12741274                                                $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    12751275                                                ?>
    1276                                                 <a class="button activate"
     1276                                                <a class="button button-compact activate"
    12771277                                                        href="{{{ data.actions.activate }}}"
    12781278                                                        aria-label="<?php echo esc_attr( $aria_label ); ?>"
     
    12841284                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
    12851285                                        ?>
    1286                                         <a class="button button-primary hide-if-no-customize disabled"
     1286                                        <a class="button button-compact button-primary hide-if-no-customize disabled"
    12871287                                                aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
    12881288                                        ><?php _e( 'Live Preview' ); ?></a>
     
    12931293                                                $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
    12941294                                                ?>
    1295                                                 <a class="button disabled"
     1295                                                <a class="button button-compact disabled"
    12961296                                                        aria-label="<?php echo esc_attr( $aria_label ); ?>"
    12971297                                                ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     
    13051305                                $aria_label = sprintf( _x( 'Delete %s', 'theme' ), '{{ data.name }}' );
    13061306                                ?>
    1307                                 <a class="button delete-theme"
     1307                                <a class="button button-compact delete-theme"
    13081308                                        href="{{{ data.actions['delete'] }}}"
    13091309                                        aria-label="<?php echo esc_attr( $aria_label ); ?>"
Note: See TracChangeset for help on using the changeset viewer.