WordPress.org
Get WordPress

Make WordPress Core

Ticket #33085: 33085.base-control.3.diff

File 33085.base-control.3.diff, 10.6 KB (added by westonruter, 7 years ago)

  • src/wp-admin/css/customize-controls.css 

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
index f825c68977..96fc72b22a 100644
    p.customize-section-description { 
    929929        line-height: 28px;
    930930}
    931931
    932 .customize-control-radio label,
    933 .customize-control-checkbox label,
    934 .customize-control-nav_menu_auto_add label {
     932.customize-control .customize-inside-control-row {
    935933        line-height: 20px;
    936934        display: block;
    937935        margin-left: 24px;
    … … body.adding-widget .add-new-widget:before, 
    26702668                display: inline;
    26712669        }
    26722670
    2673         .customize-control-radio label,
    2674         .customize-control-checkbox label,
    2675         .customize-control-nav_menu_auto_add label {
     2671        .customize-control-radio .customize-inside-control-row,
     2672        .customize-control-checkbox .customize-inside-control-row,
     2673        .customize-control-nav_menu_auto_add .customize-inside-control-row {
    26762674                margin-left: 32px;
    26772675        }
    26782676

  • src/wp-includes/class-wp-customize-control.php 

    diff --git src/wp-includes/class-wp-customize-control.php src/wp-includes/class-wp-customize-control.php
index 6a6069efe5..d7e4eb34c5 100644
    class WP_Customize_Control { 
    477477         * @since 3.4.0
    478478         */
    479479        protected function render_content() {
    480                 switch( $this->type ) {
     480                $input_id = '_customize-input-' . $this->id;
     481                $description_id = '_customize-description-' . $this->id;
     482                $describedby_attr = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ) . '"' : '';
     483                switch ( $this->type ) {
    481484                        case 'checkbox':
    482485                                ?>
    483                                 <label>
    484                                         <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
    485                                         <?php echo esc_html( $this->label ); ?>
     486                                <span class="customize-inside-control-row">
     487                                        <input
     488                                                id="<?php echo esc_attr( $input_id ); ?>"
     489                                                <?php echo $describedby_attr; ?>
     490                                                type="checkbox"
     491                                                value="<?php echo esc_attr( $this->value() ); ?>"
     492                                                <?php $this->link(); ?>
     493                                                <?php checked( $this->value() ); ?>
     494                                        />
     495                                        <label for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_html( $this->label ); ?></label>
    486496                                        <?php if ( ! empty( $this->description ) ) : ?>
    487                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
     497                                                <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
    488498                                        <?php endif; ?>
    489                                 </label>
     499                                </span>
    490500                                <?php
    491501                                break;
    492502                        case 'radio':
    493                                 if ( empty( $this->choices ) )
     503                                if ( empty( $this->choices ) ) {
    494504                                        return;
     505                                }
    495506
    496507                                $name = '_customize-radio-' . $this->id;
    497 
    498                                 if ( ! empty( $this->label ) ) : ?>
     508                                ?>
     509                                <?php if ( ! empty( $this->label ) ) : ?>
    499510                                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    500                                 <?php endif;
    501                                 if ( ! empty( $this->description ) ) : ?>
    502                                         <span class="description customize-control-description"><?php echo $this->description ; ?></span>
    503                                 <?php endif;
     511                                <?php endif; ?>
     512                                <?php if ( ! empty( $this->description ) ) : ?>
     513                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description ; ?></span>
     514                                <?php endif; ?>
    504515
    505                                 foreach ( $this->choices as $value => $label ) :
    506                                         ?>
    507                                         <label>
    508                                                 <input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
    509                                                 <?php echo esc_html( $label ); ?><br/>
    510                                         </label>
    511                                         <?php
    512                                 endforeach;
     516                                <?php foreach ( $this->choices as $value => $label ) : ?>
     517                                        <span class="customize-inside-control-row">
     518                                                <input
     519                                                        id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
     520                                                        type="radio" <?php echo $describedby_attr; ?>
     521                                                        value="<?php echo esc_attr( $value ); ?>"
     522                                                        name="<?php echo esc_attr( $name ); ?>"
     523                                                        <?php $this->link(); ?>
     524                                                        <?php checked( $this->value(), $value ); ?>
     525                                                        />
     526                                                <label for="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"><?php echo esc_html( $label ); ?></label>
     527                                        </span>
     528                                <?php endforeach; ?>
     529                                <?php
    513530                                break;
    514531                        case 'select':
    515                                 if ( empty( $this->choices ) )
     532                                if ( empty( $this->choices ) ) {
    516533                                        return;
     534                                }
    517535
    518536                                ?>
    519                                 <label>
    520                                         <?php if ( ! empty( $this->label ) ) : ?>
    521                                                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    522                                         <?php endif;
    523                                         if ( ! empty( $this->description ) ) : ?>
    524                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    525                                         <?php endif; ?>
     537                                <?php if ( ! empty( $this->label ) ) : ?>
     538                                        <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     539                                <?php endif; ?>
     540                                <?php if ( ! empty( $this->description ) ) : ?>
     541                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     542                                <?php endif; ?>
    526543
    527                                         <select <?php $this->link(); ?>>
    528                                                 <?php
    529                                                 foreach ( $this->choices as $value => $label )
    530                                                         echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
    531                                                 ?>
    532                                         </select>
    533                                 </label>
     544                                <select id="<?php echo esc_attr( $input_id ); ?>" <?php echo $describedby_attr; ?> <?php $this->link(); ?>>
     545                                        <?php
     546                                        foreach ( $this->choices as $value => $label ) {
     547                                                echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
     548                                        }
     549                                        ?>
     550                                </select>
    534551                                <?php
    535552                                break;
    536553                        case 'textarea':
    537554                                ?>
    538                                 <label>
    539                                         <?php if ( ! empty( $this->label ) ) : ?>
    540                                                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    541                                         <?php endif;
    542                                         if ( ! empty( $this->description ) ) : ?>
    543                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    544                                         <?php endif; ?>
    545                                         <textarea rows="5" <?php $this->input_attrs(); ?> <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
    546                                 </label>
     555                                <?php if ( ! empty( $this->label ) ) : ?>
     556                                        <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     557                                <?php endif; ?>
     558                                <?php if ( ! empty( $this->description ) ) : ?>
     559                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     560                                <?php endif; ?>
     561                                <textarea
     562                                        id="<?php echo esc_attr( $input_id ); ?>"
     563                                        rows="5"
     564                                        <?php echo $describedby_attr; ?>
     565                                        <?php $this->input_attrs(); ?>
     566                                        <?php $this->link(); ?>>
     567                                        <?php echo esc_textarea( $this->value() ); ?>
     568                                </textarea>
    547569                                <?php
    548570                                break;
    549571                        case 'dropdown-pages':
    550572                                ?>
    551                                 <label>
    552573                                <?php if ( ! empty( $this->label ) ) : ?>
    553                                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    554                                 <?php endif;
    555                                 if ( ! empty( $this->description ) ) : ?>
    556                                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
     574                                        <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     575                                <?php endif; ?>
     576                                <?php if ( ! empty( $this->description ) ) : ?>
     577                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
    557578                                <?php endif; ?>
    558579
    559580                                <?php
    … … class WP_Customize_Control { 
    576597                                }
    577598
    578599                                // Hackily add in the data link parameter.
    579                                 $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
     600                                $dropdown = str_replace( '<select', '<select id="' . esc_attr( $input_id ) . '" ' . $describedby_attr, $dropdown );
    580601
    581602                                // Even more hacikly add auto-draft page stubs.
    582603                                // @todo Eventually this should be removed in favor of the pages being injected into the underlying get_pages() call. See <https://github.com/xwp/wp-customize-posts/pull/250>.
    … … class WP_Customize_Control { 
    596617
    597618                                echo $dropdown;
    598619                                ?>
    599                                 </label>
    600620                                <?php if ( $this->allow_addition && current_user_can( 'publish_pages' ) && current_user_can( 'edit_theme_options' ) ) : // Currently tied to menus functionality. ?>
    601                                         <button type="button" class="button-link add-new-toggle"><?php
     621                                        <button type="button" class="button-link add-new-toggle">
     622                                                <?php
    602623                                                /* translators: %s: add new page label */
    603624                                                printf( __( '+ %s' ), get_post_type_object( 'page' )->labels->add_new_item );
    604                                         ?></button>
     625                                                ?>
     626                                        </button>
    605627                                        <div class="new-content-item">
    606628                                                <label for="create-input-<?php echo $this->id; ?>"><span class="screen-reader-text"><?php _e( 'New page title' ); ?></span></label>
    607629                                                <input type="text" id="create-input-<?php echo $this->id; ?>" class="create-item-input" placeholder="<?php esc_attr_e( 'New page title&hellip;' ); ?>">
    608630                                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
    609631                                        </div>
    610                                 <?php endif;
     632                                <?php endif; ?>
     633                                <?php
    611634                                break;
    612635                        default:
    613636                                ?>
    614                                 <label>
    615                                         <?php if ( ! empty( $this->label ) ) : ?>
    616                                                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    617                                         <?php endif;
    618                                         if ( ! empty( $this->description ) ) : ?>
    619                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    620                                         <?php endif; ?>
    621                                         <input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
    622                                 </label>
     637                                <?php if ( ! empty( $this->label ) ) : ?>
     638                                        <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     639                                <?php endif; ?>
     640                                <?php if ( ! empty( $this->description ) ) : ?>
     641                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     642                                <?php endif; ?>
     643                                <input
     644                                        id="<?php echo esc_attr( $input_id ); ?>"
     645                                        type="<?php echo esc_attr( $this->type ); ?>"
     646                                        <?php echo $describedby_attr; ?>
     647                                        <?php $this->input_attrs(); ?>
     648                                        value="<?php echo esc_attr( $this->value() ); ?>"
     649                                        <?php $this->link(); ?>
     650                                        />
    623651                                <?php
    624652                                break;
    625653                }