What Is Gutenberg WordPress and How to Use Gutenberg Blocks?
Hello friends. The WordPress editor for creating and editing posts and pages has been around for a long time. The development team and the legion of co-authors got down to work on updating the tools for creating posts in WordPress. Their ambitious project is called Gutenberg. It has aimed to replace the default WordPress editor completely and now it is a part of the WordPress core.
For several months, everyone has been actively discussing the introduction of the new Gutenberg block editor into the engine. And many major players in the WordPress market have already announced full compatibility of their products with the new editor. Best Free Gutenberg blocks plugins for any WordPress site or theme.
After upgrading to version 5.0, you will no longer see the usual toolbar for us on the edit page of the entry/page.
Now, each piece of text/paragraph, each image, each button is inserted using the blocks of the new editor.
The developers of the new editor believe that Gutenberg will give your site more opportunities to create/edit content, as well as more flexible settings.
Almost any update of applications or software is a step forward that simplifies the life of users.
However, they are not always convenient and clear from the first time. Therefore, the Gutenberg WordPress update, recently released for the WordPress platform, raises some user concerns. And in general, this topic continues to be relevant for many people. The goal of the new editor is to make adding content in WordPress simple and enjoyable. In this article, I will tell you about Gutenberg — if you are still not acquainted with it, and I will also give you answers to the most frequently asked questions.
Most popular questions
- What is Gutenberg?
- How does Gutenberg work?
- Why was the new editor named Gutenberg?
- Why can not everything stay the same?
- What are “blocks”?
- Are there Keyboard Shortcuts for Gutenberg?
- What browsers will Gutenberg support?
- How will editor styles work?
- Will I be able to opt out of Gutenberg for my site?
- Is Gutenberg a WordPress Page Builder?
- Where to find Gutenberg Optimized WordPress themes?
- Where to download free Gutenberg Compatible WordPress theme?
- Where to get premium Gutenberg compatible WordPress themes?
- Do I need any additional plugins?
- Are Your Themes Ready for the Gutenberg Block Editor?
- Where can I change the permalink?
- What happens to my existing content when using the Gutenberg editor?
- How can I check the compatibility of available plugins with Gutenberg?
- How to manage my old posts in Gutenberg block editor?
- Pros and Cons of Gutenberg
What is Gutenberg?
Gutenberg is the working title of the new WordPress Editor, the area in which you write your article texts and contributions.
Currently, the block editor has already replaced the old visual editor since WordPress 5.0 version.
The design of your texts should be much easier and more intuitive since your content already while writing looks already exactly as on your website.
In addition, the Gutenberg Editor brings along important design elements that could previously only be implemented with the help of plugins or directly in the source code. I found it very positive.
This is how the Gutenberg Editor looks when you create a new page or post.
With the Gutenberg Editor, WordPress is completely revolutionized.
The block editor will no longer require Page Builders for many sites in the future (but they still have their reasons there), and there are new ways to design websites.
You can build up your posts and pages completely without HTML and CSS knowledge and without an additional Page Builder plugin. Blocks are a more simple opportunity which even a beginner will master.
“Gutenberg, one of the most important and exciting projects I've worked on in my 15 years with this community”.– Matt Mullenweg (WordPress founder)
How does Gutenberg work?
Gutenberg is referred to as a modular editor based on a simple block system. Each element of your page has its own block that you can insert, edit and personalize anywhere. There are such general blocks as:
Blocks for layout elements such as:
- Spacer and so on.
In addition, you still have the opportunity to format your texts directly in the code or in the Classic Editor.
Why was the new editor named Gutenberg?
Gutenberg is a German pioneer printer — the first typographer of Europe. In the middle of 1440s, he created a method of printing with movable letters, which had a great influence not only on European culture but also on world history.
The new editor is also intended to revolutionize WordPress and lay a new foundation for creating content.
Why can not everything stay the same?
That can be explained pretty easy and quickly. The “old” Classic Editor is very old and will not be competitive or barrier-free in the future.
That fact that more and more websites installing additional PageBuilder plugins shows clearly that site owners want and need more options.
There were compatibility issues between some PageBuilder plugins and other plugins. Of course, why should every developer adapt his plugin to a large number of PageBuilder plugins?
With the integrated Gutenberg Editor, every manufacturer is forced to adapt the plugin to him. This results in fewer problems, fewer errors and thus less hassle for WordPress users.
What are “blocks”?
Individual content elements are called “blocks” which is also new in Gutenberg. Each element stands alone and can be customized. Think of it as Lego. The baseplate is your contribution or page, and all content elements such as paragraphs, images, buttons, headlines, galleries, etc. are the Lego bricks you use to craft the page.
Are there Keyboard Shortcuts for Gutenberg?
Yes, you can use them. Since everything is a separate unit in Gutenberg, lots of mouse clicks are required to complete the task. This means a slower work, especially at the beginning. The best way to fix this problem is to learn the keyboard shortcuts of the Gutenberg editor. This will allow you to add or remove blocks quickly as needed. To open the full list of combinations, use the “Shift + Alt + H” key combination.
Gutenberg brings some new shortcuts that make working with the editor easier. Some shortcodes known from the classic editor continue to work:
What browsers will Gutenberg support?
This is all fine and dandy, but here comes the most important question: what browsers does Gutenberg support? There's no better source for it than official information! According to wordpress.org, it supports all latest browser versions, such as:
- Last 2 Firefox versions,
- Last 2 Safari versions,
- Last 2 iOS versions,
- Last 2 Edge versions,
- Last 2 Opera versions,
- Internet Explorer,
- Last 2 Chrome versions,
- Last Chrome Android versions,
- Last Android versions.
This usually indicates that the most recent and two previous versions of each major browser, so no worries here!
How will editor styles work?
We are all worried about our editors when we apply a new theme. Still nothing to worry about here, as not much effort is required for them to work, in fact, they will work as is in most cases! It appears that regular editor styles are opt-in. But if that's not enough for you then you can use extra stylesheets by using a hook:
Will I be able to opt out of Gutenberg for my site?
Say you didn't like Gutenberg after all, but you've already applied it. What are your options? There's a Classic Editor Plugin which can restore your previous editor.
Update WordPress and install the Classic Editor plugin.
The Classic Editor plugin leaves the old version of WordPress. It allows you to use its expanding plugins, dependent on the old editor.
To install it, go to the Plugins – Add new section. In the search enter the “Classic Editor” and click “Install”. After installation, click “Activate”. And that’s it – you are in your own environment!
Support for the Classic Editor plugin will be available in WordPress until 2021 inclusive.
Is Gutenberg a WordPress Page Builder?
Since Gutenberg is a page builder himself, maybe the question arises for you:
What about existing page builders, such as Elementor, Visual Composer or Beaver Builder? Or with themes like Avada and Divi? Many will think that these page builders are no longer needed because of Gutenberg.
I do not think so, because these plugins have much more functionality than Gutenberg, and it is unlikely that Gutenberg will completely replace them. You can continue using them, also with Gutenberg.
Fortunately, many developers are already prepared for the upcoming WordPress version 5.0. Or are already working on making their page builders compatible with Gutenberg:
- Elementor is fully compatible with Gutenberg. It is possible to write posts in Gutenberg and then design with Elementor.
- According to the documentation, Visual Composer allows you to use blocks within your own editor or to deactivate Gutenberg completely in the plugin options.
- Since the end of July Divi offers the possibility to switch between its own editor and Gutenberg.
- BeaverBuilder and Beaver Themer are compatible and you can switch between the BeaverBuilder Editor and Gutenberg since version 2.1.
- Thrive Architect will also be fully compatible: Thrive Project Gutenberg
Where to find Gutenberg Optimized WordPress themes?
I should say that every WordPress theme is compatible with Gutenberg by default. But if your theme is somehow not compatible with Gutenberg block editor, that means that it will look a little bit different than it should be. Easy to say, the default theme style can look not as usual.
So, if you don’t want to risk, it is, of course, better to find ready-made Gutenberg themes. For example, this collection of 15+ Gutenberg ready and compatible WordPress themes of 2019. There are not only excellent premium themes but also free good ones.
By the way, WordPress 5.0 Bebo has a new default theme – Twenty Nineteen.
Twenty Nineteen includes custom block styles, wide spaces, and also combines modern sans serif headings with classic serif text. And to increase the download speed, Twenty Nineteen uses system fonts.
The universal theme is suitable for work in a variety of cases: both for photo blogging and for a new company or charity website.
If you want to find a perfect Gutenberg optimized theme for you, I advise you to look after them on such websites:
Actually, there are lots of markets, where you can find Gutenberg ready WordPress website templates. You should just pick one, which you like and believe more. The next question is — should it be free or premium.
Where to download free Gutenberg Compatible WordPress theme?
From the list above you can find lots of free Gutenberg compatible WordPress themes.
What else can be found in the package submitted templates for WordPress? In addition to the already mentioned Gutenberg plugin, users should get a lot of stylish and useful options. The essential features for such themes are:
- adaptability, the site will work fine on various devices with a small screen resolution;
- SEO-friendly design, which has already been optimized in accordance with the latest requirements of search engines;
- trend design, which includes options such as MegaMenu, a blog, and gallery, as well as other necessary ready-to-use pages;
- powerful admin interface;
- Absolutely creator-friendly design that promises easy website editing without code operations, many options for changing UI elements, etc.
As you can see, Gutenberg Starter is a simple and fresh WordPress theme based on the Gutenberg page builder, which is ideal for blogging on almost any topic, including personal blogs, how-to blogs, news pages, etc. The theme is an excellent option for building a business site that covers such topics as a cryptocurrency, news, gaming, consulting, freelancing, and media. This theme is easy to work with and it will be perfect for a beginner at creating a website. By the way, this theme also has WooCommerce blocks, if you want to present and sell some goods, which offers your business.
At the beginning of this article it was already mentioned that the templates shown in the WordPress collection were equipped with a mobile-ready design, so let's see why the current site owner needs it at all? In fact, the numbers speak for themselves, because in 2018 already more than half of all received traffic belongs not to stationary computers, but to mobile devices. Yes, and is it any wonder? After all, making purchases, looking for the right services, evaluating products and ordering them to your home is just what we do in between work or standing in traffic jams. For this simple reason, every modern website needs a smaller version of the content, which should look perfect on mobile devices.
Free Furnicom is a great example of such a website. This theme will be perfect for an online furniture store, but if you like, you will suit almost any online store. Thanks to Elementor page builder you get by easy drag and drop create a top-notch content. There are already six ready pages, live customizer, and JetElements.
Where to get premium Gutenberg compatible WordPress themes?
Free themes are good, but the premium is better. If you are looking for premium Gutenberg WordPress themes than you know, that you will get a high-quality product with support and frequent updates. Premium themes always have lots of benefits.
Do I need any additional plugins?
No, it is not necessarily, but there are a number of plugins that you can use to extend the functionality of Gutenberg. Of course, I also think that less is more and just install the plugins that you really need.
Here are some popular favorites of users:
- JetGuten is a great addon for Gutenberg editor, which provides a set of content blocks with an intuitive visual styling.
- Ultimate Addons for Gutenberg is a set of powerful tools to quickly create a WordPress site.
- Advanced Gutenberg blocks, this plugin adds over 10 new Gutenberg blocks, among which the most notable are: Preview of the site, WordPress plugin (allows you to display information from WordPress.org in your posts), Feedbacks.
- Stackable Gutenberg blocks – Another block plugin Gutenberg, which is gaining popularity. Currently, it offers 17+ new units, including more advanced ones.
- Atomic blocks – This is a set of new Gutenberg blocks from the same team that created Array Themes, a popular store with an excellent reputation and quality code.
Are Your Themes Ready for the Gutenberg Block Editor?
As you all already know (of course you should know this!) WordPress 5.0 shipped with Gutenberg editor allowing more creative freedom than we had previously. And the beauty of it is that it supports all WordPress themes! That’s right, you read that right! Any theme you currently own or plan to purchase is supported by Gutenberg. You just have to think of Gutenberg as an updated graphical interface editor. If your theme is bundled with its own editor and you wish to opt-in to using it – no worries! Сдфіішс Editor plugin is here to save the day. If that’s the question you’ve been searching for you can stop reading here.
However, there’s more than meets the eye! Sure every theme is supported. But what’s the caveat? Well, you can put some additional work in your theme to enable it to have even more features it has now with Gutenberg editor.
Where can I change the permalink?
The permalink hides behind the post title, or since the Gutenberg version 4.4 in the sidebar under the document, as a second dropdown. You can find a short explanation on the page — The new WordPress Editor in detail.
What happens to my existing content when using the Gutenberg editor?
This editor does not affect your content. So sleep well.
How can I check the compatibility of available plugins with Gutenberg?
Gutenberg's editor was launched as the default content editor, so a theme or plugin with shortcuts “tested with version 5.0” means that they are compatible with Gutenberg. This is an easy way to check whether plugins are compatible with Gutenberg, version 5.0+. Also, plugins can be tested on WordPress.org by performing a search on the name of your plugin.
How to manage my old posts in Gutenberg block editor?
After you upgrade your site to version 5.0, your old content will be placed in a classic block inside the new editor. You can edit everything just as before with the classic block, or you can convert your old articles into Gutenberg blocks. Simply select the “Convert to Blocks” option in the drop-down menu of your classic block, and it converts your content into the corresponding blocks automatically.
Also, you can rearrange the order of blocks by easy drag-and-dropping to edit your content.
Pros and Cons of Gutenberg
The Gutenberg Editor is still in its infancy. In general, the editor works already really good.
Pros – The Gutenberg Editor brings you these benefits.
- Elements such as buttons, columns and so on are integrated into WordPress;
- Designed blocks can be saved for reuse;
- More space for writing;
- Warning when using poorly readable color combinations;
- There is an internal table of contents in the editor that is created from headings;
- Gutenberg replaces a variety of previously required plugins;
- Creating posts is more intuitive and easier, especially for newcomers to WP. This should help Gutenberg to make WordPress accessible;
- Gutenberg can be used to implement functions or layouts such as multi-column, which were previously only possible with HTML, shortcodes, widgets;
- Developers can create their own Gutenberg blocks and thus extend the functionality of their themes and plugins;
- Gutenberg's clean surface with lots of whitespaces makes more pleasant writing without distraction;
- Creating WordPress posts and pages with Gutenberg is closer to the WYSIWYG (What you see is what you get) principle;
- The new editor shows WordPress innovative and remains competitive against the competition by Wix and so on.
Cons – These hurdles are likely to be on you.
- Setting links do not always work around;
- There are currently compatibility issues with plugins and themes;
- Columns are not 100% responsive yet;
- As WordPress users have to get used to the new interface, the new editor will probably initially disrupt the workflow;
- If you offer a WordPress service, there will be more support after the Gutenberg integration;
- It is to be expected that not all plugins and themes are compatible with Gutenberg (yet) if the editor is integrated into the WordPress core;
- For simple blog posts, using the various blocks may be bulkier than with the classic TinyMCE editor;
- The UX of the HTML view is different than the classic editor, which is a problem for some users.
The Gutenberg Editor is the logical and necessary development of the previous WordPress Editor. There are still a few small bugs that will be resolved. We should not forget that developing such a large product takes some time to mature completely.
Finally, simple but important elements such as buttons or multiple columns come from home and no longer need to be retrofitted.
Having worked a bit in the new Gutenberg environment for WordPress, you begin to notice its merits. For example, it is very easy to move blocks and swap them. Inserting tables or columns and setting them up has become an easy task in comparison with the previous editor. Conveniently, Gutenberg remembers and offers to insert frequently used blocks. If you are working with code, each block can be edited or corrected in the “Edit as HTML” mode.
I liked the insertion of images and the formation of galleries. Depending on the functions of the theme, with Gutenberg, you can generally do without an additional plugin for displaying pictures. If you are just creating a WordPress site, I would recommend using this visual editor.