WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
WordPress/wp-admin/css/code-editor.css

73 lines
1.5 KiB
CSS
Raw Normal View History

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 02:08:47 -04:00
.wrap [class*="CodeMirror-lint-marker"],
.wp-core-ui [class*="CodeMirror-lint-message"],
.wrap .CodeMirror-lint-marker-multiple {
background-image: none;
Code Editors: Fix display of "help" cursor. Props studionashvegas . Fixes #42210. Built from https://develop.svn.wordpress.org/trunk@41897 git-svn-id: http://core.svn.wordpress.org/trunk@41731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-18 09:11:49 -04:00
}
.wp-core-ui .CodeMirror-lint-marker-error,
.wp-core-ui .CodeMirror-lint-marker-warning {
Code Editors: Improve cursor interactions on warning notices. Fixes an issue where hovering over the warning icon didn't work if there were multiple warnings on the same line of code. Also updates the cursor from "pointer" to "help" when hovering over warnings and errors. Props joyously, obenland. Fixes #42129. Built from https://develop.svn.wordpress.org/trunk@41830 git-svn-id: http://core.svn.wordpress.org/trunk@41664 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-11 14:25:46 -04:00
cursor: help;
}
.wrap .CodeMirror-lint-marker-multiple {
position: absolute;
top: 0;
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 02:08:47 -04:00
}
.wrap [class*="CodeMirror-lint-marker"]:before {
font: normal 18px/1 dashicons;
position: relative;
top: -2px;
}
.wp-core-ui [class*="CodeMirror-lint-message"]:before {
font: normal 16px/1 dashicons;
left: 16px;
position: absolute;
}
.wp-core-ui .CodeMirror-lint-message-error,
.wp-core-ui .CodeMirror-lint-message-warning {
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
margin: 5px 0 2px;
padding: 3px 12px 3px 28px;
}
.wp-core-ui .CodeMirror-lint-message-warning {
background-color: #fff8e5;
border-left: 4px solid #ffb900;
}
.wrap .CodeMirror-lint-marker-warning:before,
.wp-core-ui .CodeMirror-lint-message-warning:before {
content: "\f534";
color: #f6a306;
}
.wp-core-ui .CodeMirror-lint-message-error {
background-color: #fbeaea;
border-left: 4px solid #dc3232;
}
.wrap .CodeMirror-lint-marker-error:before,
.wp-core-ui .CodeMirror-lint-message-error:before {
content: "\f153";
color: #dc3232;
}
.wp-core-ui .CodeMirror-lint-tooltip {
background: none;
border: none;
border-radius: 0;
direction: ltr;
}
.wrap .CodeMirror .CodeMirror-matchingbracket {
background: rgba(255, 150, 0, .3);
color: inherit;
}
.CodeMirror {
text-align: left;
}