Video

Transcript

Hi everyone, I’m Shawn from Refoundry. Welcome to Lesson 1 of our Getting Started series. In this video, we’ll explore the Gutenberg Editor, focusing on using the List View, navigating the Settings Panel, and adding blocks to a blank page.

Let’s get started. Here we are in the Gutenberg Editor, the default editor in WordPress for creating and editing content. Gutenberg uses blocks to build your pages and posts, allowing for flexible and rich layouts. Refoundry enhances Gutenberg by providing custom blocks and styling options, making it even easier to build professional websites.

First, let’s explore the List View. The List View is a powerful tool that displays a hierarchical outline of all the blocks on your page. This feature is especially helpful when working with complex layouts or pages with a lot of nested blocks. To open the List View, click on the icon in the top left-hand corner of your screen. The List View panel appears on the left side of the editor, displaying a structured outline of all the blocks on the page.

You can see that our page consists of several blocks, including headings, paragraphs, images, and layout blocks like containers, rows, and columns. The List View allows you to quickly navigate to any block on the page. For example, if I click on a heading block, it highlights in the editor. The same works in reverse—if I click a block in the editor, it highlights in the List View. This is especially useful when dealing with nested blocks, making it easy to find your way around complex layouts. You can also collapse and expand groups of blocks to simplify the view. For example, here’s a container block with several nested blocks inside it.

The List View also makes it easy to rearrange blocks. If I want to move a paragraph block above a heading, I can just click and drag it to the desired position. I recommend keeping the List View open at all times while you work—it makes navigating complex layouts much easier.

Next, let’s look at the Settings Panel. This panel contains all the options for customizing your blocks and the overall page or post settings. You can open or close the Settings Panel by clicking the icon in the top right-hand corner of your screen. When the panel is open, you’ll see two tabs at the top: Block and Page.

The Block tab shows all the settings for the currently selected block, while the Page tab contains settings that apply to the entire page. For example, when I select a heading block, the settings specific to that block are displayed in the Block tab. Here, I can change the style, apply different colors, or modify spacing. If I select an image block instead, the options in the panel adjust accordingly. This dynamic behavior allows you to customize each block individually, providing a high level of control over your content and layout.

Under the Page tab, you can adjust settings that affect the entire page, such as the template used, featured images, and taxonomy settings. I also recommend keeping the Settings Panel open to have quick access to these options while working on your design.

Now that we’ve explored the List View and the Settings Panel using an existing page, let’s see how to add blocks to a new blank page. I’ll create a new page, give it a title, and publish it. As you can see, because this is a blank page, there are no blocks displayed in the List View yet. Let’s start adding some blocks.

There are several ways to add blocks in Gutenberg. The first method is to use the Block Inserter, the large blue icon in the top left-hand corner. Clicking it opens a search area where you can browse through categories or search for specific blocks. Let’s search for a heading block. I select it from the results, and now I can add content to the heading block directly in the editor. If we open the List View, we can see the new heading block listed there.

Blocks also come with their own inline inserter icons. For example, when I add a container block to the page, it displays a smaller inserter icon within it. This icon allows me to add blocks directly inside the container rather than just on the general editor page. Clicking it opens a smaller search view similar to the main Block Inserter. I’ll type in row and add it to the container. I can also add a column block to the row. Whenever you add an empty layout block, you’ll see placeholder content, which helps you quickly add new elements. For example, clicking the placeholder adds a paragraph block by default. You’ll also see that the List View updates in real-time to reflect these changes.

Another way to insert blocks is by simply hitting the Enter key. For instance, if I place my cursor at the end of a heading block and press Enter, a new paragraph block is automatically added below it.

The third and final method for adding blocks is using slash commands. If I type a forward slash / in the editor, it triggers a search field similar to the Block Inserter. For example, if I type /list, I can quickly select a list block from the available options. Now that the block is on the page, I can easily add more content to it.

Adding blocks to a page is really straightforward, and you can choose whichever method feels most comfortable to you.

Thanks for joining me in this lesson. If you have any questions, feel free to reach out through our website. See you in the next video!