A Preview

Hey everyone, yesterday I had the pleasure of presenting a preview build of the editor in #wordpress-gsoc. I received some great feedback—thanks to everyone who came!

I discussed the major limitations of the preview in the meeting:

The editor will eventually handle any theme. This is one of my major goals this summer, and I’m well on my way.

There are, however, several limitations in the current build:

First, it’s important to note that the editor does not modify a theme’s style.css; it saves its modifications in a separate file—all edits you make can be discarded. However, the separate file is used in place of style.css. At the moment, if you save customizations to a theme and update style.css at a later point, the customizations will not reflect those updates. I’ll be working on a recompile method to attempt to automate these updates and make upgrading themes as painless as possible.

Currently, any at-rules in the CSS (such as @import and @media) will be ignored and discarded. I’ll be adding support for @import soon (as it is the most common and has the highest impact on the output).

The current version has a very limited UI—for the moment, you can only edit properties (no adding/removing yet). More detailed UIs, such as panels dedicated to background, typography, spacing, and borders, along with UI elements (such as color pickers, sliders, and dropdowns) will be added soon. I’m also working on a firebug-inspect-like feature for selecting elements.

Download the preview.


For the past week, I’ve been hard at work building the preview. The event bus/history manager has been updated and integrated, the properties panel is now functional, and saving, loading, and resetting have been added. Most placeholders have been removed, so almost everything you see should be functional.

This week, I’ll be tackling some of the following: the in-iframe UI, adding/removing properties, shorthand property parsing, and maybe even another panel.

Try out the preview and let me know what you think!