Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 13 hours ago

#41897 closed defect (bug) (fixed)

Code Editor: Add reusable code editor Customizer control

Reported by: westonruter Owned by: westonruter
Milestone: 4.9 Priority: high
Severity: normal Version:
Component: Customize Keywords: has-patch commit needs-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 (18)

#1 @westonruter
5 weeks ago

  • Description modified (diff)

#2 @westonruter
5 weeks ago

  • Keywords has-patch added

#3 @westonruter
5 weeks ago

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

#4 @westonruter
5 weeks ago

  • Description modified (diff)

#5 @westonruter
5 weeks ago

  • Keywords needs-testing added

#6 @westonruter
5 weeks 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: https://github.com/Automattic/jetpack/pull/7794

#7 @westonruter
5 weeks ago

  • Description modified (diff)

#8 @westonruter
4 weeks 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 : 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

#9 @westonruter
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks ago

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

#13 @westonruter
4 weeks 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
4 weeks 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
13 hours ago

In 41936:

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

See #30738, #41897.

Note: See TracTickets for help on using tickets.