Full site editing blocks

There are new WordPress blocks for full site editing that will help us build sites rather than single posts and pages.

The blocks listed here can be used with the latest Gutenberg plugin version installed and with a full site editing theme active.

They are available both in the standard block editor, and the new site editor that is under development.

Updated February 25 2021 -Gutenberg version 10.02

Some of these blocks are still in their most basic form, and does not have extra settings like the toolbars that we are used to. But work is progressing fast and there are frequent updates.

You can follow the progress with these links:

Site editing milestones: https://github.com/WordPress/gutenberg/issues/24551

Post blocks overview: https://github.com/WordPress/gutenberg/issues/15623

Template tag overview: https://github.com/WordPress/gutenberg/issues/22724

Available blocks

Header blocks:

Post blocks:

Comment blocks:


Site title

With the site title block you can both display the site title and edit the title text.
If you change the text of the site title you need to refresh your page for the changes to be applied.

The site title block is a link to the homepage, but only when viewed on the front.

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:site-title /-->

Output:

<h1>Theme Preview</h1>

Site tagline

With the site tagline block you can both display the tagline and edit the text. If you change the text you need to refresh your page for the changes to be applied.

Sidebar settings: Typography, colors.

Toolbar settings: Left, right and center align.

Markup:

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

Output:

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

This block is available even if the theme has not declared the theme support for custom logo.

With the site logo block you can upload a new logo image or select an image from the media library. This block does not have the new image cropping settings.

Sidebar settings: Image width.

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

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="Theme Prewiew" srcset="..."></a>

Post title

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:

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 the strikethrough can be applied.

Post author block panel settings

Post Date

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 a calendar date picker.

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>

Issues and pull requests

https://github.com/WordPress/gutenberg/labels/%5BBlock%5D%20Post%20Featured%20Image

Post content

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

The post excerpt block lets you create the excerpt.

  • Select the length of 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.
Post excerpt block panel settings with excerpt length and link position options.

Post tags

In its first basic version, the block displays the post tags. In the ticket listed below you can read about the planned features.

https://github.com/WordPress/gutenberg/pull/20418

Markup:

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

Output:

<a href="http://example.com/?tag=sample">sample</a> | <a href="http://example.com/?tag=test">test</a></div>

Post categories -Post Hierarchical Terms

The Post Hierarchical Terms block currently includes one variation that includes a list of categories used by a post.

Sidebar settings: Typography, colors.

Markup:

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

Output:

<div class="wp-block-post-hierarchical-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.

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 use the function the 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 /-->

Issues and pull requests

https://github.com/WordPress/gutenberg/labels/%5BBlock%5D%20Post%20Comments

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 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 /-->

Query, Loop, and query pagination

The query blocks has received many interesting updates in the last month. This new WordPress block for full site editing now has support for premade layouts and content filters.

The query determines what will be queried, for example a set number of the latest posts. It has an alias block name called post list.

The loop 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 {"queryId":0} -->
<!-- wp:query-loop --><!-- /wp:query-loop -->
<!-- wp:query-pagination /-->
<!-- /wp:query /-->

Example with content inside the loop:

<!-- wp:query {"queryId":0,"query":{"per_page":4,"pages":5,"offset":0}} -->
<!-- wp:query-loop -->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- /wp:query-loop -->

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

Post list variations

The query block now has four premade block variations where the loop contains different layouts for presenting lists of posts:

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

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

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 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 has support for text color, background color and link color. Once Gutenberg version 9.6 is released, we will be able to select the HTML tag that will be used. For more information about this update see https://github.com/WordPress/gutenberg/pull/27101.