WordPress Core Editor Team Publishes UI Prototype for “Gutenberg,” an Experimental Block Based Editor

In the past few weeks, the WordPress Core Editor team, led by Automattic employees Matías Ventura and Joen Asmussen, have been hard at work creating a new content creation experience. The team recently published a UI prototype for Gutenberg, an experimental block based editor. The editor displays content-specific toolbars when an element is selected and provides a way to move blocks up and down.

Block Based Editor Prototype
Block Based Editor UI Prototype

While the goal is to reinvent WordPress’ current editor, there’s no guarantee that the prototype will end up as the final product and is in a high state of flux.

“The UI prototype exists mostly to serve as a non-static mockup,” Asmussen said. “It’s like a sandbox we’re building to test some of our mockups and assumptions, to see if they hold water or not. To that extent, it’s already been successful in informing us of things that worked well, and not so well.” The code that powers the editor is made up of about 90% JavaScript.

One of the concerns in revamping the editor is accessibility. Joe Dolson highlighted this concern in a post on the Make WordPress Accessible site. Dolson notes that the accessibility team will work in tandem with the editor team to make the new editor as accessible as possible.

“From an accessibility perspective, this is both an incredible opportunity to build a powerful and flexible experience for all users and an enormous risk that we could end up reducing the effectiveness of the editor for users with disabilities, or require them to use a 2nd-class editor without these enhanced editing capabilities,” Dolson said.

“We in the WordPress accessibility community embrace the challenge of creating a great new experience, and want to assure the community that we are going to do everything we can to make sure that any new editor experience is as accessible as we can possibly make it.”

Although the prototype’s functionality is limited, the team is interested to hear about your experience and expectations with using the editor. Some questions to consider during testing include:

  • Talk through each step, what does this do?
  • What does this feel like?
  • As you use it, what is missing you feel should be there?

Many users have already shared their experiences, providing valuable insight that is fueling rapid improvements to the project on GitHub.

The best way to get involved and contribute to this project is to subscribe to the Make WordPress Design blog and provide feedback by commenting on posts. You can also submit pull requests or issues on GitHub. Weekly meetings dedicated to the Editor component are held on Wednesday at 19:00 CET on Slack in the #core-editor channel.

27 Comments


  1. Congratulations to the WordPress Core Editor team who have done a great job on this so far. It’s looking really good. Can’t wait to see how this matures.

    Report


  2. Lol Elegant Themes is just so much farther ahead on this front. Great visual editor and page builder. Some other great plugins too already. Why reinvent the wheel?

    Report


    1. Besides Divi being commercial, I’ve used it extensively and overall I wasn’t a fan. It’s too cluttered. There’s too many options. The direction core is taking looks much more straightforward. I like where this is heading.

      Report


      1. I agree Jake, I’m not a fan either… but that isn’t without saying they did get some things right that I would like to see in WordPress core. I also like where this is headed!

        Report


  3. Please start copying more of Medium, will improve WP a lot.

    Report


  4. Great visual editor. It looks and feels smooth & elegant. But how about editing layouts?

    Report


  5. Is this along the lines of what Editus does? Or different? If the latter, what would be the main differences (if known at this stage)?

    I have to admit, after using Medium for a few years, I always feel the WordPress editing option is a poor second, and could do so much better (especially given the userbase).

    11 years of WordPress use, and still essentially the same clunky WYSIWYG interface. It’d be nice to see what you’re creating on the fly.

    Report


  6. I can’t see any option to create columns in this new editor. Is it planned to add this feature? If not, for me, this is not much better than the current editor.

    Report


  7. I’m praying so hard that some sort of front-end editing experience lands in Core. Maybe this could be it.

    Report


  8. Nice try but the image resizing feature is buggy.

    Report


  9. Joe is spot on here. This work needs to start with accessibility and expand from there, even at the prototype stage. This is an excellent opportunity to create a fully accessible content editor ready for the post-keyboard and post-mouse/touch input future.

    Report


  10. In my opinion, the Editor team is putting the cart before the horse by working on the UI details before figuring out how this content is going to be stored.

    Gregory Schoppe put together a good article on this topic, but from following the conversation in Slack, people were more interested in discussing the nitty-gritty details of browser support than address this fundamental issue.

    I currently use ACF’s Flexible Content field to build all sorts of layouts, from slideshows to tab boxes to logo lists, and so on. I’d like to see something that could replace that built into Core. Right now it looks like we’re just replacing what the tinyMCE editor can do. But I don’t know everything, so maybe this is just phase one.

    What I would like to see is a system that developers can hook in to and register custom blocks, much like how we register Custom Post Types today. Each custom block would have its own fields, or even sub-blocks (e.g., like a Slideshow block that has sub-blocks for individual Slides).

    As a developer, I like to get these sort of structural questions figured out first, before heading in to design. If we overlook opportunities to scale now, then we’ll end up with something that isn’t very flexible for the future.

    Report


    1. This is my concern too. It’s all very well showing off something pretty, but if the back-end stuff is poorly thought-out, this will actually make things worse, not better.

      Report


    2. Using ACF Pro as a page builder is not great from a UI and UX point of view.

      Report


      1. Using some kind of Page Editor or Site Builder is even worse though.

        ACF itself is the best tool around with a proper UI. Although it doesnt solve the Frontend editor issue.

        cu, w0lf.

        Report


  11. Will be interesting to see how all the different plugins that extend the current editor will work with this like I would imagine that is the key part of it will be focusing on getting the simple parts working really well and not a lot of functionality but being easily customisable for other developers to build on it otherwise everyone is going to just compare existing page builders. Example Robert mentioning columns wondering if they will implement in this or this will be easy enough to have plugins extend them.

    Probably be a good idea after this progresses to a beta plugin that some useful extending plugins are created to work with it.

    Report


  12. It looks good, I hope it just doesn’t give too much trouble for those who like to work in HTML.

    It would be good to have included the shortcodes available in a theme on the fly

    Report


  13. Finally WP decided to move away from old editor. Looking forward to it

    Report


  14. I don’t give a flying rat’s donkey about Elegant or Medium or who did what first. Progress is progress and the Editor team is doing a great job with this UX scrumptiousness.

    Report


      1. Being aware of other UI, UX and flows is useful though.

        Report

Comments are closed.