FSE Outreach Round #5: Venturing out on a Query Quest

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.

Adding two Query blocks to the WordPress editor, each in their own columns.
Using Columns to output two category-based Query blocks.

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.

A cover block with background image behind a two-columned posts list.
Custom layout with the Query, Cover, and Columns blocks.

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.

6 responses to “FSE Outreach Round #5: Venturing out on a Query Quest”

    • Is there a particular reason? Or, just because “6.0” makes for a nice, round launch number?

      The 5.8 launch would be a public beta and only available to users who explicitly use a block-based theme.

  1. Because the goal of a beta should be to discover new or hidden issues not to ship known ones to millions of users all over the world.

    I think it’s still not good enough. And while WP doesn’t use semantic versioning, I think that for a big change like this one, it could wait one more version to iron out the glaring issues and make sure the general userbase gets a smooth experience.

    Even in marketing compaigns, it would be easier to “sell” a WordPress 6.0 than a WordPress 5.8 or 5.9, so yes, “6.0” also makes for a nice, round launch number.

    On the other hand, selling and buying into a beta is a big no, no. Casual users wouldn’t want the hassle and professional users would hate the repercussions. Forcing it on all of them only reinforces what the closed hosted competeing platforms were talking about in their marketing campaigns (one of which the Tavern was talking about a week ago).

  2. Justin! Thanks for going on yet another Query Quest despite going on so many already. It’s always neat to see how you put your own spin on the calls for testing. I love what you ended up with.

    The two primary issues I ran into were with the “read more” link and spacing.

    I’m honestly surprised I didn’t run into the Read More link issue while testing but I kept changing the text! If you change the text, the link does appear which tells me that the “Read more…” is likely a very unclear placeholder. In any case, this was discovered by someone else previously and I added your feedback along with my observations to the issue:

    https://github.com/WordPress/gutenberg/issues/29168

    As for the general spacing feedback, I very much agree. This continues to come up repeatedly in testing. I expect to see continued iterations to improve consistency here along with solutions like a Browse Mode or Preview option to help limit any necessary context switching.

    • Editing the read more text definitely works. I didn’t even know you could change it. I probably assumed you couldn’t because the cursor is a pointer when hovering/clicking it. It’s definitely not clear that it’s a placeholder. For consistency with traditional more-links, I would make “Read more…” the default text and not just a placeholder. Users could still delete it if they didn’t want it to appear.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: