Full-Site-Editing – the Ultimate Resource List

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

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 Scope for WordPress 5.8

Updated July 29 after the WordPress 5.8 release:

Update April 18, 2021

Phase 2 features coming to WordPress Core in July 2021

The Go/NoGo decision on the scope of WordPress 5.8 release was made this week. In a meeting with Matt Mullenweg, Josepha Haden Chomphosy and Helen Hou-Sandi, Matias Ventura demoed the current state of development of various components of the Phase 2.

  • Improvements from Gutenberg 9.9 – 10.7
  • Introduce new blocks (Query, Site Logo, Navigation, etc).
  • theme.json mechanism.
  • Template Editor for Pages/Blank Template. (see also Full-site Editing MVP: Can I build a Landing Page?
  • Widgets Screen & Block widgets in Customizer.
  • Design tools: Duotone, Layout controls, padding, etc.

The fully featured Site Editor, Global Styles and Navigation Screen will be release after 5.8

The post Full Site Editing Go/No Go | April 14, 2021 provides you with a TL;DR, the 90 minute recording of the meeting with Matt Mullenweg, Josepha Haden Chomphosy, Helen Hou-Sandi, Hector Pietro, and Matias Ventura, and the transcript of the recording.

WPTavern: Full Site Editing Is Partly a ‘Go’ for WordPress 5.8

Update March 26th, 2021:

Full-site Editing MVP: Can I Build a Landing Page? – Josepha Haden Chomphosy as guest on the inaugural WPTavern Jukebox podcast.

FSE Program Calls for Testing #4: Building a restaurant themed header

Update March 15th, 2021: The team will decide in April (13th or 27th) if FSE is ready for 5.8, to be released in July 2021. If it’ not ready, it’ll come in this year’s December release. More details in Early Thoughts on WP5.8 Planning

Josepha also published a preliminary communications plan in her post Full Site Editing Pre-Merge Overview

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 July 2021.


February 20, 2021:
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)

top

Our heads are round so our thoughts can change direction

 Francis Picabia

What is Full-Site-Editing?

Video: Full-Site Editing Overview with Anne McCarthy

It’s a fantastic and fast-paced presentation and covers a lot of ground. It’s ideal for WordPress users that just now want to catch up on all the buzz around Full–Site Editing and learn what will come to WordPress in the 5.8 release in July 2021.

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.

What Is Full Site Editing and What Does It Mean for the Future of WordPress? By Justin Tadlock

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”.

FSE Outreach Round #5: Venturing out a Query Quest

Calling All Themers: Design the Next Round of Query Block Patterns

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:

top

Full-Site Editing in Action. Short demos.

At the Mega Meetup on April 15, Marcus Kasmirczak

Over the last 18 months, we have seen demos of full-site editing and block-based themes.

Big Thank you to Carolina NymarkAri 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.

top

Start Testing Full-Site-Editing

“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.

Update: FSE Program Build a Homepage Testing Summary

Set up a testing environment and tools

For setting up local tests Carrie Dils published a Full-Site-Editing Blueprint for Local by Flywheel, now Local Lightening.

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. 

On the WPTavern, Justin Tadlock has a list with description of all User-Friendly Methods for Testing Gutenberg Enhancements and Bug Fixes for all stages: WordPress Beta & RC testing plugins, to Gutenberg RCs, or Gutenberg Nightly to a tutorial to test pull requests (submitted patches) before they become part of Gutenberg plugin.

Need a plugin .zip from Gutenberg’s master branch?
Gutenberg Times provides daily build for testing and review.
Have you been using it? Hit reply and let me know.

GitHub all releases

FSE – Outreach Experiment Updates

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

top

Block-Based Themes

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.

Full-Site-Editing Blocks for Theme developers

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.

Block-Based Bosco, Second Full-Site Editing Theme Lands in the WordPress Directory by Justin Tadlock

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”.

Build a Full WordPress Site via Block Patterns With the Hansen Theme


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.

top

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.

New Course on LinkedIn by Carrie Dils: First Look at Full-Site Editing “While full-site editing is still in the early stages of development and adoption, if you’re a WordPress developer, this first-look course provides a good introduction to the concepts and a way for you to get ready when full-site editing officially lands.” (from the course description)

Developer Documentation

https://developer.wordpress.org/block-editor/how-to-guides/block-based-theme/
https://make.wordpress.org/design/handbook/focuses/global-styles/

 “Keeping up with Gutenberg – Index” 
A chronological list of the WordPress Make Blog posts from various teams involved in Gutenberg development: Design, Theme Review Team, Core Editor, Core JS, Core CSS, Test and Meta team from Jan. 2021 on. The index 2020 is here

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.

Klein’s earlier articles on Full Site Editing: Frequently Asked Questions and How To Try Full-Site Editing might also interest you.

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.

top

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 ThemesBen 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_title()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

top

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

Featured Image: Photo by Vidar Nordli-Mathisen on Unsplash

Changelog

  • July 27, 2021
    • Added quite a few links: Relevant Dev Notes WordPress 5.8
    • List of Block-Based Themes and Resources
    • Join the FSE OutReach Program
    • and more
  • April 18th, 2021
    • Added link and notes on the Go/No Go decision meeting.
    • Added link to post of Anne McCarthy’s presentation.
  • March 25th, 2021
    • Added new article on MVP
    • Added FSE Testing Call #4
  • March 15, 2021:
    • Added Two posts by Josepha regarding Go/NoGo and 5.8 planning
    • Added Anne McCarthy’s Summary of 2nd Testing round and 3rd Call for testing.
    • Added Justin Tadlock’s list of Testing methods for WordPress and Gutenberg
    • Add 4th Block-based Theme: Hansen
    • Added Carrie Dils’ course on LinkedIn
  • Feb 20th, 2021
    • Added
      • links 47 Questions and Answers
      • Second Call for FSE testing
  • Feb 11th, 2021
  • Feb 9th, 2021
  • Feb 7, 2021

3 Comments

Bookmarked. Thanx for all this work.

> at least another year […], and probably another 12 months […]

And this seems to be the first about realistic schedule I have seen.
Sounds a lot more realistic than WP 6.0 in december 😉

You are certainly welcome, Peter. Thanks for stopping by and leaving your comment! I have not influence on the release schedule, and for many people prototype or MVP means so many things. Personally, I keep expectations low.

I think they should release as soon as possible to get more eyeballs on it and have all plugins developers and theme developers get ready. As we saw with the block editor, no one considers testing things until it’s actually in core. In that regard, it makes sense to release ‘too early’.

“Given enough eyeballs, all bugs are shallow” — Linus’s Law

Haha, I know you have no influence on the schedule, but I caught myself thinking “that sounds realistic” when I read it.

All good things need time, and FSE certainly will. So keeping expectations low for the moment is a very good thing to do.

Btw, I also like the bit about “It’s not yet for the faint of heart” 😉