WordPress released version 5.0 at the end of 2018 and my first reaction to the new Block Editor was pretty negative. I wasn’t even using the Visual Editor in the Classic Editor based on loving to write posts in HTML markup, so the blocks in the new default Block Editor just seemed wrong to me. I avoided using the Block Editor or updating my themes to be more compatible until recently.
The Classic Editor is only available as a plugin now, and support for it will likely end at some point. It was time for me to accept this and upgrade to the Block Editor. I toggled on the new editor in the Admin Panel for my sites and everything seemed fine until I created some new test posts. I quickly noticed some margin variations and other random differences in the post layouts. WordPress built some basic styling into the blocks that conflicted with some of my existing functions and CSS. Between the helpful WordPress documentation and experimenting with some CSS styles and function changes, I landed on the key updates that I needed to make to my existing themes.
The first thing that I needed to change was the CSS Reset I was using. It was zeroing out too many styles, so my reset needed to be reworked. I covered my new CSS Normalize/Reset in it’s own dedicated post.
Next, I updated my method for responsive embeds. I removed some of my existing functions and CSS that I detailed in a previous post, and added the new theme support for responsive embeds and updated the HTML5 support using the code below in the theme’s functions.php file, within the after_setup_theme hook.
<?php
function evo_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'responsive-embeds' ); // new responsive embeds support
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'script', // new script support
'style', // new style support
) );
}
add_action( 'after_setup_theme', 'evo_setup' );Next, I worked out some CSS that would target all the new blocks (including Widget Blocks and Jetpack Blocks) to balance out the margins for a consistent and clean layout.
Here is the core CSS for the blocks that works with the new CSS Normalize/Reset.
*[class^="wp-block-"] {
margin-top: 2rem;
margin-bottom: 2rem;
}
*[class^="wp-block-"] figcaption {
margin-top: 0.5rem;
margin-bottom: 0;
}
*[class$="_inner-container"] {
margin: 0;
}
.wp-block-columns {
margin: 2rem 0 -1.875rem 0;
}
.wp-block-column {
margin: 0 0 2rem 0;
}
*[class$="_inner-container"] > *:first-child,
.wp-block-column > *:first-child {
margin-top: 0;
}
*[class$="_inner-container"] > *:last-child,
.wp-block-column > *:last-child {
margin-bottom: 0;
}
.wp-block-gallery {
display: flex;
flex-wrap: wrap;
}
.wp-block-cover__background {
margin-top: 0;
margin-bottom: 0;
}
.wp-block-pullquote {
margin: 4rem 0;
padding: 0;
}
.wp-block-preformatted {
white-space: pre;
overflow: auto;
}
.wp-block-verse {
font-family: inherit;
}
@media (min-width: 782px) {
.wp-block-column {
margin: 0 1rem 2rem 0;
}
.wp-block-column:last-child {
margin: 0 0 2rem 0;
}
.wp-block-column p {
font-size: 1rem;
}
}
/* Widget Block specific styles */
.wp-block-archives-list li,
.wp-block-categories-list li,
.wp-block-latest-posts *[class^="wp-block-"],
.wp-block-latest-comments *[class^="wp-block-"],
.wp-block-rss *[class^="wp-block-"],
.wp-block-search *[class^="wp-block-"] {
margin: 0.5rem 0;
}
.wp-block-rss__item .wp-block-rss__item-title {
margin: 0;
}
.wp-block-latest-posts__list li,
.wp-block-latest-comments li,
.wp-block-rss .wp-block-rss__item {
margin-bottom: 1.5rem !important;
}
.wp-block-latest-posts__list.is-grid,
.wp-block-rss.is-grid {
margin-bottom: -1.5rem;
}
/* Jetpack Block specific styles */
*[class^="wp-block-jetpack-"] {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.wp-block-jetpack-slideshow {
margin-bottom: calc(2rem - 36px) !important;
}
*[class^="wp-block-jetpack-"] *[class^="wp-block-jetpack-"],
*[class^="wp-block-"] *[class^="wp-block-jetpack-"],
.wp-block-jetpack-markdown {
margin-top: initial !important;
margin-bottom: initial !important;
}
.wp-block-jetpack-contact-info *[class^="wp-block-jetpack-"] {
margin-bottom: 0.5rem !important;
}
/* additional typography and list styles */
h1, h2, h3, h4, h5, h6, p,
article ul:not([class]),
article ol:not([class]) {
margin: 1.5rem 0;
}
article ul:not([class]) {
list-style: disc;
padding: 0 0 0 2rem;
}
article ol:not([class]) {
list-style: decimal;
padding: 0 0 0 2rem;
}
article ul:not([class]) li,
article ol:not([class]) li {
line-height: 1.5;
margin: 0.5rem 0;
}Finally, I installed the Code Syntax Block plugin so I can easily use Prism to style Code Blocks as I’ve detailed in a previous post.
All the CSS mentioned above is opinionated for my themes, but it could be simplified by adding the theme support for default block styles and just setting basic typography margins, etc.