Gutenberg : The Magnetic Editor for WordPress
WordPress, the most widely used Content Management System in the world has now expand its wings by introducing its powerful and magnetic editor – Gutenberg. Gutenberg completely modernise, streamline and simplifies the entire content creation process. Gutenberg mainly focuses on:-
“Looking forward to the creativity one can put in layouts and full site customisation”
Earlier on using WordPress default editor, we found that the editor is quite simple, easy-to-use and intuitive. It allows us to create posts, pages and other types of content quickly and easily and also offers two modes for editing content: Visual and Text. Apart from having these features the editor lacks the functionality of creating rich and beautiful post layouts. Gutenberg enhances the overall editing experience by providing such features.
What is Gutenberg?
Gutenberg is an editor introduced to enhance and improve the functionality of WordPress default editor . It is named after Johannes Gutenberg, who introduced the printing press hundreds of years ago to the world. It is a block-based, page maker content editor designed to make the addition of rich content to WordPress.
Gutenberg uses various types of content blocks (e.g. text, videos, images etc). Instead of creating all content in one big editorial field, Gutenberg allows users to add blocks individually, filling each one with content as they go along and then positioning them in exactly the right position. Creating content this way makes it much easier to know how content will look like in the front-end.
How to install Gutenberg?
As of now the latest Gutenberg version is 3.7.9 and has 30,000+ active installation which is tested upto WordPress version 4.9.8 or higher.
We can install the latest Gutenberg in WordPress by navigating into Plugins >> Add new and search for Gutenberg.
Click on install and then activate the plugin.
Working on Gutenberg
On installing Gutenberg we can see a menu named Gutenberg in the dashboard. We can see a complete demo of how Gutenberg works here.
Let’s first get familiar with what the various areas of the main Gutenberg interface. Gutenberg editor looks like below snapshot:-
It is quite different from the default editor of WordPress.
In Gutenberg it has two tabs instead of one as in default editor. The first tab is of document settings where we manage the status, categories, tags, images, excerpt and many more things. On another tab named as blocks we manage the block settings. Using blocks decreases the dependency of users on menu bars, sidebars and other options available for the formatting of content. Gutenberg also provides lots of white space for content creation in comparison to default editor.
Now we will have a look into the major feature of Gutenberg -Blocks
Blocks
These blocks are elements that we can “drag” on a page or in a message. These blocks will be used for cases that now require shortcodes, widgets, theme options and other formatting options. Below is the snapshot of a block with its settings :-
Adding and Removing a Block
We can add as many blocks we want in the post, just click on + icon on the left corner of the post and select the type of block that we want to use in our content.
The window that appears on clicking the + icon actually has 6 sections most used, common blocks, formatting, layout elements, Widgets and Embeds.
- Common Blocks :- it contains basic building blocks like images, paragraphs (regular text), headings, quotes etc.
- Formatting :- contains formatted content like pull quotes, tables, or the classic WordPress text editor to be added in a block.
- Layout Elements :- let us split text into two columns, include buttons, separators, or the “More” tag.
- Widgets :- let us add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.
- Embeds :- allows us embed content from external sources like Twitter, YouTube, Facebook, Instagram, and more.
We can also add custom backgrounds for separate blocks and if we want to remove any block, we can do this by just hitting the delete key on the keyboard.
In short, Gutenberg gives us flexibility and more control over the content.
Using the Gutenberg Code editor
In order to access the code editor for the page or post , click on the 3 verticals dots on the top right corner of the window. Here we can see the options for Visual Editor or Code Editor. By default, the Visual Editor is selected. Click on the Code Editor to place the editor in that mode.
Here we can make changes to the post or the page.
Creating a Basic Layout With Gutenberg
We build a basic blog post layout that includes:-
- Regular Text including paragraph and heading
- An image
- A button
- A quote
- An embedded content from instagram
First we will enter a block of heading in the post and then can select any level of heading and text alignment given on the heading setting in right corner as shown in below snapshot.
Alike heading, we will enter a block containing a paragraph and settings associated with it will be seen on the right hand corner.
For inserting image, click the plus icon and insert the image block. This will allow us to insert an image block, from which we can upload or select images in a similar manner to the current WordPress editor:
Once we upload the image, we can see it in our page layout:
Now for entering a button, hover over the spot where we want to insert the button. We can change the settings of the button as we want with the rich button block settings as shown in below snapshot:-
Using the same approach we will now add a quote block into the post and it looks like the below snapshot:-
To insert the Instagram content, we can add a new Instagram block from the Embeds tab. All we need to do is enter the URL and click Embed.
We can do more creativity in the post by using layout elements. Gutenberg includes an experimental columns feature that lets you quickly create multiple columns. All we need to do is add the Columns (Beta) block from the Layout Elements section. Then, we can insert other blocks inside it.
Once we are finished with the beautiful layout we just need to publish the page or post by clicking on the Publish button.
Conclusion
As we go with the flow, we could feel how easy and simple is to use Gutenberg. All we need to do is just put together all our creativity and ideas and make full use of the rich features of Gutenberg. We believe that everyone must install and use the editor.
At first, we might feel difficulty in using the editor but when we get to know the things we surely came out with beautiful and block rich layouts.
That’s all about the Gutenberg.
Thanks for reading the blog. Happy reading 🙂