WordPress.com Updates Its Post Editor With a Distraction-Free Interface

WordPress.com has unveiled a refreshed post editor that makes content front and center.

The most noticeable change is the user interface. The sidebar of meta boxes is now on the right-hand side instead of the left. Clicking the Post Settings link hides the sidebar, providing a cleaner interface. The preview and publish buttons are no longer in a metabox and are permanently displayed.

New WordPress.com Post Editor
New WordPress.com Post Editor

Drafts are quickly accessible by clicking the number next to the Write button. Hovering over a draft title displays a small excerpt of the post. Unlike the distraction-free writing mode in the self-hosted version of WordPress, sidebars and other items on the screen do not disappear and reappear. This animation has been described by some as a distraction.

Joen Asmussen and Matías Ventura, two Automatticians based in Europe, helped create the new interface. In an interview conducted by John Maeda, Global Head of Computational Design and Inclusion at Automattic, Asmussen describes what he’s most excited about with the improvements. 

“Everything has a right place,” Asmussen said. “In this iteration, we’ve tried to find those places for the preview and publish buttons, as well as the post settings. By making the buttons permanently visible and the sidebar optionally toggled, my hope is that the combination will provide a seamless flow for both the person who just wants to write, as well as the person who needs to configure their post settings.”

Ventura says he is happy to bring the focus back on the content by placing it in the center. “I’m also fond of the recent drafts menu next to the ‘Write’ button, as it provides a quick way to carry on with your unfinished posts,” he said. “These editor refinements have the potential to let your work on WordPress keep you deeply in the productive state of flow.”

The core team continues to work on a block based editor for the open-source WordPress project and Asmussen hints that this approach to writing could one day end up in the WordPress.com post editor.

After testing the new editor on WordPress.com, I can say that it’s more enjoyable to use than the distraction-free writing mode in WordPress. There’s less distraction, meta boxes are either on the screen or they’re not, and I enjoyed writing without interface elements disappearing and reappearing on the screen.

If you’d like to try the new editor on a self-hosted WordPress site, you can do so through Jetpack. Visit the Jetpack dashboard in the WordPress backend, click on the Apps link, then click the Try the New Editor button.

After using the new editor, let us know what you think. How does it compare to the writing experience currently in WordPress?


5 responses to “WordPress.com Updates Its Post Editor With a Distraction-Free Interface”

  1. Just tried it, and very clean experience for sure. However, there doesn’t seem to be a way to choose between how the post is displayed front end.

    I use a theme that allows the choice between left, right, or no sidebar, and that option isn’t there in the new editor.

    Also, the ability to manually Save Draft seems to have been removed, which – while not a biggie – does leave a little less confidence in work being saved properly before publishing.

    • In the top left next to your blog title, you should see a Save link. When anything new is added to the editor, it becomes blue and clickable.

      • Ah, yes, now I see it. Very easy to miss, compared to the current set-up.
        It would make more sense to swap the “edit URL” feature for the “save”
        feature, and just let you edit the URL directly if you wanted to.

        Still, a clean interface, bodes well for future iterations.

  2. The “new editor” revolution was to put the post options from left to right, as it was before …
    (I did not resist the joke, sorry)

    In fact, the new editor design looks cool, great work!

  3. Each time WordPress “improves” the editor it makes something worse.The view page link now shows an overlapping preview instead of a page. There’s already a link for that. There are two workarounds: (1) Use the back button on the browser and refresh. But this closes the edit page. Very annoying and time-consuming. (2) Open the page or post in two tabs. Use one for editing, and refresh the other one after you save.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: