Michael Arestad 4:03 pm on January 11, 2016
Tags: editor ( 4 ), post-new, publishing

Improving Post New

Before I get into it, I’m going to need help to get some of these projects going. If you see something you’re interested in working on, let me know in the comments. The following project proposals are not intended to be a single feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. because they are separate projects with separate goals.

I could use your help with:

running usability tests
putting out a survey
design
managing some of these projects
development
testing (including accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access�? (i.e. unassisted) and “indirect access�? meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing)

The process

Before we get into designing, we need to do discovery (research) and a clear idea of which specific problems we’re going to solve. All of these will require research, some usability tests, maybe a survey or two,

Potential projects

I did a bit of searching on TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. (and am still doing so) specifically looking for anything related to posting or content creation. I have started some initial researching on anything related to creating content. I looked as past usability tests. I looked at some feedback around WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/’s editors as well. We can learn from some of the ideas tried there.

The following are a list of project ideas. If some get interest and traction, we will do a kickoff post for it (depending on scale) and I’ll add any resources/related information I’m aware of. Ideally, I’d like one of you to step up and lead a few of these if you have the time and are interested. If you have something you’d like to add as a potential project idea, please let me know in a comment.

Publishing UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it.

@helen brought this up as a project idea and it’s a good one. Here’s the proposal:

When running user tests for post formats during the 3.6 release cycle, one of the most striking observations was that a majority of users had a hard time locating the Publish button at all. Because it’s typically in the top right, it’s possible it’s not on the screen, and is very disconnected from the general content workflow of writing and then publishing. The most common idea is to put the buttons in the bottom bar of the editor, since it pins and makes sense within a writing flow. There are, as always, other considerations to make, such as post types without an editor or various post statuses (another problem in the current box – you can’t actually have a private draft, because it’s the same field in the database). This project would likely involve multiple approaches, storyboards, mock ups, and lots of user testing through all stages.

Related ticket: #17028

Shiny saving

Currently, when saving or updating a post the whole page reloads. The page reload makes it easy to lose your place when saving or updating. Because of the page reload, saving feels slow.

My proposal is to introduce Ajax saving to prevent the page reload. This will introduce new problems to solve. We’ll need a way to provide feedback to the user about the status of a save. It will need to be accessible. I believe those are both doable.

Related tickets:

#7756
#14364

Toolbar remix

I’d like to see what we can do to improve the editor’s toolbar. This will likely include a bit of button shuffling and some style changes. For example, I think the drop down to select the type of text (heading 1, paragraph, preformatted) should be in the primary toolbar rather than in the kitchen sinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "Kitchen Sink.".

Related ticket: #27159

Post New UX

I’d like us to take a look at the Post New UX as a whole. This might result in some mini projects/experiments rather than being a single feature plugin. I suspect the space could be utilized more efficiently. We can probably also make Post New feel a bit less overwhelming for newer users (I don’t want to remove functionality at all).

MetaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. physics

Metaboxes are helpful. That’s why we have so many of them, right? Let’s see what we can do to make them part of the posting flow rather than a bunch boxes of settings that we have to battle before publishing anything. This project will need a good amount of love and research and will need to consider how plugins/themes use or hijack them. This might be a good place to provide some patterns or suggested design practices as a resource for 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 authors.

Autosave

I think if we implement Shiny Saving, we can definitely have autosave functionality. When digging through WordPress.com editor feedback, autosave was almost universally loved. It does have some awkward issues with revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision., but I’ll talk about revisions in a second.

Revisions UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.

This is a bigger less-urgent project (unless we get Autosave in), but I think the revisions interface could use a bit of a rethink. It is currently a bit difficult to use and understand. I know @melchoyce had come up with some promising ideas during the community summit when we were discussing it with @adamsilverstein. This project will likely include some way to move between revisions quickly as well as potentially showing a different interface for viewing changes.

Don’t break my divs

It’s really easy to break just about any theme by forgetting to close a `div` or a `span` (and some other elements). I’m wondering if we can do something to warn users about unclosed htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. elements to give them some idea why their preview is looking funky. I wouldn’t try to autoclose tags.

Live preview

Wouldn’t something like a live preview (even if it’s tiny or off screen) be pretty handy? I think so.

Proofreading mode

I’ve had quite a few people request some sort of proofreading mode that allows them to comment/highlight/interact with post content. This is in the realm of projects I’m not sure are right for WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but might just be. Even if it isn’t, it could be a pretty dang rad plugin (if there isn’t one already).

Content blocks?

I was hesitant to add this as it’s been attempt a few times in the last few years (RIP CEUX). The idea of content blocks has come up again in conversation a few times over the last few weeks so I think we should revisit it with vigor. I know the Shortcake group is looking at an interface that might go hand in hand with 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. interface. The initial Shortcake implementation could be great first steps toward the block editor some of us dream about (or have nightmares about).

Thoughts?

If you are interested in tackling any of these, have a proposal in addition to these, or are have concerns/thoughts about a project, let me know in a comment.

#editor, #post-new, #publishing

Tammie 4:18 pm on January 11, 2016

This is awesome! Thanks so much for taking the time and leading the charge on this @michael-arestad. I’m really excited about what a focus on improving new posting will bring.

I’d love to be involved in usability tests, surveys and design. I am also happy to manage one and would be interested in Publishing UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. and/or Post New UX (happy to take on more than one).

I’d also be happy to be involved RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. as I already have worked in that area and absolutely feel that work needs still to be done. That would be more a secondary role as know there is already some great ideas to work from.
mapk 4:44 pm on January 11, 2016

Count me in. I’m up for usability testing, design, and managing a project as well.
jaragozzine 4:56 pm on January 11, 2016

I’m up for any of the bulleted items above. Very exciting!
Zack Katz 6:13 pm on January 11, 2016

I’m in.
Hugo Baeta 1:39 am on January 12, 2016

Count me in as well, you know where my strengths lie, so feel free to pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.�? me and assign me to whatever you think I’d be of help. I’m particularly interested in the “Toolbar remix�? stuff 😉
askoxyz 2:19 pm on January 13, 2016

@michael-arestad, I’d like a better custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. editing/creating/deleting experience as well. Like, maybe instead of having them below the post editor, use a modal like Squarespace 6 did modals (https://d1w5usc88actyi.cloudfront.net/wp-content/uploads/2013/07/1-Make-a-products-page-710×407.png). I think there’s a lot to learn from Squarespace UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. as a whole with no need to copy them.
chatmandesign 3:55 pm on January 13, 2016

In regards to metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.-boxes, I’ve created a simple 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 I’m calling Metaccordion that I’m currently betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. testing on one site in development. It adds CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site./JS to convert the never ending list of meta-boxes that allows Publish to scroll off the screen into a fixed position accordion sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., with Publish always expanded. This keeps Publish where we’re all used to it being (and avoids any issues with post types without editors), but also ensures it’s almost always visible (the sidebar can be scrolled if there’s too many items to fit, but because the boxes are collapsed, Publish is never far away).

I’ve found that when editing post types with a significant number of meta-boxes, this condensed UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. makes finding the ones I want much, much easier.

One further step I’d like to take to streamline the meta-box UI would be to group together related meta-boxes into a single expandable item. I’m currently using it on a WooCommerce site, and under any product I have expandable meta-boxes for Product Categories, Product Tags, and Brands. Instead, I’d like to have one item that says something like “Categories & Taxonomies�? and expands to show all three of those options. So far I haven’t had time to do this, in part because it requires re-jiggering the DOM and I’m a little concerned that it could break some meta-boxes for some plugins, if they weren’t implemented flexibly enough.

I believe WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ launched a new post editor UI with elements similar to this not too long ago and received generally positive response to the changes.

I don’t know if that’s the sort of thing you had in mind, but I’d be happy to contribute what little I have so far, or to further discuss ideas on streamlining, if any of this seems helpful.
- Michael Arestad 4:57 pm on January 13, 2016
  
  That is indeed one of the things I wanted to try. Awesome. Could be a good start for usability tests.
  - chatmandesign 6:53 pm on January 13, 2016
    
    Ok, I threw my code up on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/:
    
    https://github.com/cdCorey/metaccordion
    
    It’s an early development build (written originally as a quick monkey patch for my own use), but it’s been working great for me so far. It should definitely work for usability tests at the very least.
    
    If anyone cares to contribute, I’m happy to accept pull requests, or of course you can fork it if you’d rather manage things that way.
chatmandesign 4:10 pm on January 13, 2016

Here are a couple quick screenshots of my 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, if anyone’s interested:

Closed: http://glui.me/?i=7wiix0f8v0vmjed/2016-01-13_at_10.02_AM.png/
Open: http://glui.me/?i=w2onxkp30lxbndg/2016-01-13_at_10.06_AM.png/

It’s a simple change, but it lets me see all the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.-boxes at a glance, and I’ve found that to make working with them a lot easier.
askoxyz 4:53 pm on January 13, 2016

@chatmandesign that’s neat! I could definitely use that. I think that would be a great solution for custom fields as well that are under the post editor. With some sort of + and – icons next to them to add and/or delete.
susanasalgado 5:38 pm on January 13, 2016

Hi! Count me in! Research, Surveys, Usability testing and/or managing a project.
- susanasalgado 2:54 pm on January 14, 2016
  @michael-arestad maybe it’s important for you to know what projects interest me the most:
  - Publishing UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it.
  - Post New UX
  - Live preview
  Nowadays we work with several big companies that use WordPress in a daily basis so we have access to a lot of potencial users for tests.
  
  Really want to work on a project like this and improve the user’s experience.
Chris Smith 8:37 pm on January 13, 2016
@michael-arestad count me in as well: Dev, research, testing, managing pieces

As far as the projects go, I think the ones that sound the most interesting to me are:
- Publishing UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it., though I am initially leaning more towards a fixed scrolling box/button rather than tying it to the editor for the reasons @helen mentioned about CPT’s without.
- Shiny Saving, I think this could be tied into the publishing UX as a related project
- MetaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. physics
- Don’t break my divs
- Live preview
Ahmad Awais 6:42 pm on January 15, 2016

Shiny Save would be great!
Mel Choyce 11:10 pm on January 15, 2016

@karmatosed @mapk @jaragozzine-1 @katzwebdesign @hugobaeta @chatmandesign @susanasalgado @chris_d2d @mrahmadawais and anyone else interested in working on Post New, would you mind filling out this survey?

http://13233232.polldaddy.com/s/wordpress-org-improving-post-new

@michael-arestad and I are going to start organizing projects in the next week or two.
- Tammie 11:17 pm on January 15, 2016
  
  No problem at all @melchoyce – all filled out 🙂
- Sonja Leix 9:02 pm on January 21, 2016
  
  I’d love to get involved! Just filled out the survey 🙂
- Ahmad Awais 6:54 pm on January 22, 2016
  
  Done!
susanasalgado 11:52 pm on January 15, 2016

@melchoyce @michael-arestad done!
Ahmad Awais 6:31 am on January 16, 2016

@melchoyce @michael-arestad done!
Ryan Boren 3:25 pm on January 17, 2016

Right on. I’ll help with testing and support, especially on touch devices.

This ticket has some related post new ux discussion. https://core.trac.wordpress.org/ticket/29989
David Yarde 7:25 pm on January 19, 2016

Definitely interested in helping in any of the areas mentioned. Filled out the survey as well!
Stagger Lee 8:14 am on January 21, 2016

From my personal experience working with Post edit screen I dont find it much problematic working with many metaboxes as long as most of them are collapsed.

One thought often crossed my mind. “I would like to have one JS button now to open/close, toggle on/off all metaboxes�?. Besides ability to toggle them on/off one by one. Just one JS button for toggle would be enough for me, minus toggling metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. holding “Save�? button perhaps.
Giuseppe Mamone 8:49 pm on January 21, 2016

Filled out the survey 🙂 I’m interested in helping in my spare time and getting to know you all.
FolioVision 11:36 pm on January 21, 2016
Hi Michael,

Some great ideas here.

Shiny saving would be a big improvement, along with a more solid revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. manager. One click to make all the extras disappear and reappear would be great. Mini-plug: our own FV Clone Screen Options is a big help in rolling out identical workflow editing experience among a less technical team. When trying to improve workflow, adding something similar to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (managing screen options for a team might make sense).

Where we might be able to contribute code:
- Revisions. Revisions more than three old could be retained on amount of difference (i.e. near identical revisions would be deleted first)
- Previews. For our own editor Foliopress WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. (currently in maintenance mode as it’s FCKeditor based while CKeditor is current), we simple made FCKeditor parse and show the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. styles for the #content box. Makes a world of difference. This should be built into WordPress. Martin and I would be happy to give this a try if there’s interest in real WYSIWYG preview for core.
- Broken Divs. Great idea. I’d suggest some kind of pop-in or pop-up syntax editor which is not dependent on TinyMCE. Too many javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. dependencies will kill you here (js WYSIWYG editors are hard as we know from long experience). To smooth the experience, one could make Syntax another tab next to Visual and Text (although it would really be running its own miniature environment). There could be a general option in Settings/Writing to enable or disable the Syntax tab.
We could help right away with Revisions and Previews. We don’t have enough experience with syntax repair libraries to provide prompt help.

You can find us as FolioVision here or @foliovision

Thanks, Alec
Matthew Haines-Young 2:01 pm on January 22, 2016

Great idea. Would love to see Shortcake as part of a broader push towards a better publishing experience!
Mark Root-Wiley 1:51 am on February 9, 2016

Hopefully better late than never, I’d be interested in helping, specifically with Toolbar remix. I’ve written (https://mrwweb.com/wordpress-formatting-manifesto/) about a lot of the issues mentioned on #27159 and have a 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 that implements what I think a lot of us what to see from the project (https://wordpress.org/plugins/mrw-web-design-simple-tinymce/).