Video
Transcript
Hi there, I’m Shawn from Refoundry. Welcome back to our Getting Started series. In this lesson, we’ll delve deeper into working with blocks in the Gutenberg editor.
Today, we’ll focus on using the toolbar features for heading, paragraph, and list blocks, including text alignment and transforming blocks. We’ll also learn how to add and replace images in our content.
Let’s jump in!
I’ve added a heading block to our page and typed some text. With the heading block selected, look at the Block Toolbar above it. From here, we can adjust the heading level by clicking the dropdown icon.
Clicking this dropdown reveals options ranging from H1 to H6. Let’s change this heading to H3, and you’ll see the size adjust accordingly. Choosing the appropriate heading level helps with content structure and plays a key role in accessibility and SEO.
There’s also a fun feature hidden in the More Options dropdown called Highlight. This allows you to apply a color highlight to specific text within the heading. Let’s try it out. I’ll select the word “Welcome” and click on Highlight. This opens a color palette, and I’ll choose pink. Now, only the word “Welcome” is highlighted. This feature is a great way to emphasize certain words or phrases without needing any code.
Gutenberg also allows you to transform blocks into other types without retyping content, which can be a real time-saver. For example, let’s transform this heading into a paragraph block. With the heading block selected, click the Transform icon—represented by the block icon—and select Paragraph. Now our heading text is part of a paragraph block.
Similarly, you can convert a paragraph back into a heading. I’ll change this paragraph back to H3. You can also transform paragraphs into lists. After placing a paragraph block on the page, I’ll convert it to a list block, and the text will automatically become list items. This flexibility allows you to restructure content quickly and efficiently.
Now, let’s explore the toolbar options for paragraph blocks. I’ll add another paragraph block and select it to bring up the Block Toolbar. Just like with the heading block, we can change alignment using the toolbar. I’ll center-align this paragraph. The toolbar also provides controls for bold and italic styling. For example, I’ll make part of the text bold and italic.
There’s also a link tool in the toolbar. To add a link, select some text, click the link icon, and enter the URL. Press Enter to apply the link. If needed, click Edit to access advanced options. In this case, I’ll set the link to open in a new tab.
Next, let’s look at the list block. When the parent list block is selected, the toolbar lets us switch between an unordered list (with bullet points) and an ordered list (with numbers). If I select an individual list item, the toolbar provides options to indent or outdent. For example, I’ll indent an item, making it a sub-item of the previous entry. To undo that, I’ll click Outdent, moving it back to the main list.
Now, let’s add an image block to the page. When I insert the block, an empty image block appears. I can move it up or down using the arrows in the Block Toolbar. These arrows make it easy to reorder blocks without dragging and dropping.
To add an image, hover over the block and click the Choose button, which opens the Media Library. From here, I can drag and drop an image or select one from the library. After clicking Select, the image appears on the page.
If I need to replace the image, it’s just as simple—click the Choose button again and select a new image from the library.
That’s it for this lesson! We’ve explored toolbar features for heading, paragraph, and list blocks, learned how to transform blocks, and discovered how to add and replace images.
If you have any questions, feel free to reach out through our website or book a demo. Thanks for watching, and I’ll see you in the next video!