The Query Loop block lets you choose a post type (page, post, or a custom post type), a filter (category, tag, author, keyword) and fetch that data in a loop. This closely resembles the familiar “Post” page (what used to be called the blog roll), in which posts are listed in reverse data order. But the query loop is a post page on steroids – it can be added to a post, page, template, or reusable block. You can control which fields you want to show and how many items you want to display, both per page and in total.

As you can see, the block can be added like any other block. In the example above, the short cut “/q” is used to quickly access add the block.

Next, you decide how you want to display the results of your query. This can be done with the forward and backward arrows, with the screen icon, or with the grid icon. In any case, you choose which template you want to use, such as Standard, Image at Right, Small image and title, Grid, Offset, and Large Title.

You can also just start out blank. If you choose blank you will be given four basic variations, seen in the video below:

No matter which way you start, you can always click List View later to change things around.

The Query Loop block has many settings to use to control what is displayed:

Additional settings can be found in the block’s toolbar.

Here are found setting to control how many post you want to show, how many should appear on a page (for pagination), and offset. Offset is the number of posts to skip before beginning the loop.

If you have content that you expect to repeat in other parts your site, consider creating a reusable block.

Start out by creating the block. Perhaps you might have an image and a paragraph. Once you’ve created this composited block and got the format exactly like you want, save it as a reusable block:

Making a Block Reusable:

But be careful. Unlike Block Patterns, if you change anything within a Resusable Block, all the blocks will reflect this change.

Using a Reusable Block on another post

The block below is Reusable Block, built with a Query Loop block. It displays title and excerpt from pages tagged “block editing.”

Plugin authors are creating elegant, easy to use blocks that will make your site look amazing. When you activate a plugin, you may see one or more new blocks added to your list

On the Commons, we now have two plugins – Atomic Blocks and Kadence Blocks – that provide libraries of custom blocks. When you activate the plugins and click to add a block, scroll down to see a separate section for each of these plugins that lists available blocks. (The Atomic Blocks theme also is available and works well with both libraries. Let us know if you want to make it available on your site.)

Available Blocks

What is a Block Pattern?

A Block Pattern is a collection of blocks that make up a design that can be re-used. Instead of starting from a blank page and building from scratch, users can look for a pattern that closely resembles how their page might be laid out, and copy and paste it into the editor.

Then the work begins. Users will need to customize the block, perhaps replace text and images, delete sections which they don’t want. This all is made easier via the Block List View.

Where Can I Find Block Patterns?

There are at least three places to look for Block Patterns.

1. The WordPress Pattern Page (https://wordpress.org/patterns/)

Here you will find a growing list of curated patterns collected by wordpress.org designers. There are useful filters (highlighted below) to facilitate your search.

2. GutenbergHub (https://builder.gutenberghub.com/)

Go to this site and build your page via the official patterns curated by WordPress. You will not be able to change the pattern on this site. You just click on the “Copy Code” button and then paste it into your page. Then customize it as you like.

3. Your Block Theme

If you are using a block theme, click on the plus sign at the top of your edit screen. This will reveal a panel that displays all the blocks that are available to you in the “Blocks” tab. If your theme has any patterns, they will display in the “Patterns” tab. If you have any reusable blocks, they will be displayed in the “Reusable Blocks” tab.

You can also click on the “Explore” button to get a full width display of the available patterns.

How Do I Use A Block Pattern?

Once you’ve found a pattern you like, how do you move forward?

With a Page or Post

Once you’ve found a pattern you like, simply copy and paste it into a block on your post or page.You’ll probably need to change text and images and maybe tweak the colors, but a block pattern provides a good foundation for your content.

Some patterns are designed to be used for special purposes, such as a header or footer. You can use a pattern any way you want, but the result may not be what you want. The pattern page has tabs at the top that separate patterns into categories. The default is “All.”

With A Site Template (if using a Full Site Editing theme)

If you the think the pattern could be used globally on your site, add it to one of your WordPress templates. Copy/paste it into wherever you choose. For more information on this, see Full Site Editing.

“List View” displays how the blocks work together on a page, and provides access to each block’s settings. “List View” can be accessed by clicking the icon pictured above, which is always available in the Block Editor toolbar.

In the example below, a block pattern from the Twenty Twenty-Two theme is used.

The complex block outline is displayed in “List View” on the left side of the content:

How Do Interpret My List View Mean?

In the example above, List View shows that the page is contained in a Group block. Within the group block there is a Columns block that displays three columns. The first column block has only one column within it, the second columns block has three columns inside it, and the third has three columns. Without the list view, it would be hard to figure all this out.

Using List View to Access Block Stettings

List view also makes it easy to navigate to a specific block and change its content and settings. As you click down the outline the corresponding block will be highlighted on your page or post. You can directly edit the block or you can hover over the item in the list view and click on the three vertical buttons to access its options.

The example above shows what happens when the three buttons are clicked on a selected (i.e. highlighted) block. As you can see, a number of options become available, including the option to remove the block. Remember if you remove a block, all the blocks contained within within it will be also be removed.

In List View, you can also drag and drop blocks to other places on your page, or into a container block.

To get out of the list view, simply click the X at the top right hand corner.

What Is Full Site Editing?

Full Site Editing (“FSE“) lets users design every part of a WordPress post or page, with modular blocks.  No coding is needed, but users do need to understand how FSE works and how templates are used in WordPress. FSE lets user interact with the theme’s underlying templates.

First released in WordPress 5.9, FSE lets users display complex content without the use of child themes or page builders. It lets a non-developer jump out of the confines of a rigid theme, with its identical header, logo, navigation, and footer.

Users can actually edit the templates WordPress uses to display content. But “edit” does not mean changing the underlying code. Users can now edit templates using the same block editor they use to create pages and posts. And if they want, they can create totally new templates to suit their needs.

How Do I Get Started?

The Commons currently has thre FSE themes:

• Twenty twenty=two
• Raft
• Aeonium

For this example we will use WordPress’s Twenty Twenty-Two theme.

Site Editor

In the toolbar at the top of the page, you will see a new option called “Edit Site.” When you click on this option, by default you will be taken to your “Home” template, but you can access your other templates.

The “Home” template displays your posts in reverse chronological order (when you are not using a static page in the Appearance>>Reading setting).

As you can see, the Editor is still in beta mode – it is being actively worked on by a team of developers, and the UI will continue to improve

Templates

WordPress displays content based on templates and template parts. Usually (but not always), a template “includes”  template parts, such as a common header and footer.

Here are the templates available for the Twenty Twenty-Two theme:

All these templates can be customized and if needed, be reverted back to their original state.

A user can create a new “Front Page” template by clicking the “Add New” hyperlink, highlighted above, but it will not show up in the page template drop down. It will simply replace the default template used when a visitor first visits your site.

If you want to create a new template that will show up in the template drop down, go to the page settings in the right edit panel and click on the “New” hyperlink. You will taken to the template editor where you can design your new template, using template parts, block patterns, or reusable blocks.

Template Parts

Template parts are global elements that can be added to each template. Here is a screenshot of the themes template parts:

As you can see, a user can add a new template part. These can be used with the “Template Part” block.

The Blank Template

You might want to unleash your creativity and use the Blank Template. Select this template from the page template drop-down. With this template, you can start with a blank page. This might be used to direct your viewer to a “Call to Action” page with no distractions like a header, navigation, or footer. You take total control over what is displayed.

The Block Editor is now the default editor on the Commons and we hope you use it. It is the future for WordPress. If you want, you can still use the Classic Editor (see instructions here).

Your content in the Block Editor is comprised of modular blocks. It could be just a heading block and four or five paragraph blocks. Or, you can have block containers (i.e. group, column, row blocks) that contain any number of other blocks (paragraph, image, video, heading, etc). Containers can include other containers – for example, a group block might contain a columns block.

To better visualize your page’s block outline, use the editor’s “List View.” Here you can quickly understand how your blocks are nested, and you can directly access their settings. A block’s settings drastically changes its display. Blocks often inherit settings from their container block.

We recommend that you watch this twenty minute tutorial on how to use the Block (aka “Gutenberg”) Editor:

WordPress Developers have been continually working to improve the Block Editor, and some functionality has changed since this video was created.

We hope you get used to this modular way of displaying your content.