Site Editor Demo #SOTW

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.

---

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

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

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 UTC – You 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

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.

Related Posts

Dev hours on Block Hooks, building better patterns, customizing your store, a new book and more — Weekend Edition 288

WordPress 6.5, register Font collections, working with templates, or playground — Weekend Edition 290

Share