Editor: Add CodeMirror-powered code editor with syntax highlighting, linting, and auto-completion.

* Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed.
* The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields.
* Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP.
* When user lacks `unfiltered_html` the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint.
* When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites.
* The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892.
* The CodeMirror library is included as `wp.CodeMirror` to prevent conflicts with any existing `CodeMirror` global.
* An `wp.codeEditor.initialize()` API in JS is provided to convert a `textarea` into CodeMirror, with a `wp_enqueue_code_editor()` function in PHP to manage enqueueing the assets and settings needed to edit a given type of code.
* A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default.
* Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: `conf`, `css`, `diff`, `patch`, `html`, `htm`, `http`, `js`, `json`, `jsx`, `less`, `md`, `php`, `phtml`, `php3`, `php4`, `php5`, `php7`, `phps`, `scss`, `sass`, `sh`, `bash`, `sql`, `svg`, `xml`, `yml`, `yaml`, `txt`.

Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde.
See #38707.
Fixes #12423, #39892.


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

src/wp-includes/class-wp-customize-manager.php

@@ -212,6 +212,21 @@ final class WP_Customize_Manager {
 	 */
 	private $_changeset_data;
 
+	/**
+	 * Code Editor Settings for Custom CSS.
+	 *
+	 * This variable contains the settings returned by `wp_enqueue_code_editor()` which are then later output
+	 * to the client in `WP_Customize_Manager::customize_pane_settings()`. A value of false means that the
+	 * Custom CSS section or control was removed, or that the Syntax Highlighting user pref was turned off.
+	 *
+	 * @see wp_enqueue_code_editor()
+	 * @see WP_Customize_Manager::enqueue_control_scripts()
+	 * @see WP_Customize_Manager::customize_pane_settings()
+	 * @since 4.9.0
+	 * @var array|false
+	 */
+	private $_custom_css_code_editor_settings = false;
+
 	/**
 	 * Constructor.
 	 *
@@ -3322,6 +3337,12 @@ final class WP_Customize_Manager {
 		foreach ( $this->controls as $control ) {
 			$control->enqueue();
 		}
+
+		if ( $this->get_section( 'custom_css' ) && $this->get_control( 'custom_css' ) ) {
+			$this->_custom_css_code_editor_settings = wp_enqueue_code_editor( array(
+				'type' => 'text/css',
+			) );
+		}
 	}
 
 	/**
@@ -3579,6 +3600,9 @@ final class WP_Customize_Manager {
 				'stylesheet' => $this->get_stylesheet(),
 				'active'     => $this->is_theme_active(),
 			),
+			'customCss' => array(
+				'codeEditor' => $this->_custom_css_code_editor_settings,
+			),
 			'url'      => array(
 				'preview'       => esc_url_raw( $this->get_preview_url() ),
 				'parent'        => esc_url_raw( admin_url() ),
@@ -4177,22 +4201,53 @@ final class WP_Customize_Manager {
 		) );
 
 		/* Custom CSS */
+		$section_description = '<p>';
+		$section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
+		$section_description .= sprintf(
+			' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
+			esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
+			__( 'Learn more about CSS', 'default' ),
+			/* translators: accessibility text */
+			__( '(opens in a new window)', 'default' )
+		);
+		$section_description .= '</p>';
+
+		$section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
+		$section_description .= '<ul>';
+		$section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
+		$section_description .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.', 'better-code-editing' ) . '</li>';
+		$section_description .= '</ul>';
+
+		if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
+			$section_description .= '<p>';
+			$section_description .= sprintf(
+				/* translators: placeholder is link to user profile */
+				__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
+				sprintf(
+					' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
+					esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
+					__( 'user profile', 'better-code-editing' ),
+					/* translators: accessibility text */
+					__( '(opens in a new window)', 'default' )
+				)
+			);
+			$section_description .= '</p>';
+		}
+
+		$section_description .= '<p class="section-description-buttons">';
+		$section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
+		$section_description .= '</p>';
+
 		$this->add_section( 'custom_css', array(
 			'title'              => __( 'Additional CSS' ),
 			'priority'           => 200,
 			'description_hidden' => true,
-			'description'        => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
-				__( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes. In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key.' ),
-				esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
-				__( 'Learn more about CSS' ),
-				/* translators: accessibility text */
-				__( '(opens in a new window)' )
-			),
+			'description'        => $section_description,
 		) );
 
 		$custom_css_setting = new WP_Customize_Custom_CSS_Setting( $this, sprintf( 'custom_css[%s]', get_stylesheet() ), array(
 			'capability' => 'edit_css',
-			'default' => sprintf( "/*\n%s\n*/", __( "You can add your own CSS here.\n\nClick the help icon above to learn more." ) ),
+			'default' => '',
 		) );
 		$this->add_setting( $custom_css_setting );