This post is the fifth call for testing 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.
Feature Overview
Not many blocks get an entire milestone dedicated to them but the Query Block did! 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. In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do.
If you find yourself interested in the future of this block, check out this recent GitHub issue asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and get excited about Gutenberg 10.5 which will offer more patterns to choose from.
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 install 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 Gutenberg (10.4 as of writing this).
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 Flow
Important Note:
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a beta feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
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 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 plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.4.
- 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. From there, make sure you are in the Index template (this should be the default upon opening).
General Testing Instructions:
- Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! Here’s a GIF that shows how to do this.
- From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing.
- In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”.
- Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options.
- Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URL”.
- From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”.
- After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help.
- Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there!
- View your site and see if what you created matches the Site Editor view.
If you’re looking for more ways to customize the experience, try changing the width of the columns, adding in additional relevant blocks, changing colors, and more.
Customization Instructions/Ideas:
Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block:
- Here’s a quick video showing how you can change the Post Title block to have a set background color, different font sizes, and different alignments.
- Here’s a quick video showing how you can change the width of the column that the Featured Image block is in to make the image larger or smaller.
- Here’s a quick video showing how you can add additional blocks to the Query Block and customize them.
- Here’s a quick video showing how you can change general alignment of the main blocks provided by the Query Block.
Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like!
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?
- What did you find particularly confusing or frustrating about the experience?
- What did you especially enjoy or appreciate about the experience?
- 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 May 5th, 2021
While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!
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 and in this GitHub repo for TT1 Blocks. 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.
#fse-outreach-program, #fse-testing-call, #full-site-editing