FSE Program Exploration: Site Editor Sneak Peek

With WordPress 6.1 released and work deeply underway around a collection of key items for phase 2 completion, this exploration takes a peek at what’s to come in the short to medium term based on those same items to evolve the site editing experience.

As before, the focus of this exploration is to think with a more open minded, “how would I like this to work” perspective in order to gather useful insights that will help inform these in progress items. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen, points of confusion, etc. Because this work is in various stages, each item below has its own unique way of diving into what’s underway based on what’s currently possible. Remember too that this is very much a true sneak peek with this work being quite early.

In the near future, expect a call for testing dedicated to these items as they evolve and enter a more actively testable state. Depending on how work progresses, this might occur as this exploration is in progress!

Brief overview

Here’s a quick rundown of what this exploration will cover with links to the related PRs if you want more information:

  • Reorganizing the Site Editor to introduce browse mode, offering an easier way to navigate between content in the site editing experience. 
  • Redesign the Pattern inserter to allow for larger previews and improved clarity between categories. 
  • Invoke zoomed out view when selecting a style variation to better see the overall impact of the variation options.
  • Introduce a new UX for the navigation block where changes can be made from within 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. settings 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.
  • Try a random color palette generator for Styles, making it easy for users to switch up their colors intelligently.

Taken together, the aim is for each of these items to create a smoother and cohesive experience, with features working together to make the site editor a delight. For example, the new pattern inserter scales nicely with a pattern rich future and the targeted use of the zoomed out view means the view appears right when you’re likely to need it most. 

As you look over the post, remember that you can engage with all of the items or just one of them! Either way, it’s all helpful.

Task 1: Exploring browse mode, a new pattern inserter experience, and contextualized zoomed out view

For those who are curious to learn more but don’t have time to explore further, here’s a video going through each feature quickly.

Testing environment 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-exploration- 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 8 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the exploration.

If you want to use your own environment, please follow these instructions around how to test an individual 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/ PR for this PR on reorganizing the Site Editor. 

Explore

These tasks are purposefully open-ended to encourage you to make the experience your own and find the edges. When you respond below, share what approach/steps you took and why! Any bugs you find too, report away in your comment. 

  • Edit and save a template.
  • Add a few patterns (remember you can drag & drop from the Inserter). 
  • Replace a 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. or Footer with a different pattern.
  • Change style variations. 
  • Navigate between templates and template parts a few times. 

Describe your experience and what you’d like to see

As you go through the above experiences, consider the following questions as a way to reflect on what you’d like to see in the future. Don’t hold back and don’t worry about how practical an idea might be. This is just to get a sense of what folks might want to do in the future.   Answer one, all, or none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • How did this experience compare to the previous one? 
  • How cohesive did navigating between the various pieces of the experience feel?
  • What felt easier to do? Conversely, what felt harder?
  • Where else would you like to see the zoomed out view used?
  • What problems or opportunities do you anticipate with these new items?
  • Anything else? Think big!

Task 2:  Imagining a new navigation management experience 

For those who aren’t participating but are still curious, here’s a screenshot of the original design idea:

Navigation block design with a sidebar open, showing a few places to manage the items within the block.

Testing environment 

Props to Saxon Fletcher for creating the prototype used for this section, allowing us an early look at what’s underway.

  1. Open this link: https://t.maze.co/124892347 
  2. After reading the initial instructions, click “Get started”.
  3. Go through the different tasks and, if you’d like, take notes on anything as you go.
  4. When done, close out of the tab.

Describe your experience and what you’d like to see

As before, please consider the following questions as a way to reflect on what you’d like to see in the future. 

  • How did this experience compare to the current navigation block experience?
  • What felt easier to do? Conversely, what felt harder?
  • What problems or opportunities do you anticipate with this new 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.?
  • Anything else? Think big!

Task 3: Switch up your Styles with a new randomizer

Open site editor with a red background and black and white text with the Styles interface open to a section that shows the option to randomize colors.

Testing environment 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-exploration-style-switcher
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 8 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the exploration.

If you want to use your own environment, please follow these instructions around how to test an individual Gutenberg PR for this PR.

Explore

To help explore the feature, here are a few steps to take. Repeat them as many as you’d like to get a better sense of what’s changing with this PR:

  1. Head to Appearance > Editor (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.).
  2. Open the Styles settings.
  3. Open the “Colors” section.
  4. Select “Randomize colors” and see your colors change. Click this option as much as you’d like.
  5. Head back to the main Styles options and select “Browse Styles”.
  6. Change to a different style variation and repeat the same steps to randomize the colors.

Describe your experience and what you’d like to see

As before, please consider the following questions as a way to reflect on what you’d like to see in the future. 

  • How likely do you think you are to use this feature?
  • How easy or hard was it to use this feature and understand what it was doing?
  • What problems or opportunities do you anticipate with this new option?
  • Anything else? Think big!

Please share feedback by December 2nd, 2022

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in 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/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

#fse-exploration, #fse-outreach-program