Edit 2024 Theme Block Spacer

Hey @pablolyons, not sure, but maybe you can try adding this to the additional/custom CSS on your page

.wp-block-post-title {
  margin-top: var(--wp--preset--spacing--50); /* You can adjust this value */
}

.wp-block-group.alignfull {
  padding-top: var(--wp--preset--spacing--50); /* Or try 2rem, 1rem, etc. */
}

Oh alignfull is alignment class that wordpress adds when you choose full width for a block in the editor, and for the rem option it’s just alternative, you can use it like this

.wp-block-group.alignfull {
  padding-top: 2rem;
}

But I don’t know how to do this; this applies to all the pages within the website, it’s part of the 2024 theme and a sort of global variable? Any suggestions would be greatly appreciated:

Just a quick FYI:

While you can surely make this (and similar) change via custom CSS override, you don’t have to. Because the Twenty Twenty-Four theme is a block theme supporting full-site editing, you can easily alter the appearance of the theme and your site visually using the same block editor you use to create your posts.

For the task at hand, it seems the spacer is in the default “Pages” template used to render Pages (as opposed to Posts or anything else). You can find and easily adjust this spacer in Appearance -> Editor -> Templates -> Pages without any custom CSS, as depicted in the image below (click to view a larger and clearer image).

And even if you prefer to use custom CSS, I wouldn’t recommend the shotgun approach of adding !important to override a core WordPress class like wp-block-spacer as this sets the height to zero everywhere the spacer is used and can have unintended consequenses. It’s better to use a more targeted selector to limit the scope!