This is an effort to provide a speed bump before heading into something potentially destructive and some education for users on better alternatives, even as we make the file editors safer to use. Each user, including existing users, will be shown a one-time dismissible modal warning on their first visit to each of the theme and plugin file editors.
Copy tweaks to come.
props michelleweber, Ipstenu, melchoyce, adamsilverstein, westonruter, toddnestor, aryamaaru, ZaneMatthew, cliffseal, helen.
fixes#31779.
git-svn-id: https://develop.svn.wordpress.org/trunk@41774 602fd350-edb4-49c9-b593-d223f7449a82
* Edits to active plugins which cause PHP fatal errors will no longer auto-deactivate the plugin. Supersedes #39766.
* Introduce sandboxed PHP file edits for active themes, preventing accidental whitescreening of a user's site when introducing a fatal error.
* After writing a change to a PHP file for an active theme or plugin, perform loopback requests on the file editor admin screens and the homepage to check for fatal errors. If a fatal error is encountered, roll back the edited file and display the error to the user to fix and try again.
* Introduce a secure way to scrape PHP fatal errors from a site via `wp_start_scraping_edited_file_errors()` and `wp_finalize_scraping_edited_file_errors()`.
* Moves file modifications from `theme-editor.php` and `plugin-editor.php` to common `wp_edit_theme_plugin_file()` function.
* Refactor themes and plugin editors to submit file changes via Ajax instead of doing full page refreshes when JS is available.
* Use `get` method for theme/plugin dropdowns.
* Improve styling of plugin editors, including width of plugin/theme dropdowns.
* Improve notices API for theme/plugin editor JS component.
* Strip common base directory from plugin file list. See #24048.
* Factor out functions to list editable file types in `wp_get_theme_file_editable_extensions()` and `wp_get_plugin_file_editable_extensions()`.
* Scroll to line in editor that has linting error when attempting to save. See #41886.
* Add checkbox to dismiss lint errors to proceed with saving. See #41887.
* Only style the Update File button as disabled instead of actually disabling it for accessibility reasons.
* Ensure that value from CodeMirror is used instead of `textarea` when CodeMirror is present.
* Add "Are you sure?" check when leaving editor when there are unsaved changes.
Supersedes [41560].
See #39766, #24048, #41886.
Props westonruter, Clorith, melchoyce, johnbillion, jjj, jdgrimes, azaozz.
Fixes#21622, #41887.
git-svn-id: https://develop.svn.wordpress.org/trunk@41721 602fd350-edb4-49c9-b593-d223f7449a82
Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context. Also includes an extensible framework for browsing and installing themes from other sources.
Also includes CSS auto-prefixing added via `grunt precommit:css`.
For details, see: https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/
Previously [38813] but reverted in [39140].
Fixes#37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.
git-svn-id: https://develop.svn.wordpress.org/trunk@41648 602fd350-edb4-49c9-b593-d223f7449a82
Given the new WordPress browsers support policy, the `screen-reader-text` css
class used in the admin can be updated to use modern CSS and correct syntax. See
https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css
Worth noting the `clip` property is deprecated and kept for IE11 and Edge.
- uses `clip-path` for modern browsers
- keeps `clip` for old browsers and update its value to a correct syntax
- resets `clip-path` to `none` where the class is used to dynamically reveal elements
- removes an old rule that made `screen-reader-text` completely invisible in the help tabs `#screen-meta`
- standardizes the rule across CSS files
Fixes#40970.
git-svn-id: https://develop.svn.wordpress.org/trunk@41622 602fd350-edb4-49c9-b593-d223f7449a82
- uses button elements for the toggles
- uses `aria-expanded` on the toggles to communicate to assistive technologies the panels expanded/collapsed state
- adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
- standardizes CSS class names to `.toggle-indicator` and `.handlediv` as these names are already used across the admin for similar controls
Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes#37013.
git-svn-id: https://develop.svn.wordpress.org/trunk@41621 602fd350-edb4-49c9-b593-d223f7449a82
- 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.
git-svn-id: https://develop.svn.wordpress.org/trunk@41586 602fd350-edb4-49c9-b593-d223f7449a82
* Invalidate PHP opcache after file is updated to ensure `include` will ''include'' the written changes.
* Define `WP_ADMIN` when activating plugin in sandbox so plugin code targeting admin will be loaded.
* Do actions that get triggered when loading the admin to ensure plugin code runs that could cause errors on plugin editor screen (and lock out access).
* Fix ability to re-activate a plugin after editing a PHP file other than the main plugin file, and ensure PHP fatal error will be displayed in such cases.
* Consolidate duplicated code into `plugin_sandbox_scrape()` and re-use in `activate_plugin()`.
* Show an error notice instead of a success notice when a file is updated but a plugin was deactivated due to a fatal error.
* Update style of warning when editing an active plugin to be styled as an actual warning notice.
See #12423, #21622.
Fixes#39766.
git-svn-id: https://develop.svn.wordpress.org/trunk@41560 602fd350-edb4-49c9-b593-d223f7449a82
* 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.
git-svn-id: https://develop.svn.wordpress.org/trunk@41376 602fd350-edb4-49c9-b593-d223f7449a82
The Plugin details modal custom implementation in the Plugins page conflicts with
other Thickbox instances added by plugins. Thickbox shows its age and has been
modified over time to suit core needs. However, WordPress should do its best to
not create conflicts with the native Thickbox styles and functionalities. Plugin
authors should be able to use `add_thickbox()` in any admin page as documented,
without having to worry about potential errors.
- fixes a JavaScript error when closing a native Thickbox modal in the Plugins page
- avoids to override the native Thickbox modal styles
- uses a CSS class to target the Plugin details modal and remove a pile of overqualified CSS selectors
Fixes#41417.
git-svn-id: https://develop.svn.wordpress.org/trunk@41356 602fd350-edb4-49c9-b593-d223f7449a82
- Refactors the UI controls around the Iris color picker to output valid and semantic markup
- Simplifies the way elements visibility gets toggled
- Properly associates the visually hidden label with the color input field
- Makes the toggle button a real button
- Adds `aria-expanded` to the toggle button
- Keeps focus on the toggle button instead of moving it to the color input field
- Adds `aria-label` attributes to give better context to some controls
- Removes a redundant title attribute
- Keeps the toggle button text to "Select Color" instead of changing it to "Current Color" when a color is selected
- Slightly improves the responsive view
- CSS clean-up
Fixes#39662.
git-svn-id: https://develop.svn.wordpress.org/trunk@41329 602fd350-edb4-49c9-b593-d223f7449a82
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.
git-svn-id: https://develop.svn.wordpress.org/trunk@41062 602fd350-edb4-49c9-b593-d223f7449a82
Remove `.not-installed-main-site` class introduced in [38075], but never used.
Props nishitlangaliya, mbootsman.
Fixes#41117.
git-svn-id: https://develop.svn.wordpress.org/trunk@40928 602fd350-edb4-49c9-b593-d223f7449a82
Fix a formatting regression introduced in [40792] which attempted to resize the input for mobile, see #40130.
Props leemon, juhise, voldemortensen.
Fixes#40857.
git-svn-id: https://develop.svn.wordpress.org/trunk@40840 602fd350-edb4-49c9-b593-d223f7449a82
On Chrome 58 and above, plugin names within the plugin details modal were collapsed down into an ellipsis. This fix rewrites the CSS to make sure the titles are always shown.
Props mrwweb, afercia, Presskopp.
Fixes#40579.
git-svn-id: https://develop.svn.wordpress.org/trunk@40672 602fd350-edb4-49c9-b593-d223f7449a82
Add a 'delete' link next to the update button on the term edit screen so you can delete a term while you are reviewing it's details.
Props cklosows, bradt, ocean90, johnbillion, DrewAPicture, ryan, MatheusGimenez, maguiar.
Fixes#9777.
git-svn-id: https://develop.svn.wordpress.org/trunk@40655 602fd350-edb4-49c9-b593-d223f7449a82
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 #35622Fixes#31476.
git-svn-id: https://develop.svn.wordpress.org/trunk@40480 602fd350-edb4-49c9-b593-d223f7449a82
Updates `.button-link` adding color and underline to make link-like buttons look
like links by default. Introduces `.button-link-delete` as a modifier, stackable
CSS class for red button-links.
Props Cheffheid, afercia.
See #34242.
Fixes#35126.
git-svn-id: https://develop.svn.wordpress.org/trunk@40052 602fd350-edb4-49c9-b593-d223f7449a82
- changes the "X" links in buttons, improves their color contrast ratio and focus style
- adds screen reader text "Remove item: + tagname"
- uses `wp.a11y.speak()` to give screen reader users feedback when adding/removing tags
- makes the `tagcloud-link` toggle a button, with an `aria-expanded` attribute to indicate the tag cloud collapsed/expanded state
- changes colors for the autocomplete highlighted option in order to have a better color contrast ratio
- reduces the font size for the autocomplete on Press This
- removes CSS related to the old `suggest.js` from Press This
Props joedolson, cgrymala, azaozz, afercia.
Fixes#27555.
git-svn-id: https://develop.svn.wordpress.org/trunk@38880 602fd350-edb4-49c9-b593-d223f7449a82
Removes contents for sections and panels from being logically nested (in the DOM) in order to eliminate many issues related to using `margin-top` hacks. The element containing the link to expand the content element for panels and sections is now a sibling element to its content element: the content is removed from being nested at initialization. The content element is now available in a `contentContainer` property whereas the head element (containing the link to open the construct) is in a `headContainer` property. The existing `container` property is now a jQuery collection that contains both of these elements. Since the head element is no longer in an ancestor element to the `content` element, the `aria-owns` property is now used to maintain the relationship between the `headContainer` and the `contentContainer`. These changes are also accompanied by an improvement to the animation performance for the sliding panes.
Props delawski, celloexpressions.
Fixes#34391.
Fixes#34344.
Fixes#35947.
git-svn-id: https://develop.svn.wordpress.org/trunk@38648 602fd350-edb4-49c9-b593-d223f7449a82
- adds "Apply Filters" and "Clear" at the end of the form
- changes the "Feature Filter", "Apply Filters", "Clear", and "Edit" links in `<button>` elements
- removes a leftover from [27963]
- clarifies one button text and adds an `aria-label` attribute
- adds a `wp.a11y.speak()` message when clicking on "Apply Filters" and no features are selected
Fixes#38086.
git-svn-id: https://develop.svn.wordpress.org/trunk@38640 602fd350-edb4-49c9-b593-d223f7449a82
The `submitdelete` CSS class is used in various places across the admin for some
"red" action links. It is worth simplifying this rule for further improvements
related to color contrast.
- simplifies a non-standard styling for the "Remove/Cancel" links in the Menus screen
- underlines all the "Move to trash/Delete" red links in all the Publish meta boxes
- fixes CSS classes usage for all the Publish meta boxes primary buttons
- fixes broken layout for the old Link Manager publish meta box
Props karmatosed, hugobaeta, monikarao, afercia.
Fixes#37969, #37018. See #37448, #37138, #27314.
git-svn-id: https://develop.svn.wordpress.org/trunk@38616 602fd350-edb4-49c9-b593-d223f7449a82
For consistency and accessibility, all the UI controls that perform destructive
actions should be red.
Props monikarao, lukecavanagh, patilswapnilv, ibachal.
See #35622.
Fixes#37016.
git-svn-id: https://develop.svn.wordpress.org/trunk@38536 602fd350-edb4-49c9-b593-d223f7449a82
Cleans up a few places where the CSS coding standards were not being followed.
Fixes#37576.
Props Presskopp, johnpgreen, netweb
git-svn-id: https://develop.svn.wordpress.org/trunk@38501 602fd350-edb4-49c9-b593-d223f7449a82
This change restores only the margin and padding styles for the `.update-message` class when used by plugins in the context of adding arbitrary rows to the list table. The inline-update colors and icon styles were not restored, expressly with a wide variety of plugin use-cases in mind.
Props ovann86, rahulsprajapati, ocean90, DrewAPicture.
Props helen for review.
See #37504.
git-svn-id: https://develop.svn.wordpress.org/trunk@38237 602fd350-edb4-49c9-b593-d223f7449a82
When doing a bulk update, if there are failures the user needs to know about that. This makes it clearer that you can click on the notification to see more details, especially for screen reader users.
Fixes#37510.
Props juhise, Ankit K Gupta, afercia, jorbin, ocean90.
git-svn-id: https://develop.svn.wordpress.org/trunk@38185 602fd350-edb4-49c9-b593-d223f7449a82
* Remove title attributes.
* Show "Install Now" and "Details" links if the importer isn't installed yet.
* Show a "Run Importer" link if the importer is installed. It also handles activation if the plugin isn't activated.
* Add `aria-label` attributes to each link.
* Unify the importer descriptions to make them independent from the plugin state. The API was changed in [meta3690].
* Adjust JavaScript callbacks for ajaxified importer installs.
Props afercia, swissspidy, ocean90.
See #24766.
Fixes#35191.
git-svn-id: https://develop.svn.wordpress.org/trunk@38075 602fd350-edb4-49c9-b593-d223f7449a82
Fixes a few accessibility issues, tweaks the design of the search form to match other Ajax search fields and improves compatibility with older browsers.
See #37230.
git-svn-id: https://develop.svn.wordpress.org/trunk@38033 602fd350-edb4-49c9-b593-d223f7449a82
UI controls that "do something" on a page shouldn't be links. This link behaves
like a toggle to expand the uploader panel and should be a `button` element with
an aria-expanded attribute. Also:
- improves consistency with the Plugin uploader
- keeps the themes list visible when the uploader is open
- displays a notice when JavaScript is off
- adds some `hide-if-no-js` CSS classes
- removes the `themes.router.navigate()` "upload" route: seems unnecessary and breaks history
Fixes#35457.
git-svn-id: https://develop.svn.wordpress.org/trunk@37742 602fd350-edb4-49c9-b593-d223f7449a82
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.
git-svn-id: https://develop.svn.wordpress.org/trunk@37740 602fd350-edb4-49c9-b593-d223f7449a82
Gone are the days of isolation and feelings of "meh", brought on by The Bleak Screen of Sadness. For a shiny knight has arrived to usher our plugins and themes along their arduous journey of installation, updates, and the inevitable fate of ultimate deletion.
Props swissspidy, adamsilverstein, mapk, afragen, ocean90, ryelle, j-falk, michael-arestad, melchoyce, DrewAPicture, AdamSoucie, ethitter, pento, dd32, kraftbj, Ipstenu, jorbin, afercia, stephdau, paulwilde, jipmoors, khag7, svovaf, jipmoors, obenland.
Fixes#22029, #25828, #31002, #31529, #31530, #31773, #33637, #35032.
git-svn-id: https://develop.svn.wordpress.org/trunk@37714 602fd350-edb4-49c9-b593-d223f7449a82
Rejoice, for your admins will feel more native to your surrounding computing environment and likely load faster, especially when offline, as they no longer have to talk to The Google Overlord.
At the time of introduction in 3.8, there were not good system fonts common to all platforms at the time. In the years since, Windows, Android, OS X, iOS, Firefox OS, and various flavors of Linux have all gotten their own (good) system UI fonts.
There will definitely be visual bugs, mainly around alignment and spacing; these should be documented and reported on the ticket and fixed more atomically so that our current and future selves have a better understanding of what happened and why.
The style remains registered, as it is almost certainly in use by themes and plugins.
props mattmiklic.
see #36753.
git-svn-id: https://develop.svn.wordpress.org/trunk@37361 602fd350-edb4-49c9-b593-d223f7449a82
Setting the background color on `body` is more flexible than on the `html` element. This patch assigns the background color to `body` instead of the `html` element.
Fixes#35314
git-svn-id: https://develop.svn.wordpress.org/trunk@37321 602fd350-edb4-49c9-b593-d223f7449a82
