WordPress.org
Get WordPress

Make WordPress Core

Changeset 34991


Ignore:
Timestamp:
10/09/2015 06:04:18 PM (11 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.