I hear that Gutenberg is crap so many times from different people (mainly from those who relate to other builders). I also heard the point that Gutenberg was the worst path that is possible, so I decided to give a real counter-answer for all and to show you why Gutenberg is best what happened with WordPress for both – developers and users with real examples that are not possible with other solutions. The worst thing about Gutenberg is that it’s wrongly promoted as a stand-alone page builder. Because, in reality, it’s the best Content Editor and environment. I also want to point on real problems with Gutenberg and how they can be fixed.
Why Gutenberg is the Best Content Writer for Users
When someone wrote me that Gutenberg is so crap for his clients, the first plugin that he must install is Classic Editor (a plugin that disables Gutenberg), I understand why most of the sites look like nonstructured text crap that is not possible to read.
I did an experiment earlier. I asked a few of my friends to edit sites. The only criteria for choosing these friends was – they must be total noobs, not in WordPress, but technical noobs. So, to better understand their level – they can’t simply send image from phone to laptop and even don’t know how to upload images.
So, I showed them simple documentation from WordPress site and that’s all. Then asked them to edit posts, add content, images. All of them did this great without asking me any questions.
So, now, let me ask, if your page builder that you use has next things that I like in Gutenberg and that save me a lot of time
Easy Image Uploading from ClipBoard
Do you know that when you add an image to the clipboard, you can simply click on CTRL+V and WordPress will upload the image in the media library and add an image block on page.
Simple Embeddings
Do you know that you can copy the links from popular sites and WordPress automatically inserts the proper player? For example, youtube
Easiest block insertion
Many people write that it’s hard to add blocks. Well, when you simply type “/”, you can easily add any block or pattern. Can your actual page builder do this? What can be more more straightforward than this?
Block Conversion
You can easily convert one block type to another.
Context Editing
Gutenberg has several contexts for blocks – editing from the panel, toolbar, and directly in the editor.
Command Panel for navigation
Do you think that navigation is challenging in Gutenberg? Maybe it’s because you didn’t use the command panel that reminds me SpotLight on Macbooks
Distraction Free Mode
Do you know that you can turn Editor in the Fluent Content Area so you can focus only on content?
Components
Everyone is hyped around components. Gutenberg had it for years, and it’s most easiest way to create them, just convert content to synced pattern
This also includes a partially synced option
Markdown Conversion
Do you know that Gutenberg has auto markdown conversion when you type? Just add symbol # and space and content will be replaced by Heading. Or “-” and space and it will be list
Content Formatting
Gutenberg added spaces, centering, align by default. You just add content and it’s already working as structured content. You click on enter and a paragraph will be added. Users do not need to think about how to add a spacing, they do not need to add Sections, Containers to center content, they just need to add CONTENT and think about CONTENT. Because Gutenberg was replacement for Content Editor. I do no know who started promoting it as a Page Builder because it’s not a Page Builder. At the same time, Gutenberg adds powerful API, and developers can build a Page builder based on Gutenberg like we did in Greenshift and GreenLight
What should be improved?
Gutenberg adds more and more new features for improving content editing; for example, my latest favorite was Zoom Mode for easier adding patterns. But what I miss is Dark mode in the editor. We plan to provide this option in Greenshift but it should be added in core from my point of view
Second thing that usually confusing (mostly developers, not users) is that Gutenberg adds content styles. It’s good for content, but bad when you want to build custom design and landings, they just non sense, it will be great to have switcher for Dev mode in editor when all default spacing, centering, styles from Gutenberg are disabled.
Why Gutenberg is the Great Environment for Developers
Gutenberg can be great not only for users but also for developers. Let’s see what it should allow you to do.
React based editor
React, Typescript became standard in Frontend Web Development. And in Gutenberg, you can use it directly in scripts. You can simply put your regular React code and it will work. WordPress also provides you wp-script package with already configured webpack so you don’t need to think about this. Do you want to use any React lib? Use it as usual, it will work. Do you need Redux? Use it.
Gutenberg doesn’t limit you in how you build your panels. Use any. Use React or Typescript.
On top of this, Gutenberg provides you with a big library of ready components. You even don’t need to import them. See more in StoryBook
Do you want to use Fluent React in Gutenberg for frontend and backend? No problem, check our React Router
Server – Client Hybrid method
A big pain in any web development is combining server and client features. Many frameworks like Next.js help with this, but WordPress does this easily for you. All Editors’ environments are based on React, but on-site, WordPress will use a hybrid method where you can use React (but without hooks if you do not use our React Router) or PHP-based render.
On the one hand, it’s very powerful, but on the other hand, it requires special learning. Those who used only React earlier can’t understand how it’s possible to combine it with PHP, and those who used only PHP templates do not know how to use React. This is why many developers do not like Gutenberg; they do not have enough expertise to build something powerful.
But Gutenberg has very powerful API for content manipulation. One of my Favorite is HTML API. It’s like regular expressions but on steroids and really intuitive. For example, we use it to make Dynamic Styles and dynamic Indexer.
Interactivity API
This is something new, it allows you to build something hybrid between HTML, React, Redux states. It’s like using States but in combination with PHP and vanilla HTML. Where you can get the same?
Read more about Interactivity API
Maximum Access
While in other solutions, you have limits what you can make, in Gutenberg, you can change almost everything. You can change how whole editor is working, how panels are working, how it looks and feels. You can inject your code in existing components or build own. You can overwrite every step, on how it’s saved, toolbars, Inspector panels, extra plugins, etc. You also decide how your code will output and what it will show.
Easy integration and syntax
You can easily integrate Gutenberg into any external workflow because the editor saves simple HTML. You can ask AI to build your Gutenberg content and copy and paste it into the editor; blocks will work.
Gutenberg also has a big, well-documented API. You can use the Gutenberg editor as a stand-alone open-source editor instead of your Text areas. See Isolated Gutenberg
Content Locking and predefined layouts
This is very under rated feature. Do you know that you can create special patterns for special post types and they will be locked for users. So, users can add or change only content but they can’t break something? You can add different level of locking depends on user role.
Read more about Content Locking
What can be improved
Bigger access has a bigger responsibility. Currently, Gutenberg allows you to edit everything from your plugin, and many developers go too far and make too intrusive options. In our team we have the rule – Greenshift features are ONLY for Greenshift blocks, we do not inject any of our functions into other blocks.
Also, Gutenberg doesn’t have clear standards in UI and functionality and this makes panels too different when you install several Gutenberg based plugins.
Also, I would like to have the possibility to use React hooks for Front (like we did in the React router addon).