| WordPress

How to Use the Text and Image Blocks in Gutenberg

Gutenberg comes with a variety of different standard blocks as part of the editor. Many of these standard blocks allow you to add text. There are also dozens of different plugins such as Advanced Gutenberg which add even more blocks and features.

Your first experience with Gutenberg is probably going to involve text blocks. If you just start typing on a new page or post, you have created a "Paragraph" block.

WordPress Paragraph block in Gutenberg

Look at the image above and you'll see that a Paragraph block has an editing toolbar with these tools: Text alignment, Bold, Italic, Create a link, and Strikethrough.

This is a much more limited set of editing options than in previous version of WordPress. This is because many those old editing options have now become blocks. In addition to Paragraph blocks, you can also create blocks for Headings, Lists, Quotes, Preformatted or Verse:

Different text blocks in Gutenberg

Changing the settings for text blocks in Gutenberg

The three vertical dots on the right of the toolbar allow you remove the block, or insert another block before or after it. You can also add the block to your Reusable Blocks library or edit it as HTML.

Changing settings for a Gutenberg blocks

On the right-hand side of the screen, you have the block settings and here you can change the font size, foreground and background colors, or add an additional CSS class. You can also create a drop cap.

Changing settings for a Gutenberg text block

These settings differ depending on the type of block you are using, so if you have chosen a heading block, the settings will look like this:

On the left side of the block you will see these options:

How to Use Text Blocks in the WordPress Gutenberg Editor

On the right side of the screen you will see these options:

Notice that here you can add an HTML anchor if you want to link to a specific section of your page.

More Gutenberg Reading

The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".

About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.