Code Editor: Improve ability to create Customizer `CodeEditorControl` instances in JS, lessening PHP dependencies.

Allow `CodeEditorControl` to be instantiated with a `editor_settings` param which is merged with `wp.codeEditor.defaultSettings`.

Also:

* Turn redundant "CSS Code" control label into screen reader text for Additional CSS.
* Remove `code-editor` as script dependency for `custom-html-widgets` since enqueueing is determined by `wp_enqueue_code_editor()`.
* Remove useless exporting of `code_type` param to JS in `WP_Customize_Code_Editor_Control`.
* Add `disabled` class to Custom HTML widget's Save button when linting errors are present.
* Remove redundant `span` inside CodeEditorControl's `label`.

See #41897, #12423, #41872.

Built from https://develop.svn.wordpress.org/trunk@41957


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

wp-admin/js/customize-controls.js

@@ -5152,15 +5152,43 @@
 		 * @returns {void}
 		 */
 		initEditor: function() {
-			var control = this, element;
+			var control = this, element, editorSettings = false;
+
+			// Obtain editorSettings for instantiation.
+			if ( wp.codeEditor && ( _.isUndefined( control.params.editor_settings ) || false !== control.params.editor_settings ) ) {
+
+				// Obtain default editor settings.
+				editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {};
+				editorSettings.codemirror = _.extend(
+					{},
+					editorSettings.codemirror,
+					{
+						indentUnit: 2,
+						tabSize: 2
+					}
+				);
+
+				// Merge editor_settings param on top of defaults.
+				if ( _.isObject( control.params.editor_settings ) ) {
+					_.each( control.params.editor_settings, function( value, key ) {
+						if ( _.isObject( value ) ) {
+							editorSettings[ key ] = _.extend(
+								{},
+								editorSettings[ key ],
+								value
+							);
+						}
+					} );
+				}
+			}
 
 			element = new api.Element( control.container.find( 'textarea' ) );
 			control.elements.push( element );
 			element.sync( control.setting );
 			element.set( control.setting() );
 
-			if ( control.params.editor_settings ) {
+			if ( editorSettings ) {
-				control.initSyntaxHighlightingEditor( control.params.editor_settings );
+				control.initSyntaxHighlightingEditor( editorSettings );
 			} else {
 				control.initPlainTextareaEditor();
 			}
@@ -8839,6 +8867,9 @@
 			sectionReady.done( function setupSectionDescription( section ) {
 				var control = api.control( 'custom_css' );
 
+				// Hide redundant label for visual users.
+				control.container.find( '.customize-control-title:first' ).addClass( 'screen-reader-text' );
+
 				// Close the section description when clicking the close button.
 				section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
 					section.container.find( '.section-meta .customize-section-description:first' )

wp-admin/js/widgets/custom-html-widgets.js

@@ -204,7 +204,7 @@ wp.customHtmlWidgets = ( function( $ ) {
 				 * @returns {void}
 				 */
 				onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
-					control.saveButton.toggleClass( 'validation-blocked', errorAnnotations.length );
+					control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length );
 					control.updateErrorNotice( errorAnnotations );
 				}
 			});

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

@@ -69,7 +69,6 @@ class WP_Customize_Code_Editor_Control extends WP_Customize_Control {
 	 */
 	public function json() {
 		$json = parent::json();
-		$json['code_type'] = $this->code_type;
 		$json['editor_settings'] = $this->editor_settings;
 		$json['input_attrs'] = $this->input_attrs;
 		return $json;
@@ -91,8 +90,8 @@ class WP_Customize_Code_Editor_Control extends WP_Customize_Control {
 		?>
 		<# var elementIdPrefix = 'el' + String( Math.random() ); #>
 		<# if ( data.label ) { #>
-			<label for="{{ elementIdPrefix }}_editor">
+			<label for="{{ elementIdPrefix }}_editor" class="customize-control-title">
-				<span class="customize-control-title">{{ data.label }}</span>
+				{{ data.label }}
 			</label>
 		<# } #>
 		<# if ( data.description ) { #>

wp-includes/script-loader.php

@@ -720,7 +720,7 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'media-gallery-widget', "/wp-admin/js/widgets/media-gallery-widget$suffix.js", array( 'media-widgets' ) );
 		$scripts->add( 'media-video-widget', "/wp-admin/js/widgets/media-video-widget$suffix.js", array( 'media-widgets', 'media-audiovideo', 'wp-api-request' ) );
 		$scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util', 'wp-a11y' ) );
-		$scripts->add( 'custom-html-widgets', "/wp-admin/js/widgets/custom-html-widgets$suffix.js", array( 'code-editor', 'jquery', 'backbone', 'wp-util', 'jquery-ui-core', 'wp-a11y' ) );
+		$scripts->add( 'custom-html-widgets', "/wp-admin/js/widgets/custom-html-widgets$suffix.js", array( 'jquery', 'backbone', 'wp-util', 'jquery-ui-core', 'wp-a11y' ) );
 
 		$scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y', 'customize-base' ), false, 1 );
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-beta3-41956';
+$wp_version = '4.9-beta3-41957';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.