The Full Site Editing (FSE) outreach program is chugging along. Since December, it has called for and completed four rounds of testing. The latest round asks volunteers to provide feedback on the Query block, arguably one of the most crucial pieces of the FSE-puzzle.
Automattic Developer Relations Wrangler Anne McCarthy has been overseeing the program since its inception. Each round of testing asks participants to follow along with a set of instructions while testing a specific feature related to FSE. They can then provide feedback on what does or does not work. Thus far, the program has tested and identified issues for template-editing mode, building a custom homepage, creating a 404 page, and wrangling a restaurant-themed header.
Volunteers for the program should install the latest version of the Gutenberg plugin and the TT1 Blocks theme. Participation is open to all, and further details are available through the announcement post.
The latest test is all about the Query block — McCarthy is dubbing it a “Query Quest.”
“Not many blocks get an entire milestone dedicated to them but the Query Block did!” she wrote. “As the name implies, this is a pretty powerful block allowing you to display posts/pages on your site and customize them as you see fit. For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific category of posts.”
Generally, theme authors will primarily work with this block. However, for those end-users who will inevitably want to customize post output on their sites, they may need to at least have some basic familiarity with it or its block variations.
Building With the Query Block
Following the instructions for the testing round netted fairly consistent results between the editor and front end. Each step walks participants through the process of assembling a two-column page with posts from separate categories. Within just a few minutes, I built a few demo posts with custom categories named “Veggie Garden” and “Fruit Trees” (side note: these are pics of my plants). I sped through the process with no issues.
However, I am a bit of a pro at this point with the Query block. It is one feature I have been eyeing at least every week for months.
The two primary issues I ran into were with the “read more” link and spacing. For the more-link, it simply did not appear on the front end. When viewing the source code, the wrapper HTML was there, but the actual text was nowhere to be found.
As for spacing, this is more of a theme problem. I have harped on this issue in past testing rounds, and it is the same ol’ tune. TT1 Blocks failed to produce consistent spacing between the front and back end. One example is when using the Post Featured Image block followed by the Post Excerpt block. In the editor, there is little whitespace between the two. On the front end, there is ample room.
Some might say it is the most vital part of page building — nailing down the layout. I have voiced my concerns ad nauseam on spacing, so I have nothing new to report on the subject.
I decided to take a few extra steps and move beyond the basic testing instructions. Because it is springtime, I have been enjoying the outdoors a bit more as of late. I wanted to spruce up my Query block design. I wrapped the initial design in a Cover block with a garden-related background image, dropped in some header and intro text, and created boxes for my posts with the Group block. With a splash of color, some font-size changes, and a Spacer block here and there, I built something with a tiny bit more personality.
Testing never has to be boring. I encourage participants to grab inspiration from their own lives as they venture out on their Query Quest.
While I have my complaints about the site editor and realize we are miles away from the long-term vision, it is also amazing what is now possible. Even six months ago, building something as simple as this was not happening. More and more each day, I believe a public beta of the site editor and other FSE components in WordPress 5.8 is not such a bad idea.