Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less. — Marie Curie
Josepha Haden, executive director for the WordPress open-source project, published the Big Goals for 2021. Among other topics she wrote, the goal for Full-Site-Editing is the ability to edit all elements of a site using Gutenberg blocks. “This will include all in-progress features designed to help current users transition to Gutenberg as well.” She aims for April 2021 to have an MVP. A first version is slated for WordPress 5.8, scheduled for June 8th, 2021.
This seems to have gotten a lot of attention of the writers around WordPress. It was long overdue to put all resources around Full-Site-Editing into one post. Please leave missing content or your questions in the comments. This post will be updated regularly. You’ll be able to follow along via the Changelog section.
Table of Contents
- Full-Site-Editing MVP
- What is Full-Site-Editing?
- Full-Site Editing in Action. Short demos.
- Start Testing Full-Site-Editing
- Block-Based Themes
- Making Themes for Full-Site Editing
Pressed on details of what an MVP would entail, Joseph Haden published a follow-up post defining it as “The MVP should make it possible to build a version of the Twenty Twenty-One theme, using only blocks, without any coding knowledge.” She also pointed to the Site Editing Milestone issue by Matias Ventura.
In his article “FSE and WordPress Themes: What does the MVP look like“, Justin Tadlock dug a bit deeper into each of the seven milestones of infrastructure, site editor, Global Styles, Themes blocks, Query Block, Navigation Block and gradual adoption.
Fränk Klein asks Should Full-Site Editing be in WordPress 5.8? And questioning the timing as there won’t be enough time for developer buy in and the repository won’t have enough themes. For Klein, an announced launch seems to be about the perfect finished product. I don’t think that’s want is meant here, the team at the moment is only talking about an MVP.
What MVP it really means…
Maybe it’s the moment to stop and reflect on what an MVP actually is. It’s not the Most Valuable Player, that was announced after Sunday’s Super Bowl game between the Chiefs and the Buccaneers. MVP in this context means Minimum Viable Product. It’s a fancy title for a barely working product with a lot of quirky behavior. It will have a high-cringe factor for most people using it. Some of it is built with raw cut wood, duct-tape, wires and staples. It will have plenty of rough edges.
Remember when the first version of the block editor was merged into Core two years ago? There was a lot of noise about how bad it is and how it’s not ready and should never have been released? Since then, the block-editor went through over 50 more version updates, interface changes and refactoring. And people are loving it.
From some corners of the WordPress universe you will hear that kind of noise again. MVP is a stage of FSE, comparable with the block-editor before it was merged with WordPress core. It will be a very early version.
Don’t get me wrong, I am not dismissing the awesome work of the brilliant people on the Gutenberg team. They are all innovating on big parts of WordPress’ site architecture, and found a way to make it simpler, hide away most complexities and put it all in one interface, the site editor. This is unbelievably hard to do and like all good things, it takes time.
It will take at least another year before it might be something you want to use for professional projects, and probably another 12 month to be comparable with any other site editor or page builder you have tried before.
The Gutenberg team does need help from the community. That’s why it will be released. People need to test this MVP, find all the rough edges, start creating issues and bug reports, and enter the discussion on what a good product could look like. I just want to caution your enthusiasm in terms of the editing experience. It’s not yet for the faint of heart. (More on that below: Start Testing)
Our heads are round so our thoughts can change direction — Francis Picabia
What is Full-Site-Editing?
Status Check: Site Editing and Customization
It’s an excellent summary of the current status of Gutenberg’s Phase 2. It’s a bit longer, you probably should get another cup of hot beverage and get comfortable reading in. It definitely is worth your time.
Components and nature of Block-based Themes
- Use blocks exclusively for content display
- Made for Full-Site-Editing (Site Editor)
- Have template & template parts as HTML files.
- Integrate with Global Styles
- Experimental_theme.json file for settings and configuration
Components for User Interface for FSE then are.
- Site Editor to create or modify template and template parts
- Sidebar to edit Global Styles.
Assisting with migration and backwards compatibility
- Block-based Widget Screen
- Navigation Screen and Blocks
Overview Issues :
- Template Tags in Full Site Editing. 22724
- Missing query block functionality. 24934
- Query and Loop block tracking: 24762
What is Full Site Editing and how is it shaping a new WordPress? In this article, Munir Kamal explains all the aspects of Full-Site Editing that are in the works for the block editor. It’s a great overview and should get you caught up with the latest development.
Eric Karkovack took an Early Look at Full Site Editing in WordPress and guides you along his first impressions. If you are new to the topic this is an excellent introduction. Similar to the FSE testing group, Eric also has a few more questions for the Gutenberg developers.
You know a new feature is getting ready for mainstream, when Adam Preiser at WPCrafters makes a YouTube show about it: In Full Site Editing! It’s Coming, But Will Change How We Use WordPress? you can learn more about the Site Editor from a non-technical perspective. I also found reading through the comments quite interesting.
The Query Block
For the list of posts on archive pages or the loop on front page, the Gutenberg team works on a Query block. You, the site builder, won’t need any php or query knowledge to filter content from posts, pages, categories, custom post types or custom taxonomies anymore. The Query block will allow you to use dropdowns boxes and toggle switches in the site editor.
Triggered by audience questions, Justin Tadlock ventured into the details of the Query Block in his post “Understanding the Query Block and Its Importance in Site Editing”.
FAQ – Frequently Asked Questions
Carolina Nymark published an ongoing list of frequently asked questions and their answers. It’s an excellent mix of big picture thoughts and technical answers. For instance, I learned you can add custom hooks to the block editor.
47 Questions and Answers
Anne McCarthy published the answers to all questions from WordPress user sent in via the call for Questions in February 2021. On questions where the answers are still pending, she provided the links to GitHub issues, so people can chime in and contribute. For some questions, we can view short videos, to make a particular idea more visual.
McCarthy grouped the questions and answer by topic and create separate posts. Here is the list:
- Answers about the overall project
- Answers about templates
- Answers about themes
- Answers about restricting access & functionality
- Answers about general functionality
Full-Site Editing in Action. Short demos.
Over the last 18 months, we have seen demos of full-site editing and block-based themes.
- Enrique Piqueras: Themes and the Full Site Editing experience for WordPress (experimental) (Jan 23, 2020)
- Kjell Reigstad: Block-Based Theme / Full-Site Editing (June 26, 2020)
- Joen Asmussen: Demo of the Site Editor at State of the Word (Dec 17, 2020)
- Kjell Reigstad: Introduction into block-based Themes. (Jan 20, 2021)
Big Thank you to Carolina Nymark, Ari Stathopoulos and Anne McCarthy for sharing their wealth of knowledge with us and answer a ton of questions during last week’s Live Q & A Show: Updates on Full-Site Editing and block-based Themes with transcript and Resources.
Anne McCarthy is also fielding community questions about the full-site editing experience. She will publish them together with answers from the Gutenberg team later this month. Deadline is February 15, 2021. Watch this post for the link or subscribe to our eNews.
Start Testing Full-Site-Editing
Second Call for Testing: Build a Homepage with Site Editing Blocks
“With Full Site Editing unlocking the ability to edit all parts of your site, there comes a need for new blocks to help facilitate the experience. (..) For example, there’s a Site Title block that you can embed anywhere and update automatically any time you change your Site Title.
For this specific test, we’re going to explore using a few of these blocks to build a basic homepage with a sidebar.” wrote Anne McCarthy.
Besides very detailed testing instructions, you’ll find detailed steps on how to set up a testing environment.
Anne McCarthy, program manager of the FSE Outreach Experiment published How to test FSE Guide. She gives comprehensive instructions to how to set up your test site, and she provides a list of features that need testing. She divided those up between “Anyone”, Theme and Plugin authors. Equal opportunity for testing and creating issues on GitHub.
FSE – Outreach Experiment Updates
- FSE Program: Connecting with Local Communities (Feb 5th, 2021)
- First Round of the FSE Outreach Program Concludes, Identifies Template-Editing Mode Problems WPTavern (Jan 20, 2021)
- FSE Program Template Editing Testing Summary (Jan 15, 2021)
- FSE Program Testing Call #1: Template Editing (Dec 23, 2021)
- What is the FSE Outreach Experiments program? (Handbook)
As a site implementer, you are invited to join the #fse-outreach-experiment program to test this new feature coming to WordPress in 2021, have a discussion with the developers and designers. This way you can be part of the decision-making and ensure your needs are heard.
Learn more about in the separate WP Slack channel #fse-outreach-experiment
One of the most interesting aspects of block-based themes is that all previously dynamically created parts of a theme, like the site title, site tagline, navigation, widgets all have become blocks.
Block-based themes in WP Repository
The TT1 Blocks theme is now available in the Theme Directory. That’s this year’s default theme version made ready for the Full-Site-Editing experience.
Q – WordPress theme The first block-based Theme ready for full-site-editing was approved for the official WordPress repository. The author is Ari Stathopoulos and is labeled as experimental. Stathopoulos wrote on Twitter: “Hopefully this will allow more people to easier test FSE in Gutenberg and move the project forward a bit faster”.
Carolina Nymark started the “Discussion: Requirements for full site editing themes” for themes to be approved to the official Themes repository on WordPress.org.
Themes-Experiments on GitHub
More block-based Themes are available in the Themes-Experiments GitHub repository, among them also Empty Theme with all the boilerplate you need to get started building a block-based theme from scratch.
Armando by Carolina Nymark is also available on GitHub. Armando is a basic full site editing theme for blogs. The theme relies on the block styles as much as possible, and has limited custom CSS in style.css. It has three header templates to choose from.
Seedlet-Block by Automattic is a child-theme getting ready for the block-based theme for full-site-editing. It hasn’t been long that the parent theme Seedlet, a traditional WordPress theme surfaced at WP Repository.
Making Themes for Full-Site Editing
The best source for learning building themes for Full-Site-Editing is Carolina Nymark‘s Free Course on the amply named site FullSiteEditing.com. Learn how to build a template or template parts with the new theme blocks, work with the Global Styles and how to tie it all together with Block Patterns.
Carolina Nymark is also working on a Course for #nocode site builders. Leave your email address, she’ll update you as soon her first lesson is available.
How to use the scaffolding script to start your new block-based theme, is the topic of this article in the WPTavern by Justin Tadlock. He walks you how to get started and then use the Gutenberg site-editor to finish the theme. It’s a bar bones theme, of course, a fresh canvas for designers. Justin then digs into the various pieces of the generated theme.
Fränk Klein’s shared learnings
What I Learned Building a Full-Site Editing Theme with Gutenberg – “Right now developers spend their time switching between their code editor and their browser when developing a theme. When building Bosco as a full-site editing theme, I spent a large chunk of my time in the Gutenberg site editor.” wrote Fränk Klein, developer with Human Made.
He takes you along in his adventure and compares old way with new way of creating a header. He also shares the pitfalls and his frustrations that come with working with an experimental feature. Reading through Fränk’s post, made me eager to get my hands on testing things as well. We’ll see, maybe in a couple of weeks, there will be more time for experiments.
In this article, Klein shared how he implemented the newly developed Global Styles feature into his experimental block-based Bosco Theme, available in the WordPress themes directory. Fränk gives you a tour around the experimental
themes.json file, and compares working with styling for Full-Site-Editing with the current way themes deal with styling of headings, typography etc.
Tutorials at ThemeShaper
Creating a Block-based Landing Page Theme In this ThemeShaper article, Kjell Reigstad goes into all the details of the theme and explains the various parts needed for a block-based Theme.
In his post, Getting Started with Block Themes, Ben Dwyer, provides you with the first steps to create your block-based Theme, with the Site-Editor in mind. It’s the first post of a series it seems.
Ernesto Mendez wrote Part II in ThemeShaper’s series of Getting Started with Block Themes on Templates. He explained: “In the classic way of theming, we usually have functions that give us the different parts that make up a post, such as
the_content(), and so on. Block themes give us the same features using blocks directly!”. Ernesto also shared shared more about the difference between a classic WordPress theme and a block-based one and walks you through creation, saving and editing of the various pieces.
Jason Crist published the 3rd part of “Get Started with Block Themes” tutorial. He covered how the new feature Global Styles come into play. “An important goal of Global Styles is to make it easier for users to change how their site looks without having to know or write any CSS. ” He explains the new global settings, naming conventions, how to set global and block styles not only via JSON file of your Theme. You also learn how users could change them via the Sidebar in the new Site Editor screen. Jason has links to an empty theme and the themes experiments repo and also to the developer documentation.
On ThemeShaper, Jack Lenox wrote the next post in the series “Getting Started with Block Themes”. In his post you’ll learn how to create block patterns in a from-Zero-to-Hero way
Speaking of Block Patterns: A lot more is on The WordPress Block Patterns Resource List
“The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn.” – Alvin Toffle