Distraction-free Writing Mode

Once upon a time in WordPress there was a New Feature called Distraction-free writing mode. You accessed it by clicking the icon in the editor toolbar that means full screen pretty much everywhere on the web.

post editor toolbar

It would load a new screen tha mostly just consisted of a writing box not surrounded by meta boxes or formatting, and what limited formatting options there were would only appear when you moused out of the writing area. It wasn’t perfect (I would have liked that fading toolbar to have all the same formatting options as the regular editor) but it was pretty non-distracting, and it just felt calm.

old distraction-free writing interface

A while back I noticed some changes in the wp-admin regular editor. All the navigation and meta boxes now faded away while you were writing, and I thought, “Oh, that’s pretty nice, kind of a DFW Lite!” I didn’t pay too much attention, as I was just writing a quick post, but in my head I approved, and thought it was a good improvement. Until this morning.

Most of my blog-based activity happens on work-related blogs that have front-end posting forms, so it’s been a while since I tried to access DFW mode. But I was going to be writing a long post, and I wanted to go over into that peaceful screen, so I clicked on the full-screen icon. That’s when I discovered that what I thought was DFW Lite was actually the new DFW. There was no more new screen.

At first I thought,”Hm, that’s a lot more efficient. Good for them!” Then I started writing, and thought, “[Letters-in-a-configuration-to-replicate-my-slightly-alarmed-and-uncomfortable-sound]!” I hated to admit it, but I felt physically uncomfortable. Am I turning into Sheldon (skip to 3:34)? Crap! Anyway, here’s why I don’t love the new DFW.

When wp core switched over to the “toolbar anchors to top of editor no matter how long your post” setup, users lost the ability to grab a corner of the editor and drag it to make it taller. Since it is supposed to automatically resize as you write, most people thought this was a tradeoff with a net benefit, and even though I really didn’t want to lose my little corner resize handle, I agreed that the net benefit was worth it. The thing is, if in your head you’ve already thought out a long post, starting in the small box feels cramped, kind of like when you have to repack a sleeping bag and you’re smooshing it with all your might to get it to fit back into the compact stuff sack.

Think about opening a New Document in MS Word (or equivalent writing program) , or a writer putting a fresh piece of paper in the typewriter (for those who are too young to remember, it’s like this). There have been reams written by famous authors in the past about the feeling that action engenders — a feeling of limitless possibilities, a knock on the creative door, an open road ahead. That’s what DFW tried to emulate. Starting in the small box instead of the full height box feels like possibilities with limits, a creative window that won’t open more than 3 inches for safety, a road with one lane closed for construction. Thoughts scrunch down to try to fit into the available space.

Even when the box expands to be the height of the screen (minus padding against top and bottom of browser), a chunk of space is lost at the top for the toolbar. That fade it used to have really did remove distraction. I wish there had been a way to combine the zen of the fade away (Matt’s original nickname for DFW was zen mode) with the convenience of the always-at-top placement.

In the old DFW, the writing window really did have that feeling of a fresh New Document or crisp new sheet of paper. Now, even once it’s tall, it’s a bit off-center to the left, because that’s where the editor box is when on a screen containing navigation and metaboxes.

Screenshot of current distraction-free mode

There was a time (pre-2000) when I didn’t think too much about alignment in UIs. Then I got a lot of design ideas drilled into my head that stuck, especially regarding alignment. I like asymmetry in a lot of things, always have. Hell, in a site we were just working on one of the things we said we wanted was some asymmetry. But for DFW, the symmetry — the centeredness — was a big part of what made that screen so calming. Your brain didn’t have to do any pattern recognition or internal balancing to make it feel right. But now it skews to the left and it’s driving me crazy, Sheldon style. This isn’t zen for me; it’s a misused apostrophe, a lowercase p, a cabinet door left open.

I thought I’d be a holdout forever against using the new wordpress.com posting interface (I have a lot of issues with it, surprise), but, well, their DFW has that open and symmetrical feeling (even if it has other problems) that makes for a non-Sheldony writing experience.

Screenshot of distraction-free writing mode on wordpress.com

So this might be my last post written in wp-admin DFW mode for now. Farewell, old friend!

* * *

Standard disclaimer when writing about WordPress: This is my personal opinion. I have not been the UX lead for WordPress core for a couple of years now, so this post on my personal blog should not be seen as representing the WordPress project in any way, it’s just my personal experience with a user interface.

9 thoughts on “Distraction-free Writing Mode

  1. Pingback: Ideas for small improvements to the new Distraction-Free Writing | Post Status

  2. I was a big fan of the original DFW and have come to bear the new one. I would like even less distraction. I’ve never used or even visited the wordpress.com interface recently. Thanks for mentioning that. It may become my new go to, as well. Though, I think I’ll have to use some local styling to get rid of that invasive blue bar at the top.

    • It’s true that the blue bar is bigger than the normal black admin bar, but it’s a trade-off for me since I don’t like the heaviness of the black color. What would be nice would be if the blue bar slid up to hide itself when you’re writing, so the editor toolbar would be at the top and the screen be emptier.

  3. Pingback: Proposed Enhancements to Distraction-free Writing in WordPress

  4. Yup, agreed. Clicking the button before to enter a full-page, clean and crisp document window “was” distraction free. It’s a little weird now. If they changed it back I wouldn’t be mad…

  5. Pingback: 20 Free Blogging Tools You’ll Find Useful - p6design.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s