micro.e33.io

Jetpack adds a lot of features and performance options to self-hosted WordPress sites, along with it’s own built-in CSS styling. Most of this styling is fairly universal, but some of the top/bottom margins and other elements don’t always blend smoothly with existing site styling. Adding Jetpack-specific styling to an existing stylesheet is fine, but it can be a bit bloated and unneeded if Jetpack isn’t installed on a site. The method below optimizes a custom Jetpack CSS stylesheet to only load if Jetpack is installed and active.

First register and enqueue a CSS file specifically for Jetpack in the theme’s functions.php file using the code below. Note that this conditionally enqueues the CSS file only if Jetpack is active.

<?php
// register optimized styles 
function evo_register_optimized_styles() {
    wp_register_style( 'jetpack-optimized', get_template_directory_uri() . '/assets/css/jetpack.css' );
}
add_action('init', 'evo_register_optimized_styles');
// enqueue optimized styles 
function evo_enqueue_optimized_styles() {
    if ( in_array( 'jetpack/jetpack.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
		wp_enqueue_style( 'jetpack-optimized' );
	}
}
add_action( 'wp_enqueue_scripts', 'evo_enqueue_optimized_styles' );

Then create a jetpack.css file in the directory as registered in the function above. Below is a basic example of some Jetpack-specific custom CSS.

*[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;
}
.sharedaddy {
	padding-top: 0.75rem !important;
}
.jetpack-likes-widget-wrapper iframe {
	margin-top: 0.5rem !important;
}
.sd-title {
	margin-bottom: 0 !important;
}
.sd-content ul li {
	line-height: 0 !important;
	margin-right: 0.25rem !important;
}
.jetpack-comment-likes-widget-wrapper {
	margin-bottom: 0.25rem;
}
.jetpack-comment-likes-widget-wrapper iframe {
	background: #f8f8f8;
	border: 1px solid #cccccc;
	box-shadow: 0 1px 0 rgba(0,0,0,.08);
	border-radius: 3px;
	height: 26px;
	width: 62px;
	margin-top: 3px;
    padding: 1px 0 0 5px;
}
.jetpack-comment-likes-widget-wrapper span.comment-like-feedback {
	display: block;
	font-size: 11px;
}

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.

In a previous post I covered how I added Prism syntax highlighter to this blog to style the posted code blocks. It really makes a world of difference in the readability of code within the posts on here, so I decided to make my own Prism theme. I based my Monokai Mod theme off of the classic Monokai theme, but I shifted the grey tones and softened the colors. The theme is live on the blog now, and the CSS is posted below. I’ll update this post over time, as the theme will most likely evolve.

/*
Monokai Mod - a theme for PrismJS
URL: https://github.com/e33io/webdev/blob/main/prism.css
For WordPress, copy the theme file here: assets/prism/prism.css, and use the
Code Syntax Block plugin (https://wordpress.org/plugins/code-syntax-block)
*/
:root {
	--mm-red: #fc618d;
	--mm-orange: #fd9353;
	--mm-yellow: #fce566;
	--mm-green: #7bd88f;
	--mm-cyan: #53e1e2;
	--mm-blue: #78c5eb;
	--mm-pink: #ff79c6;
	--mm-purple: #948ae3;
	--mm-grey12: #1e1e1e;
	--mm-grey15: #252525;
	--mm-grey21: #353535;
	--mm-grey30: #4d4d4d;
	--mm-grey33: #535353;
	--mm-grey42: #6c6c6c;
	--mm-grey50: #7f7f7f;
	--mm-grey67: #aaaaaa;
	--mm-grey80: #cccccc;
	--mm-grey87: #dddddd;
	--mm-grey93: #eeeeee;
}
code[class*="language-"],
pre[class*="language-"] {
	color: var(--mm-grey93);
	background: none;
	font-family: var(--monospace, monospace);
	font-size: 0.937rem;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	tab-size: 4;
	hyphens: none;
}
/* code blocks */
pre[class*="language-"] {
	padding: 1rem;
	overflow: auto;
	border-radius: 0;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: var(--block-color, var(--mm-grey15));
}
/* inline code */
:not(pre) > code[class*="language-"] {
	border-radius: 0.25rem;
	padding: 1px 4px;
	white-space: normal;
}
/* minified code blocks */
pre.minified code {
	word-wrap: break-word;
	word-break: break-all;
	white-space: pre-wrap;
}
/* scrollbars */
pre::-webkit-scrollbar {
	height: 0.66rem;
	width: 0.66rem;
}
pre::-webkit-scrollbar-thumb {
	background-color: var(--mm-grey42);
}
pre::-webkit-scrollbar-track {
	background-color: var(--mm-grey30);
}
/* tokens */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--mm-grey42);
}
.token.punctuation {
	color: var(--mm-grey80);
}
.namespace {
	opacity: 0.7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: var(--mm-blue);
}
.token.boolean,
.token.number {
	color: var(--mm-purple);
}
.token.selector,
.token.attr-name,
.token.char,
.token.builtin,
.token.inserted {
	color: var(--mm-green);
}
.token.string {
	color: var(--mm-yellow);
}
.token.operator,
.token.entity,
.token.url,
.token.variable {
	color: var(--mm-cyan);
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: var(--mm-green);
}
.token.keyword,
.language-css .token.important {
	color: var(--mm-red);
}
.token.regex,
.token.important {
	color: var(--mm-orange);
	font-weight: 400;
}
.token.italic,
.token.comment {
	font-style: italic;
}
.token.entity {
	cursor: help;
}
.prism-titlename {
	float: right;
	margin: -0.85rem -0.75rem;
	font-size: 0.66rem;
	text-transform: uppercase;
	color: var(--mm-grey50);
}

Note that (in the theme above) a lot of the token classes are grouped to single colors, so the color pallet could be easily expanded if needed.

I’ve updated the site to use Prism syntax highlighter for styling posted code blocks. This free and open source project is built by a community of contributors and is super-configurable, lightweight and easy to use. It’s a great option to make code blocks easier to read.

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

To use Prism, I installed the Code Syntax Block plugin so I can simply pick the corresponding code language in the default Code Blocks in each blog post.

The plugin will check for a custom theme file here: assets/prism/prism.css, and use that file if it exists. Add your custom file in that location, and it will be used.