From No Code to Pro Code

Note: this post was originally published on our new Automattic design blog. 

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.