Design Share: Apr 11–22

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. icon

@joen added a new filter icon for showing in 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. toolbar when no duotone filter is applied.

Design controls for interactive states

Still a work in progress, @javiarce and @joen explored some ideas to manage the style of elements depending on their state (hovered, focused, active, etc.).

WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. block patterns

@melchoyce has been working on developing resources for WordCamps based on common content patterns across sites that can be created as block patterns.

Global Styles panel 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.

@critterverse and @joen brainstormed a couple of ideas for reorganizing the Global Styles panel to streamline the 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. and better accommodate the “Browse styles” button.

Design template

@javiarce published the starter template he uses to showcase designs to the Figma community. The template contains some nice defaults like a cover, documentation elements, cursors, labels, and a simple page structure, which can be useful to speed up the repetitive setup of a new file.

Documentation design

@estelaris has been working on a design for support/documentation pages that is based on the wordpress.org/news look and feel, and shared a great update during the last Design team Show & Tell call.

About page 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. artwork

@fcoveram shared some design options for the 6.0 About page header artwork on the Trac ticket. We discussed the options in the recent Design team Show & Tell call and folks are leaning towards the option on the left!

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/ 13.0 release assets

@joen with the help of @beafialho contributed release assets for the 13.0 release of the plugin.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.

#design#design-share

Design Team Show & Tell — April 2022

Here’s a recap of our Show & Tell call today ✨

Attendees: @estelaris, @javiarce, @empireoflight, @joen, @critterverse

We reviewed a few different items during the call:

  • A design for support/documentation pages that @estelaris has been working on
  • Possible directions for the About page 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. artwork by @fcoveram (notes shared on the ticket)
  • Some WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. 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. patterns shared by @melchoyce (notes shared on the issue)

One larger topic of discussion that came up was around redesigning the About page templates/layout, and potentially even making the switch over to creating the page using blocks. This project seems like something that could be approached outside of the regular release cycle when launch assets are typically moving along too quickly to make major changes. 

Here’s a recording of the call in case you missed it. See you next month!

Design Share: Mar 28–Apr 8

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Pattern carousel

@jameskoster is helping out on a PR that moves the pattern carousel 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. to a modal.

Design section

@joen and @jameskoster polished some concepts that surface navigation menu management in a dedicated UI.

Distraction-free mode

@jameskoster has been working on an early stage exploration of an Editor mode that seeks to elevate UI away from the canvas in order to remove distraction and facilitate keyboard-first editing.

Group, Row, Stack placeholders

This week the first iteration of group/row/stack placeholders landed in the plugin, making it more immediately clear the two variants are different from the basic group.

Saving Global Styles

@critterverse shared a design for offering more granular saving options for changes made to Global Styles. This would also help with switching between style variations and allow the user to select specifically which changes they’d like to keep.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.

#design#design-share

Design contribution process

As WordPress added more open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. projects to its ecosystem and redesigned the News section, it seems a good opportunity to treat the design dimension more broadly and improve the contribution process based on the current practices.

Documentation concerns

When I started working on Openverse redesign, I struggled with finding up-to-date documentation regarding the contribution process. The procedure was slightly unclear as the design handbook suggests making a post in the Design blog and Figma had many projects, making it challenging to navigate through and where to start from.

The redesign task did not have specific tickets, and that is why my first move was to follow the most recent projects in Figma and duplicate their structures. I created a design library file mirroring the structure of the WordPress one and bringing into Openverse some 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/ design features that I considered experience’s backbones.

On the other hand, I recently discovered Gutenberg’s Design Contributions document and it is excellent explaining how to start contributing, describing the design principles, and linking the issues that need design. One place gathering Gutenberg’s design dimension. Unfortunately, it is not part of the existing handbook.

New design needs

Along with Openverse, the Photo Directory and News redesign projects made me think of the opportunity we have to expand the design contribution process and update the documentation to ease the onboarding of new contributors.

We currently have solid practices like the bi-weekly meetings, iteration posts, and the recent design share posts made by Channing. So this is not about starting from scratch but tapping into visible accomplishments.

What I have in mind ranges in the following, without any specific order or priority.

  1. Update the Design handbook documentation: Review the existing content and fix the broken links. Add step-by-step sections to start using Figma, like the duplicate files guide. Expand the meaning of designing WordPress as it tends to refer to be CMS-only. 
  2. One structure for all Design Libraries: Update the Openverse Design Library’s file structure to mirror the WordPress one. Same for new upcoming libraries.
  3. One contribution process 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/: Duplicate the Gutenberg design contribution document into repos where design proposals are shared to match the label logic.

The list above is very task-specific and can evolve quickly into a list of changes, but I still miss some bridge between project priorities and design tasks. Some contributors might hesitate to participate due to priorities unclarity and get lost among the many places where design happens.

I hope you like this idea, and please, feel free to suggest changes and add things that I am missing.

Redesign of Openverse

A few weeks ago, we introduced the new Openverse identity as the beginning of a redesign journey, where we placed the search engine within the WordPress ecosystem. Since then, we have been working on a new interface that consolidates the new brand and puts consistency with WordPress at the forefront.

You may have heard about Openverse during State of the Word 2021, which is perfect timing to dive into what’s coming next for Openverse.

Audio. The new content type

The goal of Openverse is to catalog all openly-licensed content, not just images. To start this journey, we decided to include audio results as a new content type that many creators use for various purposes. This integration demanded designing an interactive audio player component with multiple variants and 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) as a primary concern. Even when Openverse spans a simple flow, the audio browsing experience is completely different from searching for an image.

We wanted to keep the interface as clean as possible, but the vibrance of the brand colors also excited us. For this reason, we used our brand yellow for the active, ‘playing’ state. Its boldness really shines when interacting with the component.

At the same time, we wanted to highlight the artwork that creators added to their audio, whether album artwork, a podcast logo, or an image taken during a field recording, for example. For audio tracks without artwork, we plan to design a default image that uses the spectral data of the audio file to add randomness.

We will post about that in the following weeks.

Audio and images were mentioned as relevant content types by our users during the interviews we ran. For that reason, we explored the idea of having a gallery showing all content results to exhibit the strength and flexibility of Openverse. There aren’t many search engines, to our knowledge, that integrate results from different media types, and we’re excited by future possibilities like multimedia user collections.

Imagine a biology teacher making a collection of images of crows; audio files of crow calls; and 3D models of the skeletal structure of a crow’s wing!

The resulting gallery challenged us to make a simple yet interactive page to preview audio and dig into the content details.

Browsing results without leaving

Since time ago, we have been hesitant about the idea of seeing the content details as a modal. The page view provides a straightforward navigation and interaction experience when opening the source site and copying the attribution info. However, it felt as leaving the search results page and splitting the browsing experience into separated moments.

The new modal looks clean, and the main content is even more predominant. On images, the showcase space is modest, whereas audio fills the modal width to allow a seamless experience. The result details are clustered in sections, and the vertical lecture is flexible to varying heights. 

Next steps

I would love to dive into other changes like the new 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., the symbol animation when loading content, and all the accessibility challenges when designing the audio states. But for now, this snap summarizes the essence of the new Openverse.

We are looking forward to putting this redesign online and seeing what people come with. This step, after the brand work, is a solid one towards a future where Openverse offers a space for creators to use openly-licensed content.

In the meantime, see the Releases file for the audio integration mockups and the Design Library for the components used.

#design #openverse

Show and Tell — February 2022

Our monthly show and tell meeting will take place on Zoom tomorrow, Wednesday February 16th at 18:00 UTC. A zoom link will be posted in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

A few issues have already been proposed for discussion in the Design channel, including:

  • Adding the ability to create new posts from 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, Gutenberg issue #38554
  • Making inner blocks easier to locate, Gutenberg issue #38578
  • Consider a standardized way to modify hover/focus/active states for blocks, Gutenberg issue #27075

Issues don’t have to be submitted beforehand — everyone is welcome to bring projects to share, questions, and topics for discussion!

If we have time, it would also be great to take a look at the WordPress 6.0 priorities that were outlined in the recent Preliminary Roadmap for 6.0 post and accompanying Gutenberg tracking issue.

The meeting will be recorded and shared on this post.

#meeting-agenda

About WordPress 5.9

It’s about that time again: time to start creating the About page for WordPress 5.9.

I took a first pass on the About page using some preliminary copy that’s loosely based on the script for the recent Introducing WordPress 5.9 video. Here’s a link to this draft as a Google doc — all are welcome to view, edit, or comment there directly!


In addition to the page content, I’ve also mocked up a couple of different visual directions for the 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. artwork.

Direction 1 is inspired by jazz album covers and classic movie posters (particularly by this movie poster design by Saul Bass):

Direction 1: Balloons

Direction 2 is based on organic brushstoke shapes and is inspired by the lovely design work for the upcoming wordpress.org/news redesign:

Direction 2: Brushstrokes

The next steps from a design POV would be to create new header artwork in whichever style we choose for the other section pages (Credits, Freedoms, and Privacy). I’d also like to look into how the chosen look & feel could potentially be utilized for the Dashboard page to help create visual consistency between the two sections.

The featured content is still TBD but hopefully this first draft can help get the conversation going! Design feedback is very much welcome at this stage — please comment on the Trac ticket with your thoughts and ideas. 🙂

#design, #release-focus

Show and Tell for Nov. 2021

Our monthly show and tell meeting will take place on Zoom tomorrow, Wednesday November 16th at 18:00 UTC. A zoom link will be posted in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

image
The sibling inserter, the plus button, the quick inserter button, the in-between add button; Whatever you call it, this button often gets in the way. Do we need still need it? Lets chat about it.

This months discussion will focus on the [ + ] button that appears throughout the WordPress 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. There are many names for it: the sibling inserter, the plus button, the quick inserter button, the in-between add button, and more. Last year I wrote a GitHub issue that describes some of the confusion around this button, and much of it is still relevant. I’d like to focus our discussion around:

  • Validating the problems outlined in the 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/ issue.
  • Reviewing some of the suggested solutions.
  • Updating the issue with a way forward.

We’ll also have time for anyone to share their work or ask questions to the design team. Just drop a comment below, or show up and raise your hand. I hope to see you on Zoom tomorrow.

Recent Happenings

There’s so much design work happening every day across SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/., GitHub and more. For good measure, here’s a few highlights from the past few weeks…

A series of animatics shown when first visiting the site editor in WordPress 5.9.

A new welcome guide was added to the Site Editor to help explain some of the new features coming in WordPress 5.9.

Ongoing work to the Figma library aims update existing components and add new components for areas outside of the editor.

The WordPress Figma library has a new set of upcoming components in the works for you to use in your designs.

Openverse, a powerful tool that surfaces a vast range of openly-licensed content, has a new logo.

Openverse has shared some work on their new brand identity and symbol.

A new “Explore” button in the block inserter 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. opens a large modal to browse block patterns.

A new way to browse block patterns has merged and will be shipping with WordPress 5.9.

The new Site Editor now lives inside the Appearance menu. Alongside this change, the Site Editor no longer has it’s own sidebar navigation menu.

The wp-admin Appearance menu now contains items for the Editor, Styles, Templates, and Template Parts. Alongside this change, the W button within the Editor no longer displays it’s own navigation menu.

#meeting-agenda, #recent-happenings

Site Editing iA concepts – Part 2

Last Week @kellychoffman and I shared some concepts that explored how we might introduce some of the powerful site editing features 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/ 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 to WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

To briefly recap, the first concept brought template, style, and content editing together under a single “Editor” menu item in the Appearance section of the main navigation. The second concept kept these features separate, and leaned more on existing wp-admin views to access some of them.

In this post I am sharing a stress-test that I’ve performed on both concepts, to see how they handle complex plugins that add custom post types. For this test I used WooCommerce and focussed on it’s product post type. The aim here is to further distill each approach and hopefully find consensus around which one to pursue for 5.9.

Since styles are a feature that transcends content and template, I’ll be focussing on editing the latter. I’ll demonstrate the hypothetical flows to edit individual products, and to edit the template that is used to display those products. 

For the purpose of this test we’ll assume that WooCommerce fully supports 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. templates and the block editor.

TLDR: Due to the “Separate” concept leaning more on existing wp-admin list views it will require less work to implement, and less effort for plugin developers to adopt. It will also be less disruptive to existing user flows when working with custom post types.

“Combined” concept

In this concept clicking “Editor” in the Appearance menu takes you to a view where you’re able to edit the homepage of your site. From here clicking the W menu will open the navigation where you will see a new “Products” section has been added. Clicking this takes you to a product list view inside the Editor:

Clicking a product will take you to the editor view for that product, where you are able to modify the product data, the product template, and elements like 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 all at the same time.

Editing a product

To then go and edit the product template on its own, you once again open the W menu, navigate to templates and find the two new templates that WooCommerce added: “Single Product” and “Product Archive”. Clicking “Single Product” takes you to a view where you’re able to edit that template.


“Separate” concept

In this concept product management is accessed in the same way it always has been – at the top level of the wp-admin navigation. Even the list view behaves the same. However, opening a product takes you to an editor view where you’re able to toggle the visibility of the entire layout in order to visually edit other product data, or even elements of the underlying template.

Of course in an example like this – where the post type in question is so visually reliant on the template – it may make sense for WooCommerce to make the layout visible as a default for product editing. Or perhaps even force it to be permanently visible by removing the option to toggle the layout visibility. This is a detail we should consider making available to plugin authors during implementation if we choose this concept.

On that note, there’s a balance to be struck around where we draw the lines between content and template editing, so we should explore contextually locking certain blocks. For example: here it should be trivial to change the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. source, but moving it around or changing the dimensions should be either one step removed, or alert the user that they are making a template-level change.

To explicitly edit the product template you exit the edit-product view and navigate to Appearance > Templates. Just like in the last concept, here you’d find the two new templates added by the WooCommerce plugin, and you are able to go and edit one by clicking on it. As in the current post editing experience, clicking the W button simply takes you back to the Template list.

Observations

The thing that stands out most to me is the duplication that occurs in the “Combined” concept. There are effectively two places for users to manage post types – either via the existing top level “Posts” and “Products” menus they’re familiar with, or via the new Editor menu. This increases the workload on plugin authors as they need to consider both potential workflows and it also places additional cognitive load on the end user since they will need to actively choose an interface each time they want to manage things like posts and products.

Any flows accessed from list views such as trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. management and bulk editing may also end up being duplicated.

All of this will be compounded when you add more plugins/post types, and given that different plugin authors would adopt these new features at different paces, the user experience could grow increasingly inconsistent.

Another consideration is the many plugins that currently extend the existing list views. With the duplication of those views in the “Combined” approach, many of those plugins would need to be updated to support both versions. APIs can probably do much of the heavy lifting here, but ultimately this would slow down adoption of these new features as it will take plugin authors time to adapt. Users may also prefer to stick to their “tried and true” methods. Those that choose to embrace the new views could find themselves in an awkward spot if the one plugin they rely on doesn’t support them yet.

The “Separate” concept addresses each of these shortfalls by simply relying on the existing post type list views in wp-admin. The flows in which users manage all post types remain the same, and whether they get a richer block-based editing experience is solely down to whether or not the plugin has chosen to adopt these new technologies. It gives us the time to concentrate on updating the list views in isolation at a later date. Due to this, I tend to lean more towards this approach as it feels like a much smaller step with arguably equal impact, but I’m keen to hear more thoughts and feedback from y’all.

What’s next

After digesting feedback we’ll hopefully agree on how to move forwards for 5.9. From there we can open a tracking issue 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/ to work through the necessary outstanding issues and explore finer design details.

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.

Editing the theme’s Page template

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!