AaronTweeton.com

WordPress web design and development

Edit Padding in the WordPress Block Editor

Need to change the padding for a block in WordPress? It’s easy using the Dimensions panel.

Edit Padding in the WordPress Block Editor

The secret to changing padding in WordPress is to wrap your content in a Group block. Once you do that, you’ll have access to the Dimensions panel in the Block settings tab.

Default padding

By default, Paragraph blocks and many other blocks have no padding, only margin between the blocks.

Like this.

Padding only appears after I apply a background color to the block, like here.

If I start a new paragraph, like here, the padding appears only around the paragraph.

Seems a bit limiting.

How to apply background color to multiple blocks

To edit or customize padding, I’ll need to wrap my paragraphs in a Group block, like this.

Here’s one paragraph.

And here’s another one.

Instead of applying a background color to each Paragraph block, I’ve applied it to the Group block.

So now I can have a background color behind multiple blocks.

How to edit padding

If you wrap one or more blocks in a Group block, you should see a Dimensions panel under the Block settings tab. This allows you to modify the padding between blocks, like this:

This padding is too little.

This padding is too much.

This padding is just right.

If you select the Unlink Sides button in the Dimensions panel, you can change padding for the individual sides.

I like more padding on the bottom.

Well I like more padding on the top.

Well I like a lot of padding on the right so I can have text wrap around like this, just like a soft, warm seven-layer burrito with something green that they claim is guacamole.

Using Block Spacing

You might have noticed an empty field called Block Spacing in the Dimensions panel. What does that do? It allows you to set the padding of the Group and the margin of the blocks within the group independently, like this.

Hi, it’s me again, one paragraph. Because I have no background, it’s hard to tell how Block Spacing affects me.

How about now?

The padding for my Group is 2.5 rem, but the Block Spacing is set for 1 rem. Of course, I’m just using the default padding for the Paragraph block.

I could go to town and wrap this Paragraph block inside another Group block and apply custom Padding to it as well.

Or I could do something insane.

Like create a Group block containing more Group blocks.

Anyway that’s how you can edit Padding using the Dimensions panel in WordPress.

Categories: