FSE Program Testing Call #13: Authoring an Author Template

This post is the thirteenth call for testing (lucky number 13!) 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

Ahead of WordPress 6.0, new features and options are rapidly being added that expand upon the foundation 5.9 set. The result is this test that walks you through creating a template for your author pages, locking blocks to prevent removal or movement, new design options, a new No Results 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., and more. Simply put, this was the most fun I’ve ever had writing any test for this outreach program.

Expanded template options

To put things in perspective, 5.9 saw the launch of the Site Editor where you could only create a limited number of additional primary templates. Ahead of 6.0, the options are now far more open with the ability to add the following: Author, CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., Date, TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post., TaxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies.. Stay tuned for more options here in the future! This test will focus on creating an Author template.

Direct ability to lock blocks

Similarly, while the block locking API was released in 5.9, an interface for it didn’t exist until now. What you’ll explore in this test around locking the ability to move or remove a block is just a start too with more work to be done around further permissions like being able to disable the ability to lock / unlock globally or per user role. Having a quick and easy way to prevent unwanted changes is a huge step, whether to help pass off work to a client or to reduce the chance of mistakes for your own sake. 

Customize what no results look like

The 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 is also getting even more powerful with the new addition of a No Results block that allows you to customize what folks will see when nothing matches the query at hand. This means you can both have an elegant design for displaying content and for guiding people when there’s not. For inspiration, here’s what I came up with on my test site while writing this:

No results

No results page with a message saying an author doesn't have any posts yet and a nudge to sign up for a newsletter.

Results

List of recent posts from an author and a thank you message.

More design tools

Finally, with each release, more and more design tools and dimension controls are being added to allow you to customize things to your liking (or leave them as is). Don’t overlook this as part of the test, especially when you get to the stage of styling what you’ve created. 

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use WordPress 5.9.2 or the latest version (downloadable here).
  • Use the Twenty Twenty-Two theme. If you’d like to repeat the test or switch things up, you can always use a different block theme.
  • Use 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/ 12.9 or the latest version (latest version). 

Testing Instructions

Setup Instructions: 

  1. Have a test site using the latest version of WordPress (5.9.2 as of writing this). It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the `Full Site Editing`  listed as a feature. 
  3. Create at least two posts with different titles.
  4. Create a new user on your site by going to Users > Add New. Set the Role to at least the level of “Author”. Here are instructions to follow.
  5. 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 12.9.
  6. By the end of these steps, you should see a navigation item titled “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.) under Appearance. If you don’t, you aren’t using a block theme and need to switch themes. 

Testing Instructions:

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

These instructions are more general as they will change depending on what theme you are using. In general, you should explore a few things with this test so, if the steps don’t align with what you see, either switch to the Twenty Twenty-Two theme for ease of use or ensure you cover each of the features mentioned in the Overview section. 

Create an author template

  1. Navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage. 
  2. Once there, open the W menu (if you have a set site icon, you will see that instead) > Templates. This will open up the template list.
  3. Choose “Add New” > Select “Author”. This will open up a new blank template that displays the latest post from a single author. 

Add your structure

  1. 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. 
  2. In between the template parts, add a Group block. Within the Group block, add a Columns block set to 70/30. 
  3. In the larger Column, add a Query Loop block and select whichever option you’d like.
  4. 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. 
  5. While still focused on the Query Loop block (you might find the List View helpful at this point), use the quick inserter to add a No Results block. Here’s a quick video in case you get stuck here. 

Customize the No Results block

  1. Customize the No Results block as you’d like. This block will display content when no results are found. You can add something like “Check back for future content from this great author that we are lucky to have write with us” and/or you could add the “Subscribe Callout” pattern to nudge folks to subscribe to the site. 
  2. Once done, select the overall No Results block > Open the three dot menu > Select “Lock” > Check “Prevent Removal”. This will prevent folks from accidentally removing this without unlocking it first since it might not be obvious at first what the role is of this new block.

Style the rest

  1. From there, select the smaller Column and add whatever you’d like as a sidebar. For example, you can add a latest post block to show all posts on the site regardless of author or you can add social icons. 
  2. Select the overall Group block that you originally added and open the block settings sidebar. Explore some of the new styling options like Border control, padding, block spacing, color controls, and more. 
  3. Do the same with any other block you’d like before selecting the option to Save. For example, you can alter the font appearance, font size, colors, and more. 

Lock and view

  1. As you see fit, lock any block you’d like to as well either to prevent removal or movement. For example, you could lock the Header and Footer template parts to prevent them from being moved.
  2. Once done, view the author page of the account you are logged into to see posts displayed and view the author page of the account you created that doesn’t currently have any posts. You can find the author page by going to yoursiteurl.com/author/[username]. Here are the examples from my test site: author with posts, author without posts.

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? 
  • Did you find any features missing while creating the header?
  • 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 in the Site Editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by April 21, 2022

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