GSoC 2011 idea: Revamp WordPress theme / plugin code editor

Overview (tl;dr)

One day I came across this ticket, and decided that this would make a good component of my GSoC proposal. In addition to restoring code highlighting when editing theme / plugin, I also want to revamp the user interface of this feature so that it’s easier to use and more pleasant to look at.

I don’t intend to make this feature comparable to a full fledged text editor that lives within WordPress. Instead, the aim is to make it more usable and convenient for small code editing tasks that don’t require much server side debugging.

This can be implemented as a plugin, and later integrated into core if desirable.

A very rough mock-up of the idea

A bit about me

My name’s Gary Cao. I’m currently living in Japan. In the last 3 years, I have been a freelancer working on projects that use WordPress. Since December 2010, I started contributing to WordPress core, and had about 30 patches committed to core, and 70 remaining patches waiting to be reviewed by core devs. I learned a lot during the process.

First order of business: Code highlighting

The problem

In 2.8, WordPress introduced a feature called CodePress. It allows you to edit theme / plugin code right inside your admin panel using a code highlighting editor. Later, this highlighting feature was dropped due to bugs, lack of active development of CodePress itself, and incompatibility with certain browsers. Therefore, the requirement of a good alternative would be something that is:

- in active development
- compatible with most browsers that are in used today
- widely used by other big projects. This warrants that the solution is thoroughly tested and usable to the majority of users.

The solution

I have tested several in-browser code highlighting editor. The two most prominent solutions are ACE and CodeMirror. Later, I decided that ACE is not quite there in terms of IE compatibility, and the features might be a bit bloated for the purpose of this project. It would be an amazing solution if you need a full fledged code editor that works in your browser (keybinding, plugins, regexp search & replace etc.). But for WordPress users, the majority of whom only use this feature for minor changes, it’s a bit too much.

CodeMirror, on the other hand, fits the profile perfectly:

- It supports FF 1.5+, IE 6+, Safari 3+, Opera 9.52+ and Chrome.
- It is in active development. It’s hosted on GitHub, and the latest commit (as of the date of this post) is 1 day ago. Release cycle is pretty short (about once a month).
- It is used by various projects, some of which are Google’s. JS Bin also uses it.
- It doesn’t try to do too much.
- Its license is GPL compatible.

Other things that don’t work

How the code editor looks now

As you can see in the screenshot above, there are many things that need improvement:

• Finding the file you want to edit is not easy. You have to scroll up and down a long list of files to do this.
• You can only open one file at a time. Sometimes you need to alter multiple files, and switch back and forth among those files.
• Opening, saving, and selecting theme to edit all require a page load, which is not good UX.
• When you edit a template file, you’ll have a dropdown that lets you look up documentation of core functions. This is a good feature, but still a bit inconvenient. The user still has to sift through a list of functions. And what if the user wants to look up documentation of a function not currently present in the file?

What I want to do with this project

I prepared a shabby mock-up of what I want to achieve. Note that it’s missing the “Update” button. This mock-up is only a concept, and the final implementation might differ greatly from what you see below:

I want to address all of the above bullet points:

• A filter box that lets you filter the files in the current theme that’s being edited. Typing something in the box would immediately filter out file or template names that don’t match.
• A tab interface that lets you open and edit multiple files at the same time. Inspired by Google Chrome tab.
• Basic operations (save, open, select theme) should be AJAXified. This might be challenging, and prove impractical while implementing it, but for now it would be nice to have this feature.
• Inline code documentation reference. The user can hover on a core function to get a link to the official documentation. The search box mentioned above can be used to search documentation as well, if the first character of the query is >, for example.

Other nice-to-haves

There are a few other things that are not really that important, but if time permits, can be implemented. These can also be implemented as separate plugins.

• A setting panel that lets the user define the code highlighting color scheme
• Theme and plugin revisions. The user should be able to revert changes made using this code editor.
• ZenCoder support
• Focus mode, which maximizes the text editing panel and hide all the noises
• Code lint feature: JSLint for javascript, WordPress coding standard check for templates, etc.

Conclusions

A pretty long post for an idea. Do you have any other things on your wish list for WordPress plugin / theme editor? I would really appreciate any comments or suggestions to make this a better proposal. This is my first time applying, and I expect to learn a lot during the process