WordPress.org

Make WordPress Core

Ticket #28477: 28477.diff

File 28477.diff, 4.0 KB (added by celloexpressions, 6 years ago)

Add core customizer control support for textarea, number, and range, and fallback/implicit support for other input types.

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

     
    157157        line-height: 28px;
    158158}
    159159
    160 .customize-control input[type="text"] {
     160.customize-control input[type="text"],
     161.customize-control input[type="password"],
     162.customize-control input[type="email"],
     163.customize-control input[type="number"],
     164.customize-control input[type="search"],
     165.customize-control input[type="tel"],
     166.customize-control input[type="url"] {
    161167        width: 98%;
    162168        line-height: 18px;
    163169        margin: 0;
    164170}
    165171
     172.customize-control-textarea textarea {
     173        width: 100%;
     174        resize: vertical;
     175}
     176
    166177.customize-control select {
    167178        min-width: 50%;
    168179        max-width: 100%;
  • src/wp-includes/class-wp-customize-control.php

     
    6565         * @access public
    6666         * @var array
    6767         */
     68        public $numerical = array();
     69
     70        /**
     71         * @access public
     72         * @var array
     73         */
    6874        public $json = array();
    6975
    7076        /**
     
    249255         *
    250256         * Allows the content to be overriden without having to rewrite the wrapper in $this->render().
    251257         *
    252          * Supports basic input types `text`, `checkbox`, `radio`, `select` and `dropdown-pages`.
     258         * Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
     259         * Additional input types such as `email`, `url`, and `date` are supported implicitly.
    253260         *
    254261         * @since 3.4.0
    255262         */
     
    271278                                </label>
    272279                                <?php
    273280                                break;
     281                        case 'textarea':
     282                                ?>
     283                                <label>
     284                                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     285                                        <textarea rows="5" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
     286                                </label>
     287                                <?php
     288                                break;
    274289                        case 'radio':
    275290                                if ( empty( $this->choices ) )
    276291                                        return;
     
    305320                                </label>
    306321                                <?php
    307322                                break;
     323                        case 'number':
     324                                if( ! empty( $this->numerical ) ) {
     325                                        $numerical = $this->numerical;
     326                                        $min = ( isset( $numerical->min ) ) ? $numerical->min : '';
     327                                        $max = ( isset( $numerical->max ) ) ? $numerical->max : '';
     328                                        $step = ( isset( $numerical->step ) ) ? $numerical->step : '';
     329                                        $numerical = 'min="' . esc_attr( $min ) . '" max="' . esc_attr( $max ) . '" step="' . esc_attr( $step ) . '" ';
     330                                }
     331                                else {
     332                                        $numerical = '';
     333                                }
     334
     335                                ?>
     336                                <label>
     337                                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     338                                        <input type="number" <?php echo $numerical; ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
     339                                </label>
     340                                <?php
     341                                break;
     342                        case 'range':
     343                                if( ! empty( $this->numerical ) ) {
     344                                        $numerical = $this->numerical;
     345                                        $min = ( isset( $numerical->min ) ) ? $numerical->min : '';
     346                                        $max = ( isset( $numerical->max ) ) ? $numerical->max : '';
     347                                        $step = ( isset( $numerical->step ) ) ? $numerical->step : '';
     348                                        $numerical = 'min="' . esc_attr( $min ) . '" max="' . esc_attr( $max ) . '" step="' . esc_attr( $step ) . '" ';
     349                                }
     350                                else {
     351                                        $numerical = '';
     352                                }
     353
     354                                ?>
     355                                <label>
     356                                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     357                                        <input type="range" <?php echo $numerical; ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
     358                                </label>
     359                                <?php
     360                                break;
    308361                        case 'dropdown-pages':
    309362                                $dropdown = wp_dropdown_pages(
    310363                                        array(
     
    325378                                        $dropdown
    326379                                );
    327380                                break;
     381                        default:
     382                                ?>
     383                                <label>
     384                                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     385                                        <input type="<?php echo esc_attr( $this->type ); ?>" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
     386                                </label>
     387                                <?php
     388                                break;
    328389                }
    329390        }
    330391}