Changeset 41957

Timestamp:

10/20/2017 04:38:35 PM (7 years ago)

Author:

westonruter

Message:

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.

Location:

trunk

Files:

• src/wp-admin/js/customize-controls.js (modified) (3 diffs)
• src/wp-admin/js/widgets/custom-html-widgets.js (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-code-editor-control.php (modified) (2 diffs)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/phpunit/tests/widgets/custom-html-widget.php (modified) (1 diff)

trunk/src/wp-admin/js/customize-controls.js

@@ -5153 +5153 @@
          */
         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' ) );
@@ -5160 +5188 @@
             element.set( control.setting() );
 
-            if ( control.params.editor_settings ) {
-                control.initSyntaxHighlightingEditor( control.params.editor_settings );
+            if ( editorSettings ) {
+                control.initSyntaxHighlightingEditor( editorSettings );
             } else {
                 control.initPlainTextareaEditor();
@@ -8840 +8868 @@
                 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() {

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

@@ -205 +205 @@
                  */
                 onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
-                    control.saveButton.toggleClass( 'validation-blocked', errorAnnotations.length );
+                    control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length );
                     control.updateErrorNotice( errorAnnotations );
                 }

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

@@ -70 +70 @@
     public function json() {
         $json = parent::json();
-        $json['code_type'] = $this->code_type;
         $json['editor_settings'] = $this->editor_settings;
         $json['input_attrs'] = $this->input_attrs;
@@ -92 +91 @@
         <# var elementIdPrefix = 'el' + String( Math.random() ); #>
         <# if ( data.label ) { #>
-            <label for="{{ elementIdPrefix }}_editor">
-                <span class="customize-control-title">{{ data.label }}</span>
+            <label for="{{ elementIdPrefix }}_editor" class="customize-control-title">
+                {{ data.label }}
             </label>
         <# } #>

trunk/src/wp-includes/script-loader.php

@@ -721 +721 @@
         $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 );

trunk/tests/phpunit/tests/widgets/custom-html-widget.php

@@ -264 +264 @@
 
         $this->assertTrue( wp_script_is( 'custom-html-widgets', 'enqueued' ) );
-        $this->assertTrue( wp_script_is( 'code-editor', 'enqueued' ) );
-        $this->assertTrue( wp_script_is( 'wp-codemirror', 'enqueued' ) );
+        $this->assertFalse( wp_script_is( 'code-editor', 'enqueued' ) );
+        $this->assertFalse( wp_script_is( 'wp-codemirror', 'enqueued' ) );
         $this->assertFalse( wp_script_is( 'csslint', 'enqueued' ) );
         $this->assertFalse( wp_script_is( 'jshint', 'enqueued' ) );