File editor warning copy / UI tweaks

[helen]

Starting fresh as #31779 is rather long. This may involve copy changes, links, and Codex/Handbook writing.

Admin interstitial copy from first commit:

Plugin editor

Heads up!

You appear to be making direct edits to your plugin in the WordPress dashboard. We recommend that you don’t! Editing plugins directly introduce incompatibilities that break your theme or other plugins, and can leave you unable to log back in to WordPress and undo changes.

If you absolutely have to edit this plugin, create copy with a new name and hang on to the original version, so you can re-enable a functional version if something goes wrong.

[I understand]

Theme editor

Heads up!

You appear to be making direct edits to your theme in the WordPress Dashboard. We recommend that you don’t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There’s no need to change your CSS here — you can edit and live preview CSS changes in WordPress’s [built in CSS editor](customizer deep link).

If you decide to go ahead with direct edits anyway, make sure to back up all your site’s files before making changes so you can restore a functional version if something goes wrong.

[I understand]

[nic.bertino]

Two really quick run-throughs and some things to think about. Plugin editor has potentially more severe consequences, so I thought that might be important to stress in the copy.

Also, I would consider changing the action items for theme editing, exposing the CSS editor as a call-to-action instead of an inline link; it would serve to guide the user to the "safer" alternative while still allowing easy access to direct editing for those that want it. I understand this is a dismissible modal, but it may promote discovery of the CSS editor in a more effective way.

---

Plugin Editor

Heads up!

---

You are editing a plugin directly in the WordPress dashboard. Making direct edits to plugins can cause unexpected behavior or errors with your theme or other plugins and is not recommended. Adding, editing, or removing code can leave you unable to log back in to undo changes.

If you absolutely have to edit this plugin, create a copy with a new name and hang on to the original version. You will be able to enable the working version if you encounter any issues.

[I understand]

Theme editor

Heads up!

---

You are editing your theme directly in the WordPress Dashboard. Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. Using the CSS Editor is recommended.

If you decide to go ahead with direct edits anyway, make sure to back up your site’s files before making changes so you can restore a functional version if something goes wrong.

[Open CSS Editor] [Continue Editing]

[helen]

Some thoughts:

• The theme editor should also talk about child themes. This was in Michelle's original text when there was a split between template and CSS files proposed.
• The text in each about creating a copy/backup probably needs to link off to more docs somewhere, since you can't do that in the admin by default.
• "break your theme or other plugins" could probably be reduced down to "your site", since that's the effect that's felt.
• Does anything need to be altered given that the code editors have linting and sandboxing now? That's new since the copy was first written.
• This needs small screen consideration :)

[helen]

Suggestion that we add a "go back" button, see 42100.diff​ for that, which also then puts the focus on that button instead. Also fixes one incorrectly capitalized usage of "Dashboard" - should be lowercase as it's referring to the admin as a whole and not specifically the Dashboard screen.

[helen]

In 41859:

File editor warning: Add a "Go back" button.

see #42100, #31779.

[melchoyce]

Replying to helen:

• The theme editor should also talk about child themes. This was in Michelle's original text when there was a split between template and CSS files proposed.

Let's cut the text about CSS here, and add it as an additional notice that appears on .css files, like in https://core.trac.wordpress.org/attachment/ticket/31779/WF%20-%20CSS%20Warning.png. Then we can replace that text with some copy about child themes.

• The text in each about creating a copy/backup probably needs to link off to more docs somewhere, since you can't do that in the admin by default.

Which do you think is better, linking to ​https://codex.wordpress.org/WordPress_Backups or ​https://wordpress.org/plugins/search/backups/?

• "break your theme or other plugins" could probably be reduced down to "your site", since that's the effect that's felt.

👍

• Does anything need to be altered given that the code editors have linting and sandboxing now? That's new since the copy was first written.

Folks are still able to introduce plugin or theme conflicts, but *hopefully* now you can't whitescreen your site... so we should probably adjust the text to reflect that.

• This needs small screen consideration :)

Fixed in https://core.trac.wordpress.org/changeset/41854.

[jeherve]

Kudos on all the work on this so far. I was wondering if you would be willing to add filters around the 2 messages, so one can customize the 2 warnings' copy in their own environment. It could be useful on sites with multiple admins for example, if the site admin wants to offer other alternatives to those who land in there to edit a file; it could be a link to another plugin like ​this one, or an invitation to contact a specific person to get your changes in.

[helen]

Replying to melchoyce:

• The text in each about creating a copy/backup probably needs to link off to more docs somewhere, since you can't do that in the admin by default.

Which do you think is better, linking to ​https://codex.wordpress.org/WordPress_Backups or ​https://wordpress.org/plugins/search/backups/?

Well, I guess the intention is for people to be warned/given a lead on what FTP/file managers are in relation to their site, which I don't see a particularly good resource in the Codex for. The closest I see is ​https://codex.wordpress.org/FAQ_Troubleshooting#How_to_deactivate_all_plugins_when_not_able_to_access_the_administrative_menus.3F - we don't have to have a link by any means, but I suppose the text might need to be more like If you absolutely have to edit this plugin, use a file manager to create a copy with a new name and hang on to the original version, so you can re-enable your backed-up version if something goes wrong.

[melchoyce]

Replying to helen:

Replying to melchoyce:

Which do you think is better, linking to ​https://codex.wordpress.org/WordPress_Backups or ​https://wordpress.org/plugins/search/backups/?

Well, I guess the intention is for people to be warned/given a lead on what FTP/file managers are in relation to their site, which I don't see a particularly good resource in the Codex for. The closest I see is ​https://codex.wordpress.org/FAQ_Troubleshooting#How_to_deactivate_all_plugins_when_not_able_to_access_the_administrative_menus.3F - we don't have to have a link by any means, but I suppose the text might need to be more like If you absolutely have to edit this plugin, use a file manager to create a copy with a new name and hang on to the original version, so you can re-enable your backed-up version if something goes wrong.

👍

Up for making some patches?

[helen]

Replying to jeherve:

I was wondering if you would be willing to add filters around the 2 messages

Filtering strings is kind of terrible for maintenance and can technically be done with gettext if really necessary. I guess my question is should we be encouraging devs to customize the message, and if so, should it be more like an action and a default hooked onto it? Which I guess would mean that a method of removal besides messing with the usermeta for pointers would be checking to see if there's anything hooked onto the action.

[westonruter]

@jeherve Let's forego any filtering here for now. If one wants to add custom strings, they can do this with JS even, by enqueueing some JS that does jQuery( '#file-editor-warning .file-editor-warning-message' ). We can revisit whether we need an explicit API for this later.

[helen]

emelchoyce 42100.3.diff​ is a pass at changing the language a bit, which ends up aligning the theme and plugin editor messages pretty closely. Will work on a notice for CSS files.

[melchoyce]

In 41996:

Code Editors: Update copy in warning modals.

Props helen.
See #42100.

[melchoyce]

In 41999:

Code Editors: Tweak styles to work better on smaller screens.

See #42100.

[helen]

42100.4.diff​ adds a non-dismissible notice when editing a CSS file that links off to the custom CSS editor in the customizer.

[melchoyce]

42100.6.diff​ adds "Did you know?" and changes built in to built-in. Tested it out and it should be good to go?

Only one other thing to consider — should we show this in the plugin code editor in css files as well?

[melchoyce]

In 42013:

Code Editors: Add a persistent notification on CSS files, encouraging people to use the CSS panel in the Customizer instead of editing their CSS files directly.

Props helen, westonruter, nic.bertino, michelleweber.
Fixes #42100.