#41897 closed defect (bug) (fixed)
Code Editor: Add reusable code editor Customizer control
Reported by: |
|
Owned by: |
|
---|---|---|---|
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.
Commits (8)
- [41558] Customize: Introduce extensible code editor Customizer control for CodeMirror.… by @westonruter 3 years ago
- [41582] Customize: Remove unnecessary call to
refresh()
a CodeMirror instance uponfocus
in Code Editor control.… by @westonruter 3 years ago - [41936] Customize: Consistently use
input_attrs
as control param key in JS instead ofinputAttrs
.… by @westonruter 3 years ago - [41957] Code Editor: Improve ability to create Customizer
CodeEditorControl
instances in JS, lessening PHP dependencies.… by @westonruter 3 years ago - [41958] Customize: Add
codemirror
deferred object toCodeEditorControl
which is resolved when CodeMirror is initialized.… by @westonruter 3 years ago - [41960] Customize: Allow control subclasses to add to the
deferred
object before the base class initializes.… by @westonruter 3 years ago - [42171] Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.… by @westonruter 3 years ago
- [42172] Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.… by @westonruter 3 years ago
Pull Requests
- Loading…
Change History (24)
#6
@ Core Committer
3 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
@ Core Committer
3 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
@ Core Committer
3 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
@ Core Committer
3 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
@ Core Committer
3 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.
#13
@ Core Committer
3 years ago
- Resolution set to fixed
- Status changed from accepted to closed
In 41558:
https://github.com/xwp/wordpress-develop/pull/257