{"id":16085090,"date":"2022-11-02T07:22:09","date_gmt":"2022-11-02T07:22:09","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=16085090"},"modified":"2025-09-27T11:13:55","modified_gmt":"2025-09-27T11:13:55","slug":"layout-settings-overview","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/layout-settings-overview\/","title":{"rendered":"Layout Settings overview"},"content":{"rendered":"\n

The layout settings in blocks<\/a> allow you to change the justification and orientation of the nested child blocks inside their parent blocks. These settings can be found in the parent blocks within which the child blocks are nested.<\/p>\n\n\n\n

The layout settings are available when you use the block editor<\/a>. If you are new to the block editor, this guide<\/a> will show you how to work with blocks. You can read more about the new block editor features and improvements in this article.<\/a><\/p>\n\n\n\n

How to access layout settings<\/h2>\n\n\n\n

To access the layout settings (in the parent block), click on any of the child blocks. The first icon in the block toolbar of the child block will select the parent block. In the block settings sidebar in the parent block, you will find the Layout<\/strong> section as shown below. <\/p>\n\n\n\n

\"Layout<\/figure>\n\n\n\n

Navigating through nested blocks<\/h2>\n\n\n\n

The List View<\/strong> tool can be used to navigate between layers of content and nested blocks. This will make it easy to access the parent and child block. <\/p>\n\n\n\n

\"Top<\/figure>\n\n\n\n
\n
\n

To open List View<\/strong>, select the List View icon from the Top Toolbar of the block editor<\/a> as shown above. It will remain open as you navigate through your content and stay open until you close it by either selecting the \u201cx\u201d or by selecting the List View icon again.<\/p>\n\n\n\n

Learn more about the List View<\/a>. <\/p>\n<\/div>\n\n\n\n

\n
\"The<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Type of settings <\/h2>\n\n\n\n

Each supported block comes with different layout settings. If you make customizations to these settings and want to revert back to the original settings quickly, you can do so by selecting the three-dot menu icon and clicking Reset All<\/strong> as shown in this article<\/a>. This resets the settings and removes all of your changes. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Justification <\/h3>\n\n\n\n

You can set the justification of the child blocks inside the parent block. You can justify the child blocks to the Left<\/strong>, Center<\/strong>, or Right<\/strong>. <\/p>\n\n\n\n

Some blocks like buttons block<\/a> will have the option to add Space between items<\/strong> which lets you add equal space between them. Space between items is applicable only for horizontal orientation. Eg: The buttons block<\/em> is centered with equal spacing between the buttons if you have more than 1 button within the buttons block<\/em>. If the child blocks are set to be vertically aligned, you will not be able to put space between them.<\/em> <\/p>\n\n\n\n

The justification settings can be found on the parent block’s toolbar and sidebar settings. <\/p>\n\n\n\n

\"Layout<\/figure>\n\n\n\n

Orientation <\/h3>\n\n\n\n

When you first add multiple blocks to a parent block, the child blocks will be displayed horizontally (i.e. next to each other.) <\/p>\n\n\n\n

Another option is to display the child blocks vertically (i.e., stacked in the parent block). <\/p>\n\n\n\n

\"Orientation<\/figure>\n\n\n\n

Allow to wrap to multiple lines <\/h3>\n\n\n\n
\"Allow<\/figure>\n\n\n\n

By turning on the Allow to wrap to multiple lines<\/strong> setting, the child blocks will move to the next line when there isn\u2019t enough space on smaller screen sizes (mobile device)<\/em>. With this setting off, all the child blocks will stay on the same line no matter the screen size.<\/p>\n\n\n\n

Customizing layout width<\/h3>\n\n\n\n

Some blocks such as the Query Loop<\/a> block that has nested inner blocks like Post Template<\/a> block and Group block<\/a> will have the following layout option that lets you choose the layout width for the nested blocks. <\/p>\n\n\n\n

\"Toggle<\/figure>\n\n\n\n

Toggle off Inner blocks use content width<\/strong> so that the nested inner blocks fill the width of the parent container.<\/p>\n\n\n\n

\"Toggle<\/figure>\n\n\n\n

Toggle on Inner blocks use content width<\/strong> <\/strong>so that the nested inner blocks use content width with options for full and wide widths. You can set the value for full width by typing in a value in the Content<\/strong> textbox. You can also set the value for wide width by typing in a value in the Wide<\/strong> textbox. You can also set the unit in PX, %, EM, REM, VW, or VH for the Content<\/strong> width and Wide<\/strong> width. You can also change the Justification<\/strong> for the nested elements to left, center or right aligned within the parent container.<\/p>\n\n\n\n

Blocks that include layout settings<\/h2>\n\n\n\n