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.
Built from https://develop.svn.wordpress.org/trunk@41376
git-svn-id: http://core.svn.wordpress.org/trunk@41209 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-13 08:08:47 +02:00
|
|
|
body{overflow:hidden;-webkit-text-size-adjust:100%}.customize-controls-close,.widget-control-actions a{text-decoration:none}#customize-controls h3{font-size:14px}#customize-controls img{max-width:100%}#customize-controls .submit{text-align:center}#customize-controls .description{color:#555d66}#customize-header-actions .button-primary{float:left;margin-top:9px}#customize-header-actions .spinner{margin-top:13px;margin-left:4px}.saving #customize-header-actions .spinner{visibility:visible}#customize-header-actions{border-bottom:1px solid #ddd}#customize-controls .wp-full-overlay-sidebar-content{overflow-y:auto;overflow-x:hidden}#customize-controls .customize-info{border:none;border-bottom:1px solid #ddd;margin-bottom:15px}#customize-controls .customize-info.section-meta{margin-bottom:15px}#customize-controls .customize-info.is-in-view,#customize-controls .customize-section-title.is-in-view{position:absolute;z-index:9;width:100%;box-shadow:0 1px 0 rgba(0,0,0,.1)}#customize-controls .customize-section-title.is-in-view{margin-top:0}#customize-controls .customize-info.is-in-view+.accordion-section{margin-top:15px}#customize-controls .customize-info .customize-panel-description p:first-child,#customize-controls .customize-info .customize-section-description p:first-child,.no-widget-areas-rendered-notice p:first-child{margin-top:0}#customize-controls .customize-info.is-sticky,#customize-controls .customize-section-title.is-sticky{position:fixed;top:46px}#customize-controls .customize-info .accordion-section-title{background:#fff;color:#555d66;border-right:none;border-left:none;border-bottom:none;cursor:default}#customize-controls .customize-info .accordion-section-title:focus:after,#customize-controls .customize-info .accordion-section-title:hover:after,#customize-controls .customize-info.open .accordion-section-title:after{color:#32373c}#customize-controls .customize-info .accordion-section-title:after{display:none}#customize-controls .customize-info .preview-notice{font-size:13px;line-height:24px}#customize-controls .customize-info .panel-title,#customize-controls .customize-pane-child .customize-section-title h3,#customize-controls .customize-pane-child h3.customize-section-title{font-size:20px;font-weight:200;line-height:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-section-title span.customize-action{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-info .customize-help-toggle{position:absolute;top:4px;left:1px;padding:20px 10px 10px 20px;width:20px;height:20px;cursor:pointer;box-shadow:none;-webkit-appearance:none;background:0 0;color:#555d66;border:none}#customize-controls .customize-info .customize-help-toggle:before{position:absolute;top:5px;right:6px}#customize-controls .customize-info .customize-help-toggle:focus,#customize-controls .customize-info .customize-help-toggle:hover,#customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}#customize-controls .customize-info .customize-panel-description,#customize-controls .customize-info .customize-section-description,#customize-controls .no-widget-areas-rendered-notice{color:#555d66;display:none;background:#fff;padding:12px 15px;border-top:1px solid #ddd}#customize-controls .customize-info .customize-panel-description.open+.no-widget-areas-rendered-notice{border-top:none}.no-widget-areas-rendered-notice{font-style:italic}.no-widget-areas-rendered-notice p:last-child{margin-bottom:0}#customize-controls .customize-info .customize-section-description{margin-bottom:15px}#customize-controls .customize-info .customize-panel-description p:last-child,#customize-controls .customize-info .customize-section-description p:last-child{margin-bottom:0}#customize-controls .current-panel .control-section>h3.accordion-section-title{padding-left:30px}#customize-theme-controls .control-section{border:none}#customize-theme-controls .accordion-section-title{color:#555d66;background-color:#fff;border-bottom:1px solid #ddd;border-right:4px solid #fff;transition:.15s color ease
|
