WordPress blocks for full site editing

There are new WordPress blocks for full site editing to help you build sites and not only single posts and pages.

You can use all the blocks with the latest version of the Gutenberg plugin. Most of them are available for all themes and do not need a theme that supports full site editing.

👋 Friends, I am in the process of moving the information about each block to separate pages. When a new page is created, you will see the block listed in the menu to the left.

Estimated reading time: 5 minutes

Available blocks

Post comments

This block displays multiple comments.
It outputs comments using the function comments_template() on the front. Refer to https://developer.wordpress.org/reference/functions/comments_template/

Sidebar settings: Typography, colors.

Toolbar settings: Left, right, and center align, full-width and wide width.

Markup:

<!-- wp:post-comments /-->

Post comment

This block displays a single comment. When the block is placed, you must enter the comment ID manually.

Markup:

<!-- wp:post-comment {"commentId":1} -->
<div class="wp-block-post-comment"></div>
<!-- /wp:post-comment -->

Post comment author

Displays the comment author name. This inner block can only be placed inside the post comment block.

Post comment date

Displays the comment date. This inner block can only be placed inside the post comment block.

Post comment content

Displays the comment content. This inner block can only be placed inside the post comment block.

Post comments count

Sidebar settings: Typography, colors.

Toolbar settings: Left, right, and center align.

Markup:

<!-- wp:post-comments-count /-->

Output:

<span class="wp-block-post-comments-count">1</span>

Post comments form

Uses comment_form() on the front, refer to https://developer.wordpress.org/reference/functions/comment_form/

Sidebar settings: Typography, colors.

Toolbar settings: Left, right, and center align.

Markup:

<!-- wp:post-comments-form /-->

Post comments link

A link to the comment form, often placed in archives. The block shows the number of comments or a text saying “No comments.”

Sidebar settings: Typography, colors.

Toolbar settings: Left, right, and center align.

Markup:

<!-- wp:post-comments-link /-->

Query, Loop, Post template and query pagination (5.8)

This new WordPress block for full site editing supports premade layouts and content filters. It displays lists of posts and is similar to the latest posts block but more advanced.

Developers can create custom queries for different post types, sticky posts, per category, and more.

In WordPress 5.8 and Gutenberg 10.9, the two main blocks were renamed:
The query block is labeled query loop
The query loop block is changed to post template

The query loop (new label) determines what will be queried from the database. For example, a set number of latest posts. It has an alias block name called post list.

The post template (new name) displays the content, for example, the post title, post excerpt, post author, or date.
What is displayed depends on the individual blocks placed inside the loop block.

Query pagination outputs links to the next and previous pages.

The most basic markup:

<!-- wp:query -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- /wp:post-template -->
<!-- wp:query-pagination /-->
</div>
<!-- /wp:query /-->

Example with content inside the loop:

<!-- wp:query {"queryId":0,"query":{"per_page":4,"pages":5,"offset":0}} --><div class="wp-block-query">

<!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- /wp:post-template -->

<!-- wp:query-pagination /-->
</div>
<!-- /wp:query /-->

Post list variations and designs

The query block has ten premade designs for displaying posts: six advanced and four basic designs.
When you place a query or post list block, you can see previews of the advanced designs, either one by one inside a carousel or as a grid:

The query block is the most advanced of the new blocks in WordPress 5.8.
It includes a carousel with a preview of the different designs that are available. It shows the placement and order of blocks like the post title, featured image, post excerpt, and post dates.

Basic designs are selectable when you choose the “Start blank” option:

Title & Date
Title & Excerpt
Title, Date & Excerpt
Image, Date, & Title

When the Start blank option for the query is selected, four optional basic designs are presented with icons and a short list of the blocks that are included.

Select between list view (vertical) and grid view.

Display settings:
- Items per page: Select the number of items to show per page.
- Offset: Whether to use an offset or begin the post list from the first post.
- Number of Pages

The query block toolbar display settings has a form where you can enter or increase and decrease the items to display per page as well as the offset.
You can select the number of pages to display by adjusting a range input or by entering the number into a number field.
The settings can be reset with a reset button at the end of the form.

Select post type: By default, you can select between posts and pages.
Order By:
- Newest to oldest
- Oldest to newest
- A to Z
- Z to a
Sticky posts:
- Include
- Exclude
- Only display sticky posts

If the grid view is selected, you can choose the number of columns to show.

Filters

Filter the content by entering a category or tag or selecting an author.

Template part

The template part is a unique block type because it does not present content on its own. It is a container in which theme developers and site creators place other blocks.

In the theme, a template file may contain several template parts, for example, a header, content area, sidebar, and footer, and the template parts contain other blocks.

Template parts support text color, background color, link color, and padding. You can select what HTML tag to use for the container.

Learn more about template parts

Developer? You may also be interested in the block reference.

WordPress
Full Site Editing