WordPress offers users the ability to directly edit plugin and CSS code from the backend of their website. This is a potentially dangerous operation for new users; the slightest mistake in syntax could, potentially, cause a fatal error and make the website irrecoverable. I was brought to a four year old ticket that discussed how an interface could educate a user about the severity of the action.

The right way to do it: Themes and plugins should be edited in an offline environment that uses version control such as Git. This would allow a safety net for people. Experimentation is about failure, and in a local environment, you can fail fast and learn quickly.

UI Challenges: There are a few approaches to warning a user that are discussed in the ticket. They essentially come down to three approaches:

  1. A modal popup
  2. An interstitial page with warning information and a call-to-action to confirm
  3. A hint in the editor interface encouraging caution in these modes

The key issue with many of these is that they can be easily dismissed. The interface should also relay severity without feeling like it’s a nag. We have way too many naggy interfaces.

What kind of control can we put in place that would encourage a user to stop and consider the consequences?

The modal with input confirmation. By requiring a phrase (in this case, “I understand”), the user will need to consider some part of the warning before proceeding, avoiding the easily dismissible nature of “Ok” calls-to-action on modals.

Screenshot of mockups of a UI component requiring user input in order to proceed.

Interstitial page showing “I understand” prompt. Created in Balsamiq.

This design provides plenty of opportunity to expose the “right way” resources as well, without being too intrusive. After the user confirms the risk, they shouldn’t see this again.

Look for this design in 4.9, hopefully!