Request a free site audit

Interested in offering ad free site memberships?

Life news: I got a dog

Categories

The past, present, and future of making the WordPress Editor work for editors

Presented originally in 2017 at WordCamp Baltimore and adapted for this weekend’s WordCamp Lancaster. Still time to buy tickets here. See a version with GIFs here.

It’s great to be here in Lancaster today, not far from my hometown of Lebanon, PA, the source of that delicious delicacy, Lebanon bologna. But – I digress.

I’m here because like many of you, I love WordPress. I fell in love with WordPress because of the editor. It sounds highfalautin’ but we really are at the epicenter of a revolution in publishing. In my career so far I’ve gotten to work with many amazing journalists, reporters, and editors. WordPress isn’t perfect, but it’s the best tool we’ve got so far for producing the news, at scale, online. And what’s more, we’re all working together to actively make it better.

Today I want to celebrate where WordPress came from, where it is, and where it’s going. We’ll start just after the fork from B2, the earlier project begun following a post by Matt in January 2003 after the main developer of b2/cafelog had become far less active in the project.

“It would be nice to have the flexibility of MovableType, the parsing of TextPattern, the hackability of b2, and the ease of setup of Blogger. Someday, right?”

What’s the earliest version we’ve got represented in the room?

Raise your hand and keep it raised if you began using… before 4.0? 3.5? 3.0? 2.5? 2.1?

Pretty good.. Pretty pretty good.

Let me repeat that last quote.

“It would be nice to have the flexibility of MovableType, the parsing of TextPattern, the hackability of b2, and the ease of setup of Blogger. Someday, right?”

Well, Matt, someday, indeed! Wow. WordPress is approaching its 15th birthday, and you are all aware of what a huge thing this software turned out to be. But what I want to discuss now is a few of the most important evolutions along the way, specifically in the Editor. What’s changed? What hasn’t? And where is it going next?

0.71 gold is the first version of WordPress still hosted on WordPress.org. It marks the start of the project in terms of public releases.

At the time, WordPress was early in its split and so naturally 0.7 and 0.71 used the same file structure as b2’s cafelog and were also continuing the numbering from b2 weblog’s last release, 0.6. Parts of this experience we see are familiar to us today, parts but not at all.

Title, category, excerpt, even password – we recognize these features. That grid at the bottom with the ‘test’ content? The posts lists and the edit post screen hadn’t been broken apart at this point.

But where’s the publish button? Took me a while to figure out it was called “Blog this” back then.

Maybe we should bring back Blog this. Get back to our roots.

What do you think? Looks pretty nice in my opinion.

I don’t want to spend too much time on the frontend today, but here’s what the default template looked like.

Not too fancy, but we can still see the core experience that persists to this day.

WordPress 0.71 was released late May 2003, with a post by Matt on WordPress.org. A few things he focused on were the rewritten admin and frontend templates (now XHTML and CSS compliant with, quote, “not a CSS hack in sight” – I wonder how long that lasted.

Some highlights from the early comments…

  • Lots of excitement that there was a pathway off b2
  • Questions about when multiple blogs would be supported. Literally it just came out! Sometimes we have no chill :).
  • A kudos from Michael Heileman, now director of product design at SquareSpace. Heileman would go on to build Kubrick theme, which would be the frontend default from 2006 to 2010, before the Twenty-x series began.

We’re about to jump ahead, but I want to give a shoutout to Alex King here – Alex passed away in 2015 – who brought the “cursor-aware quicktag” to WordPress, that ability to highlight a word and click a button to wrap it in HTML. We take this for granted but it’s probably one of the most used features in the Editor.

There were other early developers of course. You should read the WordPress history, it’s great and you’ll find the link at the end of the slides. Donncha, Dougal Campbell, Ryan Boren were some other early contributors. But I wanted to recognize Alex’s contributions around this time for the quick tag and beyond. It is contributors like him who have made WordPress such an important part of the web world and we are all better off for the love and attention they shared with our community.

Duke Ellington is a big name in Yazz music, and fittingly, 2.0 was a BIG release for WordPress, including support for the rich editor.

At the time, the Rich Editor was a user-level setting (otherwise the older quicktag UI would be loaded). 2.0 began WordPress’ historic link to TinyMCE… which, what the heck does that stand for? Anyone know?

Right on, TinyMCE is an acronym for “Tiny Moxiecode Content Editor” (Moxiecode was the company behind the open source project), which coincidentally was also at version 2.0 at the time. As of 4.8, WordPress was using TinyMCE 4.6.2. I guess WordPress and TinyMCE kind of grew up together. But as we’ll discuss in a few minutes, sometimes these relationships aren’t just built to last.

File upload was added at the same time (Moxiecode was also behind plupload, the library used to power file interfaces in WordPress).

2.1 “Ella” brings about two of the most distinctive features of the editor: the tabbed interface and the autosave mechanism.

The tabbed editor rethought how users should switch between What You See Is What You Get and a HTML interface.

The autosave mechanism made use of a new admin AJAX interface, which I actually thought was broken until I examined the network requests.

Running 2.1 today it’s pretty insane how fast the site is without any plugins or other overhead that we are a little more inclined to install on our sites these days. I was getting 8 millisecond page loads locally!

Other highlights of Ella included a new login page (with much more chromey UI than we have now), a dedicated uploads page, spell checking, and “front pages” instead of just being limited to the latest posts loop.

The WordPress Editor began focused really on markup, with some image affordances. 2.5 “Brecker” sees the editor begin expanding to accommodate a greater variety of inline content, by way of introducing shortcodes, the add media API, and no distraction mode.

The “gallery” shortcode was the first to be shipped built-in. It pulled any images uploaded to the post and rendered a nice little gallery.

Those add media buttons are also new.

Here’s what they look like up close. Very close. Have you ever seen a more iconic Editor? I’ll wait.

The Media buttons API ended up being key to many plugins that expanded the types of content inserted into WordPress posts.

No Distraction Mode was also added this version, although it was quite the same as the “zen” mode we have now.

2.6 “Tyner” brought Wiki-like tracking to edits. What a cool feature. It’s saved my bacon a number of times as an editor, and if I had to guess, same may go for many of you, too. An indispensable tool for the editing workflow.

2.6 also added a word count right on the edit screen. Thoughtful and useful.

See that Turbo link on the top right? Ah, the footnotes of technology – that was for the Google “Gears” powered offline cache that predated service workers and other advanced browser caching technologies we have today.

Press This also saw release in 2.6. I don’t use this a lot but some people do – it’s a bookmarklet that lets you popup a post editor anywhere you are on the web.

Although the `add_meta_box()` API was introduced in WordPress 2.5, the experience really took off when 2.7 Coltrane came out, introducing screen options and the drag and drop customizability we still have today. 2.7 also saw the introduction of quick edit & one-click plugin installs and updates.

WordPress 3.0 was a major, major release, although not specifically for the editor. Although editors (the people) were greatly benefitted by the changes.

Post Types and the MU/multisite merger created the framework for the wave of enterprise WordPress adoption seen over the last 7 years. These screenshots are from Konstantin Kovshenin’s site, who wrote a couple very popular Custom Post Type tutorials around the time of 3.0’s release.

Alas, not all features end up making such an impact as Custom Post Types. One apparent false start in the development of the editor was Post Formats, added in 3.1. Post Formats were inspired by Tumblr’s similar feature that let different types of content be uploaded.

Luckily, if you were confused by Post Formats, you could hide them using the new “Screen Options” button.

3.5 Elvin saw the introduction of Backbone to WordPress, by way of the media overhaul. A “completely reimagined flow”, as Matt called it in the release notes. Here’s what the new uploader looked like, including the support for drag’n’drop.

This was also extended to the editor. GIF’s aren’t included in this web version of the presentation but if they were, you’d see developer Mark Jaquith here. Hey Mark!

In 3.9, the Backbone work was extended to build TinyMCE views, allowing for rich/interactive previews inside the editor interface. These TinyMCE views are what enabled the project Shortcake to be viable (I was an early collaborator on that feature plugin during my time at Fusion).

The editor at this point is more or less the same as we have today. Not to say that the 4.x releases weren’t valuable, but they didn’t touch the core editing experience very much.

The Visual editor was also overhauled for 3.9, improving mobile compatibility as well as how it handles pastes from Word and other rich text editors.

Where are we today? Well, as of this week, here’s what 4.9 looks like. Like an old sweater, I just love the way it feels on me. So comforting, so warm. But like my old sweaters, the world and its fashions move forward. I’ve shown you the past and present of the editor: what about the future?

Gutenberg represents a totally rethought editing experience.

Gutenberg takes our existing post body and uses HTML comments to turn this markup into structured “blocks”.

Behind the scenes, WordPress is structuring/destructuring the post body to render the block interface you see here. Rather than each chunk of text being formatted with HTML markup, the Gutenberg block approach lets settings/options be defined without using a shortcode or HTML.

Gutenberg blocks in many ways are a replacement of shortcodes, although shortcodes should continue to work within Gutenberg editors.

In addition to WordPress Core, there are also a number of plugins that change the editing experience. Some I like include Shortcake, Publishing Checklist, Advanced Custom Fields, and Edit Flow.

That concludes our journey through the past, present, and future of the WordPress editor. Imagine where we’ll be another 13 years hence!

We have time for just a few questions, so are there any questions, any tidbits of editor history I may have missed?

Thank you for your time and please find me at the Happiness Bar if you’d like to continue the conversation.

Links

Your ad blocker is on.

Read ad free.

Sign up for our e-mail newsletter:
OR
Support quality journalism:
Purchase a Subscription!

Comments

Vox Media licenses Chorus to Sun-Times; take a look at what the backend’s like

The team at Vox Media deserves all the snaps for its work on Chorus, the once-mythical “unicorn” content management system that does just about everything a digital publisher could want.

EverQuote and patent medicine

In a thread begun October 2016, Washington Post technology director Aram Zucker-Scharff tweeted about the shady advertising practices of EverQuote, a Boston-based startup. Since then these ads have become prolific on the web (and nearly as prolific are Aram’s tweets documenting the malfeasance).

Send this to a friend