#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 has-dev-note |
Focuses: | Cc: |
Description (last modified by )
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.
Attachments (3)
Change History (24)
#6
@
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:
<?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
#8
@
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 : 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
@
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
@
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
@
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.
https://github.com/xwp/wordpress-develop/pull/257