Customizer: Support textarea and commonly-used input types as control type in WP_Customize_Control.

Add `input_attrs` property to support custom input attributes.

(Demo plugin attached to ticket.)

props celloexpressions.
fixes #28477.
Built from https://develop.svn.wordpress.org/trunk@28930


git-svn-id: http://core.svn.wordpress.org/trunk@28728 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -287,18 +287,28 @@ p.customize-section-description {
 }
 
 .customize-control select,
-.customize-control input[type="text"],
 .customize-control input[type="radio"],
 .customize-control input[type="checkbox"] {
 	line-height: 28px;
 }
 
-.customize-control input[type="text"] {
+.customize-control input[type="text"],
+.customize-control input[type="password"],
+.customize-control input[type="email"],
+.customize-control input[type="number"],
+.customize-control input[type="search"],
+.customize-control input[type="tel"],
+.customize-control input[type="url"] {
 	width: 98%;
 	line-height: 18px;
 	margin: 0;
 }
 
+.customize-control-textarea textarea {
+	width: 100%;
+	resize: vertical;
+}
+
 .customize-control select {
 	min-width: 50%;
 	max-width: 100%;

wp-admin/css/customize-controls.css

@@ -287,18 +287,28 @@ p.customize-section-description {
 }
 
 .customize-control select,
-.customize-control input[type="text"],
 .customize-control input[type="radio"],
 .customize-control input[type="checkbox"] {
 	line-height: 28px;
 }
 
-.customize-control input[type="text"] {
+.customize-control input[type="text"],
+.customize-control input[type="password"],
+.customize-control input[type="email"],
+.customize-control input[type="number"],
+.customize-control input[type="search"],
+.customize-control input[type="tel"],
+.customize-control input[type="url"] {
 	width: 98%;
 	line-height: 18px;
 	margin: 0;
 }
 
+.customize-control-textarea textarea {
+	width: 100%;
+	resize: vertical;
+}
+
 .customize-control select {
 	min-width: 50%;
 	max-width: 100%;

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

@@ -67,6 +67,12 @@ class WP_Customize_Control {
 	 */
 	public $choices = array();
 
+	/**
+	 * @access public
+	 * @var array
+	 */
+	public $input_attrs = array();
+
 	/**
 	 * @access public
 	 * @var array
@@ -250,30 +256,29 @@ class WP_Customize_Control {
 		echo $this->get_link( $setting_key );
 	}
 
+ 	/**
+	 * Render the custom attributes for the control's input element.
+	 *
+	 * @since 4.0.0
+	 */
+	public function input_attrs() {
+		foreach( $this->input_attrs as $attr => $value ) {
+			echo $attr . '="' . esc_attr( $value ) . '" ';
+		}
+	}
+
 	/**
 	 * Render the control's content.
 	 *
 	 * Allows the content to be overriden without having to rewrite the wrapper in $this->render().
 	 *
-	 * Supports basic input types `text`, `checkbox`, `radio`, `select` and `dropdown-pages`.
+	 * Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
+	 * Additional input types such as `email`, `url`, `number`, `hidden` and `date` are supported implicitly.
 	 *
 	 * @since 3.4.0
 	 */
 	protected function render_content() {
 		switch( $this->type ) {
-			case 'text':
-				?>
-				<label>
-					<?php if ( ! empty( $this->label ) ) : ?>
-						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<?php endif;
-					if ( ! empty( $this->description ) ) : ?>
-						<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
-					<?php endif; ?>
-					<input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-				</label>
-				<?php
-				break;
 			case 'checkbox':
 				?>
 				<label>
@@ -329,6 +334,19 @@ class WP_Customize_Control {
 				</label>
 				<?php
 				break;
+			case 'textarea':
+				?>
+				<label>
+					<?php if ( ! empty( $this->label ) ) : ?>
+						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+					<?php endif;
+					if ( ! empty( $this->description ) ) : ?>
+						<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
+					<?php endif; ?>
+					<textarea rows="5" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
+				</label>
+				<?php
+				break;
 			case 'dropdown-pages':
 				$dropdown = wp_dropdown_pages(
 					array(
@@ -349,6 +367,19 @@ class WP_Customize_Control {
 					$dropdown
 				);
 				break;
+			default:
+				?>
+				<label>
+					<?php if ( ! empty( $this->label ) ) : ?>
+						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+					<?php endif;
+					if ( ! empty( $this->description ) ) : ?>
+						<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
+					<?php endif; ?>
+					<input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
+				</label>
+				<?php
+				break;
 		}
 	}
 }