Kelly Hoffman 2:01 pm on October 15, 2021

Site editing IA concepts: How to surface and access new features

Co-wrote (and designed) with @jameskoster.

We are at a point in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ development where we have many new features to help people visually create, edit, and manage their site. These include, but are not limited to:

Pages & posts: Add and edit with blocks and patterns.
Template editing: the ability to customise theme templates, and create new templates ad hoc.
Styles: change the color, fonts, and layout across your site.
Template parts: Create and edit headers, footers, and other areas.

More features continue to be added and @jameskoster and I have been iterating on how we can surface these new features in a way that is both intuitive for new users and familiar to existing users. To keep the scope focused, we looked at the features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. today along with the ones that are being worked on to be considered for the 5.9 version of WP, according to this post while keeping the near future in mind as well.

To set some context

If you are already using the Gutenberg 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, you may be familiar with the Site Editor menu item. This is where most of these new features can be found during development. While this works for the purpose of development, “Site Editing” is a broad expression that essentially spans the entirety of site management activities in WordPress. Do we want to begin down this path towards a single page app-like experience, or would it be better to keep things separate for now? It’s time to explore and design the IA (information architecture) so that we can begin to paint a picture of how we might merge this exciting functionality in to core.

Idea: Appearance Menu

Try the prototype out here or scroll through a description of it below:

Click on Appearance and you see Editor (beta) menu item. This keeps the concept of updating your look and feel of your site within the Appearance menu item, where current users are used to going to Customize. It is also intuitive for new users and matches the iterative approach product development has taken.

From there, you are brought to the homepage of your site, where you can immediately start to edit it – whether its a static page or your latest posts. Example of the latter:

From here, if you click on the W menu in the upper left corner, it opens a menu where you would be able to access Styles and Templates. And if you have any – other template parts. This navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. feels light right now but as more functionality gets added, this navigation could scale and grow along side it. For example, you can imagine that you’d have direct access to editing your posts and pages within here as well.

Click on Styles to update the colors, typography, and layout of your site. This also shows what a welcome guide could look like, which could be useful for big new features.

If you open the W menu again and click on Templates, you’ll view a list of all the templates you can now edit visually:

Idea: Separate

Try the prototype here or scroll through a description of it below:

An alternative concept would be to keep template and content editing separate for now, but still bring some of the most compelling template editing functionality (like direct manipulation of headers and footers) to the post editor.

With this approach you’d edit posts and pages the way you always have, but when you open the editor there would a new option to view the full layout:

With the layout visible it becomes possible to customize the site 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, and any other blocks that make up the underlying template. You would also be able to invoke the Styles panel to further refine the look and feel of your site.

Theme editing has always lived in the Appearance section of the navigation, so in this concept that is where you’d go to customise and create new templates.

Template editing can be a complex exercise, so to help narrow the scope this concept keeps content and template editing separate. So instead of being populated by actual content, blocks like Post Title and Post Content display simple placeholders to help you identify them.

In the future it would be interesting to explore options that enable users to load compatible content in to the template while editing to help with testing, but it’s not essential at this stage.

One trade-off with this approach is that in order to allow users to visually edit their home page when it is set to display latest posts, we’d need to introduce a placeholder “page” in the pages list:

This somewhat breaks the idea of keeping content and template editing separate, since visiting the latest posts “page” (and the “Posts page” for that matter) on the frontend will resolve to display the home or index template. Whether this trade-off is worth making may require further technical investigation and perhaps a round of usability testing, but it’s worth noting that a similar placeholder is already utilised when you create a “Posts page” in partnership with a static home page.

Curious to hear your thoughts on these ideas and alternative proposals!

Tammie Lister 5:48 pm on October 15, 2021

Here are my thoughts as I went through each prototype.

Combined:
I found myself thinking about mental models as a cornerstone here. Specifically, what would someone expect to be doing when they go to each thing. With that in mind, as I saw the appearance menu, it felt like it would just be appearance, so adding other options there feels strange or unexpected.

I do think there’s an expectation that ‘W’ will be understood, and I just am not sold that is the case. However, we need testing and data back there, so perhaps we can park that to focus on the flow itself – there are many moving pieces.

One striking thing to me is how different each screen looks, and I don’t think that’s a good thing. The intense darkness of 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., mixed with crisp white templates, contrasts when someone wants calm to work through this flow.  I would caution against adding another interface in 5.9 for template management as that is confusing with the ‘more’ menu to one side. If that ship has sailed, though, it needs to look not like a screen but a settings page.

Separate:
The separate flow seems to play to the existing WordPress model, and I don’t think that’s a bad thing for 5.9. I do wonder how it could go beyond that, though. The placeholder page is awkward, but there might be other ways that just don’t seem evident in the flow of not adding that. I can’t think of any right now, but it’s worth exploring.

I think where this flow breaks at that point, though it all seems to get very strange.

Out of the 2, the combined is the most ‘aligned’ with what has been in the editor so far, I think there’s some clumsy it’s inheriting, and the visual contrasts need some soothing. Going back to mental models, this probably is easier.

One little note, the second prototype doesn’t seem to be linking for me – first worked to get to it, though.
- James Koster 8:52 am on October 16, 2021
  
  Ultimately I think both concepts are headed in the same direction. So the question is less about which particular one to pursue, and more about how quickly we want to move.
  
  As you identified, the “Separate” concept makes use of existing information architecture and so is arguably more digestible for an imminent release. The “Combined” concept introduces new navigation patterns (on top of all the other complexities associated with template editing) so may require one or two ‘leaps of faith’ at this stage.
  One little note, the second prototype doesn’t seem to be linking for me – first worked to get to it, though.
  
  Thanks for pointing that out, I’ll fix the link now.
overclokk 1:38 pm on October 17, 2021

I want to add my thougth for the flow, I found an issue wen I try to go back to the dashboard from the FSE, the `W` button open the menu, ok, but to return to the dashboard I have to click “back -> dashboard”, and also it is not very intuitive at the first iteration, every time I have to remember where to click to go back, I prefer to have a direct link near the `W` button to go back to the dashboard.
- Daniele Scasciafratte 11:01 am on October 18, 2021
  
  Also I want back 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. menu.
  If I want to go to options of 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 or to another post type I have to go back to another page or have another tab just to use the sidebar menu.
  It is kind of crazy as 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..
- Nick Diego 12:28 pm on October 18, 2021
  
  I want to echo this. I know I saw somewhere that this was an intentional decision in the Site Editor, but there needs to be a more clear way for users to return to the WordPress admin dashboard. Even though I know how to access the correct button, when you are deep in the Site Editor (i.e. editing a specific template part), it takes multiple clicks to return to the dashboard.
  - Damon Cook 4:06 pm on October 20, 2021
    
    I think there is a deeper trust issue here. As the “W” logo in WP Admin Bar has always pointed a user to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, and after learning this by clicking it a few times (and it taking you offsite) then you stop clicking it and even create a mental avoidance.
    
    Now, it is being repurposed for a different user experience and will need to be truly implemented with meaning. Whenever I see the “W” in the Site Editor then my mental model has been trained to avoid clicking it, and I’m uneasy to click it every time. I know this is anecdotal, but wanted to mention.
    - Damon Cook 4:20 pm on October 20, 2021
      
      I did not mean to reply directly to Nick’s comment, and was targeting overclokk’s. I do not know how to use the nested “Reply” apparently. 🤦‍♂️
      - overclokk 5:33 pm on October 20, 2021
        
        @colorful-tones it is not about the ‘W’ itself but about the fact that if we want to go back to the dashboard first we have to find where to click to going back and then click 2 times to going back, that’s all.
        
        Damon Cook 5:46 pm on October 20, 2021
        
        it is not about the ‘W’ itself but about the fact that if we want to go back to the dashboard first we have to find where to click to going back and then click 2 times to going back, that’s all.
        
        @overclokk – yes, I understand. The intent of the “W” and the flow of going back are two separate issues, and both worth of investigation.
shaunandrews 8:21 pm on October 19, 2021

I have a strong preference for the “Separate” prototype. I can appreciate the instinct to mimic the way the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. is listed, but I’ve always felt it was too hidden and disconnected. This also leads to an “Appearance” menu with only two sub-items; I think it’d be more interesting to better expose “Themes” and make it a top level item, removing the need for an “Appearance” item altogether.

I think it could be interesting to explore a tighter connection between “Pages” and editing a page’s template. For example, when I want to edit my Home page or 404 page, I wouldn’t look inside “Appearance” — I’d instinctively go to “Pages.” As such, I think the “page editor” should likely default to using the “site editor” and displaying the entire template.
Miya 2:28 pm on October 20, 2021

Maybe it’s an unpopular opinion, but if I’m trying to think globally about the future of the Site Editor, I think about what is the final goal. In my opinion, an editor is the main and most used component in WordPress. So the final goal would be to make the Site Editor very central, accessible and 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..
In future, the Site Editor should include pretty much of the components and features, which exist now in different product parts. Of course, there should be Post and Page editing included, as well as Template editing. I would even prefer, if later, the Site Editor was the main screen for a user and the starting point for adding plugins, changing themes and so on.
All this means for me personally, the changes should aim in this direction as soon as possible. I would like to see the Site Editor menu item just beneath the Dashboard and the editor should contain Page and Post editing, so that in the next step you could eliminate both Pages and Posts menu items from the main menu.
Joel Yoder 3:04 pm on October 21, 2021

I’m in favor of taking the Appearance Menu approach. I work with a lot of people who are not working in WordPress every day, and one of the biggest struggles I run in to is that people who are not web developers struggle to understand what parts of a page are page-specific and what are global. If you could edit the global templates while editing a page, I foresee a lot of my users inadvertently breaking the site 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. and footer thinking they are only changing the current page.

All of that being said – I really like the idea of being able to preview the page in the full context of the site within the page editor. To me, the ideal experience would be to allow editors to preview the template within the page editor, but then take them out to a separate template editor if they want to edit something like a header. That would solve the issue of discoverability, since you wouldn’t have to dig through 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. to find it, but would still reinforce that you are making global changes to the site.
Meg Phillips 11:19 am on November 9, 2021

Editing content in different scopes within the same tool without an intentional change of scope by the user can be a really confusing experience. I see that in 5.8 with reusable blocks.

Combining the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. features with 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. editor provides a clear distinction for users…into the customizer to change content, colors, fonts, 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 which will appear on all pages and posts of your site…

Out of the customizer into the block editor for page and post specific content provides a clear break.

All the Charter Boat Bookings Pro and Community Sailing users have been using a setup like that for more than a year. We only use the block editor, customizer widgets, and blocks. It makes sense to non-technical sailors and captains that those things which affect everything are accessed in a different way. This is not to say anything specifically about the customizer, just that it was the vehicle I had at the time which would evolve gracefully into FSE in my charter boat production setting.

It seems to me that
1) the W menu could provide a new vehicle by which to “make the break in scope”
2) Access to the “W” can be easily provided to higher level users in a “clean break” from authoring
3) The co-mingling of “other” needed data typically brought in by plugins (i.e. WooCommerce, Marketing, higher level functionality still needs a clear home.
4) training content creators to navigate the site from the ‘front end’ and click into global editing scope is easily understood and somewhat intuitive. As the block editor has evolved, I and my users make great use of the “edit page” button in the WP Admin bar. Maybe the location of the “w” and the “edit page” button could be less obscured from each other or fall in line together somehow.
— Edit Page / Post / Product / CPT
— Edit Site
— Edit (that other business related stuff I don’t have a word for)

Thank you for allowing me to contribute. I am eager and exited for the change in season, change in pace, and jumping back in!