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.
Table of Contents
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.
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.
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.
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.
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.
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).
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
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
For each of these blocks, you can modify its characteristics like any other block.
Editing the site title block in WordPress. Editing the site tagline block in WordPress.
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.
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.
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.
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.
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.
A very useful property of this list view is that the HTML anchors that you add to the content are also displayed.
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