WordPress blocks for full site editing

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

Blocks included in WordPress 5.8 have the version number after the name: Site title (5.8).

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

Estimated reading time: 12 minutes

Available blocks

Header blocks:

Post blocks:

Comment blocks:


Site title (5.8)

With the site title block, you can both display the site title and edit the title text. All copies of the site title block will use the same text.

Sidebar settings: Typography, colors, spacing

Toolbar settings: The HTML tag can be changed between heading levels H1-H6 and paragraph.
Left, right and center align, full-width and wide width.

The toolbar for the site title block has settings for changing the level of the title. You can choose from a list of H1 to H6, and paragraph.
The toolbar also has width and alignment options.

Markup:

<!-- wp:site-title /-->

Output:

<h1>Theme Preview</h1>

Site tagline (5.8)

With the site tagline block you can both display the tagline and edit the text. All copies of the site tagline will display the same text.

Sidebar settings: Typography, colors, spacing

Toolbar settings: Left, right and center align.

Markup:

<!-- wp:site-tagline /-->

Output:

<p class="wp-block-site-tagline">Just another WordPress site</p>

With the site logo block you can upload a new logo image or select an image from the media library. This block can be resized using drag handles.
All copies of the site logo will display the same image.

Style options: Default or rounded.

Sidebar settings: Image width.

Toolbar settings: Left, right and center align. Replace image.

The site logo block is one of the new
blocks in WordPress 5.8.  The block has two resize handles in the editor, and toolbar options for aligning left, center and right.

Markup:

<!-- wp:site-logo /-->

Output:

<a href="http://localhost:8888/" class="custom-logo-link" rel="home"><img loading="lazy" width="200" height="200" src="..." class="custom-logo" alt="..." srcset="..."></a>

Post title (5.8)

With the post title block you can both display and edit the title text.

Sidebar settings: Typography, colors. Link settings.

With the link settings you can make the title a link, add a rel, and choose whether to open the link in a new window:

The post title block link settings has two toggles:, one for making the title a link, and one to open the link in a new tab.
When the link option is enabled, there is an additional text field for the link rel attribute.

Toolbar settings: The HTML tag can be changed between heading levels H1-H6.
Left, right and center align, full-width and wide width.

Markup:

<!-- wp:post-title /-->
<!-- wp:post-title {"isLink":true} /-->

Output:

<h2>Hello world!</h2>

Post author

The post author block is one of the blocks that has extra settings. The options are:

  • Select the author from a drop-down.
  • Show or hide the user avatar. -It is not possible to select the position of the avatar.
  • Select between these avatar sizes: 24×24, 48×48, 96×96 pixels.
  • Show or hide biography -It is not possible to edit the biography inside the block. The content is loaded from the users settings.
  • Change text color and background color. -It is not possible to select a gradient.
  • Align text to left, center or right.

When text is selected, it can also be bold and/or italic, and strikethrough can be applied.

The post author block panel settings has a select list where you can choose which user to display with the block.
It has two toggles: one for showing the users avatar, and one for showing the users biography.
The size of the avatar can be updated with a select list.
The author block uses two columns. The left column shows the users avatar.
The right column has two rows. The first row shows the username, and the second row shows the users biography.
An optional byline can be displayed above the username.

Post Date (5.8)

With the post date block, you can:

  • Select the date format to display:
    • Time only,
    • Month, day and year
    • Month, day, year and time
  • Select the publishing date from a calendar with a date picker. You can schedule posts with this feature.
  • Reset the publishing date. This will set your post to draft.

This block has a help box with instructions on how to use the date picker.

The post date block uses an advanced calendar date picker. The date and time can be entered into date fields, or selected from a table that presents the days in the current month. The calendar can be reset, and there is a help section with additional information about how to navigate the calendar with the keyboard.
The date format can be changed in the settings sidebar for the post date block.
The options include only displaying the time, only displaying the date, or displaying both the time and date.

Select, upload and display the featured image that is assigned to the post or page.

This block does not have the new image cropping capabilities or options for resizing, caption or alternative text.

Sidebar settings: Link setting: Link to post.

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

Markup:

<!-- wp:post-featured-image /-->

<!-- wp:post-featured-image {"isLink":true} /-->

Output:

(Example sizes. Note that the wrapping p tag is part of the default output.)

<p class="wp-block-post-featured-image"><img width="320" height="213" src="(path to image)" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="(path to image) 320w, (path to image) 300w" sizes="(max-width: 320px) 100vw, 320px" /></p>

Post content (5.8)

The post content block is meant to be used primarily in a query -a list of posts, or in a template.

If the post content is placed directly in the post or page content, you will see a notification saying that the block cannot be rendered inside itself. Doing that would create an infinite loop that would cause the page to break:

A notification that says "Block cannot be rendered inside itself" replaces the post content block.

Toolbar settings: Full-width and wide width.

Markup:

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

Output:

<div class="entry-content">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
</div>

Post excerpt (5.8)

The excerpt length option was removed for 5.8 because there where bugs found that could not be solved before the release.
To my knowledge, this is temporary and the setting will be added back.

The post excerpt block lets you create the excerpt.

  • When the text of the excerpt is selected, you can make it bold and/or italic.
  • Align text to the left, center or right.
  • The block supports the following inline settings:
    • Inline code
    • Inline image
    • Strikethrough
    • Subscript
    • Superscript
    • Text color
  • Add links.
  • Enable a Read more link. You can edit the link text and choose to show the link to the right of the excerpt content, or on a new line.
The post excerpt block sidebar with typography, color and excerpt settings.

Markup:

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

Post tags (5.8)

Post tags is a variation of the post terms block. To place it in the editor, type /post tags, /post terms or search for post tags. In its first basic version, the block displays the post tags with a basic divider. There is no option to change the divider yet.

Toolbar settings: Left, right and center align.

Sidebar settings: Typography, colors.

Markup:

<!-- wp:post-terms {"term":"post_tag"} /-->

Output:

<div class="wp-block-post-terms"><a href="http://example.com/?tag=sample">sample</a> | <a href="http://example.com/?tag=test">test</a></div>

Post categories (5.8)

Post categories is a variation of the post terms block. To place it in the editor, type /post categories, /post terms or search for post categories. In its first basic version, the block displays the post categories with a basic divider. There is no option to change the divider yet.

Sidebar settings: Typography, colors.

Toolbar settings: Left, right and center align.

Markup:

<!-- wp:post-terms {"term":"category"} /-->

Output:

<div class="wp-block-post-terms"><a href="http://localhost:8888/category/uncategorized/">Uncategorized</a></div>

Post navigation links -next and previous post

The post navigation links for single posts is one block, but has two variations:
Next post, and previous post.

Sidebar settings: Transform to variation (next or previous), display the title as a link.

Toolbar settings: Left, right and center align. Bold, italic.

Markup:

<!-- wp:post-navigation-link /-->
<!-- wp:post-navigation-link {"type":"previous"} /-->

Output:

<div class="post-navigation-link-next wp-block-post-navigation-link"></div><a href="..." rel="next">Next</a>
<div class="post-navigation-link-previous wp-block-post-navigation-link"><a href="..." rel="prev">Previous</a></div>

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 need to manually enter the comment ID.

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 is an inner block that can only be placed inside the post comment block.

Post comment date

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

Post comment content

Displays the comment content. This is an inner block that 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 a post or page has, or a text saying “No comments”.

Sidebar settings: Typography, colors.

Toolbar settings: Left, right and center align.

Markup:

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

Archive title (5.8)

Displays the name of a category, tag or other taxonomy on archive pages.
On the front of the website, this block is only visible on archive pages.

Sidebar settings: Typography, colors.

Toolbar settings: The HTML tag can be changed between heading levels H1-H6 and a paragraph. Left, right and center align, full-width and wide width.

Markup:

<!-- wp:query-title {"type":"archive"} /-->

Term description

Display the description of categories, tags and custom taxonomies when viewing an archive.

Sidebar settings: Typography, colors.

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

Markup:

<!-- wp:term-description /-->

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

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

Developers will be able to 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 the 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 that are 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 designs and four basic.
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.

Query Toolbar settings

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.

Query Sidebar settings

  • 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 select 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 it own. It is a container in which theme developers and site creators place other blocks.
This block is not included among the new blocks in WordPress 5.8.

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 has support for text color, background color, link color and padding. You can select what HTML tag to use for the container.

Learn more about template parts

Login / out (5.8)

With this block you can display a login form or a link that lets the visitor log in or out.

Sidebar settings: Display login as form, redirect to current URL.

The sidebar settings for the login/out block has two toggles: Display login as form, and redirect to current URL.

The look of the form depends on your theme:

A basic login form created with the login/out block has a username or email field and a password field.
There is a "remember me" checkbox
above the submit button. The text on the submit button is Log In.

Markup:

<!-- wp:loginout /-->

<!-- wp:loginout {"displayLoginAsForm":true} /-->

Example log out output:

<div class="logged-in wp-block-loginout"><a href="your website url/wp-login.php?action=logout&amp;redirect_to=your url">Log out</a></div>