Video

Transcript

Hi again, Shawn here with another lesson in our Getting Started series. Today, we’re focusing on how to add blocks to an existing page. Whether you’re building new sections or reorganizing content, knowing how to efficiently add and move blocks will make your life much easier.

We’ll explore different insert methods, copy-pasting blocks from one page to another, and how to pull content from external sources like Google Docs.

Let’s jump in!

We’ll start by adding an image inline, meaning between existing blocks. On our Features page, I want to add a section between the Plugin and Platform section and the Component Library section.

To do this, I’ll select the main block wrapper of one of these sections. In the Options menu (the three dots icon), I can choose ‘Add Before’ or ‘Add After.’ For this example, I’ll choose ‘Add Before.’ This creates an empty paragraph block. From here, I can use a slash command to quickly add a container block.

Now, I could continue adding blocks to build out the section from scratch, but Gutenberg makes it easy to copy blocks from one page to another.

Here’s an example. I already have a pre-built section on another page that I want to use. Instead of rebuilding it, I can copy the entire section. I’ll select the main wrapping container of that section, open the Options menu, and click ‘Copy.’ This will copy the container and all its blocks and settings.

Now, I’ll switch back to our original page. I’ll select the container block where I want to insert the copied section, and simply paste it with Command + V (or CTRL + V on Windows). All of the blocks and their settings, including the content, are now in place.

You can also copy content from external sources like Google Docs. For example, instead of manually entering text, I can copy content from a press release that includes a heading, paragraphs, and a list block. I’ll insert a blank heading block in Gutenberg, and then paste the copied content. Gutenberg automatically formats the text as a heading, individual paragraph blocks, and a list block.

Sometimes, after adding content, you might decide it belongs in a different place on the page. In that case, you can collapse the container, select it, and use the Move Up or Move Down icons in the toolbar to adjust its position.

You can also move individual blocks. For example, I can move the list block up one level, or adjust it further by dragging it directly into the right spot.

And that’s it! That’s how you add blocks to an existing page.

Thanks for watching! If you have any questions, feel free to reach out through our website or book a demo. See you in the next video!