It is said that “Change is the most constant thing in the world”. Well, the line perfectly implies to the WordPress community. WordPress, one of the most popular content management system was released on May 27, 2003. And it has been in the limelight and been accredited with being the most popular website creation tool, website management and blogging system since then. But would it be possible for it to retain the position if it would have remained same without any upgrades made to the system? Not really, right?
It has been possible only because it has always focused on its further enhancement keeping in mind the requirement and convenience of its users. That’s one of the reasons it has more than 60 million users today!
Every now and then updates are made on the platform, minor or major. And it is ready to make another major update. The most talked about topic in the WordPress community is WordPress Gutenberg! Yes, WordPress Gutenberg editor is the upcoming replacement to the prevailing WordPress TinyMCE editor.
Well, we are not comparing the editors in this article. This article will be focusing on providing you with a deeper insight into the WordPress Gutenberg Editor to those who are new to this topic and how to use WordPress Gutenberg on your website.
So, let’s start with a brief introduction to Gutenberg WordPress.
What is WordPress Gutenberg?
Gutenberg is a text editor that provides a new way to edit WordPress contents. But it is more than just an editor. It takes your content creation experience to a whole new level. This text editor was named after Johannes Gutenberg, who introduced the movable type printing press to the world. It is a client-side interface that is built using React. React is a declarative and flexible JavaScript library to make the user interfaces simple, scalable and super-fast.
The Gutenberg editor is block based meaning you will not have a regular single box. Instead, blogs for different contents like a paragraph, CTA button, image, etc will be available.It splits up the different type of contents in various blocks. The best part is you can also reposition the blocks as per your choice! You can move them up or down and place them exactly where you prefer. Furthermore, if you are to make any changes to the content inside the blocks, just click on it and start making the changes. However, the need of block may vary as per the nature and purpose of a website. Thus, it allows you to create your own custom blocks as you please.
Prior to being introduced as part of WordPress 5.0 as a content editor, Gutenberg was only available as a plugin. The main motto behind the integration is to present more user-friendly editing platform to the users. Moreover, the users will get the close resemblance of the page or the post they are creating and know how it shall look on the front end after they are published! Yes, the live preview option is there on the present editor, however, the connection gets little broken and we don’t always get the exact sense about how the created contents will look on the website.
The inclusion of Gutenberg editor into WordPress has been making the news. Some say it’s a good one while some argue Gutenberg editor is not a good idea to already so popular Content Management System. So let’s check out of its pros and cons that have been creating buzz for quite some time.
Pros:
- Block and Quick Embed Discovery
- Collaborative Editing
- Text Columns
- NO coding knowledge required
- Mobile friendly
Cons:
- Permalink cannot be edited
- Consistent Bugs
- Poor review
- Not yet appropriate for Live websites
However, Gutenberg is still many weeks away from the inclusion on WordPress 5.0, thus, it might come up with major changes and updates before the release.
How to use Gutenberg?
Now let me familiarize you with the Gutenberg interface. The interface is not extremely different from the TinyMCE editor. What makes it different is the input area with different blocks for various kinds of content type. Let’s check out how to use WordPress Gutenberg in brief.
- Add the title to your post or page.
- Click on the Plus button to add new blocks. Here, you can select from a wide range of blocks available as per the requirement.
- Undo/Redo buttons allows you to move forward as well as backward and thus helps to edit the contents easily.
- The setting area includes options that are similar to that of the TinyMCE editor. From here, you can add the features image, tags, categories, choose the visibility type and many more.
- The block section on the setting area displays relevant setting options as you select an individual block.
- These buttons allow you to preview and publish your post.
As you click on the plus button, a window will be opened where four tabs are displayed as Suggested/Recent, Blocks, Embeds and Shared. Also, a search box is available from where you can quickly search for your required block.
Suggested/ Recent
The tab is named suggested if you haven’t used any blocks yet. And after you use various blocks the most recent ones will show up under that tab and the tab name will be displayed as Recent.
Blocks:
Here, you can browse for all the available and common blocks that you require. The blocks are further divided into four categories: Common blocks, formatting, layout and Widgets.
Embeds:
Under this tab, you can select the blocks for embedding various audio, videos and other contents from various social media platforms and popular websites.
To make things clearer, let me explain how to use WordPress Gutenberg to create a post with an example. Since there are lots of features, this illustration will only include:
Step 1: Adding Title to Gutenberg Post
So, let’s start with adding a title to the new post. For that, click on the field where Add Title is written and give your post a proper name.
Step 2: Adding a Paragraph
Next to insert text content for your post, start inserting your text on the field under the title field. You can hit the enter button to create a new block. Or you can add a new block for text by clicking on the + button and select a paragraph block.
Gutenberg also allows you to change the text alignment and text format. Also, you can add or remove the link easily. Moreover, you have full control over how your texts look.
Step 3: Adding an Image
To add an image to your post, select an area where you want to add the image and then hover over that spot. Then, click on the + button and select an image block from the available blocks. Then, click on upload or add from the media library to add an image.
Step 4: Listing
To create a listing, like in step three select a spot and then click on the plus button. Select a block for listing. Simply, type in your list or points.
Step 5: Adding CTA button
To add and customize the Call to Action Button, search for the button block first. Give your button a relevant name and then stylize it as per your choice. Also, you can insert the URL to the page where you want to redirect your users after they click on the button.
Unlike in the previous text editor, you need not have any coding knowledge to customize your button.
Step 6: Embed YouTube Video
If you want to embed video into your post, the process is almost similar to that of the above-mentioned steps. Select the place on the editor where you think the video looks best and hover over that position.
Click the + icon and then go to Embeds tab. After that select YouTube block and insert the URL. That’s it, your selected YouTube will be embedded in your post.
Lastly, you can preview your post when completed. The best part about Gutenberg that I also personally like is that it gives you the exact idea how it looks after it is published.
This is how you can create a simple post and edit the contents using WordPress Gutenberg.
Additional Features
Like I said earlier, there are lots of additional features on Gutenberg editor. Some of the other features included in WordPress Gutenberg are:
- Additional CSS
- Cover Image/ Hero Image
- Text Columns
- Responsive Gallery
- Pull Quotes and Block Quotes
- Verse and much more
Wrapping It Up!
Since it is said that content is king, Gutenberg can be the appropriate inclusion as it puts content at the forefront. Its main focus is to help users create content with ease and provide them the needed personalization options. With this new editor, your contents will look dull no more. You can stylize every element as each will have its own block. Best of all, no page builders are required to create the complex layouts for your contents.
The Gutenberg editor definitely consists a lot more awesome content customization than the default editor. Thus, it is sure to make the content creation and publishing experience better. And talking about its issues, I’m sure that the developers will not leave the users unsatisfied.
Hopefully, this article helped you to get familiar with the Gutenberg editor. If you liked this article please feel free to check out on our other articles: