Gutenberg Team Explores the Future of Full-Site Editing with New Prototype

From its inception, the block editor was always intended to be more than just an editor for the main content area. Gutenberg phase 2 brings the block editor to other parts of the site, including widgets, menus, and other aspects of site customization. Matias Ventura, one of the lead engineers on the project, has offered a glimpse of the team’s vision for how the block editor will tackle full-site editing with an intriguing new prototype.

Ventura shared a video demo, introducing the concept of “block areas,” which he said would include headers, footers, sidebars, and any other meaningful template part outside of the post content that contains blocks. In the example below, every element on the page is made of blocks and can be directly manipulated by the user.

The prototype wasn’t necessarily created to prescribe a specific implementation but rather shows some of the possibilities of how block areas could be organized within the page. Each block area is saved separately and any of the template parts can have a distinct name. Ventura suggested they might be saved as individual posts in an internal custom post type, which can be isolated and edited individually or within the scope of the whole page. This would allow for different view modes and possibly even a design mode with a grid overlay:

The prototype demonstrates the possibility of drilling down into the individual blocks nested within theme templates and post content. This offers users a better understanding of the page structure and allows them to easily navigate nested blocks.

Ventura’s writeup is somewhat technical and implementation details are still being actively discussed across several tickets on GitHub, but initial community reactions to the prototype have been positive overall.

A Closer Look at How Block Areas Could Replace the Customizer

With WordPress closing in on the one year anniversary of having the block editor in core, the interface presented in the block areas prototype seems immediately more familiar than the Customizer. Full-site editing in the Gutenberg era will fundamentally change how users approach their site designs. The block editor stands to unify customization and content interfaces that were previously unable to make the jump into full-on frontend editing.

“It’s too early to say for sure, but in a world where everything is a block, there isn’t much need for the Customizer’s current interface where the preview is disconnected from the controls in a separate window,” Customizer component maintainer Weston Ruter said. “If theme templates are built entirely with blocks which support direct manipulation, then it’s essentially a frontend editing paradigm.”

Ruter, who was instrumental in architecting a great deal of the Customizer, said the current interface, which splits the design and controls into separate windows, was necessary because so many of the controls required full-page reloads. The split interface ensures that the controls don’t constantly disappear while the page reloads to display the changes.

“The better Customizer integrations are the live ‘postMessage’ updating-controls which didn’t require reloads (e.g. color picker),” Ruter said. “More recently the ‘selective refresh’ capability also facilitated themes and plugins to re-generate partial templates without having to reload the entire page. In theory, those capabilities did allow for inline editing without having to reload the page.”

While the Customizer gave users more control over their site designs, the component has always struggled to provide powerful controls and live refreshing in the same interface with a limited amount of page real estate. Ruter highlighted a few of the advantages of making the block editor the primary vehicle for customization in WordPress.

“Blocks bring a common interface to be able to do such inline editing for any part of the page, not just special areas in the Customizer preview that get the extra user interface goodies added,” he said. “And so with this common block interface with direct manipulation paradigm, there’s no need for a separate controls panel and there is no need to do full page reloads to do preview changes. So there would be no need for the current Customizer interface.”

Although much of the Customizer is likely to become obsolete in the new era of Gutenberg-powered full-site editing, the Customizer changeset is one key concept that Ruter thinks could be preserved. This is the code that enables users to stage and schedule sitewide design changes.

“This is independent of the current Customizer interface and relates to the underlying data model of WordPress,” he said. “If changes made to Gutenberg blocks were put into such a changeset prior to being published, then the changes could be previewed across a site before going live. The need for this has not been so apparent until now because the changes have been scoped to post content. But once the block data being manipulated across various entities of a site, then it becomes important to have some place to stage those changes prior to going live.”

Plugin and theme developers will want to monitor the conversations surrounding the implementation of block areas for full site editing. When this prototype become a reality, it will have a significant impact on themes and plugins that are currently extending the Customizer. Many product developers will need to re-architect their solutions to be better suited to site customization that is powered by the block editor. Ventura lists all the relevant GitHub issues in his post introducing content-block areas.


17 responses to “Gutenberg Team Explores the Future of Full-Site Editing with New Prototype”

  1. This is coming big, that Gutenberg becomes the next Elementor or Composer would be great, many developers would make amazing free add-ons for the future of frontend in blocks, currently I see that the Theme Divi is applying this amazing concept, it would be incredible that Gutenberg would do also.

  2. Every time I see editors and customisers that allow people to select an unlimited number Google Fonts or make changes beyond the selection of CSS classes, I just think of the terrible performance that will result from inline CSS and an increased number HTTP requests.

    WordPress occupies an important space between hand coding and platforms like Wix or Squarespace. It would be a shame if the default was to move too far in either direction.

    • I agree with James.

      From where I see things, WP is 5 years too late with Gutenberg. Would have worked better when Elementor was big but even that is on the way out. Minimilism is the new trend, and nobody wants a messy “Page Breaker” when shaving a few KB off can mean better performance which means better SEO which ultimately means more money.

      • Respectfully Mike, shaving a few KB doesn’t matter. Most cell connections are approaching wired broadband speed.

        Elementor is barely 3 years old. Many developers want a modern editor built into wordpress core so that it can be properly customized and controlled.

        I want all the features… but I also want to be able to hide and control them before turning a site over to a client. There is a better chance this will happen if a proper builder is integrated into core rather than relying on 3rd party solutions.

        WordPress needs a unified editing experience and it looks like that is the intention here… We’ll see where it goes

  3. I can hear every designer that I’ve ever worked with saying “So… the users can use this to destroy the site that I’ve designed?”. And or couse the answer is “Yes of course, because freedom”.

    I can see the point of this if it’s like the customizer where it’s site-wide, but allowing all of this on every page/post/etc… is it really the best way to use this? So far it seems like a solution in search of a problem.

    As much as I like being able to customise things, there’s always limits to what should be available. Look at the car-crashes that were Myspace pages when people could do anything that they wanted to. Imgine having to load 548 different fonts on every page view because “Hey, I can change this font! Lets see how it looks with all of these fonts in different colours”. And of course the innevitable… “No, I really need 20 sidebars on this page. But why is the content so narrow?”

  4. Is there anyone keeping track on the user?

    WordPress was/is great because of ease of use.

    Every option, every block and every additional option for customization makes it more difficult for the end user! Or takes more time for Administrators or results in additional plugins to keep it simple.

  5. Reading through the comments so far and watching the demo, I think the video demonstration gives the unfortunate appearance that the ultimate goal of the block editor is a page builder like expierance. Particularly with the authors use of the add-on that adds all the additional font options. From my understanding or at least my hope, that’s not the direction of the core block editor ( not saying that plugins wont be built to give it that functionality ).

    The real beauty of the editor is when it’s used with a theme that is setup and styled for the blocks so that content is added and automatically formatted, with a few options for variations. I assume like widget areas, there will be some way for themes to define and control block areas.

    Another issues with the demo and the unified editing experience is something anyone working with the current editor and just post content will have experience, space limitation. The demo takes place with all sidebars and settings hidden. I can only imagine what the experience will be like for clients working on laptops with low resolutions screens. I think there is some value in separating out content areas. A unified view seems like a good idea, but separating out content and editing spaces ( all with the same editor experience ) can also be beneficial.

  6. As much as I like being able to customize things, there’s always limits to what should be available.

    Why? I mean, I get your point where people hire someone to design the website for them. Design is choices, not options. And I agree with that.

    However WordPress in itself is not only built for designers. It’s built with the philosophy to democratize publishing, making it possible to let everyone publish content to the web, including non tech and non designer folks.

  7. Personally, I find that the DIVI theme and builder provides easier and more detailed control over the development of pages, blocks, etc. I’ve also worked with the Gutenberg editor (on many recent occasions) and still find it confusing (especially for users who need to do anything more than just change simple text, add a bulleted list, add some links, or add an image). I’ll keep my eye on the Gutenberg editor as it moves forward. I just don’t seem to feel it will ever become a solid replacement for the premium and independent website and page builders. But we’ll have to wait and see.

  8. I’m really enjoying the block editor. I’m still as happy with the concept as I was when it was released. I’ll restate my original opinion. People tend to resist things that remove them from the familiar. Blocks nudge users out of the safety of set themes and colors to the thin branches of individuality.
    It’s scary, but scary can be good for you, and your bottom line.

    One benefit seems being able to slightly tweak the size of widget frames to get the right fit for a given layout. Maybe you want the bottom line of a category widget to line up with the top line of a sidebar widget. It seems like such a nothing issue, but the OCD afflicted among us are already itchy just thinking about it. 😉

    I have a whole list of ideas I’ve been waiting to try out but lacked the capability to style certain aspects of my site. I’ve never really been excited about software development. This has me rethinking that.

    Please, no fanboy shouts. I don’t have a collection of software t shirts. Not saying I wouldn’t wear one if it showed up though. 😉

  9. This is another great addition to WordPress. Gutenberg has brought great improvements to the WordPress text editor interface. But so many users complain about the complexity of the text editor interface.

    I personally had to install to WordPress Classic Editor Plugin to get the Old WordPress Text Editor back.

    However, I will have to try out again as additional features promise to be great.

  10. Great video demonstration.

    This would be a big improvement for Gutenberg and would help customizing the website layout a lot.

    However, I’d suggest more work on the basis of layout for Gutenberg before going to the site-wide issue. Currently, Gutenberg has only columns layout, which is minimum. I’d like adding more options for padding, margin and responsiveness. With that, controlling the elements will be much easier. And when it comes to site-wide, it would be a game changer.

  11. I fear the possibility with such an open editor that even more can suddenly stop working. When i used the Elementor, everything was fine but my medialibrary is out of nowhere not working anymore. Even if i upload a new picture it just disappears after the upload. Im not quite sure why this happened. But after years returning to wordpress I just think there’s much more that can break.

  12. I don’t use gutenberg, me too rely on the classic editr and custom post types… I can make a site that won’t break and my user can update content respecting the design they paid for.

    I feel that wp is kinda developing in a autistic way in terms on all the different tools built on top of it, old sites and how the CMS is developing towards a not very clear future.

  13. I dislike Gutenberg – I’ve tried it multiple times and found it too confusing and highly restrictive.

    I just use classic editor to design sites for my clients, 99% of whom never update the pages (I do it for them) and they simply use the CMS to write blog posts or sell via woo. The WYSIWYG editor is perfectly fine for those tasks.

    Guttenberg is an unnecessary complexity that’s simply not needed.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: