Make WordPress Core


Ignore:
Timestamp:
09/28/2016 07:53:07 PM (8 years ago)
Author:
afercia
Message:

Administration: Improve the usage of the button CSS classes.

Introduces some consistency in the usage of the button CSS classes, fixes the
focus style for accessibility and responsiveness of the buttons.

  • Adds the button class to all primary buttons make them responsive
  • Removes all secondary-button classes and replaces it with button when needed. button-secondary shouldn't be used and exists just for backward compatibility reasons
  • Replaces classes inside submit_button() with a shorthand for some buttons, and use an empty string for the default button class. Passing button is unnecessary
  • Adjusts get_submit_button() to remove empty items

Props iseulde, dimchik, chris_d2d, mhowell, afercia.
Fixes #27314, #37138, #37448.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/themes.php

    r38325 r38672  
    201201                $menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]);
    202202                if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook))
    203                     $current_theme_actions[] = "<a class='button button-secondary$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
     203                    $current_theme_actions[] = "<a class='button$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
    204204                else
    205                     $current_theme_actions[] = "<a class='button button-secondary$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
     205                    $current_theme_actions[] = "<a class='button$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
    206206            } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
    207207                $menu_file = $item[2];
     
    209209                if ( current_user_can( 'customize' ) ) {
    210210                    if ( 'custom-header' === $menu_file ) {
    211                         $current_theme_actions[] = "<a class='button button-secondary hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
     211                        $current_theme_actions[] = "<a class='button hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
    212212                    } elseif ( 'custom-background' === $menu_file ) {
    213                         $current_theme_actions[] = "<a class='button button-secondary hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
     213                        $current_theme_actions[] = "<a class='button hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
    214214                    }
    215215                }
     
    220220
    221221                if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) {
    222                     $current_theme_actions[] = "<a class='button button-secondary$class' href='{$item[2]}'>{$item[0]}</a>";
     222                    $current_theme_actions[] = "<a class='button$class' href='{$item[2]}'>{$item[0]}</a>";
    223223                } else {
    224                     $current_theme_actions[] = "<a class='button button-secondary$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
     224                    $current_theme_actions[] = "<a class='button$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
    225225                }
    226226            }
     
    282282        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    283283        ?>
    284         <a class="button button-secondary activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
     284        <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    285285        <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    286286            <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
     
    334334                $delete_url = wp_nonce_url( $delete_url, 'delete-theme_' . $stylesheet );
    335335                ?>
    336                 <td><a href="<?php echo esc_url( $delete_url ); ?>" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a></td>
     336                <td><a href="<?php echo esc_url( $delete_url ); ?>" class="button delete-theme"><?php _e( 'Delete' ); ?></a></td>
    337337                <?php
    338338            }
     
    349349                    $install_url = wp_nonce_url( $install_url, 'install-theme_' . $parent_theme_name );
    350350                    ?>
    351                     <td><a href="<?php echo esc_url( $install_url ); ?>" class="button button-secondary install-theme"><?php _e( 'Install Parent Theme' ); ?></a></td>
     351                    <td><a href="<?php echo esc_url( $install_url ); ?>" class="button install-theme"><?php _e( 'Install Parent Theme' ); ?></a></td>
    352352                    <?php
    353353                }
     
    411411            $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    412412            ?>
    413             <a class="button button-secondary activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
     413            <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
    414414            <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
    415415        <# } #>
     
    470470                ?>
    471471                <# if ( data.actions.activate ) { #>
    472                     <a href="{{{ data.actions.activate }}}" class="button button-secondary activate" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
     472                    <a href="{{{ data.actions.activate }}}" class="button activate" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
    473473                <# } #>
    474474                <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
     
    476476
    477477            <# if ( ! data.active && data.actions['delete'] ) { #>
    478                 <a href="{{{ data.actions['delete'] }}}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
     478                <a href="{{{ data.actions['delete'] }}}" class="button delete-theme"><?php _e( 'Delete' ); ?></a>
    479479            <# } #>
    480480        </div>
Note: See TracChangeset for help on using the changeset viewer.