FSE Program Testing Call #20: Find Your Style

This post is the twentieth 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

Building off of the last call for testing, this effort includes both some new and some repeat items that have continued to be iterated upon. In particular, browse mode’s design continues to evolve with a clearer edit button and design of the currently active template. Tied to this, the 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. for the navigation 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. has received numerous improvements as work is underway to move the option out of experimental. Taken together, this test helps underscore just how much a single theme allows you to do and how the Site Editor tools are evolving to make quick customization increasingly intuitive. 

New items to test:

• Push changes to Styles to apply individual block stylings globally. 
• Add an option to import widgets from sidebars as a pathway for importing content from Classic themes in the Site Editor. 

Repeated from previous times: 

• Reorganizing the Site Editor to introduce browse mode, offering an easier way to navigate between content in the site editing experience.
• Introduce a new UX for the navigation block where changes (adding new menu items, creating a new menu, etc) can be made from within the block 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.. 
• Split block tools between “settings” and “appearance” to make blocks with numerous controls easier to configure and customize. 
• Offer a way to view a document containing all blocks and styles with the Stylebook allowing for changes to Styles to be seen more broadly. 
• Color randomizer that allows you to quickly switch between generated palettes. 

As with last time, this post will be updated to the latest 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/ so the latest changes can be tested ahead of the 6.2 release cycle for a faster and more accurate feedback loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.. 

Framing

To ground this experience a tiny bit more, let’s pretend you’re switching over from a Classic theme to a Block theme. After switching, you will need to import the widgets settings before re-imagining the homepage of the site, including the navigation. You’ll end by exploring various ways to style the site across different templates, both by using the Style Book and by editing blocks individually before pushing those changes globally. Your aim is to make the site look as different as possible a few times over until you find a version you’re happy with. Imagine this is your way of exploring the reaches of what’s possible with the Site Editor, all while using a single theme!

Testing Instructions 

To use a prebuilt test site: 

1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-20 
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.0. From there, head to Gutenberg > Experiments and turn every experiment except for “Zoomed out view”. 
4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu and add a few widgets. 

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/..

Switch your site

5. Explore your site and feel free to add in more personalized items, whether by adding or customizing menus under Appearance > Menus or more widgets under Appearance > Widgets. 
6. When you’re ready, head to Appearance > Themes and select “Activate” next to the Twenty Twenty-Three theme. 
7. 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.) to be brought into the browse mode experiment in the Site Editor.
8. Click through the different templates and template parts to view the various parts of your site. Eventually, select your Home template and choose the option to “Edit”. Notice that your previously created menu was automatically imported.

Import your widgets and customize your navigation 

9. Using List View, select your Footer Template Part and delete it. 
10. Add a new Template Part block, give it a name related to footer, and choose the option to “Start Blank”.
11. Open the block settings and expand the Advanced section. Under “IMPORT 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. AREA”, select the widgets section you’d like to import and click “Import”.
12. After importing, customize this new footer further as you’d like. Explore using design tools, using group/row/stack variations, and more. 
13. Once done, select the Navigation block and change a few things as you see fit. For example, you can: move some of the sub menu items to top level items, change the names of a few of the menu items, adjust the spacing between items, and customize the mobile display as you see fit.
14. Save changes.

Find your style

15. Open Styles and select “Browse Styles”. 
16. Open the Style Book by selecting the icon that looks like an eye from the main Styles interface and switch between various style variations while viewing how it impacts your site. Here’s a screenshot in case it’s helpful. This will open up an interface called the “stylebook” where you can see the styles for every block displayed. You can click that icon to toggle this option on/off as you’d like.
17. After selecting a style variation you like, head back to the main Styles interface and select “Colors”. From there, choose the “Randomize colors” option to change the colors further. 
18. After exploring the “Randomizer colors” option, head back to the main Styles interface and select “Blocks”. From there, choose a block with a style variation, like Button (not Buttons!) or Social Icons or Site Logo. You can then edit that variation to your liking globally. 

Switch it up (again and again)

19. Now that you have explored browsing Templates and Template Parts, the Style Book, customizing the Navigation block, and using the color randomizer, use this experience to switch up your site further. To do so, open a template, like the Single or Search template, and edit an individual block, like the Post Title or 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.. 
20. After editing the block to your liking, open the Settings tab, expand the “Advanced” section, and choose the option to “Apply globally”. 
21. Save changes and repeat this process a few times as you have time across templates and different blocks, relying on the Stylebook or Browse mode as needed to get a larger sense of your site. Try to make your site look as different as possible each time.

Bonus: Use patterns as much as you’d like as you customize your site! You can do this by adding patterns directly or by using the “replace” option in blocks like the Query Loop or Template Part.

Leave Feedback by February 1st, 2023

#fse-outreach-program, #fse-testing-call