GSoC update

Monday was the “pencils down” date for GSoC, and here’s a post about what I have done so far. It’s all related to the editor, but it can be divided into three parts: work on core for the editor “views” and scrolling, work on the Editor Experiments plugin, which contains further enhancements and work on a complete rewrite of the Front-end Editor, which includes both work on core and the other plugin.

Note that everything requires at least WordPress 4.0 beta 4 to try.

Core

View related tickets (#28595, #28195, #28788#28913#27971#28458 and other minor tickets), better thumbnail resizing for a responsive modal (#27423), editors scrolling (#28328) and other minor things added to core the past few months.

Editor Experiments

The goal of this project was to make it easier for plugins to add views in the editor, for example for their shortcodes. It’s been very difficult, however, to figure out the needs and support all different scenarios. Technically it’s also not easy, since we’re working in an iframe, all the changes are tracked by TinyMCE and the DOM can get rebuild.

As for a UI, there are lots of options for an editing interface. WordPress should provide some options, but the experience should be customisable. Ideally it should be possible to edit views straight inside the editor. E.g. for a gallery view, it should be possible to edit captions inline and rearrange images. I decided to pick a popular shortcode and see what I can do. I picked a shortcode that can display a Google Map, and it ended up like this in the editor:

Screen Shot 2014-08-20 at 13.04.06

You search by address, or just drag and zoom the map, change the map type etc., and it will update the shortcode for you.

I realise the is just one case, and there are a few more necessary to figure out an API. There are also a lot of improvements needed to the view plugin in TinyMCE. Currently it is not possible to have editable text fields inside the view. It is also not possible to drag views around, let alone drag and drop items inside a view, which would be a huge deal for shortcodes that let you add form elements for example. With the “Editor Experiments” it is possible to add an “inline” toolbar to manipulate the view. Of course, you still have the option to display your own modal and update the view after it closes.

Another goal was to experiment with the concept of content blocks and inline editing. I made a TinyMCE plugin that adds a toolbar with formatting tools when you select something in the editor and that is extendible in the same way the default toolbar is. You can create your own buttons (like you did before) and add them to the toolbar, or just any existing one. In the future, we can change the buttons based on the selection.

Screen Shot 2014-08-20 at 13.11.01

Screen Shot 2014-08-20 at 13.12.14

To add a block, you have to put your cursor in an empty paragraph and the following will show up:

Screen Shot 2014-08-20 at 13.14.42

Clicking on it renders the block toolbar:

Screen Shot 2014-08-20 at 13.15.22

And this toolbar too is extendible. You can add any TinyMCE button to it, but of course only buttons that insert something will be useful here.

Front-end editor

The original project was called “Front-end content blocks”, but we’ve changed the goals a bit at the start to focus on the back-end editor first instead, and it kind of felt like development on the FEE has stopped in the last few months. But that’s not entirely true. All these improvements can be implemented in the FEE too. That’s why I’ve also completely rewritten the FEE from scratch and added all this stuff. The improvements include:

  • An inline toolbar for text, images and views. The fixed and always-visible toolbar is gone.
  • The “add block” toolbar to insert content. Similarly you can add a featured image.
  • The kind of buggy “view” implementation is now completely replaced with the view implementation in core form 3.9 and all the improvements I did for 4.0.
  • The editor now loads instantly on the page. No page refresh anymore. Also no page refresh on save/publish. You can simply toggle the editor on and off. It was mainly this change that required most of the rewrite…
  • Fixed and improved lots of other stuff. It’s just better if you try it yourself… Go to GitHub and clone the plugin. 🙂

Something else I’ve been working on, and that is currently in the FEE, is automatic markdown conversion as you type. Not that it would be useful in the current implementation for all the syntax, but for some things it is really useful. Typing *  or -  converts automatically to a list, 1.  to a numbered list and *word* or **word** to italic and bold. 🙂

I’ll publish another post soon with more information about the Front-end Editor. I’d like to do a 1.0 release soon after the release of WordPress 4.0, and any help is really welcome.