Gutenberg: First Impressions
Gutenberg is the future of content in WordPress. It will deliver the elegance of Medium but with far more power and flexibility of layouts and content types. Development is already in full swing and you can test it today. What will this mean for users and developers? I believe it opens up lots of new opportunities.
At WordCamp US 2016, Matt Mullenweg announced that new point releases of WordPress would focus around features of WordPress. He also announced that he wanted WordPress to have a renewed focus on the post writing experience. He acknowledged how content editing has changed and evolved a lot over the years while the WordPress editor has changed relatively little. I listened to that whole announcement with baited breath because I’ve been longing for a totally revamped way to write content for a long time.
- First I took a stab at showing highly styled content directly in the editor
- I emphasized how the except can (and should) be used as content in posts
- Then I collaborated with Kevin Hoffman on displaying theme-based dynamic styles directly in TinyMCE
All these things were tiny efforts to make the backend editing experience more closely emulate the front-end results.
So when the first announcement came out about Gutenberg being about “little blocks” I was excited. This sounded like the right direction for sure.
Gutenberg First Impressions
Now that Mullenweg announced a beta version of Gutenberg, the floodgates of real feedback and global open source collaboration can begin.
Generally speaking, things like this have to be seen, not just read, so here’s me talking through one of my first interactions with the Gutenberg beta plugin:
You should definitely try it for yourself though. It’s on wordpress.org here, and you can install it on your test site just by searching for it by name in “Add new Plugins”.
Here’s the strengths and weaknesses of Gutenberg that I see based on my screencast above:
Strengths
- Flexible
- Intuitive
- Distraction free writing
- Media implementation is really well executed so far
Weaknesses
- Aligning blocks makes clicking into content areas problematic
- Having a whole section for Embeds of only tangential use seems cluttered and clumsy
Hopes/Concerns for Improvement
- I really hope they move Embeds to one item in the “Common Blocks” section.
- I’d love to see basic support for columns in one way or another. That would take the content writing experience to a new level for WordPress Core.
- It should include a basic front-end stylesheet to control layout so theme authors don’t have to do all of that from scratch.
- What happens when you have 25 plugins that all want to load 25 custom “blocks” into that tiny “Insert” dropdown? Will there be a search? Or will it just scroll forever?
- How will this be implemented for custom post types? Where will custom fields go? Will custom fields just become “little blocks” too?
- Markdown support made TinyMCE a much quicker writing experience. I’m expecting that will be implemented in Gutenberg as well though it’s missing currently.
- Themes should be able to enqueue a Gutenberg stylesheet that will help the writing experience more closely mimic the front-end results. Additionally, like my articles above, dynamic styles and colors that themes support in the Customizer would be able to be reflected in Gutenberg as well.
- Front-end support. I believe the future of WordPress is at least 75-80% admin-less. Admins should be able to login and stay in the front-end but see Gutenberg live on their site and start editing directly there.
When Will Gutenberg be in Core?
Most likely version 5.0. According to Mullenweg’s post above, he wants the plugin to have more “gestation” time. As you can see in my screencast above, there’s obviously still quite a bit of work to be done immediately. Currently, on the Gutenberg Github repo, there are 31 open issues labeled as “bug”, and only two of them are slated for Beta 2.
What Will this Mean for WordPress and its Future?
Personally, I think this opens up tons of opportunity. WordPress is all about publishing; its the heart and soul of its core purpose. Because of that, its natural for WordPress to lead the way when it comes to the article writing experience.
In recent years we’ve seen Medium become the de facto elegant writing experience. 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. This is an exciting development to be sure.
Gutenberg has the potential to be as elegant as Medium but deliver far more power. Share on XAdditionally, plugin and theme authors will — in all likelihood — be able to add custom Content Blocks that will be a far better user experience than shortcodes currently are. Similarly to how the current implementation of the Image and Gallery content block types, I would imagine plugins — like Give — might integrate with Gutenberg to insert a donation form to be dropped into the page. The donation forms options could then be configured directly in the right-hand sidebar. If that form could then be visually rendered directly within the content and floated left or right or made full-bleed that would add some very attractive options that current shortcodes really can’t do very well.
Gutenberg and the Admin-less Future of WordPress
Lastly, I see Gutenberg as another step toward an Admin-less WordPress. Both the REST API and Calypso have been pushing WordPress away from interacting directly with wp-admin. Further, any page builder plugin worth its salt today has a front-end editing feature. Gutenberg moves WordPress even more strongly in that direction.
Imagine just logging into your site and being routed to your homepage, then clicking on an “edit” icon and just begin typing directly on the page. Wouldn’t that be great? While the “Front End Editor” plugin has been stagnating for years now, I think Gutenberg is moving us in that direction and I can hardly wait for it.
UPDATE: Version 0.2 already pushed live this week
See here: https://make.wordpress.org/core/2017/06/23/whats-new-in-gutenberg-june-23rd/
It already addresses several bugs I experienced in the screencast above. Namely:
- Added a delete icon for easy deletion
- Can target captions in images even when floated left/right now
- Added support for Pages and CPTs — CPT authors will need to account for that though, currently the “Gutenberg” link is appearing on ALL CPTs regardless of whether they declare support or not, so that still needs working out.
Overall a lot of good progress already.
Also, I just got off a great WP Water Cooler session where Weston Ruter — one of the Core Contributors and Gutneberg Contributors — was on as well. Take a listen, we went in depth about some great stuff:
Update 2: Follow-up Post
This post was just my personal first impressions of the plugin itself. But the whole concept of Gutenberg is a game changer for WordPress. As you know, WordPress is a HUGE and global ecosystem now. So how will that ecosystem respond, pivot, react to Gutenberg? That required a more in-depth response, so I wrote that up on our WordImpress blog here:
This is already in the repo.
https://wordpress.org/plugins/glutenburg-free/
There’s always one guy who wants to prevent the future from coming…
Completely agree with you, but only for the way the plugin is presented.
In my opinion, it’s not a bad Idea to have, at least for the transitional period, a plugin that as the Gutemberg plugin does now, adds the “old” – read – current – editor as an option.
Just think to the guys that have built shortcodes and integrated these shortcodes with Shortcake, a feature plugin so something that had – have – good hopes to be merged into the core.
The conversion from shortcodes to blocks will not happen overnight.
Gutemberg as of today renders shortcodes in the frontend perfectly but it does not allow the editing of the shortcodes from the Shorcode Ui..
Even if and when all the shortcodes get converted in blocks someone might need the ability to edit previously created pages that include shortcodes..
TLDR with a few tweaks and a better name and description this plugin might be useful to many
Great review/demo. Thanks.
* I’d say it a bit stronger: not having columns would be a major fail.
* I agree that the future is front-end editing.
* I’d add: this is the time for ‘shortcake’ or whatever to redo the shortcode experience.
I like how it looks and it generally makes sense to me … but I’m coming from how looks and works now. I wonder about new users, will it be easier to pick up?
I agree about the lack of columns. Overall, i’m psyched about the project and the beta is more impressive than I was expecting. I can see where it is going and like it. But. Without rudimentary column support it’s still not going to be a replacement for sites which currently use even the most rudimentary of page builders. Here is to hoping.
Nice writeup, Matt!
Hi David and Jason, thanks for your comments.
See my UPDATE above with the WP WaterCooler video. Weston Ruter is a Gutenberg Core contributor and he was on the show and said that columns are definitely on the roadmap.
Also see this issue here for discussion on that:
https://github.com/WordPress/gutenberg/issues/219
Thanks!
Ah. The conversation on Github is an interesting read, especially the part about flexbox vs cssgrid vs bootstrap vs foundation. That’s going to be a tough cookie to navigate.
That was a great episode. Good insights. Yea that columns are on the roadmap!
For anyone following along, I published a more in-depth piece on our WordImpress blog that discusses how Gutenberg might impact the broader WordPress ecosystem:
http://wordimpress.com/gutenberg-mean-plugin-authors/
Awesome. Thanks Matt!
As a designer I’d like to be able to create a blog/website that looks more like an inDesign magazine. So far it sounds like Gutenberg may help with this. I’ll have to install it and give it a try. Visuals are so key that we need a great solution to the layout issues.
Hi Charles, why do you feel you cannot create such a layout in the current editor?
It is not a sarcastic question I am workin on converting shortcodes to blocks at the moment and I personally do not find any difference in the final result, in regards of what is achievable layout wise at least.
Of course if we talk about tech and Ui Gutenberg is light years ahead of poor old Tiny :)
I am very interested to know the point of view of someone who find the current editor limiting.
I would really appreciate your feedback.
Antonio.
Hello Matt nice overview of the Gutenberg editor. We are seeing more and more buzz around Gutenberg though I think its still needs few updates before it can be considered industry stranded.
Follow the progress… it’s already at version 1.1.0. The latest twist is the discussion around which JS Framework to use, that will most likely slow-down development a bit, but I’m hoping they choose NO framework. We’ll see. Thanks for chiming in the discussion!
Involvement of Gutenberg in the WordPress Core will bring a revolutionary change in the functionalities of WP. It will be of great help to non-technical people who try to stay away of codes for customization. It will even make it easier to customize the look and feel of website. Thanks a lot for sharing such helpful information.
Johann Gutenberg’s invention of the movable type printing press in the mid-15th century marked a revolution in the way information was disseminated, and early impressions of this breakthrough were largely focused on its transformative potential. Gutenberg’s first major publication, the Gutenberg Bible (1455), left a profound impression on its audience due to its meticulous craftsmanship, clarity of text, and uniformity, which set a new standard for the production of books. Prior to this, manuscripts were copied by hand, often resulting in inconsistencies and high costs.
Scholars and intellectuals immediately saw the press as a game-changer for education, religion, and communication. The ability to replicate texts quickly and with precision meant that knowledge, once the preserve of the elite, could reach a much broader audience. The Church, for example, initially welcomed it as a means to distribute religious texts more widely, though this enthusiasm would later cool with the Reformation, fueled by the rapid spread of dissenting pamphlets.
Those who witnessed Gutenberg’s innovation for the first time must have been struck by its implications: it was a harbinger of cultural and intellectual shifts, a tool that would democratize access to knowledge, and one that laid the groundwork for the Renaissance, the Scientific Revolution, and the modern world. The sheer potential of this new technology must have created a sense of awe and anticipation.