Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Select and Use Nested Blocks in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to learn how to select and use nested blocks in WordPress?

The Gutenberg nested blocks feature allows you to add multiple blocks within a parent block. Then, you can customize different block elements at the same time, organize post content efficiently, and access more design flexibility.

In this article, we will show you how to easily select and use WordPress nested blocks.

Select and use nested blocks in WordPress

What Are WordPress Nested Blocks?

The WordPress Gutenberg nested block feature allows you to insert (or ‘nest’) one or more blocks within another block.

Nested blocks help you create more complex layouts on your WordPress website by adding multiple blocks inside each other. This allows for more flexibility when designing and formatting content for pages and posts.

For instance, you can nest multiple Image blocks within a Group block to display a set of photos from a particular event or a series of artworks created using a particular technique.

Preview of WordPress nested blocks

Additionally, the nested block feature allows you to edit individual blocks separately. This means that you can customize each block according to your needs without affecting the other blocks.

In turn, this results in better content organization, makes your content more attractive, and streamlines the creative process.

That being said, let’s see how you can easily select and use WordPress Gutenberg nested blocks.

How to Use WordPress Nested Blocks

You can easily nest multiple blocks together using the Group or Columns block in the Gutenberg block editor.

First, you need to open up an existing or new post in the block editor from the WordPress admin sidebar.

From here, simply click on the add block ‘+’ button in the top left corner of the screen and find the Group block. Upon clicking it and adding it to the page, you must select a layout for the blocks that you will nest together.

For this tutorial, we will be selecting the ‘Group’ layout.

Select Group block from the block menu

Next, simply click on the ‘+’ button on the screen to start adding content within the parent block.

For the sake of this tutorial, we will be adding an Image block.

Add an image block within the Group block

Upon adding the block, just click the ‘Group’ button in the block toolbar at the top to select the parent block.

Next, you need to click the ‘+’ button to open up the block menu again, from where you can choose other blocks to add.

Open the block menu to add another block within the Group block

How to Configure WordPress Nested Block Settings

Once you have nested multiple blocks, you can configure their individual settings by clicking on each block. This will open up the block settings in the right column on the screen.

From here, you can adjust the background color, text color, and size of the individual blocks without affecting the other blocks that are nested within it.

Configure the individual block settings

To configure the settings of all the nested blocks together, you will have to click the ‘Group’ button in the block toolbar at the top. This will open up the parent block settings in the right column.

You can now configure the justification, orientation, background color, text color, and typography of all the nested blocks.

Keep in mind that these settings will affect all the blocks nested within the parent block.

Configure the settings of the Group block

You can also convert an existing individual block into nested blocks by clicking the ‘Options’ button in the top toolbar of any block.

This will open up a menu prompt, where you need to select the ‘Create Reusable block’ option.

Choose the Create Reusable Block option

Once you have done that, a new reusable block will be created where you can add multiple blocks.

After you are satisfied, don’t forget to click the ‘Publish’ or ‘Update’ button to save your changes.

Create nested blocks

In our example, we have nested a Title, Image, and Paragraph block within a Group block.

This is how the nested blocks looked on our demo website.

Preview of WordPress nested blocks

Bonus: Use the Wayfinder Plugin to Easily Select Nested Blocks

Sometimes, it can be difficult to select an individual block and configure it when there are multiple blocks nested together.

Luckily, the Wayfinder plugin makes it super easy to select nested blocks from a parent block and even tells you the type and class of the blocks.

First, you will need to install and activate the Wayfinder plugin. For more instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

Upon activation, head over to the Settings » Wayfinder page from the WordPress admin sidebar.

Once you are there, all the settings will already be activated. You simply need to uncheck the box next to the settings that you don’t want to use.

For example, if you want Wayfinder to display block types for all the blocks in the editor, then keep the box checked next to the ‘Display block type’ option.

Configure the Wayfinder plugin settings

However, if you don’t want the plugin to display block classes, simply uncheck the box next to that option.

After configuring the settings, don’t forget to click the ‘Save Changes’ button.

Next, you need to open up an existing or new post from the WordPress dashboard.

Once you are there, hovering your mouse over any block will show an outline with its name. You will also be able to see the outline and name of any nested blocks within the parent block.

GIF for the Wayfinder plugin

This will help you identify all the different blocks that are nested within a Group or Column block.

From here, you can easily select an individual block from the parent block to configure its settings.

Use Wayfinder plugin to easily select a block

You can also select all the nested blocks at the same time by simply clicking on the ‘Columns’ or ‘Group’ heading. This will open up the parent block settings in the right column.

Once you have configured the block settings, simply click the ‘Update’ or ‘Publish’ button to save your changes.

Click the Group block outline to open its settings

We hope this article helped you learn how to select and use WordPress nested blocks. You may also want to see our tutorial on how to change block height and width in WordPress and our top picks for the must-have WordPress plugins to help grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph says

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support says

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.


  3. Jiří Vaněk says

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.