WordPress’ New Gutenberg Editor Now Available as a Plugin for Testing

One of the featured sessions at WordCamp Europe 2017 was Om Malik’s interview with Matt Mullenweg, followed by a 20-minute Q&A from the audience. After showing a preview of the new Gutenberg editor with dynamic blocks replacing widgets, Mullenweg announced that it is now available as a plugin on WordPress.org.

Gutenberg has been in development for six months and is ready for testing, but its developers do not recommend using it on production sites. Anyone interested in the future of WordPress will want to take it for a test drive, as the new editor will revolutionize the way users think about creating and editing content. The demo video at WordCamp Europe also showed Gutenberg working smoothly in a mobile context.

At first glance, it may appear that WordPress is trying to copy its more recent competitors (Medium, Wix, and others) to keep pace, but the 14-year-old software has offered many of these content capabilities for years. Mullenweg explained how the new editor simply unifies the UI into blocks that can be placed anywhere. Gutenberg is set to replace widgets, the HTML UI of shortcodes, and blocks previously offered through the TinyMCE toolbar.

“We’ve taken stabs at this before, if you imagine our previous efforts with post formats – to make it easier to do certain types of media or quote posts or things like that,” Mullenweg said. “That whole concept can now flatten to just being a block. Working all that in, it’s bringing things we’ve been thinking about for a very long time in WordPress.”

If you’ve ever sat down with a new user to introduce them to WordPress, then you probably answered a long list of painful questions regarding the many varied and confusing ways of creating content. Gutenberg has the potential to make WordPress much easier to use.

“Right now WordPress makes you learn a lot of concepts – shortcodes, widgets, the stuff that exists inside TinyMCE as blocks today – and people rightly wonder why they can’t use those things everywhere,” Mullenweg said. “What we’re trying to do is shift it so that you only have to learn about blocks once and once you learn about the image block, that can be in a post, in a sidebar, in a page, in a custom post type, and it will work exactly the same way. Whatever is integrated with it, let’s say a plugin that brings in your Google Photos or your Dropbox, that will now work everywhere, too.”

Mullenweg said his previous attempt at replacing TinyMCE lasted approximately two years and they never ended up shipping it. Getting Gutenberg off the ground at this time allows WordPress to take the best of what competitors in both open source and commercial spaces have been doing, and improve upon it.

“Medium started five or six years ago,” Mullenweg said. “Browser technology, what you can do, has advanced quite a bit. I think this actually allows us to leapfrog past some of the really great visual editors, because we’re able to build on the shoulders of things like Medium, Wix, Squarespace, and others that have come before us.”

Gutenberg First Impressions and Concerns

The Gutenberg plugin is now active on more than 300 sites and first impressions are rolling in. This is the first time the new block editor has been easily accessible to any user who wants to try it. Gutenberg also offers a somewhat unique testing experience in that it creates its own menu inside WordPress, so users don’t have to choose between the old editor and the new one. Activating Gutenberg doesn’t make it an either/or experience and users can test at their own convenience.

From my initial testing, I found that Gutenberg provides a clean and enjoyable experience. Up until this point many of us couldn’t fully anticipate what Gutenberg would look like, but the interface is very similar to what one might imagine for an improved “distraction-free writing experience.” Gutenberg provides a more minimal UI for both the visual and text editors, although inserting blocks seems to be less functional when using the text editor.

There are still many bugs and rough edges, but this interface appears to be a natural evolution of WordPress’ content editing experience. It feels like WordPress. The editor pulls in many of the elements that have worked well historically and introduces a minimal UI that makes it possible for anyone to build a beautiful, feature-rich post without knowing any HTML. Gutenberg is the most exciting thing to happen to WordPress in a long time.

“The default state is likely my favorite ‘Distraction Free Writing’ implementation in WordPress yet,” WordPress core committer Aaron Jorbin said in a post listing his initial observations. I’m simultaneously able to focus on my content, and yet I have all the tools I need for writing. I don’t have all the tools I need for content creation.”

Matt Cromwell, co-author of GiveWP, also wrote up his first impressions of Gutenberg with high compliments for the new writing experience.

“In recent years we’ve seen Medium become the de facto elegant writing experience,” Cromwell said. “Medium is able to do that though by limiting the formatting and layout options dramatically. Gutenberg has the potential to allow writing to be as elegant as Medium or more so, plus deliver far more flexibility with layouts and content types.”

One area of uncertainty for WordPress developers is how Gutenberg will handle support for plugins and maintain a high level of performance with a large number of custom blocks added.

https://twitter.com/k1sul1/status/877945432889884672

“I miss a lot of the meta boxes I’m used to seeing on the screen,” Aaron Jorbin said. “Things like Yoast SEO (on some sites) and custom taxonomies are just not shown. If every metabox ever made for WordPress needs to be remade, it sure is going to make developers’ lives a living hell.”

Matt Cromwell also detailed a nightmare scenario of having more custom blocks than the current UI can handle.

“What happens when you have 25 plugins that all want to load 25 custom blocks into that tiny ‘Insert’ dropdown?” Cromwell said. “Will there be a search? Or will it just scroll forever?”

Mullenweg specifically addressed some of these concerns in his Q&A session at WordCamp Europe.

“A lot of people have a lot of things built into the edit screen, so part of the reason we’re putting it out there as a plugin first and also pushing it so hard to get as many people to install it as possible, is so that everyone who has posting and editing screen adjustments can rethink them to be beautiful within this new framework,” Mullenweg said.

Mullenweg anticipates that WordPress will release version 4.9 before merging Gutenberg, because he wants to see it tested on more than 100,000 sites before replacing the edit screen. If all goes well, the new editor could land in WordPress 5.0.

“I think that some things that people did, like TinyMCE toolbar things, aren’t really needed any more,” Mullenweg said. “Stuff that people did in the past with custom post types might be better as blocks. It gives us a real opportunity to reimagine a lot of the user interactions and flows that today we’ve taken for granted on the edit screen for five or six years.”

Check out Mullenweg’s WCEU 2017 interview below to see the live demo of Gutenberg and make sure to take a few minutes to install the plugin to see it in action for yourself.

39

39 responses to “WordPress’ New Gutenberg Editor Now Available as a Plugin for Testing”

  1. Re @k1sul1:

    The way it stores “blocks” is absurd. That thing is going to slow down fast. It should save content as content but it doesn’t. It *should* store the block data as JSON (or serialized object, IDC) into postmeta, but instead it uses regexp to parse HTML and queries DB.

    The block data can be stored anywhere. It can be stored in postmeta or even externally in a custom post type. It’s just the initial focus has been serializing block attributes inside of post content in the same way as shortcodes do, and as such it is largely backwards-compatible with existing systems.

    • It is depressing to see smart people just refuse to learn from their own recent experiences.

      4.7 – Rest API, a big project comparable in complexity to gutenberg, fails to take into account the core value of wordpress – flexibility, and fails to deliver anything of significance to 99% of wordpress users.

      4.8 – Text widget changes under the assumption of “we can change the definition of what is it in the DB without breaking anything” cause breakage and annoyance and shows that core developers do not actually know all the ways in which wordpress and its components are being used.

      Gutenberg – so far a combination of both of the above. What is the chance that it will both deliver its promises in a wordpress compatible way, and without breaking anything?

      I personally do not see the value of such an editor, it is of no use for me, and of very little use to other people that publish content with wordpress, they write things with word first, and pasting from word to wordpress is the most important functionality for them. For those people blocks are just clutter.

      But I do know there is a value in it for designers (for whatever definition of the term), and I don’t see any good reason not to have this kind of tool in core, but it needs to be opt-in, for at least the next 2 years. Doing it in an “opt-out” way like core usually dose things, has the potential to being very nasty thing to do to wordpress users.

      • Not everyone cuts and pastes from Word. I have been using WordPress for 14-years and have maybe cut and paste from Word twice in that entire time.

        I spend a far greater deal of my time fixing issues with people who copy and paste from Word without using the button to paste plain text.

      • What do you mean the REST API was insignificant? The future of web is moving towards client side rendered web apps and without the REST API WP wouldn’t be able to follow this evolution. There are many great examples of how the REST API is being used. As an example I run a small webshop which uses a service that utilises the REST API for shipping allowing super easy integration without the need of an additional plugin. We’re also planning on using another service that utilises the REST API for automated accounting. It might not be that prevalent for many of the smaller WP sites right now but on an enterprise level it has had a huge effect.

        As for Gutenberg I, for one, can certainly say it’ll revolutionize the way I build WP sites. I find myself constantly needing a user friendly block layout system and am currently using custom fields frameworks to achieve that. This doesn’t provide the best UX. Gutenberg offers a much more intuitive and easy way for the users to build their pages. I’m actually extremely impressed with how user friendly Gutenberg is. It is certainly much more intuitive and up to par than the post edit screen and TinyMCE are. If you look at other content publishing platforms all of them are using something similar to Gutenberg. It’s the future!

        • @emil, wordpress is a CMS, not a webapp.

          Anyway the rest api is not useful for webapps because it is not flexible enough. You need to create your own end points to be able to do anything sophisticated. The evidence for its lack of usefulness is that there is no use of it in 4.8, and the only usages to come that I know of, will have to create new end points.

          As for gutenberg…. everybody knows how to use word. Gutenberg introduces a learning curve that will deny unsophisticated users the ease of use creating content with wordpress is known for.

          Rarely anyone need to embed soundcloud in his content, rarely anyone needs to embed even a youtube video. Gutenberg mainly adds clutter and confusion to the content creation process. As I said, for some situations it has its advantage, but not for something like a simple blog.

        • @mark k I’m not saying WP is a webapp – I’m saying the future of the web is moving in that direction and WP needs to be equipped for that. Especially considering it powers a quarter of all websites.

          I’ve yet to build something using the REST API myself so you might be right but as I said I’ve certainly seen a lot of great examples of how it’s being used.

          Yes people know Word but in my experience it doesn’t mean people find the visual editor easy to use at all. I personally find find the Gutenberg editor much more intuitive and easy to use but of course that’s subjective. I’m looking forward to trying it with a client to get a better idea of how it fares.

          Sure, if you just need a simple blog (which I’d argue is actually not the use case for the vast majority of WP users) you might not need a lot of the additional functionality but I don’t see how the presence of these features impairs the ease of use. On every single website I’ve built I’ve had a need for some kind og block system. Maybe not for embedding videos (although occasionally I’ve also run into this use case) but e.g. for “embedding” products in a blog post, inserting a simple button, building front pages consisting of banners and heros, building a contact page with a map and form or doing something exactly like the example use case for Gutenberg. Using something like shortcodes, which is probably the only “native” WP way to achieve something like this in the content simply provides a sub-par experience.

  2. I think most would agree the Gutenberg experience is prettier and nicer than the current page/post editing experience. I know I do.

    The main concern is going to be about backwards compatibility. There thousands of plugins and themes that have extended the existing editor. And there are tens of millions of websites with content generated not only by the default existing editor, but by extended and/or modified versions of the editor.

    That includes everything from Yoast-type meta boxes, to galleries and other content inserted via Media/tinyMCE buttons, to ecommerce pages, to custom post types, to page builders, to custom built editing experiences on hosted solutions like Rainmaker, to weird misc hacks that individual site owners have done to their own sites.

    It’s not enough for plugin, theme, and other developers to accommodate the Gutenberg editor for fresh, new content. They also need to account for the tens of millions of pages of existing content that already exists. All that content somehow has to be ‘migrated’ so it can be opened and edited via a completely new interface.

    This is a massive, herculean task.

    Unfortunately, my impression is that relatively little thought is being given to such concerns, at least up to this point. That’s rare for WordPress core development, which usually prides itself on stability.

    Given the magnitude of the change the new editor represents, and its potential impact on every single page of WordPress content on the web, the lack of attention to compatibility issues has me concerned.

  3. I witnessed an impressive technical demo of Gutenberg on WordPress contributors day in Paris by Gutenberg lead matveb (Matias Ventura) and attended Matt’s presentation in the big hall as well. Gutenberg is looking much better than it was four or five months ago. The code we were shown by matveb looked clean and extensible.

    As a developer, building a block is not a problem for us (we built our own button above the editor in the current TinyMCE). Currently while we offer a visual interface, FV Player posts into the body in shortcode which makes the data very portable. Even if you disable our plugin the data remains.

    Creating a block which will do similar magic, no problem. But I wonder what happens in Gutenberg when someone disables our plugin. What happens to that data? How will the content creator access at least the core of our data (the link to a video which may or may not play in a generic player as we support far more formats and hosts).

    I heard that the goal is for Gutenberg to be completely cross-compatible with a conventional HTML editor and content block (say TinyMCE or CKedit). If a Gutenberg post can be reduced back to HTML and shortcode for cross-compatibility, which was promised at the Thursday 11am presentation by matveb, then most of my concerns are allayed. Gutenberg could become a very positive natural evolution in the creation of content.

  4. There are thousands of themes and plugins that use custom MCE buttons or the MCE toolbar to generate their shortcuts. If Gutenberg is not done correctly, are the developers ready to sacrifice millions of hours of work for a distraction free writing like editor that very few people would care? We saw the number of people who like and use distraction free writing… that thing is totally useless!

    Besides, Gutenberg is at least 5 years late… with all the free and commercial page builders, is Gutenberg really needed? Shouldn’t the developers concentrate on more important things, like caching, security, and even a backup system in the core?

  5. Just installed the plugin – overall, happy with the direction of the UI. I know clients/users get confused with the classic WP post editing interface, so the distraction-free editor is a step in the right direction (no reason metaboxes can’t be hidden on a separate tab).

    One thing that I didn’t like – to insert a new block, I have to click the “+” at the bottom and then re-order the blocks. It’d be great if I could press enter to create a new line, then insert from there (similar to how Medium works).

    I’m not a fan of the way it stores data/blocks, but I guess as long as there’s a standard parsing library then it’s still a huge step up from shortcodes.

    In any case, I’d definitely suggest getting feedback from developers in the WP community about the serialization of these blocks. I get that the idea is to keep post_content as the single source of truth + render anywhere, but it’s a bit like a square peg in a round hole IMO.

  6. Until i see something that isn’t just a tube of content this is useless to me and my clients.

    Why is there this persistent notion that people use their website as a writing tool? At our agency we have hundreds of clients, and i would wager that less than 5% write their longform content directly on the website.

    For non-bloggers, the website is a publishing platform, not a word processor.

    This is a blogging tool for a wordpress that is no longer “just” a blogging platform.

    • I think it’s Gutenberg is poised to become more than a set of writing tools. It’s becoming something that will allow people to update the content on their site in ways that they can’t do now without extra plugins.

      Take the popularity of Advanced Custom Fields, for example. I love the plugin and use it on almost every site I build, but I only use it because there isn’t an easy way to add custom metadata fields to WordPress. If Gutenberg can make building things like that easier, than it’s truly something that’s exciting.

      Another example that comes to mind are shortcodes. I just finished building a carousel plugin for one of my clients that leans on WP_Query to auto-generate the playlist from categories, etc. A basic example ends up looking like this:

      [och_playlist template=”related-videos” categories=”anchoring-a-boat”]

      If Gutenberg could make it possible for me to create this as a widget that could be added directly to the content INSTEAD of a hard-to-read shortcode, I’d be all over it. The client would have a much better experience, and their content would be far more readable. Especially if the widget had the capability of auto-generating the result inline so they can preview what it would look like before publishing.

      • Very good points IMO. Having the ability to create custom fields, metaboxes, post types, taxonomies, etc from within WP without a plugin would make it my favorite release ever.

        Not only that, it might help further shed WP’s reputation as a blog only platform that lacks CMS capability. I suppose that their desire to change that perception depends on their overall goal though.

        Isn’t the saying these days, “Decisions, not logic”? ;-)

        • Matt, with all due respect, why is “without a plugin” a paradigm to be desired? WordPress has a very modern and easy to use pipeline that is able to provide the best plugins with very little effort or technical hurdles.
          The WordPress team is to be commended on perfecting the extensibility of their platform. Yet in the face of having the ability of adding plugins with ease, why point to this one feature and arbitrarily decide it should be part of the core, because we don’t want to use plugins?

          We accept that there are some plugins that are essential to the experience, but remain as plugins. Akismet comes bundled with wordpress. There are two caching plugins that most people won’t do without one or the other. There is Yoast and other plugins which most would scarcely do without. And here is this upgraded CMS-like composition experience, which is already ostensibly a plugin, and it seems a foregone conclusion that this rises to the level of something that should be included without a plugin? This makes no sense to me. Please explain.

  7. I agree with letting the plugin creators add value in this space. The core wordpress code does not need this new feature. However, as a developer, I also see the value in how the team is being informed by the creation of a tool like this. When you write an extensible platform, like wordpress is, sometimes the complete picture of your API is not visible unless you actually build the tools that extend upon it. I’ve experienced this countless times, when I actually developed a tool for the platforms I’ve worked on. Things become clear about your core platform that you never imagined before.

    Personally I don’t see any reason for this to be anything more than a plugin. I hope they don’t merge this with the wordpress core, unless it becomes so popular, down the road, that it becomes obvious to do so. I applaud the team for this effort, but I hope they don’t bloat the core with a feature that is not needed.

  8. I know it’s early, but I’m dreading this based on what I’ve seen. 95% of the users I train are someone in a small business who has been tasked with dealing with the website, and the level of experience they bring to it is a basic familiarity with MS Word and Outlook. They get the toolbar layout immediately. Trying to get the average person who uses WP as a CMS an hour or so a month to understand this is going to be a problem.

    You know what would be really nice? I simple checkbox next to the gear icon in the link dialog. That way I can train users by simply saying “if it needs to open in a new window/tab, check here.”

    That’s usability I can make hay with.

  9. Has anyone actually done a survey of where those writing content actually do that writing?

    I might write a line or two direct into the WP editor. For that, it wouldn’t much matter if it were just a plain text editor. (In fact, that’s still sometimes what I use.)

    But, for longer writing, I wouldn’t dream of typing it direct into WP. I write it somewhere else first and then paste it in. Everyone I know who writes long-form work does the same thing (although they tend to use MS Word, whereas I use LyX).

    How Gutenberg aids this process is beyond me. Will it, perhaps, stop mangling content pasted in from Word? (I see that this still happens, to the extent that there’s actually a plugin to ameliorate this.) If not, why don’t the developers address that important need?

    I just hope they don’t get rid of the HTML editor. That’s where I paste my content so that it doesn’t get mangled. In fact, I now use a filter to disable TinyMCE altogether in the admin pages. Will I have to do the same with Gutenberg? Or will they, perhaps, see sense and keep it only as a plugin?

  10. I was excited for Gutenberg (way) back when I thought it was going to be a quick frontend editor, because my clients do often need to fix typos on the front-end, without the perils of a pagebuilder.

    But NOW I can see Gutenberg threatens my whole business. Its focus on “article writing” is detrimental to my work.

    Most of my work in WP for clients has been to make them each a plugin suite which adds CPTs, taxonomies etc and a huge huge bunch of bespoke metaboxes .

    EG Client/Job: a rental agency site needs a feature for editors to fill a standardised form to populate a property listing and link to geodata and offline systems. I spec and build a plugin suite to do this, but the metaboxes here won’t include the standard “editor” but will include many repeatable group boxes for editing segments, with custom boxes which call from other CPT posts and taxonomic queries, etc. Large complex metabox based solutions displayed in the primary post editing area.
    For my clients, “writing articles in wordpress” is 0.1% of why they use it.

    What I see from Gutenberg is no support for my practice. All metaboxes in a sidebar! No consideration for the non-blogging client, no indication of a path for a developer relying on the metabox model.

    So, what happens to me with WP5.0 ? All my clients want their 4 year old sites fixing for free? The onus is on me to deliver a fix, so am I recoding from scratch? Where are the WP official guidelines to deliver a familiar and equivalent UI? Where is the statement on legacy support?

    How are the big players such as woocommerce going to implement this, I’d be fascinated to see, because I’m looking at a massive problem here with no solution.

    Untill I see firm advice for people with my business-model (developing bespoke plugins for Business functions) I will be sticking on WP 4.9 and migrating away from WP as a platform.

    I am disapointed, and dismayed by what I have seen.

      • Yeah, no.

        If anything, core devs (of which I am one) are stuck in a steaming pile of back-compat hell that comes with the ever-present baggage of trying to maintain every supported and not-supported-but-popular use case you can imagine – and some you can’t.

        In terms of the business community not feeling like they have a seat at the table, that’s a fixable problem; get involved in the process. And spouting armchair hyperbole from the comments section on the Tavern doesn’t count.

        If you want your feedback to be taken seriously, you need to actually be serious about getting involved.

        It’s not about being stuck in 2000s-era thinking, it’s about being stuck with 2000s-era decision making. We can only fix it if we’re all willing to check our egos at the door and get to work.

        • I would say that CPTs and metaboxes are common enough to have been considered without blaming working people for “not getting involved”. I simply don’t have time to watch the GIT of every tool I use. I am busy, far too busy making sites and systems.

          I trusted that we all know that CPTs, Taxonomies, and meta boxes are a major feature of WP for developers who are selling bespoke solutions to business clients. It’s not like we are talking about something off-label like a WP_List_Table reliance. CPTs with Meta boxes are very common and supported features. For example: how many WooCommerce installs are there? Is [this WooCommerce metabox group](https://docs.woocommerce.com/wp-content/uploads/2013/04/WooCommerce-Shipping-Classes-Product-Variations-Shipping-Class.png) really expected to fit into the side bar?

          I first tested Gutenberg in March and installed it on 3rd May 2017 when I had a little time free to check it out. It has grown quickly since then and I assumed any obviously missing features were “coming soon”. but there was no indication that meta boxes (of the kind familiar from WooCommerce) would not be included otherwise I would have raised the issue then. I’m a one-man band and constantly meeting deadlines. I do not have free hours.

          https://github.com/WordPress/gutenberg/issues/952
          partly addresses the raising of concerns, If it is up to me to implement a solution then we are all doomed. I can schedule something for November.

        • No, it’s up to core to act like a product team and do the market outreach and research. Too often you all come off as a bunch of engineers without any product experience. For example… comments and feedback on… GitHub? In make.WordPress? Both of those are fine if you’re a developer but are not conducive to having non-developers give feedback.

          Stop being developers and start being product people. At least some of you.

  11. I’ve had a very quick look at Gutenberg and I think it shows a lot of promise. Reading through some of the comments above, I think people have to stand back and look at the popularity of visual editors for WordPress and other more sophisticated editors deployed in other products.

    The “average” WordPress user probably only has exposure to one or two sites. Making the editing process easier and less frustrating for them is going to help keep WordPress growing.

    There is still a text/visual view in the current beta and there looks to be plenty of scope to add new block types (inc widgets).

    The only thing I didn’t see was a way to have the equivalent of a page template – a bunch of pre-configured blocks laid out a certain way. I’m sure this must be on their list as no site of any size is going to be able to live without it.

    The concerns about backward compatibility are valid – I would also not want to see this as the default when sites upgrade, otherwise you are inviting a support disaster. Maybe make it the default for a new install, but leave current sites on the TinyMCE until they are ready to opt-in to the new way of doing things.

  12. It looks like Gutenberg does three things:
    1)It shows the code scaffolding for PHP+JS [it indeed looks like React.js wins] on WordPress.org;
    2)It has the makings of a WordPress PageBuilder thus confirming the ascendancy of frontend driven WYSIWYG page/post/CPT design in all Website Development, not just WP;
    3)It will certainly shake up the Visual Edit and PageBuilder plugin marketplaces.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

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

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading