GSoC: Editor Experiments

I’ve not posted on /coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. before, so, hello everyone! 🙂 I’m Janneke and I’m currently working on my GSoC project. I’m from Belgium, but I currently live in Scotland and study philosophy at the University of Glasgow. This is something different entirely, but I started playing with WordPress a bit last year and enjoyed it a lot. 🙂

The original proposal was focussed on the front-end editor and content blocks, but that has changed a bit. I’ll focus on the back-end editor first instead, though the work will likely be reusable for a front-end editor. I’ll also focus on a bit more than just “content blocks”, so that’s why I’ve titled this “Editor Experiments”.

My general goals are to try to simplify and visualise the editor more, and to improve the workflow by providing as many tools as possible inline, at the right place and time. A lot of these ideas are not new, of course, and can be found in other editors and Joen‘s and Mel‘s mockups from last year. In order to visualise the editor more, I’ll try to make it easy for plugins to register shortcodes with previews for them, like there are now previews for a couple of media shortcodes such as galleries.

I’ll post an update on this blogblog (versus network, site) every Friday with the progress I’ve made. I meant to publish a post last Friday, but didn’t have access to this blog yet, so here’s one for both weeks. I’ve set up a GitHub repo, and for now that’s the only place where you can download the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

Sooo.

I’ve empty the TinyMCE toolbar, leaving only the most general tools, undo/redo, paste as plain text, remove format and help. On the other side we can control the the screen: switch between visual and text mode and activate fullscreen mode.

Screen Shot 2014-05-30 at 13.35.31

Instead of putting the title in a tiny box, I moved it to the editor as a first heading so it looks the same as on the front-end. Themes can style it appropriately.

Screen Shot 2014-05-30 at 13.41.37

Whenever you move the focus to an empty paragraph, a suggestion pops up to insert a “content blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.”.

Screen Shot 2014-05-30 at 13.46.29

To insert aligned images, you can put your cursor at the start of a paragraph.

Screen Shot 2014-05-30 at 13.58.42

Clicking on it gives you some kind of modal, where you can choose a block to add to your post. Of course, in the future plugins will be able to add their own blocks by registering shortcodes. So blocks can be block level HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. elements and block level shortcodes.

Screen Shot 2014-05-30 at 13.49.21

What happens after clicking on one of the blocks will depend on the block. Clicking on any of the media blocks will forward you to the media modal. Plugins can have a custom modal to configure the shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site., which will likely also be used to edit it. Of course, blocks that require no configuration are added immediately (like a horizontal rule).

To format text, you should select it, and a toolbar will pop up.

Screen Shot 2014-05-30 at 14.03.56

And let’s add a link.

Screen Shot 2014-05-30 at 14.06.06

That’s it for now. 🙂

In the next two weeks I’ll work on the registration of views for shortcodes.

Now I’d love to hear what you think! I really value your opinion and brilliant ideas. Please do try it, and file issues on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.

#editor, #gsoc