Full site editing blocks -Reference

Updated 2020-09-09 (Gutenberg Version 8.9.3).

Below is a quick reference for the new blocks that are available with WordPress full site editing.

All of these blocks requires full site editing to be enabled. How to enable full site editing.


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


Post blocks:

Post title

Markup:

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

Output:

<h1>Hello world!</h1>

Issues and pull requests:

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

Post author

The Post author block lets you change the post author and present the author information. There are options to display a byline, gravatar, and author description.

The description cannot be edited.

Markup:

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

Output:

<div class="wp-block-post-author"> <div class="wp-block-post-author__content"> <p class="wp-block-post-author__name">author name</p> </div></div>
the author block can display the gravatar, byline, nickname and biography.
The post author sidebar includes two drop downs where you can select the author and the avatar size.

Post date

The post date blocks lets you schedule posts, and select the date format for the output of the date.

Sidebar settings: Typography, colors (line height, if enabled)

Markup:

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

Output:

<time datetime="2020-05-28T10:29:20+00:00">May 28, 2020</time>

Toolbar and sidebar settings:

The post date block uses a calendar date picker.

Post excerpt

The Post excerpt block includes options to add a read more link below the excerpt and change the link text.

You can choose whether to display the link on the same line as the content, or below it. You can also choose the length of the excerpt.

Markup:

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

Output:

<p>excerpt</p>

Optional Read More link to the post:

<p><a href=”(post link)”>Link text</a></p>

Issues and pull requests:

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

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.

Markup:

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

Output:

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

Issues and pull requests:

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

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

Post featured image

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

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

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>

Comment blocks:

There are plans to create separate blocks for these different element, like the comment area heading, comment navigation, etc.

Post comments count

Markup:

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

Output:

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

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 form

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

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

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

Site logo

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>

Other blocks:

Query, Loop, and query pagination

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

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