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 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/. 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 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.: 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 ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: displays the post excerpt [shipped in 5.8].
Post 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.: 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 (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., 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:

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 the latest version of WordPress (downloadable here).
Use the latest version of the TT1 Blocks Theme.
Use 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/ (11.6 as of writing this).
Download and import this demo Gutenberg content (open the link and select “Download) via the WordPress importer under Tools > Import.

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:

Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
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.
Go to the website’s admin.
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 11.6.
You should now see a navigation item titled “Site 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.).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment.

General Instructions:

Head to Pages > Add New and create a new page. Title it whatever you’d like!
Add the Query Loop 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 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.
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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, 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

Paal Joachim Romdahl 6:21 pm on October 5, 2021

General Instructions:
8- Adding 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. 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..
–> 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 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. 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: 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 categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. 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 – 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.. How would I go about controlling the height of the Header?

FSE – Previewing the page on the frontend is still missing.
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: https://wordpress.slack.com/archives/C015GUFFC00/p1633443963201000
Erica Varlese 7:34 pm on October 5, 2021
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 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. 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.

WordPress.org

Feature Overview

Testing Environment

Testing steps

What to notice:

Leave Feedback by October 13th, 2021

Share this: