A cleaner, more refined experience for the WordPress.com editor.
A Few Tiny Steps Towards an Improved Writing Space at WordPress.com
Today we’re proud to unveil some design changes to the WordPress.com editor. It has the same great features you’ve come to expect, but with a cleaner, more refined experience — and a few new improvements, like a distraction-free writing mode.
To give you a tour, I chatted with the two people who helped to create it. Joen Asmussen and Matías Ventura are two Europe-based computational designers at Automattic who have been designing different aspects of the WordPress.com experience over the past six years. It’s certainly come a long way from its very first prototype:
… and we also know there’s still a long way to go!
JM: Much of what we know about design is grounded in experiences in the physical world, and you can learn a lot about a designer from the objects that they admire. I understand that your favorite designed object is a … door handle?
Joen: Hah, yes indeed! Or perhaps clarification is needed — one of my favorites. A guiding principle of mine is that the best design is invisible. It is functional to the point that you forget how it works: you just use it. The door handle is a design that has been honed for who knows how long — it’s easy to forget that it was once designed from scratch. And everyone knows how to use a door handle. That makes it a great design.
JM: What inspirations do you take from those objects to the work you bring to a digitally based product?
Matías: I think that same clarity of purpose and the ability to adapt to whatever complex ideas a person wants to express or achieve is something digital tools should seek to provide. The WordPress editor is a good example of this goal, because it needs to be immediately evident for someone who wants to just write yet also capable of fulfilling a varied spectrum of needs.
Joen: Products are never finished, and there are always aspects that can be refined or improved, the ultimate goal being to make using the product easier, faster, second-nature. If we can refine the editor to the point that its usage becomes second nature, we’ll have something great.
Today, we know that design is more about iteration than it is about perfection, but that absolutely does not stop designers like Joen and Matías from iterating with the spirit of perfection. And with the new set of refinements launching today on WordPress.com, one can definitely see that commitment to craft in action. Those refinements include:
- A new distraction-free writing mode.
- Your recent drafts available in the top toolbar.
- Better clarity on the saved state of a post.
- Permanently visible publish/preview buttons.
Together, we hope they will they help fine-tune the writing experience. (And if you have a self-hosted WordPress site with the Jetpack plugin, you’ll also be able to use the new editor features.)
JM: What are you most excited about with this improved writing experience, and what do you hope most for the writer when they’re using it?
Joen: Everything has a right place. 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.
Matías: I’m glad we were able to bring back the notion of a distraction free environment that puts the content 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. These editor refinements have the potential to let your work on WordPress keep you deeply in the productive state of flow.
JM: Are there any other design evolutions or revolutions coming down the pipeline for WordPress.com that you can speak about?
Joen: There’s a group of us focusing on editor improvements right now in the WordPress community at large. The key bits are embracing “blocks” as a way to attach more advanced layout options to each section of a post, so people can easily and quickly write richer articles than they could in the past.
Matías: We want to make it easy, and pleasurable, to create any kind of content with the editor. I believe that the essence of design is about the intersection of culture and technology — and we’re doing just that with this improved writing experience. It is a privilege that this effort is being done within the diverse open source community of WordPress, it means you not only own your content but you also have ownership over the tools with which it is created.
JM: Thanks so much for your time, Joen and Matías! I’ve enjoyed using the new distraction-free writing experience and can tell you I definitely got this post finished a little faster than usual. You’ve given me new focus.
I’m going to be honest, the position and size of the publish and schedule button is completely wrong. It is even more difficult not to accidentally hit publish when you are trying to set up a schedule (even worse when using a touch screen and not a mouse) and given this is the one button you are going to use every single time you are writing a post it needs far more prominence in the design.
Also, why don’t the tools scroll down the page when you are writing long posts. To have to return to the top of the post to run the spell check or insert a link is just plain silly.
I see this as screen real estate saver for smaller mobile devices. For those who have been blogging for last few years, WP-Admin., works fine for my edit needs. I can see for those learning wordpress.com for blogging in past year or so, overwhelmed with too many buttons, choices.
I don’t see the Edit backend in terms of “distractions”.
I find myself needing the access I get from WP-Admin rather more but I think the bigger thing is the needs of the mobile blogger are different from one using something like laptop or a traditional desktop pc which can’t be easily replaced by this more mobile friendly set up. You see this even on sites revamped for mainly mobile users where the desktop experience is somewhat reduced.
I like the new design. It is indeed clutter free, less distractions. Will need some time to getting used to the new interface.
I was thinking if there is or could be like a category altogether, which could be used as a draft folder. I mean hidden from the public view, where all drafts could be sorted and saved into. As such, I believe the categories that are in a blog show up on the site. Is there a possibility to create a category but not have it show up on the website? What say?
I’m not sure if hiding the settings, and putting it on the right instead of left should be called an improvement. I mean, what’s the difference?
And I don’t see any improvement concerning some tools that are only available in the WP-ADMIN editor, like inserting a poll.
Guess, I will still switch between the two, depending on my needs.
I’m fine with the wp-admin editor. I’ve tried the new editor in all its iterations and haven’t liked any of them. Any way I can get rid of the message about switching to the new, “improved” editor?
The post tools and features moving to the right hand side, is a welcome change. Thank you. I have some feedback:
The category list is showing up in alphabetic sort order. This is unlike how it shows up in the classic editor. Although the search filter is nice, but please see if you can provide an ability to keep the same classic sort look for categories. Otherwise it will be very hard to adjust.
Please change the “beep beep bop” terminology. You must have seen countless number of people complaining about it.
Setting the Featured Image makes it show up at the top of the editor (in a very large size). This takes up too much of the screen space for no good reason. This was one of the first gripe I had which made me not use the new editor. The same is still the case. The featured image at the top of the screen is really useless because it is also there on the right hand side (exactly like how it is in the classic editor). Please consider not showing the featured image at the top of the screen in the editor view.
Looks better, but I agree with those who say this is best for writers on mobile devices. On my desktop, I prefer the WP-Admin space and don’t find it cumbersome at all—except that now the option to go there is at the bottom of the My Sites menu. Maybe that is to help newbie writers avoid a space that might be confusing to them. It’s all good, as long as you don’t take away the WP-Admin from us.
As with all things it will take a bit of getting use to however it would have been nice to get a bit of notice. I signed in and there it was…. a bit confusing without an introduction.
It took me by surprise but I do like the changes. Can I bring up something related to the word press editor? I often work out of coffee shops using their WiFi and with that the wp-editor becomes very slow and often unusable. That’s due to slow WiFi. My workaround is to write in Microsoft Word off line, and then publish to word press, often as a draft. It would be great if I could use the wp-editor off line and then download when I want to. Might that be a future possibility? Its just a suggestion.
I still at tims like to use the old WP editor, but otherwise, before the change, I liked that editor. Especially on a touch screen. This one is taking some getting used to for me, but I do like it when on my laptop, but now more frustrating on a touch screen.
I really like it. In my humble opinion, it looks cleaner and in a way, it feels more natural. Don’t know if I made much sense.
I like the revisions link on the new editor and the scheduler adjacent to publish –
Where have the categories and tags moved to? Up till this update they were available on posts but now they have disappeared! Also the options take up all the screen space in portrait mode on Tablet, I’m having to work landscape (and keyboard takes up all the room) or continually switch to desktop mode!
One more feedback.
The editor processes html table and short codes, right within the Visual tab. It then throws lots of additional and unnecessary HTML tags in the html window. This is unlike how the classic editor reacts. It adds clutter and make it an unusable experience. Please look into it.
It’s pretty. I do like how it’s clutter free. But, it doesn’t show my specific theme’s “post options”, so that requires me to log back into the classic version to use these options.
“Also, why don’t the tools scroll down the page when you are writing long posts. To have to return to the top of the post to run the spell check or insert a link is just plain silly.”
Commenting on this statement… I use Safari or Firefox and my toolbar does not come down with the text box. Sometimes there is a bar across what I am writing and I cannot find my place to continue with the post.
One thing that still irritate me much is the ability to select the images based on the ‘uploaded to this post’ like the classic editor. I have several contributors and editors working on posts and sometimes when I left the draft for a while, it’s gonna take a while to find the images already uploaded.
Not really feeling it but it does look cleaner. I would love to see the team work on something I have known many of us have expressed in the past. An automatic signature.
I close all my posts the same way and it is so redundant to write and then add the links Every Single Time.
If this has been done and I am the only idiot that is unaware please let me know.
I just wanted to add my voice to those saying whatever changes you make please don’t get rid of the old editor!
I do all my writing in Word because I want a local saved copy and it just works more smoothly. Then I paste into the WP editor and do all my formatting, adding photos, etc.
I do a lot of this online stuff on my tablet, and I actually find the old editor to be much more responsive. The more modern version tends to have odd delays and be kinda jerky, even though it’s apparently designed for mobile devices. Plus I vastly prefer the post preview to come up in a new browser tab, rather than as an overlay on the editing page. I often flip back and forth between them several times when polishing up a post right before publishing. Having to reload the preview each time is cumbersome.
This is not a complaint. Just a beg to keep both editors available so we have a choice and can find which works best for us individually.
Great but is the button “Get Shortcut” still missing? The one so practical in the old fashioned way..
I like the placement of the trash button in lower right corner in its own section. I always feared I’d click on trash by mistake. No more worries.
This much improves the Author Experience (AX) for WordPress.com. While WordPress is lauded for ease of use, the WordPress.com interface can be confusing and intimidating for new users. I teach WordPress classes, and while we concentrate on self-hosted WordPress, we touch on WordPress.com. It’s important to differentiated WordPress.com and WordPress.org and WordPress as Open Source Software, as Community, and as ecosystem.
You’d think that registering at WordPress.com would be a friendly and inviting experience, but it’s rather confusing for new users. Most WordPress trainers skip over this, but since WordPress.com accounts offer many benefits, it’s a central doorway into the ecosystem. Most of my students are totally lost after registering, and we just give them a tour, and move on to WordPress.org for the real deal…
This new UX for the default WordPress.com editor helps clear things up. Users just want to post content, they don’t want to spend hours trying to figure out a navigation system that pulls them in more directions than they can digest. Clarity is indeed the key word for this design, clearly presenting content editing, preview, and settings in an intuitive manner.
I figured I put this here BC I can’t find out where to put this.You keep changing up your website has messed me up when I tried to put up a new post up it kept bringing something else up. So when I tried to upload my post it wouldn’t do it but it finally did after like 5 tries after trying to fight this thing that kept coming up. Feeling disappointed. Just letting u know this. I like this site alot
One thing that’s missing, is the underline icon beside the B and i icons.
Underlining for hyperlinks, whether given as http addresses, or embedded into words / phrases, is crucial in identifying them as links (especially if embedded into text).
Not everyone is familiar with the keyboard shortcuts, or systems used on tablets (like the iPad); besides which, my iPad, for example, sometimes refuses to cooperate – and it’s only just over 1 year old!
Please (pretty please, with cherries on top) reinstate the underline icon 🐵
So far I like the new editor. I like how it prompts me to take care of the categories and tags part of my post first, so I get that out of the way. It used to be something I’d leave until the end and sometimes almost forget. Thanks for the update, posting is less of a chore now.
What about basic features that the new editor lost, like the control for changing text direction beetween left to right and right to left?
I do love the clean look of it and it is easier to use, so thank you.
Thank you very much for the hard work. I really do like like the changes a lot.
Whilst I generally prefer the traditional WP admin editior. The new editior certainly looks like it has a lot of promise.
wow.. nice work
Well, it sounds great.Thanks:D
It’s nice and worth to try it
1. Certainly an improvement, getting the side bar out of the way.
2. The buttons on top should have tool tips to tell you what they are.
One, a star, brings back or removes the side bar, but why not say so? People are afraid to press an unknown button, it may destroy work!
3. Which is the preview? The small button saying view page? It shows nothing! Or the eye?
And how do you get back to the editor from a preview?
4. I would welcome the tool list to appear also on the HTML page.
5. Someone wanted columns and tables – in fairness these are there already via HTML and I already use them.
6. Finally, your support team have promised to look intio for me a far more serious problem, that the visual editor removes codes.
7. OH! and a warning — do not use the Avast browser, it cleans out the editor. I use opera.
I’ll be honest with you. I blog primarily on my computer, and I prefer your old editor. Whenever the new one appears I cringe and do whatever I can to click my way back to the original. Its design doesn’t bother me in the least.
On one hand I want to give your new editor a chance. On the other, I’m really reluctant to use it. Right now I want to avoid it until and unless it becomes my only option.
I’m so excited to try this. In the past, I’ve found I keep going back to the “original” editor, even though I truly love change and updates. Ready to give it a shot again Keep up the good work!
Is it only me who’s experiencing this irritating bug with the new editor? Every time I type a new line, it gets hidden BEHIND the opaque “Saved” bar that Joen, Matías, and other developers have put in the bottom of the writing space. When are you going to fix this annoying big thing? It’s making the whole writing experience very distracting, as I’m like a blind person typing and manually scrolling down with my mouse every 2 seconds.
I’ll have to read this post in more depth tomorrow, but it looks interesting.
Is there a way, or will there be a way, to specify runaround in respects to a photo? I come from a design background, so I wanted to left justify a photo and have the text runaround the photo in a pleasing matter in my blogpost, but I didn’t see any options for setting that up.
I’m also interested in subheadings and being able to add a tag line under the title of a post. Will that be something that will eventually be easy to do in your WYSIWYG editor?
wow .. sounds great
I use Chrome and also having trouble at the bottom of the page. It is very annoying and is really affecting my flow. Please also push a fix to Chrome. Making blog posts now is frustrating rather than fun.