The WordPress 5.0 release is out, so now’s the time to conquer the Gutenberg editor. The goal of this article is to give you a solid foundation on how to take advantage of the power of Gutenberg and take the first step to become a Gutenberg master.
This is the first part of a two-part Gutenberg series. It will teach you the nuts and bolts of the Gutenberg editor, how to configure it, how to manipulate blocks and when to use them. So let’s dive right into it.
If you are not familiar with the core concepts behind the Gutenberg editor, please read our previous blog post first.
Gutenberg workspace configuration
Gutenberg offers a clean, minimal, distraction-free content editor that can be modified to help you make writing content easier.
Guttenberg editor has the block and document settings open in the right sidebar by default. It’s handy to have these settings open, but sometimes you might need a little bit of extra space and a wider workspace. You can easily achieve that by clicking the gear icon in the top right corner. You can toggle it back by clicking the gear icon again. An even better way to get a distraction-free and wider workspace is to click on “Show more tools & options” icon – three vertical dots – in the top right corner of the editor view and check the fullscreen mode.
If you need to switch from the visual to the code editor, you can still do it. Click on the more tools icon in the top right corner of the editor view and select the “Code Editor” option from the menu.
Another useful setting in this menu is the “Top Toolbar” option that allows you to position the block’s options toolbar to the top of the content editor view instead of the top of the block. It’s not my favorite choice, but it may work for some people. I also recommend you to take a look at the whole list of the keyboards shortcuts that will help you speed up the process of writing content.
Block manipulation 101
If you’ve been using WordPress for some time, you surely know how difficult it is to adjust the layout of your content within the current editor. Well, not anymore. Gutenberg breaks down pages and posts into smaller, more manageable blocks of content that make formatting and adjusting layouts much easier and much more intuitive.
How to add new blocks
Adding blocks in Gutenberg can be done in many ways. The straightforward is by hitting the plus icon in the top left corner of the editor view and selecting one of the blocks. This way a new block will be added to the bottom of your content. Once you select a certain block, you will see the more options icon appear on the right of the block toolbar. Click on the button and you will see a menu appear with the insert after and insert before commands.
When you hover over the top edge of the block, you will again see the plus icon, which will this time add a block before the current one. You can also do it with your keyboard. Just hit enter and a new block will be added below the current block. However, you will still need to click on the plus icon to select a specific block.
How to remove and duplicate blocks
You can remove blocks by selecting the “Remove Block” option from the more options menu. You can also use the keyboard shortcut is Shift + Alt + Z. To duplicate a block, first select the block you want duplicated, go to the more options menu and click on duplicate. Or you can simply use the keyboard shortcut Ctrl + Shift + D.
How to change the order of blocks
Moving blocks up and down is a piece of cake in Gutenberg. When you hover over the block you want to move, you will see up and down arrows appear in the top left side of the block view. By clicking the up arrow, you will move the current block up, above the previous block, by clicking the down arrow you will do just the opposite.
Most common blocks
Paragraph block is a simple text block where you can add all your paragraph text. You can change the text font size, color, and background in the block settings view. You can also align text, make it bold or italic, just as you would in the previous WP editor.
This one is pretty self-explanatory. It’s used to place headings on your page. In the block settings, you can change the text alignment and heading level.
This block is used for writing lists, either numbered or bulleted.
It’s a basic image block where you can add an uploaded image or one from the media library. You will only be able to add one image per line. In the block settings view, you will be able to edit the alt title, change the size or add links. And you don’t need to open any additional windows to change these settings anymore! They are now available right here in the content editor.
Media & Text block
This block allows you to place an image on the left or right side of the text.
A block with which you add a WordPress gallery. Once you insert your images, you will be able to change the number of columns in the block settings.
Cover image block
This is probably the most exciting novelty of the image blocks. They are used to place cover images – images that take full width of the page – with text in your content. The cool thing about them is you can change their overlay color and background opacity to make the text stand out more. The background can also be fixed, to achieve a simple parallax effect.
Video, audio and file blocks
These blocks make it super easy to upload videos, audio or any files available for users to download. You can add these files from the media library, upload or drag them from your computer, or enter a URL of the location where the file is stored.
Important note! If you want to embed youtube videos or any other social media content, it’s better to use embed blocks. You can find out more about them in the second part of this WordPress Gutenberg series.
So now we’ve taken the first step towards becoming a Gutenberg master. We should now be able to navigate the WordPress Gutenberg editor with ease and be familiar with the commonly used blocks. On our further journey, we will take a look at the more advanced blocks. Be sure to follow our blog in the next weeks, so you don’t miss it!
Are you just as excited as we are about Gutenberg? What blocks did you find the most useful? Let us know by leaving a comment below.