Editor: Add CodeMirror-powered code editor with syntax highlighting, linting, and auto-completion.
- Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed.
- The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields.
- Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP.
- When user lacks
unfiltered_html
the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint.
- When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites.
- The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892.
- The CodeMirror library is included as
wp.CodeMirror
to prevent conflicts with any existing CodeMirror
global.
- An
wp.codeEditor.initialize()
API in JS is provided to convert a textarea
into CodeMirror, with a wp_enqueue_code_editor()
function in PHP to manage enqueueing the assets and settings needed to edit a given type of code.
- A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default.
- Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for:
conf
, css
, diff
, patch
, html
, htm
, http
, js
, json
, jsx
, less
, md
, php
, phtml
, php3
, php4
, php5
, php7
, phps
, scss
, sass
, sh
, bash
, sql
, svg
, xml
, yml
, yaml
, txt
.
Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde.
See #38707.
Fixes #12423, #39892.