Theme Updates for the Block Editor in WordPress
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.
CSS Normalize/Reset for WordPress
While working through the process of optimizing my themes for the newer default WordPress Editor, I noticed some issues when using the CSS Reset that I’ve used and shared in a previous post. I will cover the key steps in that process in a later post, but one of the main aspects was updating my reset method to be less heavy-handed with the newer post blocks. The reset below combines parts of Normalize.css and my previous reset, without totally zeroing out all elements, and as before, it makes form elements and media items responsive.
This is my current CSS Normalize/Reset for WordPress.
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
}
pre,
code {
font-family: monospace, monospace;
font-size: 0.937em;
}
pre {
tab-size: 4;
overflow: auto;
}
strong,
b {
font-weight: 700;
}
blockquote,
q {
font-style: italic;
}
ol,
ul {
list-style: none;
padding: 0;
margin: 0;
}
sub,
sup {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
border: 1px solid;
padding: 0.25em;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 1em;
line-height: inherit;
margin: 0;
}
button,
input,
textarea {
background-color: inherit;
color: inherit;
border: 1px solid;
border-radius: 0;
outline: 0;
padding: 0.25em;
max-width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
}
button,
select {
text-transform: none;
}
::-webkit-search-decoration,
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
blockquote,
figure {
margin-left: 0;
margin-right: 0;
}
details,
audio,
img,
video {
display: block;
}
img,
video {
height: auto;
max-width: 100%;
}
embed,
iframe,
object {
max-width: 100%;
}
.alignleft {
float: left;
margin: 0 1em 1em 0;
}
.alignright {
float: right;
margin: 0 0 1em 1em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.clear {
clear: both;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px !important;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px !important;
word-wrap: normal !important;
}
.bypostauthor{}
.gallery-caption{}
.sticky{}
.wp-caption-text{}
.wp-caption{}This is a minified version of the code above.
html{box-sizing:border-box;font-family:system-ui,sans-serif;line-height:1.25;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*,*:before,*:after{box-sizing:inherit}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}pre,code{font-family:monospace,monospace;font-size:.937em}pre{tab-size:4;overflow:auto}strong,b{font-weight:700}blockquote,q{font-style:italic}ol,ul{list-style:none;padding:0;margin:0}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-spacing:0}th,td{border:1px solid;padding:.25em}button,input,optgroup,select,textarea{font-family:inherit;font-size:1em;line-height:inherit;margin:0}button,input,textarea{background-color:inherit;color:inherit;border:1px solid;border-radius:0;outline:0;padding:.25em;max-width:100%;-webkit-appearance:none;-moz-appearance:none}button,select{text-transform:none}::-webkit-search-decoration,::-webkit-search-cancel-button{-webkit-appearance:none}progress{vertical-align:baseline}summary{display:list-item}blockquote,figure{margin-left:0;margin-right:0}details,audio,img,video{display:block}img,video{height:auto;max-width:100%}embed,iframe,object{max-width:100%}.alignleft{float:left;margin:0 1em 1em 0}.alignright{float:right;margin:0 0 1em 1em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}.clear{clear:both}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px!important;overflow:hidden;padding:0;position:absolute!important;width:1px!important;word-wrap:normal!important}.bypostauthor{}.gallery-caption{}.sticky{}.wp-caption-text{}.wp-caption{}CSS Reset for WordPress
Even though the User Agent Stylesheet CSS across modern browsers is fairly consistent, I sometimes like to start from scratch when writing CSS. The CSS Reset below makes for a clean slate to start CSS from, while sprinkling in a few WordPress-specific tags and making media items responsive. Some of it might be a bit overkill or heavy-handed, but it’s a solid start that works for me and it’s only 775 bytes.
This is my current CSS Reset for WordPress.
* {
vertical-align: baseline;
font: inherit;
font-size: 100%;
border: 0;
outline: 0;
padding: 0;
margin: 0;
}
html {
box-sizing: border-box;
line-height: 1;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
hr {
box-sizing: content-box;
height: 0;
}
pre,
code {
font-family: monospace, monospace;
}
strong,
b {
font-weight: 700;
}
blockquote,
q,
em,
i {
font-style: italic;
}
ins {
text-decoration: underline;
}
del,
s {
text-decoration: line-through;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,
textarea {
border: 1px solid;
border-radius: 0;
max-width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
img,
video,
audio {
display: block;
}
img,
video {
height: auto;
max-width: 100%;
}
embed,
iframe,
object {
max-width: 100%;
}This is a minified version of the code above.
*{vertical-align:baseline;font:inherit;font-size:100%;border:0;outline:0;padding:0;margin:0}html{box-sizing:border-box;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*,*:before,*:after{box-sizing:inherit}hr{box-sizing:content-box;height:0}pre,code{font-family:monospace,monospace}strong,b{font-weight:700}blockquote,q,em,i{font-style:italic}ins{text-decoration:underline}del,s{text-decoration:line-through}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}input,textarea{border:1px solid;border-radius:0;max-width:100%;-webkit-appearance:none;-moz-appearance:none}::-webkit-search-decoration{-webkit-appearance:none}img,video,audio{display:block}img,video{height:auto;max-width:100%}embed,iframe,object{max-width:100%}