FSE Program Testing Call #23: Rapid Revamp

This post is the twenty-third call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Overview

With the roadmap to 6.3 published and another version of 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/ out in the wild, it’s time to test some of the upcoming features that are in the works to upgrade and polish the experience of using the Site Editor:

  • Styles in Site View displaying style variations and improving discoverability of the more granular Style interface. 
  • Pages in Site View, rendering the last 10 pages with a link to the wp admin page list at the bottom.
  • Revision history for Styles, allowing you to roll back as you’d like.
  • Command center, offering a quick way to switch between parts of your site. 
  • Add previewing for block themes unlocking the ability to check out 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. theme before activating in the same Site Editor experience. 
  • Navigation block using the Interactivity API as a way to test the new, in-progress APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. This is just a technical change and the aim here is to ensure the experience is the same. 
  • Details block, adding a new way to hide and reveal information. 
  • List View: Allow dragging to all levels of the block hierarchy.

Much of the above is in an iterative state with more to come, like improved Detail pages with additional functionality, so this is a great chance to provide early feedback on important features. As always, the steps here are mean to guide you through the high level view of the features but you’re welcome to take the experience further by customizing more. 

Framing

Like the last call for testing, you run a site that captures “Daily Delights” about the power of everyday moments to create joy. When you first put the site together, you didn’t have a full vision of what you wanted and, after a recent post went viral, you want to make some quick changes to better reflect what you’re accomplishing. As part of this, you preview a block theme to get a sense of whether you want to switch, create a new “Work with me” page, and update your “About” page while making high level changes to your templates and Styles. Streamlining and supporting this experience are the new command center tool and revision history for styles.   

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-23&d=v1 
  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 24 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 test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 15.8+. From there, head to Gutenberg > Experiments and turn on the Command Center, Details block, Block Theme Previews, and Navigation block experiments.
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu. 

If you have any issues with manual setup, just comment on the post or 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 (@annezazu) in 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/ 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/..

Preview block themes

Note: If you want to explore other block themes, you’re free to do so! You will have to install them first for the preview to work due to this bug. Please just ensure that you end up using “Twenty Twenty-Three”. 

  1. Head to Appearance > Themes where you’ll see a few block themes installed. Select the option to Live Preview the “Twenty Twenty-Three” theme. 
  2. This will take you to a new preview option using the Site Editor where you can explore the theme. 
  3. Select the Style section and choose a style variation you like. Click “Activate and Save”. This will keep you in the Site Editor with the new theme in place. 

Rely on 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.

  1. Click the pencil icon next to Styles to open up more granular style options. Make whatever changes you’d like: add a custom color to your palette (Colors > Palette > Custom) or change the details of individual heading levels (Typography > Headings). Save your changes. 
  2. After making and saving a few changes, click the three dot menu in the Styles panel and select the last option for revisions. Here’s a visual
  3. View different revisions by clicking on them and roll back to a prior version of your choosing by selecting “Apply”. 
  4. Make more changes to Styles either to the overall site or to individual blocks. Once more, view the revisions and decide whether to roll back. 

Content and template editing 

  1. Click the W icon to return to the Site View and use the back arrows to return to the main Design section before selecting the Pages section. From there, choose “About” and click on the canvas to edit it or click the pencil icon next to About in 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..
  2. Add a details block and shorten the About page by writing a one line summary where it says “Write summary”. Take the remaining About page content, cut it, and add it to the section where it says “Type / to add a hidden block”. Feel free to customize this as much as you’d like. 
  3. Add a 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. to the page by clicking the upload icon when hovering over the block and, using List View, move it closer to the top of the template. Make any additional changes to the block order that you’d like using List View. 
  4. Save your changes.

Using the command tool 

  1. Click the W icon to return to the Site View and use the back arrows to return to the main Design section before selecting the Template section. From there, choose the “Home” template and click on the canvas to edit it or click the pencil icon next to the template name in the sidebar.
  2. Select the Navigation block and add a new item to the menu by clicking the + button in the editor itself (not in the settings sidebar).
  3. Instead of adding a current page, search for “Work with me” and notice the option to create a draft page with that title. Select that option.
  4. Press cmd + k (or ctrl + k on Windows and Linux) shortcut to open the command center and type in “About” to quickly switch to the About page.  
  5. Add in a brief note about being open to working with others in the About page content before using the same cmd + k (or ctrl + k on Windows and Linux) shortcut to switch back to the homepage template by typing “home”. 
  6. Select the overall Navigation block and make a few style or settings changes, like changing the color options or the overlay display.
  7. Click the W icon to return to the Site View and notice you have a few changes to save. Click Save and complete the save process.

Publish and view

  1. Use the back arrows to return to the main Design section before selecting the Pages section once more. 
  2. Select “Manage all pages” where you will be brought to the Pages section of the WordPress admin. 
  3. Publish the “Work with me” page before viewing your site and exploring it to ensure all of the changes you want look as you want. Be sure to click on navigation items!

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by June 8th, 2023

#fse-testing-call