Customize: Introduce extensible code editor Customizer control for CodeMirror.

* Adds `WP_Customize_Code_Editor_Control` and `wp.customize.CodeEditorControl()`.
* Control respects user preference for syntax highlighting, showing a textarea when user opts out.
* Code editor control takes the ad hoc code for Additional CSS and makes it reusable and extensible, for Additional CSS in core and plugins to use (such as Jetpack).
* Replace `settings` arg in `wp_enqueue_code_editor()` with separate args for `codemirror`, `csslint`, `jshint`, and `htmlhint`.
* Prefix `codemirror` script and style handles with `wp-` to prevent collisions, as also the object is exported as `wp.CodeMirror` in JS.
* Reduce indent size in Customizer code editor instances and Custom HTML widget to use tab size of 2 instead of 4 to save on space.

See #12423, #38707, #35395.
Fixes #41897.


git-svn-id: https://develop.svn.wordpress.org/trunk@41558 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/customize/class-wp-customize-code-editor-control.php

@@ -0,0 +1,104 @@
+<?php
+/**
+ * Customize API: WP_Customize_Code_Editor_Control class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.9.0
+ */
+
+/**
+ * Customize Code Editor Control class.
+ *
+ * @since 4.9.0
+ *
+ * @see WP_Customize_Control
+ */
+class WP_Customize_Code_Editor_Control extends WP_Customize_Control {
+
+	/**
+	 * Customize control type.
+	 *
+	 * @since 4.9.0
+	 * @var string
+	 */
+	public $type = 'code_editor';
+
+	/**
+	 * Type of code that is being edited.
+	 *
+	 * @since 4.9.0
+	 * @var string
+	 */
+	public $code_type = '';
+
+	/**
+	 * Code editor settings.
+	 *
+	 * @see wp_enqueue_code_editor()
+	 * @since 4.9.0
+	 * @var array|false
+	 */
+	public $editor_settings = array();
+
+	/**
+	 * Enqueue control related scripts/styles.
+	 *
+	 * @since 4.9.0
+	 */
+	public function enqueue() {
+		$this->editor_settings = wp_enqueue_code_editor( array_merge(
+			array(
+				'type' => $this->code_type,
+				'codemirror' => array(
+					'indentUnit' => 2,
+					'tabSize' => 2,
+				),
+			),
+			$this->editor_settings
+		) );
+	}
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 4.9.0
+	 * @see WP_Customize_Control::json()
+	 *
+	 * @return array Array of parameters passed to the JavaScript.
+	 */
+	public function json() {
+		$json = parent::json();
+		$json['code_type'] = $this->code_type;
+		$json['editor_settings'] = $this->editor_settings;
+		return $json;
+	}
+
+	/**
+	 * Don't render the control content from PHP, as it's rendered via JS on load.
+	 *
+	 * @since 4.9.0
+	 */
+	public function render_content() {}
+
+	/**
+	 * Render a JS template for control display.
+	 *
+	 * @since 4.9.0
+	 */
+	public function content_template() {
+		?>
+		<# var elementIdPrefix = 'el' + String( Math.random() ); #>
+		<# if ( data.label ) { #>
+			<label for="{{ elementIdPrefix }}_editor">
+				<span class="customize-control-title">{{ data.label }}</span>
+			</label>
+		<# } #>
+		<# if ( data.description ) { #>
+			<span class="description customize-control-description">{{{ data.description }}}</span>
+		<# } #>
+		<div class="customize-control-notifications-container"></div>
+		<textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
+		<?php
+	}
+}