Title: Content Editing User Experience (CEUX) Author: Mel Choyce-Dwan Published: August 16, 2013 Last modified: January 29, 2015 --- [ ](https://profiles.wordpress.org/melchoyce/) [Mel Choyce-Dwan](https://profiles.wordpress.org/melchoyce/) 7:40 pm _on_ August 16, 2013 Tags: [3.8 ( 15 )](https://make.wordpress.org/design/tag/3-8/), [ceux ( 7 )](https://make.wordpress.org/design/tag/ceux/)    # Content Editing User Experience (CEUX) Howdy folks! This group will be focused around streamlining and improving the overall content editing experience in WordPress. We’ll be exploring better methods for curating and formatting content within the post and page editors. We have a [preliminary set of mockups](https://choycedesign.com/wpadmin-ui/content-editing.html) that we’ll be expanding and iterating on as we start. [Here’s the plugin we’ll be building](https://wordpress.org/plugins/wp-content-blocks/). Our first CEUX meeting will be taking place on [Tuesday 17:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20130820T1700) in #wordpress-ui. Providing this works for most people, we’ll continue meeting at this time each week. During our meeting, we’ll elect a team lead and discuss our process moving forward. **Current team** Our initial team is: [@melchoyce](https://profiles.wordpress.org/melchoyce/)( me!), [@wonderboymusic](https://profiles.wordpress.org/wonderboymusic/), [@saracannon](https://profiles.wordpress.org/saracannon/), [@DavidHickox](https://profiles.wordpress.org/DavidHickox/), [@georgestephanis](https://profiles.wordpress.org/georgestephanis/), [@helen](https://profiles.wordpress.org/helen/), and to a lesser extent, [@joen](https://profiles.wordpress.org/joen/) will be contributing feedback and ideas. We’ll also be communicating closely with the Page + Menu team as content blocks move into pages. [@jenmylo](https://profiles.wordpress.org/jenmylo/) has graciously agreed to advise this group. If you’re interested in getting involved, come by on Tuesday! [#3-8](https://make.wordpress.org/design/tag/3-8/), [#ceux](https://make.wordpress.org/design/tag/ceux/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?share=facebook) * [ X ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?share=x) * [ Reddit ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?share=reddit) * [ Email ](https://make.wordpress.org/design/2013/08/16/content-editing-user-experience-ceux/?subject=%5BShared%20Post%5D%20Content%20Editing%20User%20Experience%20%28CEUX%29&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2013%2F08%2F16%2Fcontent-editing-user-experience-ceux%2F&share=email) 1. ![](https://secure.gravatar.com/avatar/72b2e2a434e0d75e6ad6514ff418073933c098d3f2e73d634f2f6fe3269f1b77? s=32&d=mm&r=g) 2. [bradparbs](https://profiles.wordpress.org/bradparbs/) 8:55 pm _on_ August 16, 2013 3. Such an awesome project! 4. Shout out from #wcpvd where we’re doing some work on this now! 5. * ![](https://secure.gravatar.com/avatar/5829b86926e8946e34585c1937a39cb188ee38e8f34030d74d6404c972ea514e? s=32&d=mm&r=g) * [paaljoachim](https://profiles.wordpress.org/paaljoachim/) 10:32 pm _on_ August 17, 2013 * What about posting a summery and giving us a web link to where we can follow your progression? - ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) - [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 3:22 am _on_ August 19, 2013 - 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. is up here: [https://wordpress.org/plugins/wp-content-blocks/](https://wordpress.org/plugins/wp-content-blocks/) 6. ![](https://secure.gravatar.com/avatar/d9095387a0e7411d305d31aed735875489fa6e1fbb64c451dba1b3fd968cc502? s=32&d=mm&r=g) 7. [jayarjo](https://profiles.wordpress.org/jayarjo/) 7:45 am _on_ August 18, 2013 8. Providing a way to extend “insert 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.” module with user-defined blocks would be great. Also ability to edit the content directly on the site without moving to backend can be a lot user-friendlier, since simpler or not backend view of the content still differs from what user actually gets in the end. Have heard multiple complaints from users in this direction, even though I had a editor-style. css in place with all the site-wide stylings activated (including fonts and other subtle things). 9. In case you lack someone to actually code this, I’m ready to participate (@jayarjo). 10. * ![](https://secure.gravatar.com/avatar/5829b86926e8946e34585c1937a39cb188ee38e8f34030d74d6404c972ea514e? s=32&d=mm&r=g) * [paaljoachim](https://profiles.wordpress.org/paaljoachim/) 12:36 pm _on_ August 19, 2013 * I have noticed that [http://www.wix.com](http://www.wix.com) is becoming more and more popular. Just check out the quick tour video. Many templates that are easy to customize on the frontend. Perfect it seems for the non designer/ developer. It would be good to learn from them and incorporate similar aspects of easy to edit frontend into WordPress. Taking certain aspects from the backend and also adding them to the frontend. - Easy to cumstomize templates (backend&frontend). Save a page/post as a template to be reused. - Drag & drop elements (main elements and widgets) into a grid that can be adjusted in a simple way. * - ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) - [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 1:07 pm _on_ August 19, 2013 - Wix was actually a service I explored (alongside Squarespace and Weebly) when I first looked into improving content editing, and I actually found it to be the least intuitive and most frustrating experience out of those web building services. - Sounds like @ubernaut’s going to be working on a front-end editing project: [https://make.wordpress.org/core/2013/08/14/present-your-3-8-feature-idea-at-tomorrows-meeting/#comment-9950](https://make.wordpress.org/core/2013/08/14/present-your-3-8-feature-idea-at-tomorrows-meeting/#comment-9950) You should touch base with them about that, since it’s out of scope for this particular project. * ![](https://secure.gravatar.com/avatar/5829b86926e8946e34585c1937a39cb188ee38e8f34030d74d6404c972ea514e? s=32&d=mm&r=g) * [paaljoachim](https://profiles.wordpress.org/paaljoachim/) 3:00 pm _on_ August 19, 2013 * Wix is great for beginners when a person has gone one step further then WordPress is great. I helped a friend edit a few things using the frontend editing in Wix. It was not that bad. Certain things were not intuitive though but I helped him figure it out. * There needs to be close interaction between the groups though (backend content editing and the frontend editing group). As it would be great to have 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. elements added to a page on the backend as well as the frontend. * Of course a more advanced approach on the frontend is this: [https://webflow.com/](https://webflow.com/) - ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) - [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 3:17 pm _on_ August 19, 2013 - I agree that there needs to be a lot of communication between groups. Widgets is also interested in exploring the idea of content blocks, so we’ll be in close communication with them as well. I think with these beginning stages it’s okay to play around and try out lots of ideas, but as we refine our concepts more we’ll need to come together to make sure everything is cohesive. * ![](https://secure.gravatar.com/avatar/688e591b5d1baee94cff30ae8308c1ff5b54e336deabc134eb625d0de86020d3? s=32&d=mm&r=g) * [@ubernaut](https://profiles.wordpress.org/ubernaut/) 3:42 pm _on_ August 19, 2013 * we don’t have a p2 yet but i have a few (3) rough mockups i put together yesterday so will try to get some helping posting a p2 asap. i think the ultimate goal here should be what video games strive for a 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./ X that requires no explanation or instruction maybe thats a pipe dream but hey i like to shoot for the stars what can i say? Even if we can’t get all the way there any closer we can get to that ideal will be i think greatly beneficial to new users. - ![](https://secure.gravatar.com/avatar/688e591b5d1baee94cff30ae8308c1ff5b54e336deabc134eb625d0de86020d3? s=32&d=mm&r=g) - [@ubernaut](https://profiles.wordpress.org/ubernaut/) 3:43 pm _on_ August 19, 2013 - oh yeah i also dig your mockups for the new post edit ui mind if i borrow a piece or two for my mockups? - ![](https://secure.gravatar.com/avatar/603a3c8128c0966d4671b093c07634cf9f0f505644b82bfa5dcf57c27e5ded66? s=32&d=mm&r=g) - [Avryl](https://profiles.wordpress.org/ellatrix/) 3:50 pm _on_ August 19, 2013 - By front-end editing, do you mean editing posts and pages or the whole site (title, headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., footer, design etc.)? I’m making a few mockups as well, but they’re focussed on editing posts. I’ll share them today or tomorrow. - ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) - [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 3:53 pm _on_ August 19, 2013 - Feel free to snag anything, just know that it’s probably going to change pretty dramatically in the next couple weeks. Here’s my psd: [http://cl.ly/2h1n2W2D2y3r](http://cl.ly/2h1n2W2D2y3r) - ![](https://secure.gravatar.com/avatar/688e591b5d1baee94cff30ae8308c1ff5b54e336deabc134eb625d0de86020d3? s=32&d=mm&r=g) - [@ubernaut](https://profiles.wordpress.org/ubernaut/) 4:22 pm _on_ August 19, 2013 - well posting is the primary thing which effects almost every user role and as such i think deserves the most attention but in terms of new users i’d say a good chunk of those people are admins setting up their first blog/site. i think the logic can be applied to many aspects of editing (content and structure) - i think the main aspects of admin that do not translate well to a front end experience are the various list screens and general/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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. settings pages. i think even those cases making it seems as if your not in some entirely different world will make the experience more friendly for new users. - i need to try to get someone to give me a p2 so we we can stop going on a complete tangent from this conv though and thanks Mel i really like your dark version of the editing tools for what I’m doing and my shortcut version would have bee just invert the existing things 😛 - ![](https://secure.gravatar.com/avatar/688e591b5d1baee94cff30ae8308c1ff5b54e336deabc134eb625d0de86020d3? s=32&d=mm&r=g) - [@ubernaut](https://profiles.wordpress.org/ubernaut/) 10:22 pm _on_ August 19, 2013 - For anyone who wants to continue this conversation regarding the other idea conversation it’s here: - [http://ubernaut.wordpress.com/2013/08/19/combined-frontback-end-ui/](http://ubernaut.wordpress.com/2013/08/19/combined-frontback-end-ui/) 11. ![](https://secure.gravatar.com/avatar/086fc7a530be03c21da6459c57b753c0c59a90e796b509b21e08bf8aa3cad75e? s=32&d=mm&r=g) 12. [ryanrampersad](https://profiles.wordpress.org/ryanrampersad/) 5:52 pm _on_ August 18, 2013 13. The mockups look fantastic. I really like the look of “fieldless” fields. 14. ![](https://secure.gravatar.com/avatar/bbba102d20de696b3594e47c3d51b864b7c372309bc69a4a25038e184f86a174? s=32&d=mm&r=g) 15. [JakePT](https://profiles.wordpress.org/jakept/) 3:14 am _on_ August 19, 2013 16. I love the look of the mockups! 17. My only issues is that I wish there were a way to do blocks in columns, and I’m unclear on how image alignment works when in a 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.. 18. * ![](https://secure.gravatar.com/avatar/5437f5b6124c08e8d9ab5f8a4b6a97cf3f6966aee694ef98417db8bdcc13b937? s=32&d=mm&r=g) * [Mel Choyce](https://profiles.wordpress.org/melchoyce/) 3:23 am _on_ August 19, 2013 * We’ll be exploring both of these moving forward. 19. ![](https://secure.gravatar.com/avatar/a68b035a79126681dcec5b30ea5809ee3bc1aa31fc6c0771ed0e02f284676887? s=32&d=mm&r=g) 20. [shaunandrews](https://profiles.wordpress.org/shaunandrews/) 4:50 pm _on_ August 19, 2013 21. I’ve mentioned this to you a few times on Skype, but I want to make sure I mention in on a Make blog, too: I keep coming back to the idea of widgets-as-content-blocks. Imaging if all widgets are really just content blocks. You should be able to drop a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy- to-use way of giving design and structure control of the WordPress theme to the user. into a post, page, or 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., just as easily as 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. into your post. 22. * ![](https://secure.gravatar.com/avatar/5829b86926e8946e34585c1937a39cb188ee38e8f34030d74d6404c972ea514e? s=32&d=mm&r=g) * [paaljoachim](https://profiles.wordpress.org/paaljoachim/) 8:56 pm _on_ August 19, 2013 * +1 to that..:) 23. ![](https://secure.gravatar.com/avatar/7d1fbc9291189bda134b7bb08ed5194a918116d5a6251253990337c82f2c206a? s=32&d=mm&r=g) 24. [Azizur Rahman](https://profiles.wordpress.org/azizur/) 11:30 pm _on_ August 19, 2013 25. This is really great 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.. What does concerns me is how this blurs the separation of presentation from data architecture. 26. I am interesting in seeing how the actual data will be architect-ed. Would we have all the 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. some how composed into a single field (ie: post_content) or would the block themselves be stored such a way that it can be re-used and re-purposed for a different presentation? 27. I am interested in this project so if you are looking for another team member to help let me know. 28. ![](https://secure.gravatar.com/avatar/eb86747d2a89ed92c485b40cf34083660311a8da46098cd2a85da2e55ff100b9? s=32&d=mm&r=g) 29. [hearvox](https://profiles.wordpress.org/hearvox/) 9:29 pm _on_ August 21, 2013 30. The mockups look great, MP6-like and very inviting: will encourage people to write. Assume these are of the Visual editor (don’t see the button for the Text editor). 31. The Content Blocks idea make lotsa sense. I work w/ several national journalism sites, and we end up creating the equivalent, usually thru a homemade 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. that generates 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. w/ classes for things like Audio, Layout. (Will site-owners be able to define custom Blocks, as is possible w/ Post Types, Post Status, etc.?) 32. The biggest problem all these sites have is the way TinyMCE wreaks having on HTML entered in the Text editor. For some sites we end up avoiding the WYSIWIG, and for others we extend the HTML that TinyMCE allows, and try to turn off most of its HTML reformatting: but this always seems like a battle. 33. Most of the better articles in these journalism sites require HTML — some quite a bit of it. But any writers, and even coders, find a lot of editing/re-writing easier in Viz. So we’re constantly correcting the HTML mess TinyMCE leaves in its wake — aka, not optimum workflow. 34. Anyroad: off to install the plugin on a dev site. Thanks for everyone’s work. 35. ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) 36. [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 5:28 am _on_ August 24, 2013 37. I love the idea of content blocks! I’m a little late to the party, but I’d love to help out with any design/CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. or icons if needed. Comments are closed. # Post navigation [← Widgets, Widgets, Widgets](https://make.wordpress.org/design/2013/08/16/widgets-widgets-widgets/) [THX38 project and weekly meetings →](https://make.wordpress.org/design/2013/08/16/thx38-project/)