Overview of Dimension Settings in WordPress Block

The WordPress block editor, also known as Gutenberg, is a powerful tool for creating and editing content on your website. One of the key features of the block editor is the ability to customize the dimensions of your blocks, which allows you to create unique layouts and designs for your pages and posts. Whether you’re a beginner or an experienced user, adjusting the dimensions of your blocks can help you create professional-looking content that stands out from the crowd.

How to Easily Access Dimension Settings

1

You can find the Dimension option under the Block Settings sidebar of a block.

To access the Block Settings sidebar, select the block you wish to customize, then look for the settings icon (a gear symbol) next to the Publish or Update buttons in the WordPress Editor. Click on the icon to reveal the Block Settings sidebar.

Here are some examples from various blocks:

2

Discover all the hidden dimension settings by clicking on the ellipsis( three-dot) menu in the Dimension section. It will reveal all the options not visible by default.

Type of settings

The dimension settings available for each block may vary.

Padding

4

The Padding setting controls the distance between the content and the edge of a block. You can set a uniform padding value for all sides or customize padding for each side individually.

To adjust the spacing separately for each side, navigate to the
Unlink sides” section.

Margin

5

The configuration of this feature affects the space surrounding a block. You can apply the same margin to all sides or specify separate margins for each side.

To adjust the spacing separately for each side, navigate to the
Unlink sides” section.

Customize Dimensions with Custom Unit

7

By switching the preset option, you get a different control to apply the dimension. In this control, you can choose to use one of several units, including pixels (px), percentage (%), ems (em), root ems (rem), viewport width (VW), and viewport height (vh).

Block Spacing

8

The block spacing setting affects the distance between nested blocks. By adjusting the block spacing for the parent block, you can modify the spacing within any nested blocks.

Minimum height

9

This option allows you to establish a minimum height for the block. This feature can be found in some block settings. Within this option, you can specify the height using various units of measurement, such as pixels (px), percentage (%), ems (em), root ems (rem), viewport width (VW), or viewport height (vh).

Tip

To make a full-screen section, set the minimum height to 100vh.

6

By default, the Padding and Margin settings will apply the same value to all four sides around the block. To specify different values for each side, click on the Link icon to the right to unlink the settings. Click on the Link icon again to return to using the same value for all sides.

Reset Dimension Settings

3

Use the Reset button to revert to the original dimension settings. This will clear all your custom changes made to the dimension configuration.

You may also join our Gutenberg Facebook Community where we all learn and help each other.


Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe and Get Updates Weekly

Latest articles, blocks, templates, tools, news every week