The new WordPress Gutenberg editor claims to change the way you create content through WordPress. But the WordPress users are having multiple questions in their mind. Here, we have tried to answer a few of them.
Since its release back in 2003, WordPress has played a very significant role in how websites are built and managed.
WordPress has been used by more than 60 million websites and has been regularly updated. Each release brings a new version with enhanced usability and added features.
And what has caused a stir in the WordPress world it’s the announcement of a new version, WordPress 5.0 with the new WordPress Gutenberg Editor.
In this article for the Gutenberg WordPress editor, we will see what it changes are and how it’s feature can help you create content with a different approach.
- Introducing WordPress 5.0
- WordPress Gutenberg Editor
- Installation and Activation of Gutenberg
- The WordPress Gutenberg Blocks
- Adding a Gutenberg block/Removing a block
- Moving blocks with Gutenberg editor
- WordPress Gutenberg blocks: Layout elements
- Gutenberg widgets block
- WordPress Gutenberg editor: shared blocks
- Gutenberg editor: Embedding URLs was never easier
- WordPress Gutenberg Themes and Plugins
WordPress 5.0: What’s new?
The WordPress 5.0 update is expected to bring about a monumental change in WordPress history. The new version, that is prepared to be released anytime soon in 2018, is called Gutenberg.
Version 5.0 of WordPress will come with a new editor, that is the WordPress Gutenberg editor. Even though this version will just replace the TinyMCE editor we have been using all along, it is cited as one of the biggest changes in WordPress since it’s launch.
There are completely mixed reviews about the new monumental changes that this new version of WordPress is about to bring. While some users question the need for such a drastic change (because the current editor is familiar & user-friendly), some users are excited and ready to see what’s new.
The WordPress Gutenberg editor
The WordPress Gutenberg editing is fully based on what is called “blocks“. Even though the Gutenberg Editor intends to make the task of generating and publishing content through WordPress more systematic as well as easier, be prepared for a little handwork in the beginning, until you get totally used to it.
Because this new WordPress Gutenberg editor works differently. It is aimed to make content creating with WordPress more interesting and dynamic. And therefore, it introduces a totally new way to add content using blocks.
Since both the editors, the old TinyMCE based and the Gutenberg editor are so different from each other, the team behind it decided to let the WordPress users try the new WordPress editor before it is released. You can try it by downloading it from the WordPress plugin repository.
WordPress Gutenberg Editor: Goodbye TinyMCE WordPress editor
Before the Gutenberg Editor comes integrated directly into WordPress, you can try its features through the Gutenberg plugin. The plugin lets you try the new WordPress block editor on your site, and experience it before it becomes a core feature of WordPress.
As of writing this (12th July, ’18), the plugin has 10000+ active installs and an average rating of 2.7 stars out of 5, which clearly indicates the mixed reviews about the plugin.
With this plugin, you can download, install and activate WordPress Gutenberg like a simple WordPress plugin and get started with it.
The WordPress Gutenberg Project intends to change how you publish your content through WordPress. The Gutenberg editor has no resemblance to the traditional WordPress editor we have used till now. With the new editor, they have tried to integrate page builder like functions for creating and managing content.
However, don’t expect Gutenberg to be like any of the popular page building tools for WordPress too. It’s nothing like Visual Composer or Divi builder or the Beaver builder. The new WordPress Gutenberg is totally different than any of the page building plugins you have ever used.
But there’s no need to panic. We tried the Gutenberg plugin and here we will show you how you can try the new Gutenberg plugin for yourself.
Try the WordPress Gutenberg Editor
To know what’s new about the Gutenberg Editor, you can download the latest WordPress version (4.9.7) and then download the WordPress Gutenberg Editor and install it just like you install any other WordPress plugin.
Note: We recommend you try this new WordPress Gutenberg Editor on a test site. Even though it’s safe and unlikely to cause any potential damage to your site, but trying out a new text editor directly on live site isn’t a good idea.
How different is Gutenberg editor from WordPress page builders
Gutenberg editor is the front end editor and is different from the page builders. Even though they have almost similar features, both have completely different purposes and use. The following are some of the major differences among the two.
Front end and back end editing
Gutenberg is an editor and it is designed to work on WordPress pages and posts when they are edited through the backend. Gutenberg is not a front end editor. On the other hand, WordPress page building plugins like Elementor, Divi builder or Beaver builder are all designed to work on the front end. They let you see the page you are editing as it is on the front end and you can easily edit them on the go.
Even though the Gutenberg editor lets you preview the changes, it does not let you see the changes applied real time like the WordPress page builders do. For the inexperienced designers, WordPress plugins do a great job as they are more intuitive and comparatively have better options to help you design pages.
Gutenberg is now available as an integral part of WordPress. As it replaces the basic TinyMCE editor, the Gutenberg editor is here to provide a next level experience for bloggers and content creators.
The WordPress page builders are more useful for the designers. They can set the structure of the pages, and use different page building elements to build the pages. However, they need to be included externally. Even if your WordPress theme is a page builder based theme, it will come with a page building pre-included and
Works with any theme
The Gutenberg editor is available as an inbuilt WordPress feature which means that it will not cause compatibility issues with most themes. Newer versions of the WordPress themes are designed specifically for working with the Gutenberg editor.
However, this is not true for the page builders. If your theme doesn’t support the page builder, it might cause problems when redesigning a page. Therefore, even though the page builders can help you create new pages, and new content easily, they might not be very helpful in editing the existing content.
Page builder: More flexible
The Gutenberg editor is just an editor that you can use to create content on your website, whereas page builders let you do much more.
We can say that Gutenberg editor’s main role is to help people create interesting content with different content blocks, whereas page builders can help you design amazing layouts and pages for your website. Gutenberg editor comes with blocks mainly designed to structure your content. For example: There are blocks for including accordions or tables in your content. However, page builders can help you design pages.
Even if we ignore their basic utilities, the WordPress Gutenberg plugin has limited options as compared to the page builders. These days you get page builders with plenty of amazing options. Moreover, there are addons for these page builders to add more flexibility.
Installation and Activation of Gutenberg
With WordPress 5.0, when the Gutenberg is released as a core component, you won’t have to install or activate it. But to test before it is integrated, you have to install and activate it as a plugin.
To install it, you can download it from the link provided above, and install it or you can also navigate to Plugins >> Add a new section of your WordPress install and search for the Gutenberg plugin, install and activate it.
Once the plugin is installed, you can activate it.
Upon activation, visit your posts(blog) or page section and you’ll see the difference when you try to edit them. There’s an extra link called the “Classic editor”.
This means that the simple edit option will open the new WordPress Gutenberg editor while the other one will open the WordPress Classic editor, the one we have used till now.
When you install the Gutenberg plugin, it will make the WordPress Gutenberg Editor, the default editor for you pages and posts. So when you try to add a new page/post, the first look of the Gutenberg editor will look something like the image below:
However, you will find all the options handy. As you can see, just like the traditional WordPress editor, the Gutenberg editing interface also shows all the options to save, preview, or publish the post. It also lets you change the slug, choose categories & tags. Besides it also has the option to “trash” the article.
The WordPress Gutenberg Blocks: A new way to create content
So as we all already know, The Gutenberg editor lets you create and add the content in form of blocks. These blocks are interactive and you can easily edit and move them.
Adding a Gutenberg block/Removing a block
You can easily add a new block to your WordPress website with the Gutenberg editor. You will find the “+” button while hovering over the content area on the Gutenberg editor.
As you can see, there are different blocks available. You can choose them as per your requirements.
Moving Blocks in your post
With the new block based editing system with WordPress Gutenberg, it is quite easy to change the structure of the post. The blocks can be move upwards or downwards with simple button clicks.
The folowing are the basic blocks that you can use to create content using the new WordPress Gutenberg editor
Custom HTML: This lets you embed custom HTML code into your website. You can also preview the output of your HTML code.
Paragraph: lets you add a standard text paragraph as a part of your content.
Image: You can use this blog to upload your image with easy drag and drop method. You can even embed the image from your local computer.
This block also lets you resize your image very easily.
The heading block: Even though there are numerous ways you can include heading into your website, the heading block lets you add it most conveniently.
Gallery block: By far, the gallery block is one of my favorite Gutenberg blocks. It lets you create beautiful galleries on the go. Even though the options to manage the images in the are limited, you can still assign a CSS class for the gallery to have it more customized.
Lists: You can create ordered and unordered list using this WordPress Gutenberg editor’s list block
Quote: With the new WordPress Gutenberg editor, it takes a moment to highlight important quotations on your page. You can do this using the quote block.
The Audio block: You can use this Gutenberg block to add an audio file to your website.
The subheading block: The subheading block of the Gutenberg editor, as the name suggests, is for subheadings in the pos. If you want advanced formatting for your subheading, you can assign an additional CSS class to this block.
The Gutenberg editor formatting blocks
Custom HTML: Add and preview custom HTML code.
Classic: If you are only comfortable with the WordPress classic editor, the new Gutenberg editor lets you use that too.
Code: This block lets you insert codes into your WordPress page/post. The output of the code into your WordPress page/block.
Preformatted: This Gutenberg block allows you to insert preformatted text in your WordPress website.
PullQuote: This quote will let you display important quotes of your page as a graphic element. You can insert the quote and add the citation.
The output of the pullquote block will be something like below:
Table: If you want to conveniently create tables using the WordPress editor, then you can use the table block.
Moving blocks with Gutenberg editor
You can create content using different blocks in Gutenberg editor. So finally, when you have all the blocks for your WordPress page or post ready, you can move them with the drag and drop options.
With these movable blocks, it really easy to restructure your pages and arrange or rearrange the content, in a matter of minutes.
You can use the small arrows that appear beside the blocks to move a bock higher or lower on the page.
Besides, you can also easily restructure your page content by changing the position of your blocks with drag and drop options.
With the block-based design and easy moving options, we can create content that can be easily restructured as and when required. Also, adding a new block of content is relatively easy with the new WordPress Gutenberg editor.
Gutenberg blocks: Layout elements
Button: If you want to add custom buttons in your post or page, you can do so using this layout editing block.
Columns: If you want to add content in the form of two columns, you can easily do so.
Gutenberg widgets block
What are shared blocks?
Do you have a specific block of your content that you need to repetitively use for different posts/pages?
So is the new Gutenberg editor good or bad?
The new Gutenberg WordPress editor has some really useful features that will make life much easier for the end users. On the other hand, it will be hard to bid goodbye to our traditional WordPress editor, which works flawlessly. We are constantly divided between “Change is inevitable” and “If it ain’t broke, don’t fix it”.
The idea of the shared blocks, the embed blocks, and adjust-ability of blocks can really help users create content faster and more efficiently. The blocks are flexible, and the Gutenberg editor will serve as a new experience for the publishers.
Need some fancy blocks for your project?
Check out our, Blocks Builder: Ultimate blocks for WordPress Gutenberg plugin with some custom Gutenberg blocks to create a beautiful site with beautiful content . These blocks include some enhanced text blocks, and some beautiful social icons related blocks. Or you may be interested in this list of the best Gutenberg addons & resources.
WordPress enthusiasts are constantly debating about Gutenberg, but that changes nothing. WordPress Gutenberg is already on its way. All we can do is, prepare for this historic change in the WordPress world.