4.4. The Editor: How Do Blocks Behave

Last but not least! We’ve learned how following the puzzle and “climbing the tree”, can help us find selectors for the layout of the theme, but we need to reflect on one more thing: what happens when we add elements, when we add blocks in the editor.


Have you ever wondered why did “that” blank space showed up after having applied a change to a block? I bet you did…

First of all, let’s erase that phrase (and later that question) What beginners refers as “Blank Spaces” and “why did this extra space show up after I’ve added this block”, is the result of the Box Model.

And in this theme, something unexpected happens with some blocks when we add to them a background color or even when we change their alignment: values of some properties (such us margin and padding) change.

Please note: up until Twenty Twenty V20, the theme doesn’t offer the option to fix the blocks’ padding in the editor, while the Twenty Twenty One Theme already does.

The screenshots we’ll use in this example, were made with v19; however, the only thing that has changed – regarding the Group Block we’ll use – is that now we can modify its layout, in the editor, to “row” or “stack.” which doesn’t affect this lesson.

Now, let’s get to it!

Step 1: Adding Blocks

Let’s say you’d like to add a cover block and then a group block below.

  • the Cover Block will show up with bottom margin of 8rem, and,
  • the Group Block with top and bottom margin of 4 rem.

In the style sheet, you’ll find these values with the selector .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull). The margin: at line 2902 (for mobile) will have a value of 3rem; at line 5231, the 4rem shown in this example.

It looks nice. But, …

Step 2: Adding a Background Color

… If we add a background color to the Group Block, two things happen as a result: we see a bigger “blank space” has appeared above the Group Block and also that it has expanded a little bit.

Why? Because the Theme removes the Group Block’s margin, but adds a padding at 4 rem.

Step 3: Setting the Group Block at Full Width

Furthermore, if we set the Group Block (with background color) to Full Width, it also expands vertically even more. Why? Because the Theme adds to it a top and bottom padding of 8rem, keeping the left and right to 4rem.

Crazy, huh?

Conclusion

When we apply a change to a block, we can detect the new values with the Developer Tools, and then see how the selector was built in the style sheet.

The theme’s files (the puzzle) and the style sheet, give us everything we need; and the Developer Tools is the easiest way to find quickly the selectors we need.

Customizing your theme, it is in the palm of your hand 😉

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

JOIN COMMENTS

Any thoughts?