WordPress.org

Make WordPress Core

Changeset 34991


Ignore:
Timestamp:
10/09/2015 06:04:18 PM (4 years ago)
Author:
afercia
Message:

Administration: Convert H5 usage in Screen Options to use fieldsets and legends.

These H5 (heading level 5) don't allow for a good headings hierarchy and shouldn't be headings in the first place. Each group of options has now its own fieldset and legend.
In render_screen_options(), introduce two new "render" methods: render_meta_boxes_preferences() and render_list_table_columns_preferences() for consistency with already existing render methods and cleaner code.

Props joedolson, afercia.
Fixes #33646.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r34913 r34991  
    15711571}
    15721572
    1573 #screen-options-wrap h5,
     1573#screen-options-wrap h5, /* Back-compat for old plugins */
     1574#screen-options-wrap legend,
    15741575#contextual-help-wrap h5 {
    1575     margin: 8px 0;
    1576     font-size: 13px;
     1576    margin: 0;
     1577    padding: 8px 0;
     1578    font-size: 13px;
     1579    font-weight: 600;
     1580}
     1581
     1582.ie8 #screen-options-wrap legend {
     1583    color: inherit;
    15771584}
    15781585
     
    15831590}
    15841591
     1592#number-of-columns {
     1593    display: inline-block;
     1594    vertical-align: middle;
     1595    line-height: 30px;
     1596}
     1597
     1598.metabox-prefs input[type=checkbox] {
     1599    margin-top: 0;
     1600    margin-right: 6px;
     1601}
     1602
     1603.metabox-prefs label input,
    15851604.metabox-prefs label input[type=checkbox] {
    1586     margin-top: -4px;
    1587     margin-right: 6px;
    1588 }
    1589 
    1590 .metabox-prefs label input {
    1591     margin: 0 5px 0 2px;
     1605    margin: -4px 5px 0 0;
    15921606}
    15931607
    15941608.metabox-prefs .columns-prefs label input {
    1595     margin: 0 2px;
     1609    margin: -1px 2px 0 0;
    15961610}
    15971611
    15981612.metabox-prefs label a {
    15991613    display: none;
    1600 }
    1601 
    1602 .metabox-prefs .screen-options {
    1603     padding-top: 10px;
    16041614}
    16051615
     
    16181628    line-height: 28px;
    16191629    padding-right: 0;
     1630}
     1631
     1632.screen-options + .screen-options {
     1633    margin-top: 10px;
    16201634}
    16211635
     
    19011915
    19021916.columns-prefs label {
    1903     padding: 0 5px;
     1917    padding: 0 10px 0 0;
    19041918}
    19051919
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r34829 r34991  
    350350    background: #fff;
    351351    border-top: 1px solid #ddd;
    352     padding: 4px 15px 0;
     352    padding: 4px 15px 15px;
    353353}
    354354
  • trunk/src/wp-admin/includes/class-wp-screen.php

    r34891 r34991  
    919919                break;
    920920            case 'post' :
    921                 $expand = '<div class="editor-expand hidden"><label for="editor-expand-toggle">';
     921                $expand = '<fieldset class="editor-expand hidden"><legend>' . __( 'Additional settings' ) . '</legend><label for="editor-expand-toggle">';
    922922                $expand .= '<input type="checkbox" id="editor-expand-toggle"' . checked( get_user_setting( 'editor_expand', 'on' ), 'on', false ) . ' />';
    923                 $expand .= __( 'Enable full-height editor and distraction-free functionality.' ) . '</label></div>';
     923                $expand .= __( 'Enable full-height editor and distraction-free functionality.' ) . '</label></fieldset>';
    924924                $this->_screen_settings = $expand;
    925925                break;
     
    970970    public function render_screen_options( $options = array() ) {
    971971        global $wp_meta_boxes;
     972
    972973        $options = wp_parse_args( $options, array(
    973974            'wrap' => true,
    974975        ) );
    975976
    976         $columns = get_column_headers( $this );
    977         $hidden  = get_hidden_columns( $this );
    978 
    979         ?>
    980         <?php if ( $options['wrap'] ) : ?>
    981             <div id="screen-options-wrap" class="hidden" tabindex="-1" aria-label="<?php esc_attr_e('Screen Options Tab'); ?>">
    982         <?php endif; ?>
    983         <form id="adv-settings" method="post">
    984         <?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?>
    985             <h5><?php _e( 'Show on screen' ); ?></h5>
    986         <?php
    987         endif;
    988 
    989         if ( isset( $wp_meta_boxes[ $this->id ] ) ) : ?>
    990             <div class="metabox-prefs">
    991                 <?php
    992                     meta_box_prefs( $this );
    993 
    994                     if ( 'dashboard' === $this->id && has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) {
    995                         if ( isset( $_GET['welcome'] ) ) {
    996                             $welcome_checked = empty( $_GET['welcome'] ) ? 0 : 1;
    997                             update_user_meta( get_current_user_id(), 'show_welcome_panel', $welcome_checked );
    998                         } else {
    999                             $welcome_checked = get_user_meta( get_current_user_id(), 'show_welcome_panel', true );
    1000                             if ( 2 == $welcome_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) )
    1001                                 $welcome_checked = false;
    1002                         }
    1003                         echo '<label for="wp_welcome_panel-hide">';
    1004                         echo '<input type="checkbox" id="wp_welcome_panel-hide"' . checked( (bool) $welcome_checked, true, false ) . ' />';
    1005                         echo _x( 'Welcome', 'Welcome panel' ) . "</label>\n";
    1006                     }
    1007                 ?>
    1008                 <br class="clear" />
    1009             </div>
    1010             <?php endif;
    1011             if ( $columns ) :
    1012                 if ( ! empty( $columns['_title'] ) ) : ?>
    1013             <h5><?php echo $columns['_title']; ?></h5>
    1014             <?php endif; ?>
    1015             <div class="metabox-prefs">
    1016                 <?php
    1017                 $special = array('_title', 'cb', 'comment', 'media', 'name', 'title', 'username', 'blogname');
    1018 
    1019                 foreach ( $columns as $column => $title ) {
    1020                     // Can't hide these for they are special
    1021                     if ( in_array( $column, $special ) )
    1022                         continue;
    1023                     if ( empty( $title ) )
    1024                         continue;
    1025 
    1026                     if ( 'comments' == $column )
    1027                         $title = __( 'Comments' );
    1028                     $id = "$column-hide";
    1029                     echo '<label for="' . $id . '">';
    1030                     echo '<input class="hide-column-tog" name="' . $id . '" type="checkbox" id="' . $id . '" value="' . $column . '"' . checked( !in_array($column, $hidden), true, false ) . ' />';
    1031                     echo "$title</label>\n";
    1032                 }
    1033                 ?>
    1034                 <br class="clear" />
    1035             </div>
    1036         <?php endif;
    1037 
     977        $wrapper_start = $wrapper_end = $form_start = $form_end = '';
     978
     979        // Output optional wrapper.
     980        if ( $options['wrap'] ) {
     981            $wrapper_start = '<div id="screen-options-wrap" class="hidden" tabindex="-1" aria-label="' . esc_attr__( 'Screen Options Tab' ) . '">';
     982            $wrapper_end = '</div>';
     983        }
     984
     985        // Don't output the form and nonce for the widgets accessibility mode links.
     986        if ( 'widgets' !== $this->base ) {
     987            $form_start = "\n<form id='adv-settings' method='post'>\n";
     988            $form_end = "\n" . wp_nonce_field( 'screen-options-nonce', 'screenoptionnonce', false, false ) . "\n</form>\n";
     989        }
     990
     991        echo $wrapper_start . $form_start;
     992
     993        $this->render_meta_boxes_preferences();
     994        $this->render_list_table_columns_preferences();
    1038995        $this->render_screen_layout();
    1039996        $this->render_per_page_options();
    1040997        echo $this->_screen_settings;
    1041998
    1042         ?>
    1043         <div><?php wp_nonce_field( 'screen-options-nonce', 'screenoptionnonce', false ); ?></div>
    1044         </form>
    1045         <?php if ( $options['wrap'] ) : ?>
    1046             </div>
     999        echo $form_end . $wrapper_end;
     1000    }
     1001
     1002    /**
     1003     * Render the meta boxes preferences.
     1004     *
     1005     * @since 4.4.0
     1006     */
     1007    public function render_meta_boxes_preferences() {
     1008        global $wp_meta_boxes;
     1009
     1010        if ( isset( $wp_meta_boxes[ $this->id ] ) ) : ?>
     1011            <fieldset class="metabox-prefs">
     1012            <legend><?php _e( 'Boxes' ); ?></legend>
     1013            <?php
     1014                meta_box_prefs( $this );
     1015
     1016                if ( 'dashboard' === $this->id && has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) {
     1017                    if ( isset( $_GET['welcome'] ) ) {
     1018                        $welcome_checked = empty( $_GET['welcome'] ) ? 0 : 1;
     1019                        update_user_meta( get_current_user_id(), 'show_welcome_panel', $welcome_checked );
     1020                    } else {
     1021                        $welcome_checked = get_user_meta( get_current_user_id(), 'show_welcome_panel', true );
     1022                        if ( 2 == $welcome_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) )
     1023                            $welcome_checked = false;
     1024                    }
     1025                    echo '<label for="wp_welcome_panel-hide">';
     1026                    echo '<input type="checkbox" id="wp_welcome_panel-hide"' . checked( (bool) $welcome_checked, true, false ) . ' />';
     1027                    echo _x( 'Welcome', 'Welcome panel' ) . "</label>\n";
     1028                }
     1029            ?>
     1030            </fieldset>
    10471031        <?php endif;
    10481032    }
    10491033
    10501034    /**
     1035     * Render the list table columns preferences.
     1036     *
     1037     * @since 4.4.0
     1038     */
     1039    public function render_list_table_columns_preferences() {
     1040
     1041        $columns = get_column_headers( $this );
     1042        $hidden  = get_hidden_columns( $this );
     1043
     1044        if ( $columns ) {
     1045            $legend = ! empty( $columns['_title'] ) ? $columns['_title'] : __( 'Columns' );
     1046            ?>
     1047            <fieldset class="metabox-prefs">
     1048            <legend><?php echo $legend; ?></legend>
     1049            <?php
     1050            $special = array( '_title', 'cb', 'comment', 'media', 'name', 'title', 'username', 'blogname' );
     1051
     1052            foreach ( $columns as $column => $title ) {
     1053                // Can't hide these for they are special
     1054                if ( in_array( $column, $special ) ) {
     1055                        continue;
     1056                }
     1057
     1058                if ( empty( $title ) ) {
     1059                        continue;
     1060                }
     1061
     1062                if ( 'comments' == $column ) {
     1063                        $title = __( 'Comments' );
     1064                }
     1065
     1066                $id = "$column-hide";
     1067                echo '<label>';
     1068                echo '<input class="hide-column-tog" name="' . $id . '" type="checkbox" value="' . $column . '"' . checked( ! in_array( $column, $hidden ), true, false ) . ' />';
     1069                echo "$title</label>\n";
     1070            }
     1071            ?>
     1072            </fieldset>
     1073        <?php
     1074        }
     1075    }
     1076
     1077    /**
    10511078     * Render the option for number of columns on the page
    10521079     *
     
    10541081     */
    10551082    public function render_screen_layout() {
    1056         if ( ! $this->get_option('layout_columns') )
     1083        if ( ! $this->get_option( 'layout_columns' ) ) {
    10571084            return;
     1085        }
    10581086
    10591087        $screen_layout_columns = $this->get_columns();
     
    10611089
    10621090        ?>
    1063         <h5 class="screen-layout"><?php _e('Screen Layout'); ?></h5>
    1064         <div class='columns-prefs'><?php
    1065             _e('Number of Columns:');
     1091        <fieldset class='columns-prefs'>
     1092        <legend class="screen-layout"><?php _e( 'Layout' ); ?></legend><?php
    10661093            for ( $i = 1; $i <= $num; ++$i ):
    10671094                ?>
     
    10691096                    <input type='radio' name='screen_columns' value='<?php echo esc_attr( $i ); ?>'
    10701097                        <?php checked( $screen_layout_columns, $i ); ?> />
    1071                     <?php echo esc_html( $i ); ?>
     1098                    <?php printf( _n( '%s column', '%s columns', $i ), number_format_i18n( $i ) ); ?>
    10721099                </label>
    10731100                <?php
    10741101            endfor; ?>
    1075         </div>
     1102        </fieldset>
    10761103        <?php
    10771104    }
     
    11201147        // Back compat
    11211148        if ( isset( $this->post_type ) ) {
    1122             /** This filter is documented in wp-admin/includes/class-wp-posts-list-table.php */
     1149            /** This filter is documented in wp-admin/includes/post.php */
    11231150            $per_page = apply_filters( 'edit_posts_per_page', $per_page, $this->post_type );
    11241151        }
    11251152
    11261153        ?>
    1127         <div class="screen-options">
     1154        <fieldset class="screen-options">
     1155        <legend><?php _e( 'Pagination' ); ?></legend>
    11281156            <?php if ( $per_page_label ) : ?>
    11291157                <label for="<?php echo esc_attr( $option ); ?>"><?php echo $per_page_label; ?></label>
     
    11351163            echo get_submit_button( __( 'Apply' ), 'button', 'screen-options-apply', false ); ?>
    11361164            <input type="hidden" name="wp_screen_options[option]" value="<?php echo esc_attr( $option ); ?>" />
    1137         </div>
     1165        </fieldset>
    11381166        <?php
    11391167    }
Note: See TracChangeset for help on using the changeset viewer.