Commit Graph

71 Commits

Author SHA1 Message Date
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
Weston Ruter
9b5d71bad0 Widgets: Add dirty state tracking for widgets on admin screen.
* Mark a widget as dirty when a field input triggers a `change` or `input` event; clear dirty state when widget is successfully saved.
* Disable Save button and re-label "Saved" when widget not dirty.
* Show AYS dialog when leaving widgets admin screen with unsaved changes.
* When widgets are dirty, expand all unsaved widgets at AYS check and focus on first one.
* Change "Close" link to "Done"; hide link when widget is dirty and reveal when saved.
* The "Done" link persistently appears in the Customizer even after making a change (when the widget is dirty) because changes are autosaved into the changeset.
* Prevent saving widget when form fails `checkValidity`.
* Fix frequency of triggering of `change` event on the rich Text widget's `textarea` limited now to when there are actual changes.
* Add a class of `widget-dirty` to widget containers when the widget has unsaved changes.

Props westonruter, timmydcrawford, melchoyce.
Fixes #41610, #23120.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41185 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-08 19:11:43 +00:00
Weston Ruter
d031a9c3fe Widgets: Use word-wrap: break-word for available widget descriptions.
Props metodiew.
Fixes #36207.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41172 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-06 18:28:43 +00:00
Mel Choyce
f10a6f8863 Widgets: Add grey background behind image widgets.
When an image in the image widget isn't full-width, it looks like it's floating. This adds a grey background behind images to help ground them in the widget.

Props mrasharirfan.
Fixes #41630.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41140 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-08-23 17:15:42 +00:00
Weston Ruter
75ad3494a8 Widgets: Expose link URL input field in Image widget to avoid having to open media modal to discover.
Props timmydcrawford, westonruter.
See #39993.
Fixes #41274.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41092 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-08-14 17:56:42 +00:00
Aaron Jorbin
50cb2c5e28 Update autoprefixer browser support matrix
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/

This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.

So, in the (paraphrased) words of Taylor Swift:

I remember when we dropped support  the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you

We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...

Fixes #37651.
Props stunnedbeast, netweb, jorbin.



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


git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-07-16 01:15:46 +00:00
Weston Ruter
8db1f562e6 Widgets: Add legacy mode for Text widget and add usage pointers to default visual mode.
The Text widget in legacy mode omits TinyMCE and retains old behavior for matching pre-existing Text widgets. Usage pointers added to default visual mode appear when attempting to paste HTML code into the Visual tab and when clicking on the Text tab, informing users of the new Custom HTML widget.

Props westonruter, melchoyce, gitlost for testing, obenland for testing, dougal for testing, afercia for testing.
See #35243.
Fixes #40951.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40900 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-07-14 17:09:43 +00:00
Andrea Fercia
705ecf3312 Customize: Make the media control buttons natural-width.
Natural-width buttons are better for translations, and don't feel as
overpowering as the half-width (and full-width) buttons.

Props melchoyce, timmydcrawford, afercia.
Fixes #40220.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40516 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-12 17:50:44 +00:00
Andrea Fercia
55b6ee7e56 Media: Clean-up some MediaElementJS CSS: no more needed after [40642].
See #40707, #32417, #39994, #39995, #30281.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40510 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-12 07:00:45 +00:00
Weston Ruter
31d4d81039 Widgets: Introduce media widgets for images, audio, and video with extensible base for additional media widgets in the future.
The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!

Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes #32417, #39993, #39994, #39995.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-11 21:11:44 +00:00
Andrea Fercia
1d739a0925 Accessibility: Make some Widgets buttons real buttons.
Links used as UI controls that behave like buttons, should be buttons.
- changes the widgets "toggle", "Delete", and "Close" links to buttons
- uses `aria-expanded` to announce the state of the toggle buttons
- increases a bit the clickable area of the toggle
- ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
- uses a `<span>` element with an `aria-hidden` attribute to hide CSS generated font icons from assistive technologies
- standardizes on `.toggle-indicator:before` rather than `:after`
- changes two `#f00` reds in `#dc3232`, see #35622

Fixes #31476.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40356 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-19 21:14:44 +00:00
Helen Hou-Sandí
8776694a33 Use numeric font weights instead of keywords.
When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight.

The WordPress CSS Coding Standards have been updated accordingly.

props coderste.
see #36753.

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


git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 18:37:28 +00:00
Rachel Baker
15eaa665c1 Widgets: When the Inactive Widgets section is hidden also hide the “Clear Inactive Widgets” button description text.
Props welcher.

Fixes #35592.


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


git-svn-id: http://core.svn.wordpress.org/trunk@37289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-04-28 20:40:28 +00:00
Andrea Fercia
30866ceb5d Accessibility: Improve color contrast updating any #999 gray used for text or icons to a darker gray.
Fixes #35660.
Built from https://develop.svn.wordpress.org/trunk@36587


git-svn-id: http://core.svn.wordpress.org/trunk@36554 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-02-19 18:44:27 +00:00
Andrea Fercia
62d8fda8dd After [36171] remove all the occurrences of the old CSS clearfix.
The old clearfix was applied to very specific items and defined multiple times
across CSS files. Uses the new generic `.wp-clearfix` utility class instead.

See #26396.
Built from https://develop.svn.wordpress.org/trunk@36422


git-svn-id: http://core.svn.wordpress.org/trunk@36389 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-30 13:46:27 +00:00
Andrea Fercia
af25083b6f Accessibility: Improve the color contrast ratio replacing the residual occurrences of the #777 gray.
Uses the existing `#72777c` on white backgrounds and the new `#555d66` "dark medium gray" on darker backgrounds.

Fixes #35605.
Built from https://develop.svn.wordpress.org/trunk@36396


git-svn-id: http://core.svn.wordpress.org/trunk@36363 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-26 00:04:26 +00:00
Andrea Fercia
7ab88221fa Customizer: Aggregate similar CSS rules.
Fixes #34333.
Built from https://develop.svn.wordpress.org/trunk@36291


git-svn-id: http://core.svn.wordpress.org/trunk@36258 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-13 22:36:26 +00:00
Andrew Ozz
71ac079074 Widgets: add a button to delete all inactive widgets simultaneously for better UX.
Props cdog.
Fixes #19159.
Built from https://develop.svn.wordpress.org/trunk@35317


git-svn-id: http://core.svn.wordpress.org/trunk@35283 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-21 05:23:26 +00:00
Andrea Fercia
6b449abadc Accessibility: bump headings one level up on the Appearance > Widgets screen for a better headings hierarchy.
Props mrahmadawais, afercia.
Fixes #33659.
Built from https://develop.svn.wordpress.org/trunk@35015


git-svn-id: http://core.svn.wordpress.org/trunk@34980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-10 16:34:25 +00:00
Scott Taylor
2783773775 Meta Boxes: reboot some of the code in postbox.js to support aria-expanded attribute toggling and to properly reference static class properties.
Props afercia, wonderboymusic.
Fixes #33754.

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


git-svn-id: http://core.svn.wordpress.org/trunk@34858 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-07 01:58:25 +00:00
Scott Taylor
d22fbc7545 Grunt RTL CSS: swap-dashicons-left-right-arrows in rtlcss:properties expects double-quoted content strings in CSS. It doesn't swap single-quoted values.
Props Ankit K Gupta, yoavf, netweb.
Fixes #33786.

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


git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 20:22:25 +00:00
Scott Taylor
f5c754bfed Dashicons CSS: one-word font families don't need quotes. Font families with a space in the name should use double-quotes (doesn't apply here).
Props afercia.
Fixes #32866.

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


git-svn-id: http://core.svn.wordpress.org/trunk@33881 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-05 19:57:25 +00:00
Andrew Ozz
999ae33a2e Widgets:
- Fix dragging to the bottom of the screen.
- Fix hiding of the dragged widget when dragging over a closed sidebar.
- Fix the admin menu position and scrolling when all widget containers are folded.
Fixes #32094 for trunk.
Built from https://develop.svn.wordpress.org/trunk@32480


git-svn-id: http://core.svn.wordpress.org/trunk@32450 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-05-10 00:32:31 +00:00
Helen Hou-Sandí
bfda508c18 Update more instances of default admin blues and grays.
props hugobaeta.
fixes #31234.

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


git-svn-id: http://core.svn.wordpress.org/trunk@32030 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-05 21:20:27 +00:00
Helen Hou-Sandí
3ac1a19529 Spinners: Toggle a class instead of show/hide.
Toggling spinners also now uses visibility instead of display, so that the space is always reserved and nothing moves around unexpectedly.

props cdog, MikeHansenMe, valendesigns.
fixes #22839. see #31875, #30725.

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


git-svn-id: http://core.svn.wordpress.org/trunk@31975 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-03 04:52:27 +00:00
Helen Hou-Sandí
bcda24004a Update the default admin color scheme for more unity and refinement.
This removes the red channel from blues and cools the grays a bit for a more cohesive and purposeful color scheme.

props hugobaeta.
fixes #31234.

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


git-svn-id: http://core.svn.wordpress.org/trunk@31403 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-02-11 22:18:26 +00:00
Dominik Schilling
d993855458 Don't use box shadow focus styling for widget arrows, see #28267.
fixes #28834.
props nvwd.
Built from https://develop.svn.wordpress.org/trunk@29122


git-svn-id: http://core.svn.wordpress.org/trunk@28907 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-12 15:47:15 +00:00
Helen Hou-Sandí
ab31bf8683 Once upon a time not long ago,
The admin CSS was merged in #18314.
After a couple years as it stood,
The mess it had become just was no good.
One day we realized Grunt is pretty cool,
And said "we should use this as our build tool!"
Now we can maintain separate files with ease,
Using @import and cssmin meets all our needs.
Welcome to the future of the WordPress stylesheets,
And thanks to Slick Rick for the beats.

props jorbin for the initial patch.
fixes #26669.

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


git-svn-id: http://core.svn.wordpress.org/trunk@27054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-19 21:43:14 +00:00
azaozz
1cdec6ff6e Merge most admin css files, first run, see #18314
git-svn-id: http://svn.automattic.com/wordpress/trunk@18577 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-08-21 03:46:43 +00:00
azaozz
9855641210 Some CSS cleanup and tuning, see #17324
git-svn-id: http://svn.automattic.com/wordpress/trunk@18173 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-06-06 22:27:03 +00:00
koopersmith
ed94bd035b Widgets style refresh. see #17324.
git-svn-id: http://svn.automattic.com/wordpress/trunk@17882 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-05-12 02:43:06 +00:00
koopersmith
342aa25c3e Widgets: nibble the corners and use new arrows. Props chexee. see #17324.
git-svn-id: http://svn.automattic.com/wordpress/trunk@17869 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-05-11 22:37:48 +00:00
markjaquith
18220ff3a4 Compromise between a mix of razor-sharp corners and gratuitously over-rounded "safety corners" by standardizing around 3px border-radius (mouse-nibbled corners). see #17324
git-svn-id: http://svn.automattic.com/wordpress/trunk@17820 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-05-06 19:00:53 +00:00
markjaquith
8d87f5dcb4 Big UI style update. props koopersmith. see #17324
git-svn-id: http://svn.automattic.com/wordpress/trunk@17800 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-05-04 20:15:05 +00:00
nacin
e82cadea33 Fix admin menu background for long names. props JohnONolan, fixes #13803.
git-svn-id: http://svn.automattic.com/wordpress/trunk@15206 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2010-06-11 00:42:09 +00:00
markjaquith
100e81c448 Add ?ver=DATE query strings to all images that changed since 2.9, to expire browser cache. Bump versions on all CSS/JS files modified in that process. fixes #13562.
git-svn-id: http://svn.automattic.com/wordpress/trunk@15072 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2010-05-31 06:33:46 +00:00
azaozz
f2dc806c22 Add sidebar descriptions to sidebar settings and widget admin screen, props jeremyclarke scribu, fixes #11157
git-svn-id: http://svn.automattic.com/wordpress/trunk@12213 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-11-19 09:12:16 +00:00
ryan
390a75658b Minify admin CSS. see #10664
git-svn-id: http://svn.automattic.com/wordpress/trunk@11857 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-08-20 21:12:33 +00:00
azaozz
84ff783414 Using css to hide the Save button in widgets without settings, props Denis-de-Bernardy, fixes #10020
git-svn-id: http://svn.automattic.com/wordpress/trunk@11516 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-06-04 00:52:31 +00:00
azaozz
a71b8736cd Add "Accessibility Mode" for widgets screen (can be turned on from Screen Options). Add set_user_setting() to the UI state saving functions.
git-svn-id: http://svn.automattic.com/wordpress/trunk@11503 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-06-01 23:31:34 +00:00
azaozz
b7bc0faa73 Reload the widget form with the ajax response after save, add Close link to the widgets, don't auto-close on save to show possible errors returned from validation
git-svn-id: http://svn.automattic.com/wordpress/trunk@11498 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-31 11:34:08 +00:00
azaozz
ad038538e3 Always show the open/close arrow next to the widget title, fixes #9914
git-svn-id: http://svn.automattic.com/wordpress/trunk@11482 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-29 07:22:36 +00:00
ryan
2df887bd07 Trim tailing whitespace
git-svn-id: http://svn.automattic.com/wordpress/trunk@11450 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-24 23:47:49 +00:00
azaozz
13c7249671 Delete widgets when dragged back to Available Widgets, add ui.droppable.js and ui.selectable.js, see #9511
git-svn-id: http://svn.automattic.com/wordpress/trunk@11445 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-24 15:46:09 +00:00
azaozz
0632395ad6 Fix saving and deleting of widgets settings for no-js and for some non-standard widgets, run the actions from the widgets screen when saving with ajax, see #9511
git-svn-id: http://svn.automattic.com/wordpress/trunk@11427 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-22 12:08:51 +00:00
azaozz
ad6e4d1a41 Append the widget's title to the header, adjust sidebar height after changing widgets, see #9511
git-svn-id: http://svn.automattic.com/wordpress/trunk@11246 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-10 00:49:48 +00:00
azaozz
c54e64a00f Minor widgets screen css fixes
git-svn-id: http://svn.automattic.com/wordpress/trunk@11234 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-07 19:07:41 +00:00
azaozz
7d778bdaca Widgets UI improvements: arrows, some more help
git-svn-id: http://svn.automattic.com/wordpress/trunk@11166 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-04 01:19:10 +00:00
azaozz
83952bee95 Widgets UI styling, see #9511
git-svn-id: http://svn.automattic.com/wordpress/trunk@11160 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-05-03 05:27:13 +00:00
azaozz
f7a6290580 Add some help for the widgets screen, make css class .description usable everywhere, fixes #5859
git-svn-id: http://svn.automattic.com/wordpress/trunk@11133 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-04-30 02:33:22 +00:00