Changeset 41558

Timestamp:

09/21/2017 11:03:06 PM (7 years ago)

Author:

westonruter

Message:

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.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (2 diffs)
• src/wp-admin/js/customize-controls.js (modified) (6 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (6 diffs)
• src/wp-includes/customize/class-wp-customize-code-editor-control.php (added)
• src/wp-includes/general-template.php (modified) (4 diffs)
• src/wp-includes/script-loader.php (modified) (4 diffs)
• src/wp-includes/widgets/class-wp-widget-custom-html.php (modified) (1 diff)
• tests/phpunit/tests/customize/manager.php (modified) (1 diff)

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

@@ -1165 +1165 @@
 
 /**
- * Custom CSS Section
+ * Code Editor Control and Custom CSS Section
  *
  * Modifications to the Section Container to make the textarea full-width and
@@ -1171 +1171 @@
  */
 
-#customize-controls .customize-section-description-container.section-meta.customize-info {
-    border-bottom: none;
-}
-
-#sub-accordion-section-custom_css .customize-control-notifications-container {
-    margin-bottom: 15px;
-}
-
-#customize-control-custom_css textarea {
-    display: block;
+.customize-control-code_editor textarea {
+    width: 100%;
     font-family: Consolas, Monaco, monospace;
     font-size: 12px;
     padding: 6px 8px;
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+}
+.customize-control-code_editor textarea,
+.customize-control-code_editor .CodeMirror {
+    height: 14em;
+}
+
+#customize-controls .customize-section-description-container.section-meta.customize-info {
+    border-bottom: none;
+}
+
+#sub-accordion-section-custom_css .customize-control-notifications-container {
+    margin-bottom: 15px;
+}
+
+#customize-control-custom_css textarea {
+    display: block;
     height: 500px;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
 }
 

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

@@ -3678 +3678 @@
     });
 
+    /**
+     * Class wp.customize.CodeEditorControl
+     *
+     * @since 4.9.0
+     *
+     * @constructor
+     * @augments wp.customize.Control
+     * @augments wp.customize.Class
+     */
+    api.CodeEditorControl = api.Control.extend({
+
+        /**
+         * Initialize the editor when the containing section is ready and expanded.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        ready: function() {
+            var control = this;
+            if ( ! control.section() ) {
+                control.initEditor();
+                return;
+            }
+
+            // Wait to initialize editor until section is embedded and expanded.
+            api.section( control.section(), function( section ) {
+                section.deferred.embedded.done( function() {
+                    var onceExpanded;
+                    if ( section.expanded() ) {
+                        control.initEditor();
+                    } else {
+                        onceExpanded = function( isExpanded ) {
+                            if ( isExpanded ) {
+                                control.initEditor();
+                                section.expanded.unbind( onceExpanded );
+                            }
+                        };
+                        section.expanded.bind( onceExpanded );
+                    }
+                } );
+            } );
+        },
+
+        /**
+         * Initialize editor.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        initEditor: function() {
+            var control = this, element;
+
+            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 ) {
+                control.initSyntaxHighlightingEditor( control.params.editor_settings );
+            } else {
+                control.initPlainTextareaEditor();
+            }
+        },
+
+        /**
+         * Make sure editor gets focused when control is focused.
+         *
+         * @since 4.9.0
+         * @param {Object}   [params] - Focus params.
+         * @param {Function} [params.completeCallback] - Function to call when expansion is complete.
+         * @returns {void}
+         */
+        focus: function( params ) {
+            var control = this, extendedParams = _.extend( {}, params ), originalCompleteCallback;
+            originalCompleteCallback = extendedParams.completeCallback;
+            extendedParams.completeCallback = function() {
+                if ( originalCompleteCallback ) {
+                    originalCompleteCallback();
+                }
+                if ( control.editor ) {
+                    control.editor.codemirror.focus();
+                }
+            };
+            api.Control.prototype.focus.call( control, extendedParams );
+        },
+
+        /**
+         * Initialize syntax-highlighting editor.
+         *
+         * @since 4.9.0
+         * @param {object} codeEditorSettings - Code editor settings.
+         * @returns {void}
+         */
+        initSyntaxHighlightingEditor: function( codeEditorSettings ) {
+            var control = this, $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false;
+
+            settings = _.extend( {}, codeEditorSettings, {
+                onTabNext: _.bind( control.onTabNext, control ),
+                onTabPrevious: _.bind( control.onTabPrevious, control ),
+                onUpdateErrorNotice: _.bind( control.onUpdateErrorNotice, control )
+            });
+
+            control.editor = wp.codeEditor.initialize( $textarea, settings );
+
+            // Refresh when receiving focus.
+            control.editor.codemirror.on( 'focus', function( codemirror ) {
+                codemirror.refresh();
+            });
+
+            /*
+             * When the CodeMirror instance changes, mirror to the textarea,
+             * where we have our "true" change event handler bound.
+             */
+            control.editor.codemirror.on( 'change', function( codemirror ) {
+                suspendEditorUpdate = true;
+                $textarea.val( codemirror.getValue() ).trigger( 'change' );
+                suspendEditorUpdate = false;
+            });
+
+            // Update CodeMirror when the setting is changed by another plugin.
+            control.setting.bind( function( value ) {
+                if ( ! suspendEditorUpdate ) {
+                    control.editor.codemirror.setValue( value );
+                }
+            });
+
+            // Prevent collapsing section when hitting Esc to tab out of editor.
+            control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
+                var escKeyCode = 27;
+                if ( escKeyCode === event.keyCode ) {
+                    event.stopPropagation();
+                }
+            });
+        },
+
+        /**
+         * Handle tabbing to the field after the editor.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        onTabNext: function onTabNext() {
+            var control = this, controls, controlIndex, section;
+            section = api.section( control.section() );
+            controls = section.controls();
+            controlIndex = controls.indexOf( control );
+            if ( controls.length === controlIndex + 1 ) {
+                $( '#customize-footer-actions .collapse-sidebar' ).focus();
+            } else {
+                controls[ controlIndex + 1 ].container.find( ':focusable:first' ).focus();
+            }
+        },
+
+        /**
+         * Handle tabbing to the field before the editor.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        onTabPrevious: function onTabPrevious() {
+            var control = this, controls, controlIndex, section;
+            section = api.section( control.section() );
+            controls = section.controls();
+            controlIndex = controls.indexOf( control );
+            if ( 0 === controlIndex ) {
+                section.contentContainer.find( '.customize-section-title .customize-help-toggle, .customize-section-title .customize-section-description.open .section-description-close' ).last().focus();
+            } else {
+                controls[ controlIndex - 1 ].contentContainer.find( ':focusable:first' ).focus();
+            }
+        },
+
+        /**
+         * Update error notice.
+         *
+         * @since 4.9.0
+         * @param {Array} errorAnnotations - Error annotations.
+         * @returns {void}
+         */
+        onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
+            var control = this, message;
+            control.setting.notifications.remove( 'csslint_error' );
+
+            if ( 0 !== errorAnnotations.length ) {
+                if ( 1 === errorAnnotations.length ) {
+                    message = api.l10n.customCssError.singular.replace( '%d', '1' );
+                } else {
+                    message = api.l10n.customCssError.plural.replace( '%d', String( errorAnnotations.length ) );
+                }
+                control.setting.notifications.add( 'csslint_error', new api.Notification( 'csslint_error', {
+                    message: message,
+                    type: 'error'
+                } ) );
+            }
+        },
+
+        /**
+         * Initialize plain-textarea editor when syntax highlighting is disabled.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        initPlainTextareaEditor: function() {
+            var control = this, $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
+
+            $textarea.on( 'blur', function onBlur() {
+                $textarea.data( 'next-tab-blurs', false );
+            } );
+
+            $textarea.on( 'keydown', function onKeydown( event ) {
+                var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27;
+
+                if ( escKeyCode === event.keyCode ) {
+                    if ( ! $textarea.data( 'next-tab-blurs' ) ) {
+                        $textarea.data( 'next-tab-blurs', true );
+                        event.stopPropagation(); // Prevent collapsing the section.
+                    }
+                    return;
+                }
+
+                // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
+                if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
+                    return;
+                }
+
+                // Prevent capturing Tab characters if Esc was pressed.
+                if ( $textarea.data( 'next-tab-blurs' ) ) {
+                    return;
+                }
+
+                selectionStart = textarea.selectionStart;
+                selectionEnd = textarea.selectionEnd;
+                value = textarea.value;
+
+                if ( selectionStart >= 0 ) {
+                    textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
+                    $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
+                }
+
+                event.stopPropagation();
+                event.preventDefault();
+            });
+        }
+    });
+
     // Change objects contained within the main customize object to Settings.
     api.defaultConstructor = api.Setting;
@@ -4373 +4617 @@
         background:          api.BackgroundControl,
         background_position: api.BackgroundPositionControl,
-        theme:               api.ThemeControl
+        theme:               api.ThemeControl,
+        code_editor:         api.CodeEditorControl
     };
     api.panelConstructor = {};
@@ -5713 +5958 @@
         // Add code editor for Custom CSS.
         (function() {
-            var ready, sectionReady = $.Deferred(), controlReady = $.Deferred();
+            var sectionReady = $.Deferred();
 
             api.section( 'custom_css', function( section ) {
@@ -5728 +5973 @@
                 });
             });
-            api.control( 'custom_css', function( control ) {
-                control.deferred.embedded.done( function() {
-                    controlReady.resolve( control );
-                });
-            });
-
-            ready = $.when( sectionReady, controlReady );
 
             // Set up the section desription behaviors.
-            ready.done( function setupSectionDescription( section, control ) {
+            sectionReady.done( function setupSectionDescription( section ) {
+                var control = api.control( 'custom_css' );
 
                 // Close the section description when clicking the close button.
@@ -5748 +5987 @@
 
                 // Reveal help text if setting is empty.
-                if ( ! control.setting.get() ) {
+                if ( control && ! control.setting.get() ) {
                     section.container.find( '.section-meta .customize-section-description:first' )
                         .addClass( 'open' )
@@ -5755 +5994 @@
                 }
             });
-
-            // Set up the code editor itself.
-            if ( api.settings.customCss && api.settings.customCss.codeEditor ) {
-
-                // Set up the syntax highlighting editor.
-                ready.done( function setupSyntaxHighlightingEditor( section, control ) {
-                    var $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false;
-
-                    // Make sure editor gets focused when control is focused.
-                    control.focus = (function( originalFocus ) { // eslint-disable-line max-nested-callbacks
-                        return function( params ) { // eslint-disable-line max-nested-callbacks
-                            var extendedParams = _.extend( {}, params ), originalCompleteCallback;
-                            originalCompleteCallback = extendedParams.completeCallback;
-                            extendedParams.completeCallback = function() {
-                                if ( originalCompleteCallback ) {
-                                    originalCompleteCallback();
-                                }
-                                if ( control.editor ) {
-                                    control.editor.codemirror.focus();
-                                }
-                            };
-                            originalFocus.call( this, extendedParams );
-                        };
-                    })( control.focus );
-
-                    settings = _.extend( {}, api.settings.customCss.codeEditor, {
-
-                        /**
-                         * Handle tabbing to the field after the editor.
-                         *
-                         * @returns {void}
-                         */
-                        onTabNext: function onTabNext() {
-                            var controls, controlIndex;
-                            controls = section.controls();
-                            controlIndex = controls.indexOf( control );
-                            if ( controls.length === controlIndex + 1 ) {
-                                $( '#customize-footer-actions .collapse-sidebar' ).focus();
-                            } else {
-                                controls[ controlIndex + 1 ].container.find( ':focusable:first' ).focus();
-                            }
-                        },
-
-                        /**
-                         * Handle tabbing to the field before the editor.
-                         *
-                         * @returns {void}
-                         */
-                        onTabPrevious: function onTabPrevious() {
-                            var controls, controlIndex;
-                            controls = section.controls();
-                            controlIndex = controls.indexOf( control );
-                            if ( 0 === controlIndex ) {
-                                section.contentContainer.find( '.customize-section-title .customize-help-toggle, .customize-section-title .customize-section-description.open .section-description-close' ).last().focus();
-                            } else {
-                                controls[ controlIndex - 1 ].contentContainer.find( ':focusable:first' ).focus();
-                            }
-                        },
-
-                        /**
-                         * Update error notice.
-                         *
-                         * @param {Array} errorAnnotations - Error annotations.
-                         * @returns {void}
-                         */
-                        onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
-                            var message;
-                            control.setting.notifications.remove( 'csslint_error' );
-
-                            if ( 0 !== errorAnnotations.length ) {
-                                if ( 1 === errorAnnotations.length ) {
-                                    message = api.l10n.customCssError.singular.replace( '%d', '1' );
-                                } else {
-                                    message = api.l10n.customCssError.plural.replace( '%d', String( errorAnnotations.length ) );
-                                }
-                                control.setting.notifications.add( 'csslint_error', new api.Notification( 'csslint_error', {
-                                    message: message,
-                                    type: 'error'
-                                } ) );
-                            }
-                        }
-                    });
-
-                    control.editor = wp.codeEditor.initialize( $textarea, settings );
-
-                    // Refresh when receiving focus.
-                    control.editor.codemirror.on( 'focus', function( codemirror ) {
-                        codemirror.refresh();
-                    });
-
-                    /*
-                     * When the CodeMirror instance changes, mirror to the textarea,
-                     * where we have our "true" change event handler bound.
-                     */
-                    control.editor.codemirror.on( 'change', function( codemirror ) {
-                        suspendEditorUpdate = true;
-                        $textarea.val( codemirror.getValue() ).trigger( 'change' );
-                        suspendEditorUpdate = false;
-                    });
-
-                    // Update CodeMirror when the setting is changed by another plugin.
-                    control.setting.bind( function( value ) {
-                        if ( ! suspendEditorUpdate ) {
-                            control.editor.codemirror.setValue( value );
-                        }
-                    });
-
-                    // Prevent collapsing section when hitting Esc to tab out of editor.
-                    control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
-                        var escKeyCode = 27;
-                        if ( escKeyCode === event.keyCode ) {
-                            event.stopPropagation();
-                        }
-                    });
-                });
-            } else {
-
-                // Allow tabs to be entered in Custom CSS textarea.
-                ready.done( function allowTabs( section, control ) {
-
-                    var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
-
-                    $textarea.on( 'blur', function onBlur() {
-                        $textarea.data( 'next-tab-blurs', false );
-                    } );
-
-                    $textarea.on( 'keydown', function onKeydown( event ) {
-                        var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27;
-
-                        if ( escKeyCode === event.keyCode ) {
-                            if ( ! $textarea.data( 'next-tab-blurs' ) ) {
-                                $textarea.data( 'next-tab-blurs', true );
-                                event.stopPropagation(); // Prevent collapsing the section.
-                            }
-                            return;
-                        }
-
-                        // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
-                        if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
-                            return;
-                        }
-
-                        // Prevent capturing Tab characters if Esc was pressed.
-                        if ( $textarea.data( 'next-tab-blurs' ) ) {
-                            return;
-                        }
-
-                        selectionStart = textarea.selectionStart;
-                        selectionEnd = textarea.selectionEnd;
-                        value = textarea.value;
-
-                        if ( selectionStart >= 0 ) {
-                            textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
-                            $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
-                        }
-
-                        event.stopPropagation();
-                        event.preventDefault();
-                    });
-                });
-            }
         })();
 

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

@@ -214 +214 @@
 
     /**
-     * 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.
      *
@@ -292 +277 @@
         require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
         require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' );
+        require_once( ABSPATH . WPINC . '/customize/class-wp-customize-code-editor-control.php' );
         require_once( ABSPATH . WPINC . '/customize/class-wp-widget-area-customize-control.php' );
         require_once( ABSPATH . WPINC . '/customize/class-wp-widget-form-customize-control.php' );
@@ -3338 +3324 @@
             $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',
-            ) );
-        }
     }
 
@@ -3600 +3580 @@
                 'stylesheet' => $this->get_stylesheet(),
                 'active'     => $this->is_theme_active(),
-            ),
-            'customCss' => array(
-                'codeEditor' => $this->_custom_css_code_editor_settings,
             ),
             'url'      => array(
@@ -3737 +3714 @@
         $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
         $this->register_control_type( 'WP_Customize_Theme_Control' );
+        $this->register_control_type( 'WP_Customize_Code_Editor_Control' );
 
         /* Themes */
@@ -4240 +4218 @@
         $this->add_setting( $custom_css_setting );
 
-        $this->add_control( 'custom_css', array(
-            'type'     => 'textarea',
+        $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
             'section'  => 'custom_css',
             'settings' => array( 'default' => $custom_css_setting->id ),
-            'input_attrs' => array(
-                'class' => 'code', // Ensures contents displayed as LTR instead of RTL.
-            ),
-        ) );
+            'code_type' => 'text/css',
+        ) ) );
     }
 

trunk/src/wp-includes/general-template.php

@@ -3126 +3126 @@
  *     Args.
  *
- *     @type string   $type     The MIME type of the file to be edited.
- *     @type string   $file     Filename to be edited. Extension is used to sniff the type. Can be supplied as alternative to `$type` param.
- *     @type array    $settings Settings to merge on top of defaults which derive from `$type` or `$file` args.
- *     @type WP_Theme $theme    Theme being edited when on theme editor.
- *     @type string   $plugin   Plugin being edited when on plugin editor.
+ *     @type string   $type       The MIME type of the file to be edited.
+ *     @type string   $file       Filename to be edited. Extension is used to sniff the type. Can be supplied as alternative to `$type` param.
+ *     @type WP_Theme $theme      Theme being edited when on theme editor.
+ *     @type string   $plugin     Plugin being edited when on plugin editor.
+ *     @type array    $codemirror Additional CodeMirror setting overrides.
+ *     @type array    $csslint    CSSLint rule overrides.
+ *     @type array    $jshint     JSHint rule overrides.
+ *     @type array    $htmlhint   JSHint rule overrides.
  * }
  * @returns array|false Settings for the enqueued code editor, or false if the editor was not enqueued .
@@ -3409 +3412 @@
 
     // Let settings supplied via args override any defaults.
-    if ( isset( $args['settings'] ) ) {
-        foreach ( $args['settings'] as $key => $value ) {
-            $settings[ $key ] = array_merge(
-                $settings[ $key ],
-                $value
-            );
-        }
+    foreach ( wp_array_slice_assoc( $args, array( 'codemirror', 'csslint', 'jshint', 'htmlhint' ) ) as $key => $value ) {
+        $settings[ $key ] = array_merge(
+            $settings[ $key ],
+            $value
+        );
     }
 
@@ -3429 +3430 @@
      *     Args passed when calling `wp_enqueue_code_editor()`.
      *
-     *     @type string   $type     The MIME type of the file to be edited.
-     *     @type string   $file     Filename being edited.
-     *     @type array    $settings Settings to merge on top of defaults which derive from `$type` or `$file` args.
-     *     @type WP_Theme $theme    Theme being edited when on theme editor.
-     *     @type string   $plugin   Plugin being edited when on plugin editor.
+     *     @type string   $type       The MIME type of the file to be edited.
+     *     @type string   $file       Filename being edited.
+     *     @type WP_Theme $theme      Theme being edited when on theme editor.
+     *     @type string   $plugin     Plugin being edited when on plugin editor.
+     *     @type array    $codemirror Additional CodeMirror setting overrides.
+     *     @type array    $csslint    CSSLint rule overrides.
+     *     @type array    $jshint     JSHint rule overrides.
+     *     @type array    $htmlhint   JSHint rule overrides.
      * }
      */
@@ -3444 +3448 @@
     wp_enqueue_script( 'code-editor' );
     wp_enqueue_style( 'code-editor' );
-
-    wp_enqueue_script( 'codemirror' );
-    wp_enqueue_style( 'codemirror' );
 
     if ( isset( $settings['codemirror']['mode'] ) ) {

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

@@ -464 +464 @@
     );
 
-    $scripts->add( 'codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
+    $scripts->add( 'wp-codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
     $scripts->add( 'csslint', '/wp-includes/js/codemirror/csslint.js', array(), '1.0.5' );
     $scripts->add( 'jshint', '/wp-includes/js/codemirror/jshint.js', array(), '2.9.5' );
@@ -470 +470 @@
     $scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
     $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
-    $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'codemirror' ) );
+    $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'wp-codemirror' ) );
     $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'code-editor', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
     did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( wp_array_slice_assoc(
@@ -953 +953 @@
     $styles->add( 'site-icon',           "/wp-admin/css/site-icon$suffix.css" );
     $styles->add( 'l10n',                "/wp-admin/css/l10n$suffix.css" );
-    $styles->add( 'code-editor',         "/wp-admin/css/code-editor$suffix.css", array( 'codemirror' ) );
+    $styles->add( 'code-editor',         "/wp-admin/css/code-editor$suffix.css", array( 'wp-codemirror' ) );
 
     $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) );
@@ -988 +988 @@
     $styles->add( 'wp-mediaelement',     "/wp-includes/js/mediaelement/wp-mediaelement$suffix.css", array( 'mediaelement' ) );
     $styles->add( 'thickbox',            '/wp-includes/js/thickbox/thickbox.css', array( 'dashicons' ) );
-    $styles->add( 'codemirror',          '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
+    $styles->add( 'wp-codemirror',       '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
 
     // Deprecated CSS

trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php

@@ -161 +161 @@
         $settings = wp_enqueue_code_editor( array(
             'type' => 'text/html',
+            'codemirror' => array(
+                'indentUnit' => 2,
+                'tabSize' => 2,
+            ),
         ) );
 

trunk/tests/phpunit/tests/customize/manager.php

@@ -2352 +2352 @@
         $this->assertNotEmpty( $data );
 
-        $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'customCss', 'changeset', 'timeouts' ), array_keys( $data ) );
+        $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
         $this->assertEquals( $autofocus, $data['autofocus'] );
         $this->assertArrayHasKey( 'save', $data['nonce'] );