Introduction

In a previous post I looked at the new(ish) WordPress block editor. One point invites further examination. I had admitted to adding some non-breaking spaces simply to address a lack of vertical spacing:

I add an element . . . such as . . . a <p>&nbsp;</p> in order to add some vertical spacing . . . .

As one of my readers pointed out, “Since it would be better to not have to insert markup to control vertical spacing, it might be nice if you figured out how to customize the block CSS.” That is the mission of this post.

Problem Areas

In the previous post on the Block Editor, I came across two types of blocks that had no vertical space beneath: (1) Table and (2) Media and Text. So I will insert those two blocks and attempt to alter some CSS code in order to avoid manually adding vertical space beneath each block.

Table

Because I customized the table in that previous post, I had to convert it from being a Table Block to an HTML Block. This time, I will insert a simple table so that it remains a Table Block.

Before I insert the table itself (which will reflect my CSS fix), I present this screen shot that shows what the table looks like “out of the box.” Note how the bottom row sits so closely on the top of the succeeding paragraph:

Table before editing CSSS
Before adding custom CSS the table leaves no space after Row 3.

After creating the table (the actual table being below), I looked the HTML with my browser’s inspector, and found the table assigned to this class:

.wp-block-table

Accordingly, I entered into my child theme’s “style.css” this line:

.wp-block-table {margin:0 0 20px 0;}

In itself, that was all that was needed to add the space below the table:

Column 1, Row 1Column 2, Row 1
Column 1, Row 2Column 2, Row 2
Column 1, Row 3Column 2, Row 3
Media & Text

The other block that required me to manually add vertical space beneath it is the Media & Text Block.

This screen shot shows the spacing before the fix:

Media and Text block leaves no space below.
Before adding custom CSS the Media & Text block leaves no space after.

Again, using my browser’s inspector, I see that this block is assigned to this class:

.wp-block-media-text

So I add this code to my child-theme’s “style.css”:

.wp-block-media-text {margin:0 0 20px 0;}

As a result, the desired space is displayed:

favicon

This is my site’s favicon. Using the Block settings (opened via the gear in the top right of the screen), I shrank the default text size and added a background color. In the HTML code I added transparency to the background and re-sized the image. A couple of my efforts broke the block, so I went to the revisions for this post and stepped back to a version that worked.

This is the start of the following paragraph, now with space above, yay!

As a reminder, browsers cache style sheets and often must have the caches cleared to view CSS changes. While I clear my laptop’s cache by force of habit (and by force of keyboard shortcuts), the CSS changes described above did not display on my iPhone until I went into Settings > Safari > Advanced > Website Data > Remove All Website Data.

Leave a Reply

http-www-in1accord-net-wp