Diving Into the New Gutenberg WordPress Editor (Pros and Cons)
The current WordPress visual editor hasn’t had many changes over the years and for the most part, has stayed pretty much the same. While this isn’t a bad thing, many think it is time for a change. Other platforms such as Medium or Ghost provide a really unique and refreshing experience for writers, so why can’t WordPress? Well, many contributors and volunteers have been working on the new Gutenberg WordPress editor behind the scenes for the past 6+ months. Their goal? To make adding rich content to WordPress simple and enjoyable. Today we will dive into the new editor and discuss some pros and cons.
- What is Gutenberg?
- How to Install Gutenberg
- Exploring Gutenberg
- Pros of Gutenberg WordPress Editor
- Cons of Gutenberg WordPress Editor
- Try Gutenberg Demo
What is Gutenberg?
Gutenberg is a take on a new editor for WordPress. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. The current visual editor requires a lot of us to utilize shortcodes and HTML to make things work. Their goal is to make this easier, especially for those just starting with WordPress. They are embracing “little blocks” and hope to add more advanced layout options. You can check out the official example.
To be fair to the developers and the team working on this, it is important to note that this is currently in its beta and testing phase, it’s not ready to run on production sites yet. But we wanted to dive in and see for ourselves what all the hype is about. We will make sure to keep this post updated as improvements and changes are pushed out. It appears that before this will be officially merged into WordPress core that Matt Mullenweg (the founder) is hoping to get 100,000 active installs. Which makes perfect sense, as this will work out a lot of the bugs, issues, and allow them to process new ideas and feature requests.
“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU
— Bridget Willard (@YouTooCanBeGuru) June 17, 2017
Because Gutenberg is still in the testing phase, the team working on it are encouraging people to try it out and leave comments and feedback in the WordPress support forum or open an issue on GitHub. Or you can join the discussions that take place in #core-editor on the core WordPress Slack. Gutenberg will be shipping with WordPress 5.0.
How to Install Gutenberg
As of writing this, the Gutenberg plugin currently has a little over 20,000 active installs with over 290,000 total downloads and a 2.5 out of 5-star rating. It also requires WordPress version 4.8 to use it.
Gutenberg WordPress plugin
You can download the latest version of Gutenberg from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. Again, we recommend installing this on a test site or utilize your host’s staging environment.
Install Gutenberg WordPress plugin
Exploring Gutenberg
After installing Gutenberg, you will see links under your Posts that allow you to open up the Gutenberg editor. They don’t replace the default WordPress editor, which is a good thing in our opinion, as during the testing phase it allows you to bounce back and forth. As of the latest version on the repository, it now supports custom page types and pages as well.
Gutenberg link on post
Important: Once WordPress 5.0 is released Gutenberg will be the default editor (#41316), but you will still have the option to install the classic editor if you run into compatibility issues (as seen in the new callout coming below).
WordPress 5.0 Gutenberg callout
Gutenberg adds a new menu in your WordPress dashboard which contains a demo (as seen below) and the ability to create a new post. Again, this menu is probably just for testing purposes As you can see the visual editor looks quite different than the once you are probably used to. It has a very similar feel to Medium, which we think is great.
Gutenberg editor demo
If you take a look at both the Gutenberg editor and the current visual editor side by side (click to enlarge) you can see just how much more writing space Gutenberg has, especially on smaller screens. For people writing on laptops, Gutenberg is going to be a nice change of pace! It really is focused on “writing first” and is trying to provide a less distracting environment.
Comparing Gutenberg vs current editor
In the Gutenberg WordPress editor, you can click on “Post Settings” to remove the right-hand sidebar. And while this does give you access to even more of your screen it is kind of halfway in between the currently available distraction-free writing mode. We tried using Shift+Alt+W to launch it in Gutenberg editor but it doesn’t seem to work yet. It could be they haven’t added this yet. But we are pretty sure they will, as there are probably quite a few people that use this.
Hide post settings (half-way there to distraction-free writing mode)
To switch between the visual editor mode and text editor (code), there is now a dropdown in the top left. You will notice that there are now HTML comments at the beginning and end of each block. For example, the following would allow you to create a text block.
<!-- wp:core/text --> <!-- /wp:core/text -->This allows you to create the blocks directly from the text editor mode. However, it also adds a lot more clutter than you are probably used to if you are editing in this mode.
Gutenberg text editor
When you highlight over a block, there are options to easily move it up or down with the arrows, delete it, or go into the settings of the block. This is very similar to the controls available to you on Medium.
Working with Gutenberg blocks
We were also surprised by how well it worked on mobile right out of the box. If you need to make a quick image insert or add a paragraph before publishing a post on the go, it looks like Gutenberg is going to make that very easy.
Gutenberg editor mobile
One of the first things you will probably notice is that the TinyMCE toolbar you have been used to seeing for years is now gone. It is now replaced with a drop-down menu if you click on the “Insert” button. Well, that is because it appears Gutenberg is trying to get rid of its dependency on the TinyMCE integration. Or are they?
TinyMCE is no more
Here is what Matt Mullenweg had to say about it.
“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.” — Matt Mullenweg (src: WP Tavern)
However, Andrew Roberts, the project leader on the TinyMCE team also reached out to us and cleared up a few things with regards to what his happening with TinyMCE and Gutenberg.
I’ve been on the Gutenberg team since inception. It has been a joint effort. It is probably worth noting that TinyMCE core editing engine is the powering the “editable” component that in turn powers most of the blocks. The Table block for example. That is likely to continue for the foreseeable future.
Also, the Classic Text block is essentially the TinyMCE editor. How much prominence it gets is probably dependent on feedback from the community. There is actually a Pull Request (#1394) being worked which essentially makes Gutenberg a wrapper for the ‘old’ editor so that existing TinyMCE plugins and buttons would work. Remains to be seen if that gets included.
Regardless, it is likely that the WP and TinyMCE Core teams will work together to ensure that a more word processing-style user experience lives on in WordPress. Even if it eventually becomes a plugin.
On a related note, one of the reasons we have been working on the Gutenberg project with the excellent Gutenberg team has been to bring these concepts to the wider TinyMCE community over the next 12 months. That will enable you to bring block-based editing concepts into your own custom application. — Andrew Roberts
Below are a few new block additions we thought were pretty cool.
Table Block and Text Column Block
Simple tables are much easier now, as you can insert them as blocks within the editor. Previously you had to either use a 3rd party plugin or HTML code. Currently, you can only add a 2×2 table with the insert option and you can’t style it without going into the text view. Although, eventually we assume you will be able to do all these things from the visual editor.
Gutenberg tables
They have also added the ability to add responsive text column blocks, which is great! Currently, you can choose between a 2, 3, and 4 column layout. Responsive columns in WordPress have always been a pain in the past and usually require a third-party plugin to get working properly.
Gutenberg columns
Live HTML Block
They also have what we are calling an live HTML block. You can insert your code and then see a preview from right within the block. This is actually a pretty cool idea and might actually prevent some of us from having to switch back and forth between the visual editor and text editor modes.
HTML block in Gutenberg editor
Drag and Drop Images
As of Gutenberg 0.5.0, you can now drag and drop images directly into an image block, just like you are used to with the visual editor. However, there is a fade effect when doing this which is quite strange. We could easily see this being an issue.
Drag and drop images
You can also now add additional CSS classes to certain blocks.
Add CSS class
Recent Blocks
With all the blocks being built into the Gutenberg editor, and probably many more to come, they added “Recent blocks” to try and help speed up the process of insertion.
Recent blocks
Cover Text Options
As of Gutenberg 0.9.0, they also introduced some new visual styles and options for cover text. You can easily change the font size, turn it into a Drop Cap, and change the color with their new custom color palette component.
Gutenberg cover text
Slash Autocomplete
A cool feature added in Gutenberg 1.1.0 is the ability to use autocomplete to insert blocks. For those of us who use Slack on a daily basis, this is a very familiar way of quickly formatting content the way you want it. Having the option to minimize clicks and utilize more of the keyboard is always a good thing!
Gutenberg autocomplete (Img src: WordPress.org)
Table of Contents and Anchor Support
They have also added a Table of Contents on the sidebar. They are clickable links so you can easily jump to a section in your article. This can come in handy for when writing long form content.
Gutenberg table of contents
Another feature you can now use on blocks is anchors. This is actually pretty exciting and something that has been needed in core for a long time. Adding anchors allows you to then link directly to a certain section or header in the article. This is great for sharing, as well as creating jump to menus in SERPs.
Gutenberg anchor support
Word and Block Counts
Most of us are used to seeing the total word count at the bottom of the WYSIWYG editor. Well, in Gutenberg 1.2.1 they have added this as a little informational popup you can quickly view. You can see the total word count, number of blocks, and number of headings.
Gutenberg word and block counts
Pull Quotes Block and New Alignment Options
Besides just having the standard blockquote which we have been using for years, they also have a new pull quote. And yes, pull quotes are different. It is also nice to see some variations on the positioning of the blocks. For years, the standard visual editor has given you the ability to align left, align center, align right, and assign no alignment. With the Gutenberg WordPress editor, you can also align wide (as seen below), and align full-width.
Gutenberg pull quote aligned wide
Button
There is also a built in method for adding a simple button. While there aren’t very many options here yet, it is nice to see, as many bloggers and publishers need easier ways to add call to actions to their blogs posts. Right now you have to use HTML or rely on a 3rd party button/shortcode plugin.
Gutenberg button
Embed Options
If you wanted more easily accessible embed options, well, you are definitely getting your wish! Gutenberg makes embedding media content super easy, whether it be YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, and many more. While you could embed all of these before, many didn’t realize this because there was no mention of it in the visual editor. Combined with the new block experience and alignment options, we aren’t sure what could really be done better. Although, they might have to reorganize things going forward as this could easily get cluttered.
Gutenberg embed options
Pros of Gutenberg WordPress Editor
Here are a few pros we see with the current Gutenberg Editor.
- Ditching *some* reliance on TinyMCE is a good thing in our opinion. We would love to see a tighter integration between core, theme developers, plugins, and the editor.
'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU
We grew our traffic 1,187% with WordPress. We’ll show you how.Join 20,000+ others who get our weekly newsletter with insider WordPress tips!
— Alex Denning (@AlexDenning) June 17, 2017
- For publishers that prefer the newer Medium style editing experience, they are most likely going to love the WordPress Gutenberg editor.
- Gutenberg provides a less distracting experience with more screen space.
- Blocks are fun to use and the new alignment options are a step forward for larger resolution screens and full-width templated and responsive sites.
- Already works great on mobile, and going forward we can actually see people utilizing this a lot more. Need to make a quick edit on your phone while on the go? No problem.
- The ability for theme and plugin developers to create their own custom blocks.
- Easier to use for beginners.
Another thing that caught our eye was in Gutenberg 0.4.0 they mentioned in their development logs adding an API for handling pasted content. (Aim is to have specific handling for converting Word, Markdown, Google Docs to native WordPress blocks.) This would be amazing. Right now copying from Google Docs to WordPress is completely broken.
Cons of Gutenberg WordPress Editor
And here are a few cons we see in the current Gutenberg editor. Remember, it is still in the testing phase, so a lot of these things will probably be fixed or added.
- It is currently missing Markdown support.
- While we also listed it being easier to use for beginners, we can also see this as being harder for some to learn.
- As of October 2017, Gutenberg does now support meta boxes. However, this is only initial support and it will require developers hopping on board. However, it’s a step in the right direction. You can at least tweak your Yoast SEO settings now. ?
Gutenberg meta boxes
- Doesn’t support responsive columns yet. We really hope this is coming. A lot of times this is a reason people install visual builder plugins or shortcode plugins, is to get the column feature alone. It is definitely time for columns to be in core!
- With so many themes and plugins out there, backwards compatibility is going to be a huge issue going forward. In fact, there will probably be thousands of developers that now have to do a lot of work, such as those that have integrations with TinyMCE. Out of all the WordPress updates, this is probably going to be one that causes the most work for developers. Although there might be a wrapper coming which would enable TinyMCE backwards compatibility. See pull request #1394.
- Some are worried about the accessibility of Gutenberg. Joost de Valk, the developer of Yoast SEO brought up this concern. Make sure to also check out this post about using Gutenberg with a screen reader.
Developers have started voicing their concerns with Gutenberg. Ahmad Awais has also released a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with Gutenberg. Worth checking out.
And many of you are probably wondering, will Gutenberg be optional or not? The answer is no. When they role out Gutenberg officially into WordPress core, you won’t be able to turn it off. As this will become the official editor for WordPress. There is, however, a free plugin called Classic Editor which you can use to restore the old post editor. But use this as a means to an end.
We also recommend checking out this great post on Gutenberg myth-busting which might answer any additional questions you might have.
Try Gutenberg Demo
Want to play with Gutenberg without installing it? Check out Frontenberg, a limited front-end demo of the WordPress Gutenberg editor.
Summary
Overall we were quite impressed with the new Gutenberg WordPress editor, it’s definitely something we are excited about for the future. We encourage everyone to grab a copy of it from the WordPress repository and install it on a dev or staging site. This is our chance folks to help build the editor we have all been wanting. We can have the same experience Medium folks do, but in our favorite CMS! The team here at Kinsta will definitely be taking some time to help give feedback.
Have you tried out Gutenberg yet? If so, we would love to hear your thoughts, both good and bad.
Fully managed
Secure like Fort Knox
Free migrations
Ultimate speed
Daily backups
Embedding content from services like YouTube, using the built in oEmbeds, are already super-easy to use in the existing TinyMCE editor. You simply paste a url into the editor and that’s it. Also, I think it’s worth clarifying that Gutenberg hasn’t added any new embed options. All those existing embed options (YouTube, Speaker Deck, Flickr, Imgur etc.) have been available in WordPress for years. It is good that they’re now more visible though, as there’s lots of people who don’t know that WordPress can already handle this and so they install site specific plugins (YouTube embeds, being the most common ones I see).
Also, the image for the new Table block is a little misleading. There’s no way you could’ve added that table without switching to the Text view and editing the HTML as the Table block doesn’t currently provide functionality to add extra Rows or Columns. It simply inserts a 2×2, unformatted table, and that’s it. I know they’re working on fixing this, but since the article was about the current Gutenberg plugin, I think it’s important to show what it currently does, not what it’s expected to do.
Thanks for taking the time to comment, I have updated the article above addressing your concerns.
No probs, Brian. Thanks for the great post :-)
Sorry, but this looks and feels bad, and is a productivity drain. Hiding
UI elements until you click on things is terribly confusing for some
new people (the opposite of your goal.) You’ve just doubled the number
of clicks I need to accomplish the exact same thing. I would only favor
this in core, if it’s to replace the current distraction free editor.
If this replaces TinyMCE in core then I’ll replace WordPress for my
site. Not even remotely a fan of the direction the editor is going.
Thanks for the comment. Ya, its definitely not for everyone. I personally like it, but I also enjoy the Medium experience and don’t do much clicking while writing. It will be interesting to see what happens. I see three possible scenarios happening:
1. They merge into core and everyone will simply have to adopt to the new changes.
2. They merge into core and it is optional, like you said, possibly replacing the distraction-free writing mode.
3. They merge into core and still allow a TinyMCE integration back into it to help the thousands of integrations currently already coded for the editor.
Time will tell.
forget the “new”people, take into account most of us have clients that are 60 year old or more, this editor must be opt-in not “default” editor by any means
@Black Lodge Games : I agree with your comment. When Gutenberg will be released as core component , most of the themes and plugins will need to be updated. That will be a new level of pain for product owners. On other hand that will bring new opportunity for developer to earn more money.
Hi, I’m project leader on the TinyMCE team. And I’ve been on the Gutenberg team since inception. It has been a joint effort.
It is probably worth noting that TinyMCE core editing engine is the powering the “editable” component that in turn powers most of the blocks. The Table block for example. That is likely to continue for the foreseeable future.
Also, the Classic Text block is essentially the TinyMCE editor. How much prominence it gets is probably dependent on feedback from the community. There is actually a Pull Request being worked which essentially makes Gutenberg a wrapper for the ‘old’ editor so that existing TinyMCE plugins and buttons would work. Remains to be seen if that gets included.
Regardless, it is likely that the WP and TinyMCE Core teams will work together to ensure that a more word processing-style user experience lives on in WordPress. Even if it eventually becomes a plugin.
On a related note, one of the reasons we have been working on the Gutenberg project with the excellent Gutenberg team has been to bring these concepts to the wider TinyMCE community over the next 12 months. That will enable you to bring block-based editing concepts into your own custom application.
Hey Andrew, thanks a lot for taking the time to comment. This definitely clears up a few things and I have updated the post above with some of your comments, as well as a link to pull request #1394. Sounds like this might resolve some issues that a lot of developers are worried about going forward.
No MCE custom buttons and toolbars so shortcodes can use them to generate content, no meta boxes, no columns. With all the available page builders, Gutenberg is not needed. In fact if the custom MCE buttons and meta boxes are not added, this thing is useless. They are about to break thousands of themes and plugins, and for what? Didn’t the surveys show that almost nobody cared about distraction free writing? And yet, here we are, thanks to some real “geniuses” getting ready to break many things, without any real advantages, You want something more than the usual editor, there are dozens of good page builders to choose from. I hate Gutenberg with a passion, and my anger grows every day and every time when somebody says the word Gutenberg. Make it a bloody plugin, and that’s it! Simply said the pros do not outweigh the cons, not in a thousand years,
You can’t compare a page builder with a editor. Compare page builders with acf or whatever you want but your comment is just hilarious. Go and play with your drag and drop page builders.
Gutenberg is more than just an editor, it is a whole new way of editing posts and pages. It is trying mimic page builders, and is failing miserably. And for the record, I don’t use page builders, but if I did, I would choose one of the many good ones, over the retarded, disaster of an idea Gutenberg. What’s hilarious, is that you are not defending Gutenberg, just throwing insults. What’s so great with Gutenberg then? Let me help you, NOTHING, unless you are a sheep and follow and do whatever you are told, without thinking.
I agree. WordPress not ought to waste anymore time with this nonsense. This is going to mess with a lot of sites that already have a solution working for them. Time to dump this idea of reinventing the wheel guys.
Every time I’ve used a page builder, it broke my site. I currently have the visual editor disabled. I am sure when Gutenburg will be the default editor, it will break my site completely. Keep it as optional. Have mercy on the millions of existing users, also give your new users using the favorite Gutenburg – no problem! Don’t fucking break my site!!
Thanks, Brian! For the article and for sharing the Gutenberg Boilerplate! ?
No problem Ahmad! Glad to see you are thinking of developers :) I think that this the crowd that is most worried with these changes.
Just trying to help. ?
Yeah this tries to be too clever, our clients wont like it (since they are frustrated with wix and such seamless editors)
I’m pretty shocked this may be included as an automatic update to WP. I use WP for many things beyond blogging, most often as a middleware. Anything that breaks ACF will doom WordPress to history for thousands of commercial enterprises.
WordPress will not be an automatic update. The ACF team has been working for a while not on making it compatible with Gutenberg.
Start reading here: https://gutenbergtimes.com/eight-truths-about-gutenberg/#status4 (Brian, hope it’s ok to post links in the comments….)
Gutenberg looks great. I guess this will be the end for all these overblown page builder themes.
It looks to have a very long way to go before it replaces Visual Composer.
I am a customer of Elegant themes (for my personal website) but am also the webmaster for a church that is using a free theme that is five years old and has never been updated (as free themes usually are not). I’ve tried unsuccessfully to get the church staff to work with me on finding a new theme (not a free one). I have two questions.
1. Will the Guttenberg editor be pushed out to all wordpress websites and will it be compatible with older ones? My worry is that the church website could fail with that upgrade.
2. I don’t want to suggest disallowing WordPress upgrades for security reasons (that website is already vulnerable enough with a discontinued, not updated free theme anyway) so I don’t want to suggest not allowing WP updates. So I am thinking about issuing a warning about Guttenberg to the church staff in case it causes a disruption of their website.
Ideas, comments, suggestions welcome. Thank you!!!!
1. Gutenberg is a core feature so, eventually, all themes will be forced to use it. I don’t know what effects it’ll have on themes that haven’t been updated
2. Rather than give them a warning that will not happen for a while you can disable Gutenberg for the time being and give the church staff time to come up with a decision (but see answer 1 above) but they will have to come up with a decision because the ability to disable Gutenberg will not be feasible long term
Patricia, Themes, especially those from the WordPress Repository should display Gutenberg blocks just fine, as they are nothing different than content stored in the post_content field any Themes uses. Blocks provide their own default styling. You might not get all features like “align-full” or “align-wide” but the site should still function well.
You can create a copy of the site and test it out. Feel me to email to wp4good@nptechprojects.org and I’ll invite to our next Gutenberg Live Q & A for nonprofits.
So you’re “updating” your text editor? Ok, but why not go further and integrate the drag and drop page layout of something like Visual Composer. Heck, just buy Visual Composer and integrate it into WordPress, and make sure it works with posts.
Gutenberg is both exciting and potentially worrisome. An official page builder would be terrific, I’ve seen options like Visual Composer cause far more problems then solutions in the long term for mid to large sized enterprises and businesses. That said, what I’ve seen so far appears to be a drag and drop page builder for existing, simple elements: blockquotes, buttons, images, oEmbeds. This is useful for a WordPress.com user, but not so much for self-hosted CMS systems. I’m very curious to see how cumbersome it will be to isolate advanced editing UI’s within a custom block. Automattic has a wonderful team, but I do feel that they’re disconnected from the vast majority working with self-hosted WP installs. Their track record with Jetpack provides some past evidence of this. While Gutenberg will help Automattic compete with Wix and Squarespace through WordPress.com, I’m not yet optimistic on how it will affect advanced self-hosted sites.
Very concerned with the effect this is going to have with all the non-technical clients that me and others have built out in the past, that may have issues after the release. Yes, as many have said, there is going to be a lot of money to be made, but there are also going to be a lot of pissed off clients who may just move on to something else, and probably blame us developers for it.
… and if the project is starting now, and the WordPress Gutenberg fiasco hasn’t been fully explained to the client, then what? Do we get sued if their site breaks when they upgrade? How do we explain this issue to clients without having them say, “I don’t want that”? I’ve had people threaten to sue me over WordPress being “A hacker target”, so I’m not just blowing smoke here. People expect their website to work and to continue working, which I think is reasonable. I’m currently not starting any new WordPress websites until 5 is released, and unfortunately been looking for alternatives to WordPress. Anyone tried Silverstripe?
My initial reaction is that this doesn’t look a good prospect.
Agreed with what Nodws said. trying to be too clever which could end up disappointing WP users (and of course clients too).
Shouldn’t Gutenberg have specific post/page level JavaScript and custom CSS inserting facility?
Gutenberg has been on my mind a lot recently, about the motivations behind the project and how it is being implemented. It’s a powerful piece of software for sure, but is it right for WordPress? I’m not convinced, and wrote my thoughts up here – https://deliciousbrains.com/wordpress-gutenberg/
Hey Iain, I actually added a link to your post above last week :) Above under “Developers have started voicing their concerns with Gutenberg.” Thanks for sharing, it’s a great piece!
Ha, need more coffee! Cheers Brian ?
Even the page builders that are out there now (Visual Composer, Fusion Builder, etc.) give you the option to switch to the WP editor. This doesn’t? Really.
My main concern is no meta boxes. How the heck are you supposed to add features and functionality to custom post types? Or are custom post types going away, too?
As someone who absolutely abhors page builders in general due to their confusing natures (feature overload for most people), this is a very bad idea and should be scrapped. I, for one, will be disabling this thing on every I do. And if it’s forced on my, I’ll either go back to straight HTML coding or find some other less confusion and more functional platform.
Hey Jason, Gutenberg does support meta boxes and custom post types. I think everyone shares your concerns though regarding how it works and getting rid of the normal editor we have all been used to over the years. Thankfully this is still in beta and they are making good progress. But time will definitely tell how it turns out.
Text column support has been added – might want to adjust that but it’s not a full column system as yet.
Gutenberg is ambitious but in my opinion, it needs to be more ambitious. Just make a page builder as part of core already and make that a way of editing. BOOM – I said it.
I would love to see a backend layout tool and editor for WP that is truly a native setup. All the other page builders have already shown the way to, its just a switch to turn them on.
Thanks Matt! I’ve updated the post with text columns. Great to see this added. Getting closer :)
This new editor Gutenberg has great potentials, still some of the beta users are afraid of it. However I personally tried it on my blog using plugin and loved it.
Hi guys,
nice tutorial! Reading the comments I think this is the right place to share a good plugin about Gutenberg.
I would like to present you a free plugin that allows you to manage the Gutenberg editor.
It’s called Gutenberg Manager and allows you to enable / disable the editor in the various post types (pages and posts included). It has more features but I leave them to you.
We have read tons of posts of people complaining about the future implementation of Gutenberg within the core in WP 5.0 and this has led us to find a simple solution.
Gutenberg Manager solves this problem and allows for example to continue using Elementor, Visual Composer, Siteorigin Builder or Cornerstone without any problem even after WP 5.0.
From the first user feedback on WP.org the plugin seems to be apreciated :)
For this reason I would like to introduce you to Gutenberg Manager -> https://it.wordpress.org/plugins/manager-for-gutenberg/
The plugin can be used by developers in their own themes and plugins thanks to some useful hooks. There is an hook to HIDE the plugin option panel so the final user will not see it in WP backend (great feature for the devs that want to include Gutenberg Manager in their projects).
We are also making arrangements with the teams of most famous Builders to activate partnerships and collaborations. In this way we hope to make the transition to Gutenberg a little less traumatic!
Thank you all for your attention,
Good job.
Very interesting Alessio. Do you see this being a long-term solution though? I would think at some point we should embrace the changes and make everything compatible. Or perhaps this is being developed as a temporary plugin?
I am convinced that Gutenberg will change the WordPress environment positively. All it needs is some time.
I think the people behind Gutenberg aren’t in a rush and they are trying to deliver the best possible outcomes. We just need to be more patient while the editor goes through the development phase.
Here is an article showing the possibilities of Gutenberg-
https://www.coderex.co/wordpress-gutenberg-nightmare-or-dream-come-true/
I really like them latest update. It is quicker than my usual workflow and I really like the placeholder and to use / as shortcut key to instantly search for blocks.
Would be good if they made it less “wordpress dashboardy” and had an option to have it as a front end page or popup instead on your site. This simple feature would make it look and feel more like a user generated community site like medium etc…
The one criticism I would have with Gutenberg is the general philosophy behind it and the team and the way they want to implement it as core and default with no regard to the needs of users who depend of how the current editor works.
Don’t get me wrong, Gutenberg has potential and I am open to persuasion but it seems they want to see the complete obliteration of what they call the Classic Editor, and widgets for the matter. On widgets, it’s kind of odd, seeing as WP 4.9 introduced many new widgets. The image and gallery widgets and an update to the text widget incorporating a version of TinyMCE.
There is no consideration to how the Classic Editor affords a flexible user experience to fit many types of workflows. The main aspect of this being the ability to move, hide or collapse meta boxes into whatever arrangement you want.
I have been monitoring the feedback on the Gutenberg Plugin page and it is noticeable that there is a certain amount of censorship to comments on there. Yes, some of the feedback is at times shrill but I have seem more moderate and constructive feedback (including my own) redacted or removed. A very disspointing experience in what is supposed to be an open community.
Yes, I have noticed censorship also.
So Gutenberg wants to make WordPress work like Medium? I Have a better idea, shut down WordPress and force everyone to switch to medium.
Oh and one more thing, WordPress is trying to reinvent the plane while it is flying at 500 miles per hour.
As a relative novice to many things WordPress, I’m afraid, very afraid.
I’ve been evaluating Gutenberg for a blog post and I’m stunned by the LACK of features.
Notably, the lack of color options for Heading blocks. The “old” editor allows us to make color changes with a click or two. Now we won’t be able to have color in headings at all.
Why go backwards?
When I heard about Gut. I expected page builders like Elementor, Beaver, etc to become obsolete. Now they’ll become mandatory!
I’ll be putting off WP update past 4.9 as long as possible.
Nice, I Like. BUT and this is a BIG BUT!
I hate serif-ed fonts. Gutenberg’s editor uses the dreaded Time New Roman, the world’s worst font in my humble opinion.
No option to use a font of our choice?
Could be worse, they could force you to use Comic Sans…
One real hassle I had with WordPress was the stripping away custom DIV tags, “br” tags, and “p” tags unless it had inline styling.
Is this Gutenberg framework going to address that issue or make it worst?
Hey Mark, that should hopefully no longer be an issue, but time will tell. Currently, Gutenberg is slated to come out with WordPress 5.0.
Thanks for all of this helpful info – it may not be as scary as I first thought :-)
The reason why wordpress became wordpress because of the Tiny MCE editor.
The tiny MCE editor is very nice to use it has given and gave wordpress users the edge for decades.
Who are these guys that are spearheading to change the wordpress core?
Can you name these people?
Why would they force there ideals of changing the Tiny MCE?
Why would they force it into the Core. It should be optional, not all themes and plugins will work with millions of wordpress designers using the unwanted Gutenberg.
What happens to their contents then?
I will Activate The tiny MCE plugin first
Train myself with gutenberg for a month before i will role the 5.0.
This is giving me extra work.
I’m feeling reluctant to start any new WordPress projects for customers. WP5 rolls out and then what? I get sued for making them something that is broken? Broken is exactly my experience when playing with the Gutenberg plugin.
So WP, if you were looking to be fresh and fancy, and you were hoping that it would attract more people, I hope you realize how many people are going to abandon you.
Is there truly any lack of usage? Seriously, how much more of a percentage of the web would make you happy? I just don’t get it.
BELOW is a list of bullet-points. Each bullet-point represents a complaint and/or issue with the Gutenberg plugin.
――――――――――――――――――――――――――
● #1: The “Settings” panel on the right-hand side is very slow and buggy. For example, every time I edit a post, ALL of the tabs are ALWAYS collapsed, so I have to expand the tabs every time I edit a post. It is unnecessary and time-consuming!
● #2: There is no option to drag the post-type $support tabs (i.e “Revisions”, “Categories”, “Tags”, “Excerpt”, “Comments”, etc.) across the post editor screen. For instance, I like to keep “Discussion” & “Comments” BELOW the content-edit area the_content(), but with Gutenberg that customization has now vanished!
● #3: Speaking of the “Comments” tab, that is missing. Where are the comments?! With Gutenberg, I do have the option to enable & disable comments under the “Discussion” tab, but the “Comments” tab (showing the 20 most recent comments) has disappeared!
● #4: I have two custom Taxonomies for customization purposes, and neither one of those two Taxonomies are showing up anywhere on the post editor screen. Where are my two custom Taxonomies?!
● #5: Every time the “Tags” tab is expanded, it takes a second or two for all the chosen tags to display. Sometimes, the tags won’t display until I click on the content box that stores the tags. This is very annoying! I guess I should be fortunate the tags are at least showing up, unlike my missing custom taxonomies!
● #6: The “Content” edit area the_content() it terrible. For instance, It’s only about 600px in width, and there is no option to expand the width of the “Content” edit area ―― it should behave like a textarea HTML element, but it doesn’t.
● #7: In order to switch between “Visual Editor” & “Code Editor”, I have to click the 3-dotted button in the upper right-hand corner, then choose “Visual Editor” or “Code Editor”. This is yet again unnecessary and time-consuming.
● #8: I have another plugin which allows me to switch “Post Types” (not Post Formats) within the post editor screen, but that option has completely disappeared!
● #9: Under the “Status & Visibility” tab, it provides me with the option to choose between 3 different Post Formats, but I don’t have Post Formats supported for any of my themes (via functions.php file) ―― I create my own themes.
**literally shaking my head at this point**
● #10: When I switch from the “Visual Editor” to “Code Editor,” I get the following coding in a lot of the HTML DIV elements. The coding I get is related to CSS Bootstrap. However, I despise Bootstrap, and I purposely avoid plugins that have Bootstrap, because it interferes with my CSS coding. I have my own, personal-made CSS library for columns & grids, and I make my own accordians, tabs, etc with my own HTML, CSS & JavaScript, so Bootstrap is essentially useless for me and it conflicts with my coding.
Example of coding that Gutenberg adds:
div class=”col-md-9 col-sm-10 col-xs-8″
● #11: The “Custom Fields” tab is gone! What is the purpose of this? Custom Fields are crucial for many of my Post Types & Metadata.
● #12: The “Permalink” isn’t displaying. I tried right-clicking & clicking on different options, but I can’t find a way to edit the permalink. Is this intentional?
● #13: The “Slug” isn’t displaying. This is the same issue as #14 above. How come the slug isn’t available to edit?
● #14: The “Add Media” Quicktag is all the way at the bottom of the content-area the_content(), and Gutenberg doesn’t provide the option to adjust the content-area’s HEIGHT. Thus, if there is a long post, the person adding media content to the post has to scroll all the way to the bottom of the content-area. Yet again, this is not time-efficient. It’s another inconvenience!
● #15: When in “Visual Editor” mode, there aren’t as many Quicktags options to choose from. This is another example of Gutenberg eliminating and omitting options that are present in the current WordPress post editor.
――――――――――――――――――――――――――
That fact that Gutenberg is in the plans of becoming part of the WordPress core makes me absolutely irate ―― particularly because I have spent a long time customizing my post editor screen with API/Actions & API/Filters — i.e. functions remove_post_type_support() , add_post_type_support() , wp_editor() , and so on.
I am aware that there is the Classic Editor plugin, but that’s not fair to us users & coders. Gutenberg should remain an optional plugin. My gut is telling me that if Gutenberg becomes part of the WordPress core, and people like myself have to use the Classic Editor plugin, then there are going to be compatibility/coding-conflict issues. As far as functionality and appearance, does anyone know if the Classic Editor plugin is EXACTLY the same as the current WordPress post editor? Will API/Actions & API/Filters work with the Classic Editor plugin the same way these APIs work with the current WordPress post editor?
Wow, Phillip! That is one impressive comment. You’ve brought up a lot of good points with Gutenberg. It will be interesting to see how this impacts the classic editor in terms of support and future updates/compatibility. Only time will tell.
I’m still working through my own issues with Gutenberg, but I can answer a few of your points:
#4 Custom Taxonomies must have `show_in_rest` set to true for them to appear in the Gutenberg editing sidebar.
#7 For good or bad, the HTML editor is becoming less useful in a Gutenberg block context. The HTML content itself is a representation of the data which is basically disposable as it will be regenerated by the next visual edit. I expect we’ll see some more developer-targeted custom blocks in the near future which are intended for raw HTML input.
#9 All our themes are custom as well and I’m haven’t ever been offered any Post Formats. Check your plugins?
#10 Personal opinions about Bootstrap aside, I’m not seeing this either. Again, this feels like a plugin has wedged a filter somewhere. Gutenberg does add a variety of classes, but they’re mostly namespaced with `wp-` and fairly minimal. If you haven’t looked into custom blocks yet, you should. The API is well thought out and gives developers a great deal of freedom about how we want our code generated.
#11 Custom fields (ACF?) should appear below the main content area or under Extended Settings in the sidebar. ACF Pro has been a staple of our WP development, but after a few days with Gutenberg API I can see the potential for replacing nearly all of it with custom blocks. Time will tell, but the potential of metadata blocks and custom HTML is really huge.
#12 & #13 Edit the Permalink/Slug by clicking in the title. They’re derived from the title, so this makes sense, but it took me a while to find it too.
I’ve been working with WordPress for a very long time but have never been a fan of the code. Development can be extremely frustrating. My first impression of Gutenberg was not good, but after giving it some time, I’m very, very impressed with the thinking and execution so far.
I’m curious if anyone has had any success setting up custom blocks using vuejs? I was under the impression that the core developers were building Gutenberg in a way that would make it simple to swap out the underlying javascript framework.
I’ve looked online, but 90% of gutenberg tutorials don’t work to begin with anymore, let alone the few that demonstate vuejs.
Would it be easier to find a library that ports vuejs -> React, rather than attempt to integrate vuejs directly?
Hi Marcus, fancy meeting you here:-) I thought of you when I came across Kevin Ball’s article: https://zendev.com/2018/07/31/wordpress-gutenberg-blocks-vue.html
I have big compaints, too:
I have some complaints, too:
– I use the galleries (WP core feature) a lot. With Gutenberg it is noct possible to change the image size of the gallery items (with the classic editor you can change it). The full image is displayed which is very annoying. And I could not find how to change this
– I really miss the custom fields. I know that there are plugins to show them but I don’t like to install many plugins just to rebuild the old WordPress backend
I’ve been using WordPress since the beginning, and I’m hoping that somebody comes to their senses and decides to abandon the idea that Gutenberg should be forced on everyone. There should at least ALWAYS be the option of using the classic editor (and without needing a plugin to do so).
Totally agree, responsive columns need to become a standard feature of Gutenberg – maybe with Settings page to configure breakpoints too..
While its definitely the future, I predict millions will prefer the classic editor when 5.0 is released.
Just installed Gutenberg on my WP site and when I go to create a post or page, I see nothing but a blank screen. I don’t know if it’s a compatibility issue with my Genesis theme or the fact that I use Visual Composer. Either way, it’s not working — and since I use VC (and love it), I’m not sure I really need whatever it is that Gutenberg provides. Am I being naive?
Please make it stop! The main reason I use WP is that it does NOT feel like a cheap Wix or Weebly site drag and drop.
If this becomes the main way to edit websites I’m out and will learn a new platform.
I too agree with the vast number of comments that this is NONSENSE. Not only will it create problems with existing sites, added billing for needed updates (clients are going to love that – oh yeah!), but also there’s going to be a learning curve for me as their developer also. And I already have a learning curve dealing with keeping all these sites running now. Which they do and THEY DO JUST FINE with wordpress the way it is.
Make this ridiculous contraption an option – not a default. And make the install voluntary too.
Solid article,
Few questions:
1. You mentioned using anchors so you can create jump-to sections in the SERPs, can you show me a single example of a ranking page for a keyword which has jump-to anchors in search engine?
I don’t think they will index them. You would need to so something with HTML5 pushstate to accomplish this (if sections were on the same page), and likely include in your sitemap.
2. Don’t you think the fall-back to the default should be a bit more graceful? Why should they make 20% (or 30%) of the internet install something to keep things the same…? That is weird if you ask me.
Part of the reason (in my opinion) that wordpress has been so successful is because of the lack of new changes, people understand the moving parts and therefore can launch many sites quickly without seeing and learning new interfaces every so often. Then using plugins they can try new things.
From what I see this article brings many new concepts to WP, some that seem to over complicate things. I am very interested to see how the broad community (those who have not even heard the word “gutenburg” yet), will react.
Thanks for your post man!
Hey Greg!
Great questions… So I have personally seen many time anchor lists in SERPs. I wrote up a little more here: https://woorkup.com/jump-to-menus/
It does appear to be something Google is testing on and off. As some months I’ve seen them, other months I haven’t.
I agree the default fallback should probably be a little more graceful, but I think they are simply trying to push everyone to Gutenberg as fast as possible without too much fragmentation. I think we’ll end up being this way anyways though since many will just install the classic editor plugin.
I think we all are interested to see how the WordPress community will react and how things progress :)
Thanks for the explanation. I am looking forward to the hours of fun trying to get used to it. I mean, it’s not as if I need a reason to be grumpy.
One point, and a big one: Gutenberg invented the modern world. The bloke was a Newton without the baggage. He brought information to the masses and started the fight against religions keeping ‘us’ in the dark. I was an apprentice printer and ironically we viewed him as godlike. I somehow doubt a WordPress plugin is going to change WordPress all that much, let alone the world.
Thanks again. I feel ready for it. Some excellent comments as well.
Great article.