In case you’re using WordPress 5.0 or above, you probably have come across the new and glossy WordPress editor, broadly known as Gutenberg. Gutenberg editor is totally new, a different way of creating content and it allows you to create, edit posts and pages with more flexibility in WordPress. With this wordpress editor, there was a fairly huge certainty with regards to how to use the Gutenberg editor.
If you’re still wondering “What is Gutenberg exactly?”, don’t worry. In this guide, we will cover all the basics & tell you the best way to utilize the new WordPress block editor, and explain to you how to create visually stunning blog posts and pages. Keep reading this post to learn how to use the new Gutenberg block editor to build content and layouts at your site. Let’s get started!
What is Gutenberg?
Like each tremendous progress, WordPress has introduced an editor that is more functional and an intuitive block editor, called Gutenberg. Gutenberg has been successfully replaced the wordpress TinyMCE editor as a default wordpress editor. Similar to other wordpress editors Gutenberg also uses content blocks (that you add to alter the screen to make content formats) with more intuitive features. With this block editor, you also now can possibly create extraordinary layouts, add a table, columns, rows, and begin adding content.
Gutenberg is currently the standard WordPress block editorial manager and it is a client-side interface. It’s an open-source project created by WP community developers. With this, you also can add plugins that will give you a considerably easy way to get extra and different features into your posts and pages.
In case you want to learn about, what WordPress is?
How to use and create a post with the new Gutenberg WordPress?
As discussed, Gutenberg is a block-based editor and if you run a wordpress site then it would be fun to have such a wordpress editor in your pocket. With the same, you might start creating more posts as making a post is significantly simpler with such a wordpress block editor i.e, Gutenberg.
Before we start creating a post with Gutenberg wordpress let’s go over a quick tour or overview of the main wordpress block editor interface.
- Add new blocks
- Redo Button/ Undo Button
- It gives access to covers things like categories and tags, featured images, and more.
- It gives you the authority or access to the settings of the particular block you selected.
- You can see a live preview of your post/page and also can publish/update your post.
- This is actually your post content where on adding some blocks you can edit your post (like to add content, block, embed images and videos)
Excited? If so, let’s learn how to create a wordpress post with Gutenberg.
Well, first you need to navigate to Posts and click Add New as we have mentioned in the screenshot below.
Now you’ll be taken straight to the Gutenberg editor i.e. post/page, where you can now add blocks, images, and more. Take a look at the simple and easy Gutenberg interface.
Adding a Title
Well, it’s so simple to add a title in Gutenberg editor, and as you see in the image shown below. If you want to edit the permalink then you also can do it by clicking on the edit button.
Adding New Blocks
To add a new block, you need to click on (+) and select the content type you want. As there are many content types so you can pick any of them like a paragraph, image, heading, etc.
You can convert the block into any other block, just click over the block and select (image, heading, cover, gallery, Woocommerce, form, etc.) you want to add. Also, you can change the paragraph block into a heading block i.e, h2 h3 h4.
You also can further change or edit or customize the paragraph block with the option available in the sidebar i.e Block beside the Document as shown in the figure below.
In the above figure, we have ticked some of the features that need to be known
- To view all the options that relate to the block tab then click to view all block all options and settings.
- Select the font size and turn on the drop cap.
- You can add a background color to your paragraph and also you can custom your text color, add multiple custom colors.
- Add additional custom CSS styles to your block.
Well getting more into this there is another tab in the sidebar menu and on clicking the document tab more features show in the drop-down format as mentioned in the below figure.
Here we have mentioned some keynotes on considering the above image as a primary file,
- Click here to flip to the Document tab
- Status & Visibility, here you can change the status as public or private immediately and also can set the post format to standard or any.
- Permalink, where you can edit the link.
- You can select or create categories.
- Add tags to your post for users to know to which category it belongs.
- Set featured image.
- Create or write a manual excerpt.
- Allows comments, pingbacks, and trackbacks.
As we know there are plenty more options available to create and design your post the way you want it. Therefore there are many different blocks that come with different options. Now let’s add an image block after the first paragraph you’ve written. You just need to press enter to add a block i.e image block.
When you click on (+) a set of blocks or a couple of options will get visible and on clicking the particular block like an image you are able to add the image block into your post. Clicking on the image tab loads on the image block as we highlighted in the below image.
The Image block permits you to transfer a picture or add one from a URL or the media library. All the while, you can add alt text, title, caption, and description through the media screen settings, or the Block sidebar as demonstrated in the accompanying pictures.
Just after adding an image in your post
You can add an image caption and also can set the size of an image you want as shown in the above image.
Adding Files (i.e downloadable)
To add files to your blog post click the (+) icon and then click the file tab as we have mentioned below.
On performing the above step, the following image shows the result
As mentioned above you can add or upload a file from your media library and on adding the further result shows as mentioned in the image below.
You can alter or erase the “Free Gutenberg PDF Checklist” title just as the download button. Also to style the format of the checklist you can add a CSS to make it however you want.
Adding a Quote
Now let’s add a quote, to do so click on the (+) icon and then select the quote tab as shown below.
On executing the above step, the following picture shows the outcome.
Considering the above image you now want to change the font or size then you can see in the sidebar as it is mentioned. To add a quote inside the block just click inside the block and start typing as you see the result in the above figure.
Adding Media in Gutenberg
With Gutenberg, you possibly can start embedding videos from many other sites such as Facebook, YouTube, Vimeo, and many more. To embed the media click the (+) icon and choose the site for example select YouTube.
Now copy the YouTube URL and paste and then click the embed button as shown in the figure.
Just after clicking embed, Gutenberg automatically converts the link into video as shown in the image below.
Now on adding an independent button that makes ideal for making a call to action.
How to add a button to Gutenberg editor
As we embedded a video as shown above now at the point when you open a post for altering, you will see the new button show up in the content squares.
In the event that you select a piece of the content and snap the button, you will see something like this as shown in image below.
As you can see from the picture above, you can alter the text that is on the button and add a link. Moreover, you can redo the button by means of the sidebar menu to one side of the screen.
Now after a couple of clicks, you will see the selected text appear in the browser’s console as shown in the above picture.
How to Add Columns to WordPress Posts with Gutenberg
Start by exploring the post you need to add the sections to.
To add the columns, you’ll embed another section “block” into the post. Drift over a current square and move your cursor over the top or base edge to uncover the “+” button for adding another new block. Click on (+) to add a layout as you can see in the image below.
At the point when you first add the column block, it adds a square that basically contains two-passage blocks. You can start composing in either immediately.
You can add as numerous/multi-column blocks to your post as you need.
How to Add an Image in Gutenberg
Let’s start with a straightforward picture block first.
Click on the (+) icon and click media & text as shown in the image below.
You will see three options inside the image block to upload an image.
You can pick a picture from your file, or select from an already uploaded image or insert an image from the media library.
Then, click on the ‘upload’ button and afterward select the picture you need to upload from your computer.
When you select the picture, WordPress will transfer it to your media library and then on just clicking on it you can add it to your post.
Subsequent to adding the picture and text, you will see more alternatives for the block. You can make the entire block more extensive or full-width, you can likewise switch the picture and text sides.
Gracious, that’s the block in the editor lets see how it looks on the site.
Looks great, right?
You can unquestionably envision the amount you can accomplish with the Gutenberg editorial manager.
What happens to all of your old content?
In the event that you’ve updated your WordPress blog to 5.0 or with the latest version, then the default editor block you’ll have i.e Gutenberg block editor. The great thing about Gutenberg is that it doesn’t affect any of your old posts or content and you can without much of a stretch alter them.
To edit an older post or content, simply edit it as you would normally do for other articles in WordPress. On the post edit block, you will see the whole content wrapper inside a single Classic block.
The new WordPress block editor will not make any changes to your WordPress block. Now you have two options to edit your post either with a classic editor or with the Gutenberg editor. To make any changes or want to use the old editor you just simply need to click on the three-dot menu option on the top right corner just click to alter the editor and use it.
Now you can start using the new Gutenberg block editor for your content. If you want to make any changes like to set up the width and size of an image then simply click on the image and make the necessary changes.
Once you’re finished making all the essential changes, you can just need to tap the Update button at the upper right of the screen to save your changes.
What is wordpress Gutenberg?
WordPress Gutenberg is a brand new block editor which gives you a new editing experience. The Gutenberg wordpress block editor introduces a modern and flexible approach to pages and posts where each piece of content in the editor from paragraph to image has its own block.
How to enable Gutenberg editor in wordpress?
To enable gutenberg editor in wordpress, you first need to install and activate the plugin and then go to settings then go to gutenberg
manager and then enable the option.
How to disable gutenberg in wordpress?
To disable the gutenberg wordpress block editor, you first need to install the classic editor wordpress plugin and then go to settings, click gutenberg and disable.
How to install Gutenberg in WordPress?
Login to your wordpress then go to the dashboard and click plugins. Then click on add new and search Gutenberg and then click on to install the plugin and activate.
Is WordPress Gutenberg free?
Yes, the Getwid plugin is a free wordpress plugin with both advanced and simple blocks for Gutenberg and is so advanced that Getwid plugin will automatically adjust your general site layout.
Which is better, Gutenberg or Elementor?
Elementor is better as it offers you more flexibility and easy to set up layout.
Is Gutenberg a plugin?
Yes, Gutenberg is a plugin.
In this article, we have tried to cover all the things that are related to Gutenberg. Also, we are very much impressed with the new Gutenberg wordpress editor and we are amped up for what’s to come. Gutenberg is still generally youthful, and you can anticipate that it should fill as far as ease of use and usefulness. It will be a genuine power to deal with in the coming days.
Have you tried Gutenberg yet? If so, we couldn’t want anything more than to hear your considerations, both good and bad in the comment section below.
We hope this article helped you with figuring out how to use the Gutenberg editor and also how to refresh your old articles with the new Gutenberg Block Editor.
In the event that you liked this article, if it’s not too much trouble, then please subscribe to our YouTube Channel to get to know about WordPress themes and WordPress video tutorials. You can also find and connect with us on Twitter and Facebook.