During State of the Word 2020, Joan Asmussen gave a 3-minute demo of the beta-version of the Site Editor that will come to WordPress as part of the Full-Site Editing experience in 2021. There are a few places where you can catch the whole State of the Word. This post is about the Site-Editor demo.

State of the Word 2020

This year, Matt Mullenweg, co-founder of WordPress and CEO of Automattic gave his keynote from home. He reviewed the year 2020. Afterwards, he and other members of the WordPress team answered questions from the community. The event was livestreamed on Dec. 17, 2020.


Joen Asmussen, one of the designers on the Gutenberg project from the beginning, did a walk-through of the current version of the Site Editor.

Matt said: “2021 makes it easier than ever to get your vision onto your site, and your site onto the web. And now we’d like to show you a sneak peek at some of what’s coming around the corner with Gutenberg.”

Excerpt of the State of the Word 2020

Full Transcript is below

For his demo, Joen used the theme Twenty-Twenty-One Blocks Theme (TT1-Blocks). The team is preparing this year’s default theme, Twenty-Twenty One, for the release of the full-site editing experience in 2021. You can find it in the Theme Experiments Repo on GitHub.

To use the theme yourself you need to install the Gutenberg plugin, and the full-site-editing experience will be available to you after activating the TT1-Blocks theme or any other block-based themes from the themes-experiments.

“Warning: Full Site Editing is an experimental feature and potential API changes are to be expected!”

The full-site experience comprises the Site-Editor, Navigation & Widget Screens and Global Styles sidebar. You can read about the current status of development of each part in Matias Ventura’s post Status Check: Site Editing and Customization

I also want to point out that the speed in which Joen change screens and reloads his updates seems a wee bit faster than in real life. It will depend heavily on the oomph of your server and Internet speed how fast you can navigate and change settings on the editor.

The first feature, Joen points out is the Query Block, a feature rich block for the Loop – a list of posts or pages or other content types, displayed on the homepage or on archive pages. The already available “Latest post” block is its first iteration. The query block will give users and theme developers alike great flexibility with an easy integration and customization process.

Without knowing the technical terms, you can change the Site Title, the Navigation and the tagline right from the Site Editor screen. Use the Block List View to orient yourself and jump directly to the various sections of your site. Behind the scenes, the Site Editor Engine keeps track of all your edits, displays them in a sidebar overview and save the various parts and template at the right places.

You can pull into the Site-Editor any kind of template, Joen mentions the default error handling page (also 404-page), and modify it with existing blocks and familiar tools.

With a Theme’s block patterns, you should have a set of ready-made templates you can add to your site’s footer or pages for various display options.

The Global Styles controls in the sidebar of the site editor allow you to make decision on the color palette of your site and you can review your pages and posts on how they change the design on the fly.

After watching this demo, I can only echo Matt’s “(…) We’ve come a long, long way with Gutenberg from those first versions you might’ve seen and tried out. If you haven’t given a try recently, I encourage you to check out Gutenberg.” I have been following the project with you here on the Gutenberg Times for the last three years and I can still get excited about the new features the team adds to the editor to make it a tool of creativity on the web.

Live Q & A: WordPress Site-Editor (TNG) Jan 28, 2020

Ari Stathopoulos
Carolina Nymark
Anne McCarthy

In our next Live Q & A, we will have Carolina Nymark back, our resident expert on Full-site Editing as well as Ari Stathopoulos, Core Contributor and who landed the first block-based theme, Q, in the repository and Anne McCarthy, who runs the Full-Site editing outreach program. We have the latest updates for you on January 28th, 2020 at 11am ET / 16:00 UTCYou can already reserve your seat.

Until then, enjoy our previous discussions on Full-Site Editing and block-based themes. Or browse through the show notes of the Gutenberg changelog podcast next door. Each episode comes with a ton of links to resources.

Discussions on Block-Based Themes with Theme designers and Gutenberg developers

Live Q & A with Carolina Nymark, Kjell Reigstad, Eileen Violini and Birgit Pauli-Haack on Full-site editing and Site Editor


Block-based WordPress Themes / Full Site Editing with Carolina Nymark, Kjell Reigstad and Eileen Violini
June 2020

Ellen Bauer, William Patton, and Rich Tabor

Rethinking WordPress Themes with Ellen Bauer, William Patton, and Rich Tabor
December 2019

Transcript

Matt Mullenweg: 2021 makes it easier than ever to get your vision onto your site, and your site onto the web. And now we’d like to show you a sneak peek at some of what’s coming around the corner with Gutenberg. We have Joen showing the site editor beta.

Joen Asmussen:  In this demo, I’d like to walk you through the new Gutenberg site editor. The site editor allows you to edit the theme templates beyond the post content. It introduces several new blocks like the query loop. When you make a modification like adding a featured image, it naturally adds it to every post in the query. You can configure the layout, make simple tweaks, and it propagates to all the posts. If you prefer the featured image above the titles, no problem. All the familiar block interactions are available.

While the header is a separate template part, it could be edited seamlessly. Everything is a block, navigation, the site title, the tagline, making it easy to edit anything and make use of all the block tools available. The block list view shows all the different areas like header and footer for quick access. Since everything is created with blocks, it’s easy to edit. The site editor engine keeps track of all the modifications, giving the user a clear overview of what has been modified. The site title, the header area, etcetera. You can open the 404 template, modify it like any other content. With the introduction of block patterns to WordPress, themes will be able to offer any number of designs, providing a shortcut to replicating demo sites or swapping out aspects users may not like with another that they do.

This is the culmination of several ongoing projects to improve and expand upon the customization possibilities in WordPress. Both templates and regular pages can be edited in the site editor. Small previews can be seen when hovering the different templates. The style customization panel allows making global changes like text, link, or background color. These modifications can be quickly checked against the different pages in the site. You can customize any template of the site, such as the page template. Drag and drop the page title into a cover block to use a gradient for that page. The possibilities are endless. We can’t wait to see what you build with this.

Matt Mullenweg: As you can see, we’ve come a long, long way with Gutenberg from those first versions you might’ve seen and tried out. If you haven’t given a try recently, I encourage you to check out Gutenberg. By creating this common framework that every theme and plugin can build on we’re reducing the Balkanization within WordPress from people who are solving these problems lots of different ways, and providing what I believe is the basis for the next decade of WordPress’s growth. So we’re about two years into a 10 year project. We’ve got good chunks of phase one and phase two of Gutenberg done. That’s the post and page editing and then editing the entire site. I’m excited to continue these in 2021 and hopefully start to get to phases three and four.

Published by Birgit Pauli-Haack

Curating Gutenberg News since June 2017 web + mobile strategist & coder 4 nonprofits. - Day job @paulisystems Learn more

2 replies on “Site Editor Demo #SOTW”

  1. Thank You for this excerpt,Ms Birgit! Finished reading a newsletter from “ThemeShaper” written by Ernesto Mèndez and explored the upcoming templates. They, indeed, are different from the classic WordPress template by now. We will have / block-templates directory & block-template-parts . Each template will be in their /block-template-parts directory whereas a template could be anything: a contact form , for example. Query Block is impressing. From the video here.

    That line by Matt Mullenweg “So we’re about two years into a 10 year project ” is also important. I love Math.And that is even simply algebra:, 2018-2020= 2 years. So Phase 2 will end IMHO in December 2021 or in January 2022. Or even in the end of 2023 ( {10 divided by 4 is equal to 2½ years } for each Phase.]

    I agree that we all must get involved with FSE. On the other hand that provides an awesome time frame for the” old guns” who love Classic Editor to finally step into the new area.

    I am in more than 70 WordPress related groups on Facebook and these guys are extremely educated ,kind, helpful and… crusty. I’ll spread this post of Yours all over to to inform them and to soothe them.☺️

    I am in the FSE outreach program from the moment I received Your newsletter last Saturday and I see it attracts more and more WordPressers.

    Yup, the future is bright & the learning curve is not steep at all.

  2. Just to prove ( don’t mind to be confuted though) that I am not that bad in.. algebra. So I think each phase’s time frame is one year and a half (1½ yrs ) . So FSE will come with WordPress 5.8. . With other words it will be ” live” before the end of 2021

Comments are closed.