Front-end Editor 2.x

I recently released a few new versions of the Front-end Editor, and I’m planning to release a few more every week or so in an attempt to quickly iterate with new features. There hasn’t been any progress in a long time, mostly because there didn’t seem to be that many people interested, but I was asked quite a few times about it during WordCamp Europe in Vienna. I also hope some new features and a better user experience will help renew interest in the concept, or at least in a better editing experience in general.

I know that front-end editing is not for everyone, especially if you are using WordPress more as a content manager than a blogging tool, but if you’re just writing with WordPress, it can be a delight. Even more so if you want to tweak a few things there where people will read it.

Not all the effort I put into it is just for this plugin though. I’m hoping that we can take the best things from this to the default WordPress editor as well. I love working on the editor features of the Front-end Editor because it forces me to think in a minimalistic way. Ideally, all tools should be contextual and only visible when you need them.

So what’s new in the Front-end Editor?

It now uses the REST API, which makes it easier for me to focus on the client side, and I hope it helps the REST API project a bit by having a few more users.

It requires WordPress 4.6 so it’s up to speed with new things from the past few core releases. This includes the text patterns, updated views, link toolbar etc.

It will now save your posts continuously. No need to click a save button all the time to make sure you don’t lose work. Just focus on your writing and publish when you’re ready.

Inline toolbar
Block toolbar

A few buttons are removed from the inline toolbar. This one is now exclusively for inline formatting tools and nothing else. Block formatting tools have their own block toolbar, which can be accessed by clicking the “A” button with a dark background. This button will highlight the block you’re currently in, and the tools that are then presented to you only affect exactly that block. This solves the problem where you select some text and you get tools that affect more than just the selection you’ve made.

Insert toolbar

Then there is a third general toolbar, the insert toolbar. In it you’ll find tools to insert new content. For now this only includes the media button by default, but plugins can add whatever they want to it. Tables, embeds, forms, maps…

All these toolbars are extensible. You can add existing TinyMCE plugins or create your own buttons.

That’s what you get with version 2.2 which is currently available in the WordPress plugin repository.


Next release there will be a media toolbar. That’s more or less the media modal you have now for the default editor, but more compact. Its main purpose is inserting and uploading media, not formatting media, and definitely not managing media. So you can browse photos, music, videos and documents, select some, and insert them. Or you can upload some and they’ll be inserted immediately. The media browsers will be different for each media type, tiles for photos and a list for music files where you can also have a quick listen.

But what about editing photos? What about a caption or linking images? Well, each media type will have its own contextual tools, which you can access after insertion. At the moment the default editor has alignment and link options for images in three different places!

This also means the main toolbar doesn’t need to be visible all the time, so it appears now on the bottom and hides itself as soon as you start typing. Scroll and it will reappear. Some extra tools that you don’t need all the time will be added to this one in the future, and I hope to improve the presentation.

In the coming versions I’ll look into supporting categories and tags, allow changing the date, browsing revisions and better undo/redo tools, and other things that make sense to add that are available in the default editor.

Additionally I’ll release a demo as soon as possible so you can try the plugin before installing it.

I’d also like to repeat that we can consider any of these features for WordPress’ default editor as well. When I have finished most of the editor work, I’ll make a plugin that adds it there.