In this guide, I’ll show you how to use Gutenberg blocks in \u23e9 three easy steps<\/a>. Along the way, I\u2019ll introduce you to some of the most useful blocks included in the Gutenberg editor.<\/p>\n<\/div>\n\n\n\n I’ll finish up by sharing \u23e9 two useful block extension plugins<\/a> to help you get the most out of it. Let\u2019s get to work!<\/p>\n\n\n I’m going to illustrate the editor\u2019s key features by walking you through what it\u2019s like to create a basic WordPress post using Gutenberg blocks. However, you can use the same approach no matter what type of content you’re creating with the block editor.<\/p>\n\n\n\n The first thing you\u2019ll want to do is give your post a title, using the dedicated field at the top of the editor:<\/p>\n\n\n This works exactly the same way as it did in the classic editor. After that, however, things start to change.<\/p>\n\n\n\n If you click on the area directly below your post’s title, you\u2019ll see an icon with the plus sign<\/em>. <\/p>\n\n\n The Plus<\/em> icon lets you select blocks and add them to your post. For now, click on the Plus<\/em> icon, and you\u2019ll see a new menu:<\/p>\n\n\n This menu lists out all the blocks that the editor currently includes. There\u2019s a section with a number of organized categories of blocks, a button that lets you see all the available blocks, and even a search bar to help you find what you need quickly.<\/p>\n\n\n\n To add a block to your post, you just have to find and click on it. Let\u2019s start simple, with a Paragraph<\/em> block. Place the block in your post, then move on to the next step.<\/p>\n\n\n \ud83d\udca1 Pro tip:<\/strong> Since it’s arguably the most frequently used block on almost every WordPress page, the paragraph block also functions as the default “next block”. In practice, this means you can also create a paragraph block by simply typing any words or even one letter into the editor and it’ll automatically default into being a paragraph block.<\/p>\n\n\n<\/div><\/div>\n\n\n When you add a paragraph block, it doesn\u2019t look like much right away. However, once you begin to start typing into the field, new options will appear:<\/p>\n\n\n You\u2019ll see some basic formatting settings, such as alignment, bold, and italics. In addition, check out the right-hand sidebar of the editor screen:<\/p>\n\n\n There, you\u2019ll find more block-specific options. In this case, you can change the text\u2019s font size and color, add a drop cap, and even include some custom CSS (in the Advanced<\/em> menu). Any changes you make, either here or within the block itself, will be immediately visible.<\/p>\n\n\n\n Each one of the Gutenberg blocks on offer comes with its own unique settings.<\/p>\n\n\n\n If you’re still with me, hit Enter<\/em> on your keyboard. This will add a new block below your paragraph block. Let’s add an image block now by using that same Plus<\/em> sign:<\/p>\n\n\n As you can see, you\u2019re able to upload an image or add one that\u2019s already in your Media Library. You can edit the image, alter its alignment, and add CSS in the sidebar.<\/p>\n\n\n \ud83d\udca1 Pro tip<\/strong>: As an alternative to hitting the Plus<\/em> sign, you can type a “\/”<\/em> in an empty block followed by the name of the block that you want to insert. Once you learn which blocks are available, this is a much faster way to add new blocks.<\/p>\n\n\n<\/div><\/div>\n\n\n\n There\u2019s no doubt that you\u2019ll use plenty of paragraph and image blocks. However, Gutenberg has more to offer. There are also a number of blocks that offer options that were never available in the previous classic editor.<\/p>\n\n\n\n For instance, you can add a Button block<\/em> to your post:<\/p>\n\n\n This creates a clickable button for visitors to interact with. You can edit the text of the button itself, and include the URL it will link to right below:<\/p>\n\n\n\n You can alter both the background and text colors in the sidebar. While this isn\u2019t a huge range of options, it\u2019s enough to create a handy customized button, which you can use to encourage visitors to sign up for an email list, buy a product, or whatever else strikes your fancy.<\/p>\n\n\n Once you\u2019ve added a few blocks, you may find yourself wanting to make some changes. Fortunately, blocks are pretty flexible in letting you modify your content\u2019s layout.<\/p>\n\n\n\n For example, if you want to delete a block, you can click on it, and from the horizontal pop-up bar select the three dots<\/em> on the far right. Another vertical pop-up menu will appear. Scroll down to the bottom of it and click on Delete<\/em>. In this case we’re going to remove an image:<\/p>\n\n\n By clicking on a block, you can use the up and down arrows<\/em> to rearrange your blocks at will. You can also click on the six dots<\/em> to the left to use the drag-and-drop function and move your block to somewhere else on the page:<\/p>\n\n\n Productivity tip<\/strong>: Gutenberg includes a number of keyboard shortcuts that can help you quickly delete blocks or insert new blocks. Type Shift + Alt + H<\/strong> to view all the Gutenberg keyboard shortcuts.<\/p>\n\n\n<\/div><\/div>\n\n\n\n It\u2019s also worth noting that you can create multi-column layouts. This is an exciting feature, which you can access by placing a Columns<\/em> block in your post:<\/p>\n\n\n This lets you create up to six side-by-side columns, and place whatever blocks you\u2019d like within each one. It\u2019s an option that offers a lot of potential for creating unique layouts.<\/p>\n\n\n\n Finally, it\u2019s important to note you still have access to post-wide (or page-wide) settings as well. In the right-hand sidebar, click on the Post<\/em> tab to find them:<\/p>\n\n\n Here, you\u2019ll find most of the options you\u2019re familiar with. You can publish the post, set an author, choose categories and tags, add a featured image, and so on. You can even modify comments settings in the Discussion<\/em> menu. However, you won\u2019t need to save your content, as it will auto-save at frequent intervals while you\u2019re working.<\/p>\n\n\n This should give you a solid foundation to begin using the Gutenberg blocks system! It\u2019s quick to pick up, but there are a lot more options than we\u2019ve covered here. This was meant as a “get started” tutorial and we encourage you to continue experimenting with the various blocks available and become comfortable with the possibilities they open up for your website.<\/p>\n\n\n\n This is especially relevant to those of you who have traditionally relied on third party page builders in the past because of the previous classic editor’s limitations. Once you get comfortable with blocks and add some extension plugins (more on that below)<\/em>, you’ll find that you can achieve a lot of the same aesthetics with blocks that you are able to do with tools such as Elementor<\/a> or Divi Builder<\/a>.<\/p>\n\n\n One of the most powerful things about Gutenberg is that you can use plugins to add all kinds of new blocks to the editor. In fact, it’s highly probable that some of your favorite plugins provide their own custom blocks.<\/p>\n\n\n\nHow to use Gutenberg blocks to create a WordPress post (in 3 steps)<\/h2>\n\n\n\n
\n
Step 1: Add a block to your post<\/h3>\n\n\n\n
![\"Gutenberg](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:345\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/gutenberg-editor-main.png\")
<\/figure><\/div>\n\n\n![\"Add](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:338\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/add-new-block-in-gutenberg.png\")
<\/figure><\/div>\n\n\n![\"After](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:605\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/select-which-block-to-add-in-gutenberg.png\")
<\/figure><\/div>\n\n\nStep 2: Customize your block<\/h3>\n\n\n\n
![\"Formatting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/gutenberg-block-customize-menu.png\")
<\/figure><\/div>\n\n\n![\"Advanced](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:467\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/advanced-paragraph-block-settings.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:485\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/adding-an-image-block-to-gutenberg.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:457\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/button-block.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/adding-a-link-to-a-button.png\")
<\/figure><\/div>\n\n\nStep 3: Put the finishing touches on your post<\/h3>\n\n\n\n
![\"Removing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/how-to-delete-a-gutenberg-block.png\")
<\/figure><\/div>\n\n\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/how-to-move-a-gutenberg-block.png\")
<\/figure><\/div>\n\n![\"Columns](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/columns-block.png\")
<\/figure><\/div>\n\n\n![\"Where](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:565\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/post-settings-in-the-block-editor.png\")
<\/figure><\/div>\n\n\nStep 4 and beyond<\/h3>\n\n\n\n
Using plugins to add new Gutenberg blocks to your editing arsenal \ud83d\udd0c<\/h2>\n\n\n\n
![\"Otter](\"https:\/\/ps.w.org\/otter-blocks\/assets\/banner-772x250.png?rev=3019687\")
\t\t\t