FSE Program Testing Call #26: Final touches

This post is the twenty-sixth call for testing as part of the Full Site Editing Outreach Program and likely the final one with a title to match. For more information about this experimental program, please review this FAQ for helpful details and check out how it’s going to evolve. 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 WordPress 6.4 on the horizon, this call for testing takes you through many of the major pieces set to land with this release:

• Font management with the Font Library.
• Workflow upgrades including Command Palette updates, previews of images/galleries in List View, and the ability to rename Group blocks.
• Design tooling additions highlighting the ability to set a background image for Group blocks, assigning aspect ratio for image placeholders, and image lightbox behavior. 
• Writing updates including captured toolbars and writing flow improvements.
• Pattern updates with a focus on the ability to set categories and improved insertion options.
• Switch templates in Site Editor > Pages for improved parity. 
• Block Hooks thanks to a special 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 that adds a like button automatically as every Comment Template 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.’s last child. 

Framing

You’re set to launch your new photography portfolio. You plan to add more content in the coming months so you want to ensure it’s well organized and well equipped for future tweaks/additions with new fonts and new patterns. When you originally started the site, you didn’t yet had a vision for how to finish it until now!

Testing Instructions 

For this test, please use the following pre-built site as we’ll be rapidly switching between 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/ versions:

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

Manage fonts

1. Head to Appearance > Editor > Styles > and select the pencil icon to open up the Styles panel.
2. Select Typography to view a list of active fonts and click the “Aa” icon to open up font management.
3. Upload a new font file using the drag and drop option. You can download a font from https://fonts.google.com/. 
4. From the font manager, select “Inclusive Sans”, a previously uploaded font, and choose “Delete” to uninstall this option. 
5. From there, close out of the font manager, and change the Headings and Text font option to the new font you uploaded.
6. Save changes.

Get your site organized 

7. Use Command + K or evoke the Command Palette by clicking on the Top Toolbar field and use it to open the List View (purposefully leaving out the exact command).
8. Select the Columns block containing the “Want to work with me?” text and, again using the Command Palette, group this block.
9. From there, you’ll see two different Group blocks on the page. Select each and, using the three dot menu in List View, find the “rename” option and give each a different name.

Create a pattern 

10. Select the “Want to work with me?” Group block with its new name and open the block settings.
11. Under the Styles tab, add a black and white background image from the Media Library. Adjust the colors of the text as needed afterwards. 
12. Using the three dot menu, create a new synced pattern for “Want to work with me?” content and add a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of your choosing.

Finish your Portfolio page

13. Using the Command Palette, open the draft page titled “Portfolio”. On this page, you’re going to create three sections of photos “With People”, “Without people”, and “Black and White” to show off your work alongside a section of all of your photos already listed. 
14. Add the unsynced pattern titled “Portfolio section” using whatever method of your choosing (Inserter with the + button in the top left or the Quick Inserter with the / option). 
15. Using this pattern and the default content it provides, fill out the respective details including a proper heading, description, image with a set aspect ratio that epitomizes the rest of the images, and remaining gallery items. Here’s an example of what this should look like.
16. Create all three sections following these steps: “With People”, “Without people”, and “Black and White”.
17. Change the font for each of these headings to be different than the global option set originally in Styles (and ensure all options appear).
18. Open List View and rearrange each section in a different order by dragging and dropping with help from the image and gallery previews. 
19. As a finishing touch, select the first standalone image in each section, 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 toggle on the option to “Expand on click”. 

Swap templates

19. Once done, open Block Settings and, under the Page tab, select “Pages” next to Template. 
20. From there, you’ll see options “Edit Template” or “Swap Template”. Select “Swap Template” and choose the “Portfolio” option. 
21. Before saving, change the Page status to “Published”.
22. Save changes.
23. Use the Command Palette to view your site. Notice this new Portfolio page is automatically included in your menu and that when you hover over the first standalone image in each section there’s an option to expand it and view in isolation. 

Announce your new portfolio and remove the Like button

24. Return to the Site Editor and, using the Command Palette, start the process to add a new post. 
25. Title the post “Announcing my portfolio” and write a brief paragraph, including a List block that mentions each portfolio section (“With People”, “Without people”, and “Black and White”). Notice that the block toolbar always stays with the overall list rather than each individual item. 
26. Publish the post and view it. Leave a comment on your own post and notice that there’s a Like button available. 
27. Go back into the Post Editor and, using the Command Palette, open the Single Post template. 
28. Using List View, select the Comment Template and open Block Settings. Notice there’s a Plugin section with a Like Button option turned on. Turn this option off and save changes. 

Go further

From there, view your site, click around, and make any additional changes you’d like! Create new posts, create new patterns, or adjust your site’s styles. While this walks through an initial set of items, feel free to explore further based around the new features coming in 6.4.

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 for site building and for writing new content?
• 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 October 9th, 2023

#fse-testing-call