Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#41897 closed defect (bug) (fixed)

Code Editor: Add reusable code editor Customizer control

Reported by: westonruter's profile westonruter Owned by: westonruter's profile westonruter
Milestone: 4.9 Priority: high
Severity: normal Version:
Component: Customize Keywords: has-patch commit has-dev-note
Focuses: Cc:

Description (last modified by 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.

Change History (24)

#1 @westonruter
7 years ago

  • Description modified (diff)

#2 @westonruter
7 years ago

  • Keywords has-patch added

#3 @westonruter
7 years ago

  • Owner set to westonruter
  • Status changed from new to accepted

#4 @westonruter
7 years ago

  • Description modified (diff)

#5 @westonruter
7 years ago

  • Keywords needs-testing added

#6 @westonruter
7 years ago

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

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:

#7 @westonruter
7 years ago

  • Description modified (diff)

#8 @westonruter
7 years ago

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 :

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:

#9 @westonruter
7 years ago

@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?

#10 @westonruter
7 years ago

  • Priority changed from normal to high

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

#11 @westonruter
7 years ago

  • Keywords commit added

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.

#12 @westonruter
7 years ago

  • Keywords needs-dev-note added; needs-testing removed

#13 @westonruter
7 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#14 @westonruter
7 years ago

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.

#15 @westonruter
7 years ago

In 41936:

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

See #30738, #41897.

#16 @westonruter
7 years ago

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.


  • 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.

#17 @westonruter
7 years ago

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.

#18 @westonruter
7 years ago

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.

#20 @westonruter
7 years ago

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.

#21 @westonruter
7 years ago

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.

Note: See TracTickets for help on using tickets.