Code Editor: Add reusable code editor Customizer control

[westonruter]

With the introduction of CodeMirror in #12423 the Custom CSS functionality in the Customizer (#35395) was updated to make use of the new code editor. However, the initial integration in [41376] was not done in a way that would allow for the code to be re-used in other places (such as adding other instances of code editor controls) or to facilitate plugins to extend and customize how the Custom CSS control behaves (currently core and ​Jetpack conflict).

I suggest that the code that is currently hard-coded for the custom_css textarea control be abstracted into a general WP_Customize_Code_Editor_Control which then can be used for Custom CSS and also for adding code editing for anywhere else that a plugin may want it. It can then be cleanly extended by Jetpack.

[westonruter]

​https://github.com/xwp/wordpress-develop/pull/257

[westonruter]

​https://github.com/xwp/wordpress-develop/pull/257/commits/8c7b076b734fc32fba33f2f902331134d5c746b0

[westonruter]

Here's an example of how a plugin can add a code editor to a section, here specifically a code editor for HTML:

<?php
add_action( 'customize_register', function( WP_Customize_Manager $wp_customize ) {
        $wp_customize->add_setting( 'favorite_html' );
        $control = new WP_Customize_Code_Editor_Control( $wp_customize, 'favorite_html', array(
                'label' => 'My Favorite HTML',
                'code_type' => 'text/html',
                'settings' => 'favorite_html',
                'section' => 'title_tagline',
        ) );
        $wp_customize->add_control( $control );
} );

See also initial work-in-progress pull request to update Jetpack to make use of this API: ​https://github.com/Automattic/jetpack/pull/7794

[westonruter]

I wrote a quick plugin which extends the ​Customize Posts plugin to add a “Custom CSS” control for each post/page section added to the Customizer : ​https://github.com/xwp/wp-customize-posts-css

The plugin is just a proof of concept in terms of per-page custom CSS (see #38707), but mainly serves as a way to test the proposed new code editor customizer control here. The key thing here is that it confirms the code editor customizer control can be created dynamically with JS instead of just being added statically.

See screenshots: ​https://github.com/xwp/wp-customize-posts-css#screenshots

[westonruter]

​https://github.com/xwp/wordpress-develop/pull/257/files/8c7b076..11216e5

[westonruter]

@melchoyce I noticed that Jetpack's Custom CSS ​configures CodeMirror to have a tab-width of 2 spaces instead of 4. This would seem to be a great idea to use for Custom CSS in core as well as the Custom HTML widget given the limited horizontal space. What do you think?

[westonruter]

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

[westonruter]

I'm going to commit this since I've verified the control's utility via the Customize Posts CSS plugin. The Jetpack team won't be able to look at it until next week, so I want to get it in now before we hit the Beta 1 deadline.

[westonruter]

In 41558:

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.

[westonruter]

In 41582:

Customize: Remove unnecessary call to refresh() a CodeMirror instance upon focus in Code Editor control.

This also fixes an issue with the cursor not being set in the expected location with an inputStyle=contenteditable.

Props afercia.
See #41897.
Fixes #41900.

[westonruter]

In 41936:

Customize: Consistently use input_attrs as control param key in JS instead of inputAttrs.

See #30738, #41897.

[westonruter]

In 41957:

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.

[westonruter]

In 41958:

Customize: Add codemirror deferred object to CodeEditorControl which is resolved when CodeMirror is initialized.

CodeMirror gets initialized once the control's containing section is expanded. The deferred will be rejected if user preference for syntax highlighting is disabled.
Also move jsdoc from wp.customize.Control to intended wp.customize.Control#initialize().

See #41897, #12423.

[westonruter]

In 41960:

Customize: Allow control subclasses to add to the deferred object before the base class initializes.

Update the CodeEditorControl's codemirror deferred to be set before calling the parent class's initialize method. Since the ready method may be called directly by initialize it may be too late to add a new Deferred to the control's deferred property after calling the base control class's initialize.

Amends [41958].
See #41897.

[westonruter]

Dev note: ​https://make.wordpress.org/core/2017/10/22/code-editing-improvements-in-wordpress-4-9/

[westonruter]

In 42171:

Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.

Implements the same override that was implemented in [41721] for the theme/plugin editors.

See #41897, #41887.
Fixes #42528.

[westonruter]

In 42172:

Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.

Implements the same override that was implemented in [41721] for the theme/plugin editors.

See #41897, #41887.
Fixes #42528 for 4.9.