WordPress.org

Make WordPress Core

Ticket #27981: 27981.diff

File 27981.diff, 5.9 KB (added by celloexpressions, 6 years ago)

Implement descriptions for most core customizer controls, only output the control title & description markup if there's a title/description.

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

     
    143143        margin: 0;
    144144}
    145145
     146p.customize-section-description {
     147        font-style: normal;
     148}
     149
    146150.customize-control {
    147151        width: 100%;
    148152        float: left;
     
    182186        margin-bottom: 5px;
    183187}
    184188
     189.customize-control-description {
     190        display: block;
     191        font-style: italic;
     192        line-height: 18px;
     193        margin-bottom: 5px;
     194}
     195
    185196.customize-control-color .color-picker,
    186197.customize-control-checkbox label,
    187198.customize-control-upload div {
  • src/wp-includes/class-wp-customize-control.php

     
    5454        public $label = '';
    5555
    5656        /**
     57         * @access public
     58         * @var string
     59         */
     60        public $description = '';
     61
     62        /**
    5763         * @todo: Remove choices
    5864         *
    5965         * @access public
     
    258264                        case 'text':
    259265                                ?>
    260266                                <label>
    261                                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     267                                        <?php if ( ! empty( $this->label ) ) : ?>
     268                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     269                                        <?php endif;
     270                                        if ( ! empty( $this->description ) ) : ?>
     271                                                <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     272                                        <?php endif; ?>
    262273                                        <input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
    263274                                </label>
    264275                                <?php
     
    268279                                <label>
    269280                                        <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
    270281                                        <?php echo esc_html( $this->label ); ?>
     282                                        <?php if ( ! empty( $this->description ) ) : ?>
     283                                                <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     284                                        <?php endif; ?>
    271285                                </label>
    272286                                <?php
    273287                                break;
     
    277291
    278292                                $name = '_customize-radio-' . $this->id;
    279293
    280                                 ?>
    281                                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    282                                 <?php
     294                                if ( ! empty( $this->label ) ) : ?>
     295                                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     296                                <?php endif;
     297                                if ( ! empty( $this->description ) ) : ?>
     298                                        <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     299                                <?php endif;
     300
    283301                                foreach ( $this->choices as $value => $label ) :
    284302                                        ?>
    285303                                        <label>
     
    295313
    296314                                ?>
    297315                                <label>
    298                                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     316                                        <?php if ( ! empty( $this->label ) ) : ?>
     317                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     318                                        <?php endif;
     319                                        if ( ! empty( $this->description ) ) : ?>
     320                                                <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     321                                        <?php endif; ?>
     322
    299323                                        <select <?php $this->link(); ?>>
    300324                                                <?php
    301325                                                foreach ( $this->choices as $value => $label )
     
    401425                // The input's value gets set by JS. Don't fill it.
    402426                ?>
    403427                <label>
    404                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     428                        <?php if ( ! empty( $this->label ) ) : ?>
     429                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     430                        <?php endif;
     431                        if ( ! empty( $this->description ) ) : ?>
     432                                <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     433                        <?php endif; ?>
     434
    405435                        <div class="customize-control-content">
    406436                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>"<?php echo $default_attr; ?> />
    407437                        </div>
     
    458488        public function render_content() {
    459489                ?>
    460490                <label>
    461                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     491                        <?php if ( ! empty( $this->label ) ) : ?>
     492                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     493                        <?php endif;
     494                        if ( ! empty( $this->description ) ) : ?>
     495                                <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     496                        <?php endif; ?>
    462497                        <div>
    463498                                <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
    464499                                <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
     
    540575
    541576                ?>
    542577                <div class="customize-image-picker">
    543                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     578                        <?php if ( ! empty( $this->label ) ) : ?>
     579                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     580                        <?php endif;
     581                        if ( ! empty( $this->description ) ) : ?>
     582                                <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
     583                        <?php endif; ?>
    544584
    545585                        <div class="customize-control-content">
    546586                                <div class="dropdown preview-thumbnail" tabindex="0">
  • src/wp-includes/class-wp-customize-section.php

     
    167167                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
    168168                        <ul class="accordion-section-content">
    169169                                <?php if ( ! empty( $this->description ) ) : ?>
    170                                 <li><p class="description"><?php echo $this->description; ?></p></li>
     170                                <li><p class="description customize-section-description"><?php echo $this->description; ?></p></li>
    171171                                <?php endif; ?>
    172172                                <?php
    173173                                foreach ( $this->controls as $control )