FSE Program Testing Call #10: Pattern Party

This is the tenth call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach 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. 

As a reminder, if you’d like to suggest an idea for a call for testing, it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slack channel or via DM to me (@annezazu). 

Feature Overview

Because Full Site Editing is a collection of features that allows more items to be easily edited without knowing code, new blocks needed to be created to cover more parts of your site. These blocks are generally called “Theme Blocks” as they match functionality that used to only live in themes. While a number of theme blocks were introduced in WordPress 5.8, there’s always more work to be done, including shipping even more theme blocks in future releases! 

This test is focused on pushing these lovely Theme Blocks to their limits to better determine what to prioritize and what features might remain to be documented. To make the experience feel a bit more fun and practical, we’re going to approach this test from the vantage point of creating patterns for blogs using some of these blocks. If you really like what you make, remember you could even register them on your site 🙂 

As a refresher, here’s a rundown of all of the theme blocks ready for testing with a note around which ones are included in WordPress 5.8 in case you’re inspired to use them on your site now:

  • Site Logo: allows you to display and edit the site logo [shipped in 5.8].
  • Site Tagline: allows you to display and edit your Site Tagline [shipped in 5.8]. 
  • Site Title: allows you to display and edit your Site Title [shipped in 5.8]. 
  • Query Loop: allows you to display posts and pages in various formats [shipped in 5.8]. 
  • Post Title: displays the Post Title [shipped in 5.8].
  • Post Content: displays the contents of your post [shipped in 5.8]
  • Post Date: displays the post date [shipped in 5.8]
  • Post Excerpt: displays the post excerpt [shipped in 5.8].
  • Post Featured Image: allows you to display and edit the featured image of your post [shipped in 5.8]
  • Post Categories: displays the categories of a post [shipped in 5.8]
  • Post Tags: displays the tags for a post [shipped in 5.8].
  • Login/out: displays login and out links [shipped in 5.8].
  • Page List: displays a list of all pages on your site [shipped in 5.8]
  • Template Part: allows you to display and edit various global regions of your site (header, footer, etc). 
  • Post Comment: displays an individual comment.
  • Post Comment Author: displays author for a comment. 
  • Post Comment Content: displays content of a comment.
  • Post Comment Date: displays comment date. 
  • Post Comments: displays all comments. 
  • Post Comments Count: displays comment count. 
  • Post Comments Form: displays comment form. 
  • Archive Title: Displays archive title. 
  • Term Description: Displays the description of categories, tags and custom taxonomies when viewing an archive.

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: 

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing steps

Setup Instructions:

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create at least eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  5. Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 11.6.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your sidebar, you aren’t correctly using the Site Editing experiment. 

General Instructions:

  1. Head to Pages > Add New and create a new page. Title it whatever you’d like!
  2. Add the Query Loop block and select whatever pattern you want to build upon. You can also add in a container block, like a Columns or Group block, and add in the Query Loop as you’d like.
  3. From there, make the pattern your own using as many Theme blocks listed above as you can and customizing the various settings. For example, you could create a comment heavy pattern utilizing the various comment blocks or have a particularly image focused one thanks to new improvements to the Featured Image block. Try to be as unique as possible and don’t be constrained by adding the blocks only within the Query Loop.

If you’re up for the challenge and want to take this test further, try to create your own pattern from scratch, make multiple patterns, or recreate some with your own twist from Theme designers at Automattic shown below:

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 your custom blog pattern? 
  • 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 editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by October 13th, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg. If you leave feedback in GitHub, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

Thank you to @priethor @sparklingrobots and @welcher for reviewing this post and giving me the confidence to ship it.

#fse-outreach-program, #fse-testing-call, #full-site-editing

General Instructions:
8- Adding the Query Loop block.
–> I am looking forward to additional designs.

This is fun! I clicked inside the Query Loop and hunted for additional blocks that would be natural to add to it. I clicked the top left blue inserter and scrolled to find suitable blocks. These were in the Theme section.
–> A rant Rant end <—

I viewed the page and could only see the one post. I expected to see all the posts. But it looks like I have to add categories to the Categories field in the sidebar settings in the Filters panel in the Query Loop. I had to open a new tab and go to Posts -> Categories and check out the names of the categories. It would be very useful with the multi select so that we can easily choose various categories from a drop down: http://wayback.fauppsala.se:80/wayback/20211006143736/https://github.com/WordPress/gutenberg/issues/30706
Currently the Categories use the same feature as tags have. One begins to write the name of the category and it shows up in a kind of drop down.
—> Here one could atleast show a list similar to the regular post category list.
I added the various categories and again viewed the frontend. Again I saw the one post. I assume I have to click something in the sidebar settings to be able to see more than the one post. As a select how many posts to view on the same page.
Ahh the default is “Items per Page: 1”. Which can be seen when the Query Loop is selected and one clicks an icon in the toolbar.
—> Here a default could perhaps start out with 6 or 8. Atleast more than 1.
Ahh now I understand why it starts with 1, because suddenly many more posts will show up in the backend. These look smaller than the initial post. The backend 1 post is bigger than the rest. The frontend shows all the same size.

Additional exploration.
Site Logo – has a Rounded style but no border radius control. It would be helpful to add the various new controls also to the Site Logo block. Dimensions panel etc.

FSE – Header. How would I go about controlling the height of the Header?

FSE – Previewing the page on the frontend is still missing.
http://wayback.fauppsala.se:80/wayback/20211006143736/https://github.com/WordPress/gutenberg/issues/29398

I added two column layout with focus on different categories. Doing a full width it nudged along the edge of the browser. I clicked the Columns block to see if I could add some margin or padding but there was no option to do so. It would be helpful to add a little padding on the left and right edges to give some air between the content and the edge.

That was it for now. I wanted to post this before tomorrows Pattern Party Stream: http://wayback.fauppsala.se:80/wayback/20211006143736/https://wordpress.slack.com/archives/C015GUFFC00/p1633443963201000

This is my first time doing one of these, so I apologize if my comments aren’t quite what you’re looking for!

I had the same experience with two things that @paaljoachim mentioned:

  • I was also initially surprised by 1 item per page as the default, and it took me a moment to find the settings again to change it.
  • When I select Full Width on a layout using featured images, only the image in the block that I selected appeared full width. On the front end, however, it showed all images as full width – so it was a bit unexpected based on what appeared in the editor.

For the Query Block specifically, I’m not sure if this is expected, but I didn’t find a way to get back to the initial layout options if I wanted to change. In other words, I selected my layout but wanted to change it afterwards and couldn’t really find a smooth way to do that unless I deleted the block and added it again so the selection screen appeared.