Photo of woman working on laptop sitting on the floor next to a bed

At the end of 2020 in the State of the Word, Matt Mullenweg presented us, as he does every year, the new features of the block editor that would arrive with the new versions of WordPress in 2021.

Matt told us that one of the goals of this year was to change the user experience of building WordPress websites: the idea was that we would end up creating not only posts and pages, but the entire web, using blocks. That is, we’d be able to also create navigation menus, sidebars with widgets, templates, etc., from the same WordPress block editor. He called this idea Full Site Editing (FSE) and it was the main goal of Phase 2 of Gutenberg.

Full Site Editing is nothing more than a collective term for a set of projects under development to achieve this new experience. Josepha Haden announced in April of this year that a first version of Full Site Editing is included in the WordPress 5.8 version, which was scheduled to be launched in July 2021.

Full site editing is a collection of projects and together they represent a big change, arguably too much for a single release. The most important context to share is that it isn’t shipping as the full, default experience for users. One of the clearest pieces of feedback from the Phase One merge process was that there wasn’t enough time for our extenders (agencies, theme authors, plugin developers, site builders, etc.) to prepare for the upcoming changes.

With that in mind, this merge process won’t be an on/off switch. The focus now is not on a full and nuanced user experience, but more of an open public beta within WordPress 5.8.

Make WordPress Core By Josepha Haden

Josepha clarified that WordPress 5.8 does not include all the projects that are part of the FSE but some of those that have come to us do involve a change in how we will work in WordPress. I already told you about some of the new features that would be included in WordPress 5.8, such as the ability of editing images and adding duotone filters, block transformations, and the navigation menu block. I also commented on the option to design templates from the block editor itself.

In this post we will see more of the features included in the Full Site Editing project that we have already integrated in this new WordPress 5.8 version. Note that there are other features of Full Site Editing that are under development and if you want to test them you have the option to install the latest version that is being developed following the instructions explained here.

Template Edit Mode

One of the first Full Site Editing tools that comes with WordPress 5.8 is the template editor. The template editor is a special mode available in the post editor that allows you to create, assign, and edit block templates for specific posts and pages.

Activate Template Editing

Don’t be dissapointed if after installing this version you can’t find anywhere the option to edit templates. By default, this option is disabled for any theme, but themes can choose to enable it with the following line added to their functions.php file.

add_theme_support( 'block-templates' );

That’s what I’ve done in the Twenty Twenty-One theme to be able to tell you how it works.

Create and Edit a Template

The first thing we find in the right sidebar for editing a page or post is the option to create a new template.

New option to create templates in WordPress 5.8
New option to create templates in WordPress 5.8.

After clicking on the «New» link, a pop-up window will appear in which you must indicate the name of the template you are going to create.

Pop-up window to indicate the name of a new custom template
WordPress editor window to enter the name of the new custom template.

After clicking the «Create» button, you are already in the template editor, which is very similar to the block editor you already know with some small differences.

WordPress template editor
WordPress template editor.

As you can see in the image, in the top bar we find the name of the template that we are editing and the button to update the template, now it has a dot on the left so that at all times you can tell that you are not updating the page (or post) but the template. In addition, you also have the link to back to the page you were editing.

Editing the template is very similar to editing a page or post. You can add the blocks and patterns you want in the same way as you have always done with the block editor. Although now, as I will tell you later, we have some new theme blocks that can be particularly useful when editing templates.

Add new WordPress patterns in the template editor
Add predefined patterns in the WordPress template editor.

Once you have made all the changes you think are necessary, just save it and you will see how it warns you of the pages that may be affected by the changes in the template.

Save WordPress template
Save WordPress template.

And that’s it, you can assign the new template created to all the pages you want. This template will have been saved in the database as a Custom Post Type called wp_template. In addition, in the future you will also have the template available to be able to export or import it to any other website as you please (for now, you only have this functionality if you have the Gutenberg plugin installed).

Theme Blocks

Template editing, as I told before, has come to us with a new set of WordPress blocks that are particularly useful in creating templates and themes. They are as follows:

  • Site logo
  • Site tagline
  • Site title
  • Post title
  • Post content
  • Post date
  • Post excerpt
  • Post featured image
  • Post categories
  • Post tags
  • Login/out
  • Latest comments
  • Lastest posts
  • Query loop / Post List
Post blocks that you can add to a WordPress template
New post blocks that you can add to a WordPress template.

For each of these blocks, you can modify its characteristics like any other block.

The characteristics of each of them are very intuitive and I don’t think they require further explanation, but I do find it interesting to go into the detail of three types of blocks that are a bit more complex: Latest posts, Query loop, and Post list. These three types of blocks can be added both in a template and in a post or page.

Latest Post Block

If you insert a latest post block, you will see that you have a lot of characteristics that you can define to display them.

You can select three different display styles for the posts, whether you want the description or the entire post to be displayed, the maximum number of words, the author, the date of publication and the featured image (the type, size, alignment and link to the post). You can also sort them alphabetically or by publication date in increasing or decreasing order, or filter the posts displayed by a category. Finally, you can also indicate the number of posts you want to show and in how many columns.

Query Loop and Post List Blocks

The query loop block allows you to display a list of posts, pages or any other custom post type with different styles and can apply filters depending on the type of content displayed.

Content list type block
Query loop or post list blocks.

As you can see in the image above, you can first select in the left sidebar, the style in which we want the content to be displayed. In case you have selected the standard style, you can select the carousel or grid view. And in the case of carousel, you can select between different display variations and choose between different combinations on whether to display the title, date, excerpt and/or image.

Display variations of the list of contents block
Display variations of the query loop block.

Once selected, a content template type block will have been created that will contain the different selected sub-blocks. And whatever variation you have chosen, you can then add and/or remove the theme blocks and make any changes you want to each of the blocks within the content list block to suit your preferences.

You also have a set of properties of the query loop that you can also parameterize such as the colors of the block, the type of content you want to display, the order in which the content is displayed and the filters that you can apply depending on the content you have selected.

Section of a page created with the content listing block
Section of a page created with the query loop block.

In this way, you can quickly add a section of the content you have on the blog or courses, etc. in any template or page without ever leaving the block editor.

List View

Another Full Site Editing feature that is now available in WordPress 5.8 is the list view. In the top bar of the editing menu of a page or post, we now find the list view icon to the right of the icon with the «i». Clicking it displays a side bar with the structure of the different blocks that make up the content we are editing. And the block we are in is highlighted.

List view in WordPress
List view in WordPress.

This list view allows you to quickly navigate through the different content blocks. Positioning the mouse on any block in the list will take you to the content of that block.

Navigating the block list view
Navigating the block list view.

A very useful property of this list view is that the HTML anchors that you add to the content are also displayed.

Viewing Anchors in Block List View
Viewing the HTML anchor in the list view.

This makes it easy for you to check at any time if you are missing any HTML anchors and you are calling them with the correct name.

Summarizing

WordPress 5.8 has marked a milestone on the road to Full Site Editing. Together with some of the features that I already explained that were coming to us, we see that little by little we are getting closer to the goal of being able to develop new websites without writing code.

We still find that some features sometimes fail and need to be improved but this is an open source project where everyone’s participation will make it possible for WordPress to become the favorite platform for websites.

Have you decided to install this version of WordPress? We would love you to share your experience.

Featured image by Andrew Neel on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.