FSE Program Testing Call #15: Category Customization

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

This call for testing focuses on what, on the surface, feels like a common task you might have done in the Site Editor: creating a new template and applying it to some posts. As you go through the tasks though, the way the following features align will hopefully surprise you and show you a greater layer of depth in the site editing experience. 

More template options

Expanding what templates can be created from the Site Editor continues to be a high priority with a number of new options to explore. This test in particular will focus on the general CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. template but stay tuned for Gutenberg 13.7 (the next version) when you’ll be able to create a template for a specific category. This means you could have a different template for all your posts categorized as “WordPress” for example! Depending on when you participate in this call for testing, that means you might have access to this new option to explore too. 

New template picker design

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.6 offers a new, streamlined template picker design that helps both conserve space and more naturally align with other post details:

More descriptive layout controls

If you’ve been left confused by every mention of “Inherit Default Layout”, the recent update to the description of this feature will be welcomed. 

(Semi locked) Starter patterns when creating a new post

Both the patterns and the fact that various blocks are locked are all part of some of the features one can use to curate the editor experience. Even though these might not be incorporated out of the box with a new WordPress site, they are still important to test so that those who do rely on them have a great experience. In this case, the test goes through the new starter patterns that were first introduced in WordPress 6.0 with pages and are now available for any post type with Gutenberg 13.6. As a bonus, a few blocks are locked in each pattern to help explore more granular ways to control the experience. 

Using 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. in a Cover 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.

Another feature from WordPress 6.0 is making an appearance in this test, alongside some subsequent improvements to the placeholder when the featured image is in use and the easier discoverability of the option itself in the media replace option.

Testing Instructions

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.

Note on InstaWP

The folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team! 

Launch test site or setup test environment

To use a prebuilt test site: 

1. Open this link only once: https://app.instawp.io/launch?t=fse-fifteenth-call-for-testing 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. 
2. This will launch a site for you to use for up to 24 hours. Select “Access Now” to log in to the wp-admin dashboard. 
3. Save the link to your site so you can access it again during the test. 
4. Navigate 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.). This will automatically open the site editor to the template powering your homepage. 

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-Two theme by going to Appearances > Themes. Add a patterns folder to your Twenty Twenty-Two theme and add these two files: new-event-announcement.php and event-recap.php. Here’s more information about this functionality. 

3. Install and activate 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 13.6.
4. From there, navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage. 

Create a category template 

5. Once there, open the W menu > Templates. This will open up the template list. If you have a set site icon, you will see that instead of the big W. 
6. Choose “Add New” > Select “Category”. This will open up a new blank template. 
7. As you’d like, add any 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 template parts. You can do this by searching directly for “Header” or “Footer” or by adding the template part block and selecting the one you’d like. 
8. Add a Query 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. block and select whichever design option you’d like.
9. While selecting the Query Loop block, open 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. and ensure the option “Inherit query from template” has been selected. This will ensure that the right posts appear. 
10. Customize the template further as you see fit keeping in mind that this template will be used when viewing a specific category of posts. When done, hit save to publish the new template.

Create two new posts to explore patterns

11. Open the W menu (if you have a set site icon, you will see that instead) and select “Dashboard” to return to your wp-admin dashboard.
12. Under Posts > Add New to create a new post. 
13. Select the “New Event Announcement” pattern and fill in details as you’d like. For inspiration, in your post lists, there’s an example post titled “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. Museum” using this pattern. Note that a few blocks are locked! Explore what this experience is like (lock more blocks, unlock current ones, etc).
14. Set a featured image and notice how it also appears in the Cover block of the pattern. Feel free to customize this further.
15. Before publishing, open the post settings, assign the category “Events”, and under “Template” feel free to select a different template with the new pop over interface.
16. Return to the dashboard and create another new post.
17. Select the “Event Recap” pattern and fill in details as you’d like once more. For inspiration, in your post lists, there’s an example post titled “WordCamp Museum Recap” using this pattern. Note that a few blocks are locked! Explore what this experience is like. 
18. Under the “Attendees” heading, select the Group block that contains the various names. Open the sidebar settings and, under “Layout”, explore the “Inner blocks use full width” option and customize to your liking (change colors, font size, dimensions, etc).
19. Before publishing, open the post settings, assign the category “Events”, and under “Template” feel free to select a different template with the new pop over interface.

View your category template

20. Once done, view the “Event” category to see your template and posts on full display. You can find the category template by going to yoursiteurl.com/category/events/

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

• 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?

Leave Feedback by August 1st, 2022

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