Commit Graph

4 Commits

Author SHA1 Message Date
Sergey Biryukov 589395347a Widgets: When checking for errors in Custom HTML widget, pass correct value to `toggleClass()` for Save button.
`toggleClass()` expects a boolean as a second argument, not an integer.

Props iCaleb.
Fixes #42867.
Built from https://develop.svn.wordpress.org/trunk@42457


git-svn-id: http://core.svn.wordpress.org/trunk@42286 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-01-15 23:47:47 +00:00
Weston Ruter 81c87e7d5e Code Editor: Improve ability to create Customizer `CodeEditorControl` instances in JS, lessening PHP dependencies.
Allow `CodeEditorControl` to be instantiated with a `editor_settings` param which is merged with `wp.codeEditor.defaultSettings`.

Also:

* Turn redundant "CSS Code" control label into screen reader text for Additional CSS.
* Remove `code-editor` as script dependency for `custom-html-widgets` since enqueueing is determined by `wp_enqueue_code_editor()`.
* Remove useless exporting of `code_type` param to JS in `WP_Customize_Code_Editor_Control`.
* Add `disabled` class to Custom HTML widget's Save button when linting errors are present.
* Remove redundant `span` inside CodeEditorControl's `label`.

See #41897, #12423, #41872.

Built from https://develop.svn.wordpress.org/trunk@41957


git-svn-id: http://core.svn.wordpress.org/trunk@41791 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-20 16:39:48 +00:00
Andrea Fercia d1948f623a Accessibility: CodeMirror editing areas minor improvements.
- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled
- adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea
- standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability
- use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors
- fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle
- moves focus to the CodeMirror editing area when clicking on the associated label
- in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen
- also, removes a few textdomain leftovers, see `better-code-editing` and `default`

Props westonruter, melchoyce, afercia.
Fixes #41872.

Built from https://develop.svn.wordpress.org/trunk@41586


git-svn-id: http://core.svn.wordpress.org/trunk@41419 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-24 16:00:46 +00:00
Weston Ruter 90bedf8f9d 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 06:08:47 +00:00