Full site editing blocks

With full site editing, there are new WordPress blocks 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 full site editing enabled.

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

Updated October 10 2020 -Gutenberg version 9.1.1

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.

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.

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 editing settings.

If the theme has added theme support for custom logo, the image is also used for the custom logo setting in the customizer.

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

The post title block displays the title, but you can not edit the text.

Sidebar settings: Typography, colors. Link settings.

With the link settings, you can make the title a link, and choose whether to open it in a new window.

Toolbar settings: The HTML tag can be changed between heading levels H1-H6.

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
The post author block in the editor with the block toolbar displaying.

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 how to use the date picker.

Post date block panel setting with a drop down where you can select the date format.
The post date in the editor with the date picker showing.

Displays the featured image that is assigned to the post or page.

This block is still in its most basic form and it does not let you assign a new featured image. It does not have the new image editing capabilities.

Markup:

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

Output:

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

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

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>

Issues and pull requests

https://github.com/WordPress/gutenberg/issues/22080

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

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 comments

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

Markup:

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

Issues and pull requests

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

Post comments count

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/

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

Query, Loop, and query pagination

The query blocks has only been added in their most simple form and improvements are being worked on.

The query determines what will be queried, for example, a set number of the latests posts.

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.

Query pagination outputs links to the next and previous pages.

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

Issues and pull requests:

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

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.