WordPress 6.4 added an “Expand on click” feature to image blocks.. ..here is how i added styles for it to my themes..
/* image wp-lightbox-overlay styles */
.wp-lightbox-overlay .scrim {
background-color: rgba(0,0,0,0.9) !important;
}
.wp-lightbox-overlay .close-button {
border: 1px solid #fff !important;
background-color: #fff !important;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.wp-lightbox-overlay .close-button:hover,
.wp-lightbox-overlay .close-button:focus {
border: 1px solid #ddd !important;
background-color: #ddd !important;
outline: none;
}Styling the Editor in WordPress
By default, the Block Editor uses the browser’s default serif font and oddly sizes the monospace font in block and inline use cases. Adding custom CSS to the Editor can improve the overall post writing/editing experience.
First enqueue the CSS file using the code below in the theme’s functions.php file.
function evo_block_editor_styles() {
wp_enqueue_style( 'evo-block-editor-css', get_theme_file_uri( '/assets/css/block-editor.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'evo_block_editor_styles' );Finally, create a block-editor.css file in the directory as registered in the function above, and use the CSS styles below.
@import url('https://rsms.me/inter/inter.css');
@import url('https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono-nl.css');
.editor-post-title.editor-post-title__block,
.block-editor-block-list__block {
font-family: Inter, sans-serif;
}
.wp-block-cover__inner-container {
color: #ffffff !important;
}
blockquote {
border-left: solid;
padding-left: 0.938rem;
}
.wp-block-pullquote blockquote {
border-left: none;
}
.wp-block-pullquote {
border-top: solid;
border-bottom: solid;
margin: 2rem 0;
padding: 0;
}
.wp-block-pullquote__citation {
text-transform: initial !important;
}
.wp-block-paragraph code,
.wp-block-preformatted,
pre.wp-block-code {
box-sizing: border-box;
font-family: 'JetBrains Mono', monospace;
font-variant-ligatures: none;
background: #e7e7e7 !important;
color: #000000 !important;
border-radius: 0.25rem;
font-size: 0.875rem;
padding: 1rem;
}
.wp-block-paragraph code {
font-size: 0.938rem;
padding: 0.25rem;
}
.wp-block-verse {
box-sizing: border-box;
background: #e7e7e7 !important;
color: #000000 !important;
border-radius: 0.25rem;
font-size: 0.938rem;
padding: 1rem;
}
@media (min-width: 1601px) {
.wp-block {
max-width: 800px;
}
}The CSS above basically normalizes the Editor, and could be expanded to infinite styles to match your theme or general composing preferences.
Optimizing Jetpack Custom CSS
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;
}Optimizing Comments in WordPress
Comments are a versatile feature for allowing discussions on posts and pages in WordPress. I currently don’t have comments open on my blog posts, but I want my themes to support them dynamically. The method below optimizes comments to conditionally display and enqueue styles on posts/pages only when comments are open or exist.
First add or update the theme support for comments in the theme’s functions.php file, within the after_setup_theme hook, with the code below.
add_theme_support( 'html5', array(
'search-form',
'comment-form', // support for the comment form
'comment-list', // support for the comment list
'gallery',
'caption',
'script',
'style',
) );Then register and enqueue a CSS file specifically for the comments in the theme’s functions.php file using the code below. Note that this conditionally enqueues the CSS file on each post/page only if comments are open, or if comments exist after comments are closed.
<?php
// register optimized styles
function evo_register_optimized_styles() {
wp_register_style( 'comments-optimized', get_template_directory_uri() . '/assets/css/comments.css' );
}
add_action('init', 'evo_register_optimized_styles');
// enqueue optimized styles
function evo_enqueue_optimized_styles() {
if ( is_singular() && comments_open() || is_singular() && get_comments_number() ) {
wp_enqueue_style( 'comments-optimized' );
}
}
add_action( 'wp_enqueue_scripts', 'evo_enqueue_optimized_styles' );Then create a comments.css file in the directory as registered in the function above. A simplified example of the CSS uses the styles below.
.comments-area {
margin: 2rem 0;
}
.comment-body {
margin: 1.5rem 0;
}
.comment-metadata,
.comment-reply-link,
.comment-notes,
.logged-in-as {
font-size: 0.875rem;
}
.comment-author .avatar {
border-radius: 18px;
}
.children {
margin-left: 3rem;
}
.comment-form label {
display: block;
}Then create a comments.php file in root theme directory like the example below. Note that this conditionally displays the comments section to each post/page only if comments are open, or if comments exist after comments are closed.
<?php if ( comments_open() || get_comments_number() ) { ?>
<?php if ( post_password_required() ) { return; } ?>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h3 class="comments-title">
<?php comments_number( 'No Comments', 'One Comment', '% Comments' ); ?>
</h3>
<ol class="comment-list">
<?php wp_list_comments( array( 'style' => 'ol', 'avatar_size' => 36, ) ); ?>
</ol>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav class="comment-navigation">
<h5><?php previous_comments_link( 'Older Comments ❯' ); ?></h5>
<h5><?php next_comments_link( '❮ Newer Comments' ); ?></h5>
</nav>
<?php endif; ?>
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<h4 class="no-comments"><?php _e( 'Comments are closed.' ); ?></h4>
<?php endif; ?>
<?php endif; ?>
<?php comment_form(); ?>
</div>
<?php } ?>Finally, add comments in the loop on single/page PHP files with the standard template tag below, typically at the bottom of the main content area.
<?php comments_template(); ?>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.