With the daily addition of new blocks and features to the Gutenberg block editor, the restrictions for editing your website is constantly shrinking. These updates are not gonna stop anytime soon as the requirements of the users for new blocks and features is constantly expanding. But for someone who is just starting with WordPress, looking at all those blocks and learning about their fullest potential could get a little overwhelming.

1. Working with Gutenberg: The WordPress
Block Editor (A Beginner’s Guide)
With the daily addition of new blocks and features to the Gutenberg block
editor, the restrictions for editing your website is constantly shrinking. These
updates are not gonna stop anytime soon as the requirements of the users for
new blocks and features is constantly expanding.
But for someone who is just starting with WordPress, looking at all those
blocks and learning about their fullest potential could get a little
overwhelming. So, in this article, I will be explaining and exploring some of
the basic blocks that are present in WordPress.
Index
● How to create a new blog or post?
● Using the Block Editor
○ Add a block
○ Remove a block
○ Add a header
○ Add an image
○ Add text content
○ Add links
○ Embed a video
○ Add shortcodes
○ Create a Button
○ Create a Table
○ Splitting Page into Columns

2. ○ Create a Reusable Block
○ Publish a Page or Post
But, before we start I just want you to know that this article can be considered
as a sequel to “Journey of Gutenberg”. Which explains about the TinyMCE
editor, the need for the Gutenberg editor, and its evolution in detail.
Creating a new blog post or page using the block editor
Before creating a new blog post or blog page, it is important to know the
difference between them. Blog pages are used to display static content,
whereas blog posts are for creating content that is updated regularly. Now that
you know the basic difference between them, let’s create one.
As soon as you land on the WordPress dashboard you can see 📌Posts on the
left side. Click on Posts > Add New from the menu to add a new post. If
you are creating a new page then click Pages > Add new. Doing this will take
you to the Block editor.

3. Adding Blocks to the Gutenberg Editor
The first block of every post or page is the title. You can add the title of the
page or post to this block. Then press Tab or move the cursor down to land on
the next block.
By default, the next block is the paragraph block. You can start writing your
content right away. The user interface is similar to word processors like MS
Word, Google Docs, etc, if you want to write text-only content.
However, if you want to offer your audience something different, then you can
click on the add new block button (+) on the top left corner of the editor or the
one that is present on the right side of the block.

4. This opens the block inserter menu with a number of blocks. The blocks will
be divided into various categories like text, media, design, widgets, theme, etc.
Select the block you want from the menu or use the search option if you are
looking for a specific block. You can also use the shortcut “/” to quickly choose
a block.
Removing Blocks
Accidentally added a block that you don’t need? Got overwhelmed while
browsing through the block inserter menu and added unnecessary blocks, just
like I did?
Don’t worry removing a block is as simple as adding one.
Select the block you want to remove > Select the three dots at the right of the
block menu > Select the Remove block option.

5. You can also just select the block and click the backspace or delete button
to remove the blocks.
Adding Header Using Blocks
The next step in building a page or post in WordPress is to add a header.
Headers are important as it helps the readers and SEO.
To add a Heading click on the add new block button (+) and click on the
Heading block option or use /heading shortcut to create a heading.
There are six levels of headings. The H1 heading is the largest and it is used for
the title of the page. Followed by that comes H2 which is used for the
headings, H3 which is used for sub-headings, then H4, H5, and H6. Usually,
headings are bold, but the styling depends on the theme.

6. Editing Headers Using Blocks
As you add the header, you’ll see a small menu above the block. Using that
block you can change the style, position, heading type, alignment, change to
bold, change to italic, add link, highlight, add inline code, strikethrough, etc.

7. Adding Images Using blocks
Images on websites can improve the user experience. Research suggests that
65% of people are visual learners. So using the right images can build brand
character and also make the content more appealing. So let’s add an image to
our site.
Select the image block from the list by using add new (+) block button. Click
on the Upload button to add an image. You can also add the image from the
WordPress media library or Insert URL to copy the image from other
websites.
You can use the menu on the right side of the page to add alt text and also
toggle between different styles. As soon as you add an image you will see a
pop-up menu, just like the one we saw in the header block.
Using that you can change the alignment of the image, insert links, crop, add
text over the image, and apply dual tone to the image.

8. Adding text content using the Gutenberg editor
Adding text content to the Gutenberg editor is quite simple. Every block that is
created by default is a paragraph block. You can just start typing or paste any
text on the page, Paragraph block is automatically created.
You can also use the (+) button and select the paragraph block from the popup
menu. Then start typing or pasting your content into the block.
As usual, you will see a popup menu that allows you to change the alignment,
change to bold or italics, add links, etc,.

9. Adding links to text
Linking is an essential element in every website. It helps the users to navigate
between different pages and also helps the search engine crawl between pages
on your website. So, How to add links to our website?
Select the content you want to add to the URL. Select the link icon from the
edit menu above the block. Paste the link in the URL box and check the URL
in the preview box underneath. Press the submit button or press enter key.
Remember, If you don’t click on the submit button or press enter key the link
will not be added to the text. You should begin the process all over again.
If you select the linked text a popup menu will appear. You can edit the URL
using this menu, and also you will have options like whether the link opens on
a new page or the same page.

10. Embed a Video
A video is a powerful tool that can be used to explain a complicated topic to
your audience easily. Imagine fixing a bicycle with the help of a blog. Unless
you know something about bicycles or knowledge about basic tools, an “Allen
wrench” means nothing to you. To solve these types of problems videos can be
handy.
Embedding videos without directly uploading them can save your page’s
bandwidth and storage.
Click the add new (+) block button. Click on the Embed block and paste the
URL of the video. Click on the blue Embed button.
The video will appear in the block with a play button.

11. Adding Short-codes
Adding short-codes is another thing you may occasionally find yourself doing
when building a website. Short-codes are often used to insert elements into a
page that don’t have widgets, plugins, or any other means of insertion.
The process is the same as adding other blocks. Select the add new (+) block
button and select the Short-code block. Then paste the short-code into the
box.
Creating a Button to Posts and Pages
Buttons are an important component of any website. They allow users to
interact with the site. If used correctly, buttons can improve the overall user
experience and lead to more conversions.
So let’s add a button to our site. Add the Buttons block from the add new (+)
block menu. Then type the text you want to be displayed inside the button.
Add the URL using the add link option from the editing menu above the block.

12. You can also add some more customization like changing the style of the
button, changing the width, color, typography, dimensions, and borders. To do
these customization select the button and click on the settings option on the
top right corner of the page.
Creating Tables
Creating tables on WordPress might happen very occasionally on your
website. But there will be times when you have to create one, so it important to
know how to create one to avoid confusions later.
Add the Table block from the add new (+) block menu. Select how many
columns and rows you want in your table from the options and select table.
Add your entries in the corresponding boxes. Click Create Table.

13. Splitting the page into Columns
You can give your visitor an aesthetically pleasing experience with this
functionality. You can split the page into different columns with the block
editor and add text, images, videos, etc to make it better.
Add the Columns block using the Add new (+) block option. Select the number
of columns you want to split the page into with the given presets. Then edit the
contents inside the column like you usually do on a page.

14. Reusing blocks in Gutenberg
Do you often use the same content snippets in your WordPress posts? If you
do, then you’ll love the Reusable block feature. A reusable block in the
WordPress editor is a content block saved individually to be used later.
Once the reusable blocks are saved they can be used as many times as you like.
This just saves a lot of time.
All you have to do is create and edit the block as you normally would. Then
select the three-dot options in the edit menu. Select Create Reusable Blocks
and name it.

15. The added reusable block will appear in the block menu. Select the named
block (I have named it here as “button block”) and use that block anywhere on
your website. Pretty cool right?

16. Publishing Using Gutenberg Block Editor
Completing the content of a post or a page and pressing publish and seeing it
reflect on your page is one of the most overwhelming experiences while using
WordPress. At Least, that’s how I personally feel.
When you press the publish button, the post or page that you have published
is visible to everyone who visits your site.
The blue publish button is on the top right corner of the page.
Once you press the publish button popup menu appears. You can
double-check you can do the final checks before publishing and click publish.

17. If you are editing a published page, you will see an Update button instead of a
Publish button.
Conclusion
The block editor takes some time to get used to it, but once you are done there
is no one stopping you from creating your own WordPress website. So, I highly
recommend you to start experimenting with the Gutenberg block editor today,
sire!
With the recent release – WordPress 6.1 and Twenty Twenty-Three theme the
site editing got more friendly and intuitive. So, do check those themes also.
And, What’s next?
The block editor has more than 90 different blocks under six different
categories. But don’t worry I will be covering them in my upcoming articles
and also shed some light on other parts of block editor like Full-site editing.
So, stay tuned and subscribe to WPWhiteBoard!