From No Code to Pro Code

I’m lucky that Automattic sponsors my time to work on the core WordPress software full-time. This allows me the time and focus to take on more leadership responsibilities in the community, including my current role as Customization Design Lead and the co-lead for the upcoming WordPress 4.9 release. ✌️

One of our major goals during the 4.9 development cycle is to improve the various code editing portions of WordPress: the code editor for plugins and themes, the CSS editor in the Customizer, and the new HTML widget.

The current editors in WordPress

This is a controversial decision. Many people believe that WordPress should remove code editing, for many good reasons! At the very least, the theme and plugin code editors make it very easy to break your site. If you don’t backup your site regularly, this can be anything from a couple minute inconvenience to a catastrophe. 😱

I’m of two minds: that yes, we either need to remove the editors entirely, or… we need to make them better, and safer for people to use.

After reflecting, my co-lead and I decided that making them better and safer can have more of a positive impact. WordPress has been a gateway for many new web designers, developers, and builders on the web. I’ve personally met dozens of people who became web professionals because they worked on a WordPress website, and poked around on it for a while. Seeing your site’s source code is, in my opinion, an integral part of this process.

There’s many ways we can improve the editors:

  • Add syntax highlighting, so it becomes easier to read and write code in the editors.
  • Introduce warnings that inform people that editing the code can break their site.
  • Encourage folks to learn about version control, backups, and safe editing of their site’s code.
  • Redirect people who just want to update CSS to the Additional CSS section of the Customizer.
  • Provide instructions on making a child theme.
  • Don’t let people save code we know is broken.

By improving the editors and introducing better warnings, and even code linting, we’re creating a teachable moment for new web users. By providing some protection against saving broken code, we’re helping folks safely edit their sites — versus now, where you can just save anything and totally whitescreen your site (which I’ve done before 💀).

One of my biggest breakthrough moments in WordPress was learning how to create a child theme, which allowed me to safely edit themes to my client’s specifications. Suddenly, I had much more control over the site I was building. It felt magical! The code editors seem like the perfect place to introduce this concept, and maybe even create a simple way to make a child theme from WordPress itself.

Coming in 4.9: syntax highlighting in the code editors in WordPress

I see these various improvements as a way to encourage WordPress users to grow into developers. Creating an ecosystem that supports teaching new developers is an important part of WordPress’ influence on the web, and only through providing a way to safely play can we hope to grow. 🌼

Interested in helping out? You can get involved on GitHub.

7 Comments

  1. Sounds great Mel, thanks for the writeup.

    Is there discussion around having the Theme/Plugin file heirarchy work more effectively? I don’t think that’s in scope of the CodeMirror project, but definitely related to your goals you mention in this article.

    Like

    1. Ya… wow. That one and #17036 are related and over 5 years old. Seems you’re hitting on a long-held need. If the file heirarchy was true to the actual file structure that would be a major improvement overall.

      But I think your point about linting and preventing fatal errors is the MOST important improvement that could be made because as-is I always recommend disabling the editor for that exact reason. In the end, seeing this as an opportunity for education and skill-development is the right path, but in order for that to be the case we have to do everything we can to protect the end-user from themselves and potentially destroying their website with a missing colon.

      Thanks for taking initiative on this! Best of luck!

      Like

    2. That one and #17036 are related and over 5 years old.

      Thanks, I’ve also brought that one up to Weston.

      What do you also think about redesigning the file/folder structure to look like this? https://cloudup.com/cjaXBvnOCFk

      …in order for that to be the case we have to do everything we can to protect the end-user from themselves and potentially destroying their website with a missing colon.

      Totally agreed!

      Thanks for your input 🙂

      Like

    3. Yep, that’s be great. I think only a few things would be needed to tweak a little:
      1) Ideally the folders expande/collapse
      2) The folder should be the primary accent color with the files the grey.

      Looks like great progress. Thanks!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: