In this article, we are going to learn how to make a WordPress post using Gutenberg Block Editor. We will add a lot of texts, images, lists, and more content to make an excellent WordPress post. This article is not just focused on writing a post but more on understanding how blocks editor and its blocks work. So let’s get started.
Here’s a quick breakout of things that we will be doing.
- Add a new post
- Add Post Title
- Add Blocks
- Removing Blocks
- Undo & Redo
- Adding Headers Using Blocks
- Adding Images Using Blocks
- Adding a Link in the Block Editor
- Embed a YouTube Video
- Adding a Button Using Block Editor
- Creating Tables
- Content Overview
- Adding Excerpt
- Adding Category and Tags
- Adding a Feature Image
- Disable Comment, Pingback, and Trackback
- Status and Visibility option in Block Editor
- Publish the Post
What is Gutenberg?
Gutenberg Block Editor is now in the mainstream of WordPress and now it’s a good time to learn and understand it since the old Classic Editor is going to be retired I mean it will lose support from the official WordPress dev team soon. WordPress already cleared that new updates will be tailored toward Block Editor and if you keep avoiding it eventually your site will break, if you wanna know more about this check out this article.
If you are just starting and want to understand Gutenberg Editor and its layout, I highly recommend checking out this article, where we have extensively explained the layout of the new Block Editor.
Now let’s get back to the article.
1. Add New Post
To add a post option is the same, go to your dashboard and navigate to Post>Add New if you’ll be using Gutenberg you’ll see a whole new content writing area totally different from the classic editor as you can see in the image above.
2. Add Title
First things first, let’s add the title of our blog post.
You can add the title of your post at the top where you can see “Add title” as shown in the image above.
Type the title you want and head over to the next section.
3. Add a Block
Now let’s add our first block to the page, to add a block click on any of the plus icons shown in the image above. We can also use forward slash and type the name of the block we want to add.
Now select any block you want to add, I’ll be adding a paragraph block. Just select the block you want to add either drag and drop it over in the content area or just click on it and it will be added.
Now type the paragraph you want to type in it. One thing to keep in mind is whenever you hit enter on your keyboard or go to a new line the block editor will create a new block after a new line so every paragraph is now a block.
Now let’s try to add some styles into our block, there are two options available to style a block, first the top quick action menu and second the dedicated sidebar.
In the top bar, you’ll get these options:
- Transform button: This button can change your block type if you want
- Drag button: Drag button will enable the dragging option for your block so you can move your content in the content area.
- Move up and Down button: Next button is to quickly move your block up or down to other neighbor blocks.
- Alignment Button: It will allow you to align your block on the page, after clicking on it you’ll see the alignment option based on your block type.
- Block specific buttons: The next set of buttons are block specific they change according to the block you are editing, since we are using paragraph block we can see the bold, italic, link, and more button.
- More button: More button will show you the list of all the actions you perform in the paragraph.
- Options button: Options button will show you the list of options you can perform on the block, these actions are global and will stay the same for every block.
Right Sidebar Block Stying Options: The right sidebar options totally depend on the block you are editing, every single block has different options. Let’s see what options we are getting for paragraph block.
- Typography: You can edit font size for your paragraph in this section, you can choose between some predefined options or use a custom value if you want.
- Color: In the color section you can choose a color for your paragraph text and a background color for your block. You can select colors from the predefined color set or use custom hex or RGB values. You can also use gradients as backgrounds.
- Text Settings: In the text setting for the paragraph you’ll only get one option drop cap, enable it to make the first letter of your paragraph bigger.
- Advance: In the advance section you can add an HTML anchor text to reference it from the URL, you’ll also get an option to add custom CSS classes for your paragraph.
4. Delete a Block
To remove a block you can click on the block you want to remove and select the 3 dot menu as shown in the image above.
After clicking on the three-dot menu you’ll a list of, at the bottom of the list you’ll see a “Remove block” option, you can also remove the block using shortcut Shift + Alt + Z.
5. Undo & Redo
After deleting the block if you want it back then you can use undo feature.
To undo an action you can select the Undo button from the top bar as highlighted in the image above. You can also use Ctrl + Z shortcut.
To redo an action you can select the Redo button as shown in the image above. You can also use Ctrl + Shift + Z shortcut.
6. Adding Heading Using Blocks
Now let’s add a heading in our post, to add a heading as we insert any block click on the plus icon and select heading or type /heading, and hit enter.
Type or paste the header text, by default heading will be added as H2 but you can choose in a top toolbar which heading tag you wanna use.
The rest of the styling option is similar to the paragraph, you can choose color background color, font size, and so on.
7. Add Image Using Blocks
Adding an image in our post is as easy as it can get, just select the image block and insert it.
You can upload an image, load it from the Library, use a URL, or directly drag and drop an image to add the image to the image block.
Similar to the other blocks you get some styling options for images at the top you’ll see the quick action button and some more styling options in the right sidebar.
For styling, you can resize the image, set alignment, add a link, and crop from quick action and select the styling such as a rounded corner, alt text, different sizes, and custom CSS and HTML tags.
8. Add a Link In Block Editor
Now let’s see how we can add links in our post using Gutenberg editor, to add a link we first need to have a paragraph block, add the text then select to text you want to add a link to.
Now select the link button from the top quick action tab.
Paste your link to the link box and checkmark if you want the link to be open in a new tab and make sure to hit enter to add the link else it won’t add.
9. Embed a YouTube Video
To Embed a YouTube video search for the YouTube block and add it to the page.
Now paste the video link in the URL box and click on embed.
There is no extra styling option for youtube videos.
10. Adding a Button Using Block Editor
There’s a new thing in the Block Editor that is missing from the classic editor that is a button. Block Editor lets you add buttons in your post very easily.
To add the button just select the button block like you add any block in the post.
Type the name of the button you want to.
Click on the link icon to add a link to the button.
You can add multiple buttons in a single column.
There are multiple styling options for the button in the right sidebar such as a solid color button our outline button, size, color, additional CSS classes, and so on.
11. Creating Tables
Now let’s take a look at how we can add columns using Block Editor because it was one of the most painful tasks in the classic editor.
Adding a table using a block editor is super easy just add a table block.
Type the number of rows and columns you want to add and click on create a table.
You can also add more rows and column letters by clicking the table edit button from the top quick action menu.
There are a lot of styling options for tables too that can be accessed from the right sidebar.
12. Content Overview
Block editor also provides very useful Details about the post to get an overview of the content.
To access the details of the content click on the detail button from the page topbar, it will show you the number of characters, words, headings, paragraphs, and blocks used in the post also a very helpful document outline of post headings.
13. Adding Category and Tags
Similar to the classic editor you can select a category and add tags to your post from the right sidebar as you can see in the image above. Except for the layout, all the options are the same for category and tags in Block Editor.
14. Adding Excerpt
You can add an excerpt for your post from the right post sidebar as shown in the image above.
15. Adding a Feature Image
Option for adding feature image is also similar to the classic editor you can do that from the right sidebar as shown in the image above.
16. Disable Comment, Pingback, and Trackback
There’s a new option for disabling comments, pingback, and traceback for the post which can be very useful in some cases. You can access this option from the right sidebar, by default these options are already enabled you can uncheck them if you want to disable comments, pingback, and trackback for your post.
17. Status and Visibility Option in Block Editor
Now let’s take a look at the status and visibility option of Gutenberg, you can see the status and visibility option of the post in the right sidebar, and as you can see in the image above the status and visibility options are identical to the classic editor.
You can set visibility of the post public, private or password-protected, you can post the content immediately or schedule it, you can stick it to the top of the block and mark it pending for review and directly move to trash if you want. You can also check post revisions from this section too.
18. Publish the Post
Now after writing and designing the content just click on the top right publish button to publish the post on your website.
In this post, we have learned how we can publish a post on our website using Gutenberg Block Editor, now you should be able to write an amazing post using Block Editor. If you face any issues while using Gutenberg Editor let us know in the comments below.
To learn more about Gutenberg Block Editor and how to use them I highly recommend you to check out our other posts on this topic, in a series of articles we have tried to explain all the fundamentals of Gutenberg Block Editor, and reading these can help you properly understand and use Gutenberg Block Editor.