Making a great editor for WordPress: Automattic sponsors TinyMCE

Creating content for the web is about to get easier. WordPress and its visual editor, TinyMCE, are getting some major improvements. A team of developers and designers from Automattic, Ephox and the WordPress community are dedicating themselves to make editing world-class.

We are excited to announce that Automattic has become a major TinyMCE sponsor! Their sponsorship will enable us to focus a lot of effort on the open source project. At the same time Automattic has also dedicated some great engineers and designers to work on this project. Together it is a formidable team.

Both WordPress and TinyMCE are open source and the majority of users are able to use it free of charge. And, at least in theory, volunteers are supposed to make it better. The amazing WordPress and TinyMCE communities do help out a lot but it is often the people who are paid to work on the projects full time who can make the most progress.

This increase in funding will help us meet the needs of WordPress and its millions of users. This work will also improve TinyMCE and the hundreds of thousands of developers who embed it in their applications.

Goals for 2017

To get to a future where more words are written online than in traditional word processors is going to require some changes. The time has come for the WordPress and TinyMCE teams to reflect on and discuss what makes a great editor.

Content Blocks

The first thing we need to tackle: a web page is not a print document. There are lots of interactive elements that you can embed in a post from a YouTube video, a SlideShare presentation to a SoundCloud audio clip. WordPress.org already supports 34 of these – more if you include shortcodes. But why stop there: forms, event calendars, spreadsheets, playlists, code snippets, you name it. The web is an incredibly interactive place these days.

WordPress founder Matt Mullenweg points out how difficult it is for users to discover what interactive elements (or “content blocks”) the editor supports. He refers to this as the “mystery meat” issue – you paste a URL into the editor and you never really know what if anything you are going to get back.

Solving the “mystery meat” problem?

Our goal is to lose sight of the safe shores of traditional word processing and make the WordPress editor about writing for the web. The aim is to make writing rich posts effortless. A tool for creating content for the web should be different than a tool for print. If the goal is to disrupt traditional word processors, we won’t do it by being the same as them. Content blocks are a great example of web native features essential to our goal.

What do we mean by this, exactly? The design lead for the project, Joen Asmussen has an excellent blog post asking what are little blocks made of? There is a lot of great discussion and some screen shots in the comments in his post.

Streamlined User Experience

Users skills and expectations have changed. Ten years ago 96% of people used a Windows desktop machine running Microsoft Office 2003. Their ability to adapt to new user experiences was limited. Today there are all sorts of desktop editing interfaces from Google Docs to Medium. And mobile usage is through the roof where you will encounter another heterogenous set of user experiences.

This evolution in the user base opens up the opportunity to try a few different things to make content creation a more joyful and frustration-free experience. Perhaps we move controls into contextual, inline toolbars? Perhaps block-level controls move out of a toolbar and into an icon next to the block. And drag and drop behaviors can be improved (not at the expense of accessibility, of course). These, and many more options, are being explored.

There are of course many great editors out there on the web that we can draw inspiration from. Wix, SquareSpace, Quip, Weebly, LivingDocs, Facebook Notes, Dropbox Paper, Slack Posts, Medium and mobile apps like Bear all do interesting things. We will throw this in a big blender and add some ideas of our own to see what changes we can make to meet the WordPress and TinyMCE community needs.

A streamlined user experience is in the works

 And More

There are many other things on the agenda for 2017. They include such big ticket items as:

• A new user interface library that is responsive and mobile friendly
• Separating the core editor from the user interface library
• Table editing enhancements
• Big increases in test coverage
• Lots and lots of bug squashing

What we will get to and what will find its way into WordPress Core all remains to be seen, but TinyMCE will receive more investment this year than any year in its’ history.

Backstory

WordPress added TinyMCE as the visual editing tool in WordPress’s version 2.0 release in December 2005. In the decade since, the two open source projects have evolved to become the most popular solutions in their space.

WordPress now powers about 30% of the world’s websites, with more than 2.5 billion blog posts published to date. And beyond WordPress, developers use as the visual editor in thousands of applications such as Zendesk, HubSpot, Marketo, Evernote and even Meetup.com.

During this time online editing has followed a word processor-style paradigm. Users familiar with a desktop word processor such as Microsoft Word could quickly learn the toolbars, dialogs and editing behaviors. This model has worked well and arguably helped WordPress become the most popular blogging solution in the world. It was as easy as Microsoft Word, but for the web.

Between WordPress and TinyMCE there are arguably more than 200 million users creating and editing content. As impressive as this is, it is still less than 20% of the users of Microsoft Word. And of the billions of words the world writes each year, I would guess that less than 5% of these are written on the web. Given how much more useful it is to share and organize content, there is tremendous growth potential for online writing.

Get Involved

Last week the TinyMCE team met with WordPress founder Matt Mullenweg, tech lead Matias Ventura, design lead Joen Rasmussen and Automatticians such as Andrew Ozz and Ella van Dorpe to begin working on the editor.

I am excited about the vision that Matt and team have for editing on the web. We shouldn’t aim to replicate Microsoft Word or Google Docs as web content is special. We should aspire to create a solution built for the web.

If you would like to get involved in this work, you can find us on the #core-editor and #core-tinymce channels on the Make WordPress chat. TinyMCE’s Github project is also where a lot of work gets done on TinyMCE Core. Finally, there is a new Project Gutenberg up on Github for some prototypes that are underway.

Open source only works when a community comes together to make it better so please get involved. This collaboration with Automattic is an example of what makes open source great.

Screen mockups by Joen Asmussen: source