Working with Gutenberg - The WordPress Block Editor (A Beginner’s Guide)

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!