CSS to make the Classic Editor look more like the Block Editor

readme.md

Modern Styles for the Classic Editor

Mark Root-Wiley, MRW Web Design

What

Even on sites that embrace the block editor, the Classic Editor screen may be used on post types that don't implement the post editor, such as a post type that relies heavily on ACF or similar plugins. These styles make the Classic Editor screen (without the editor) look more like the Block Editor screen.

Integration

For now, I'm not sure the best way to make integration easy, so I'm starting with a gist. Eventually this might turn into a full-blown repo. See faux-block-editor.php for one suggested implementation for how to use these.

To use these styles in a standalone plugin:

1. Create a plugin folder called faux-block-styles and put the stylesheet and PHP file into them.
2. Edit the plugin's PHP file to only target the post types you want.
3. Activate and enjoy!

You might also choose to integrate these into an existing plugin or theme depending on how your site is build.

If this saved you an hour on a paid project…

You can buy me my next coffee or beer! 🍻

Contributions Welcome!

If you can make these styles better, get in touch with your suggestions.

Screenshots

Changelog

1.1.0 (February 10, 2022)

• Add new styles for handling metaboxes in the body
• Improve styles of consecutive metaboxes, including when some are "Seamless" (ACF setting)
• Style "Set Featured Image" link to match block editor
• Increase title size to match block editor
• Increase similarity of metabox headers (font-weight, hover, cursor)
• Include ACF-related styles with general stylesheet. Fix missing .faux-block-editor selectors

1.0.0 (February 10, 2022)

• Gist posted

Todos

• Ongoing: Polish and attention to detail
• Only load styles where needed
• Test with additional sidebar meta boxes
• Test with metaboxes in the body

faux-block-editor.css

/**
 * faux-block-editor.css v1.1
 *
 * Styles to make the Classic Editor screen appear more like the Block Editor
 *
 * Expects the class "faux-block-editor" on any screen that should use these styles
 */

.faux-block-editor {
	overflow-x: hidden;
}

.faux-block-editor #wpwrap,
.faux-block-editor #wpcontent {
	background: #fff;
}

.faux-block-editor .wrap {
	margin-right: 0;
}

.faux-block-editor #wpbody-content {
	padding-bottom: 0;
}

.faux-block-editor .wp-heading-inline {
	padding: 5px 0 15px;
}

.faux-block-editor .wp-header-end {
	visibility: visible;
	border: 0;
	height: 1px;
	background-color: #e0e0e0;
	margin: 0 0 0 -22px;
	width: calc( 100% + 22px );
}

/* Post Title */
.faux-block-editor #titlediv #title-prompt-text {
	color: #787b7e;
}
.faux-block-editor #titlediv #title-prompt-text,
.faux-block-editor #titlediv #title {
	font-size: 42px;
	height: 1.5em;
	line-height: 1;
	border-color: #ddd;
}

/* Body */
.faux-block-editor #poststuff {
	padding-top: 0;
}

.faux-block-editor #poststuff h2 {
	padding: 16px;
}

.faux-block-editor #post-body {
	display: grid;
	grid-template-columns: 1fr 280px;
	grid-template-rows: auto 1fr;
	grid-template-areas: 'body sidebar'
						 'meta sidebar';
	grid-gap: 0 20px;
	margin-right: 0 !important;
}

.faux-block-editor #post-body-content {
	grid-area: body;
	margin-top: 42px;
}

/* All Metaboxes (sidebar and body) */
.faux-block-editor .postbox {
	margin-bottom: 0;
	border-color: #e0e0e0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

/* Restore Border for Metabox following a seamless metabox */
.faux-block-editor .seamless + .postbox {
	margin-top: 20px;
	border-top: 1px solid #e0e0e0;
}

.faux-block-editor .postbox-header {
	border-bottom-color: #e0e0e0;
}
.faux-block-editor .postbox-header:hover {
	background-color: rgb(240, 240, 240);
}

.faux-block-editor .postbox-header .hndle {
	font-weight: normal;
	cursor: pointer;
}


/* Right Sidebar */
.faux-block-editor #postbox-container-1 {
	grid-area: sidebar;
	border-left: 1px solid #e0e0e0;
}

.faux-block-editor #major-publishing-actions {
	border: 0;
	background: transparent;
}

/* Hide Dashicons in Post Box */
.faux-block-editor #post-body .misc-pub-post-status::before,
.faux-block-editor #post-body #visibility::before,
.faux-block-editor #post-body #timestamp::before {
	display: none;
}

/* Featured Image */
.faux-block-editor #set-post-thumbnail {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	background-color: #f0f0f0;
	min-height: 90px;
	line-height: 20px;
	color:  inherit;
	text-decoration: none;
}
.faux-block-editor #set-post-thumbnail:hover,
.faux-block-editor #set-post-thumbnail:focus {
	background: #ddd;
	color: #1e1e1e;
}

/* Body */
.faux-block-editor #postbox-container-2 {
	grid-area: meta;
}

/* Meta Boxes in Body */
.faux-block-editor #postbox-container-2 .postbox:not(.seamless) {
	margin-inline: -20px;
}

/* Footer */
.faux-block-editor #wpfooter {
	display: none;
}

/* All Inputs */
.faux-block-editor input[type="color"],
.faux-block-editor input[type="date"],
.faux-block-editor input[type="datetime-local"],
.faux-block-editor input[type="datetime"],
.faux-block-editor input[type="email"],
.faux-block-editor input[type="month"],
.faux-block-editor input[type="number"],
.faux-block-editor input[type="password"],
.faux-block-editor input[type="search"],
.faux-block-editor input[type="tel"],
.faux-block-editor input[type="text"],
.faux-block-editor input[type="time"],
.faux-block-editor input[type="url"],
.faux-block-editor input[type="week"],
.faux-block-editor select,
.faux-block-editor textarea {
	padding: 6px 8px;
	border-radius: 2px;
}

/* Select2 */
.faux-block-editor .select2-container--default .select2-selection--single {
	border-radius: 2px;
	border-color: 1px solid #8c8f94;
	height: auto;
}
.faux-block-editor .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 6px 8px;
	line-height: 1.4;
	min-height: 30px;
	box-sizing: border-box;
}

faux-block-editor.php

<?php
/*
Plugin Name: Faux Block Editor
Plugin URI: https://gist.github.com/mrwweb/a4dbe266a2993f982800a51c19a4446e
Description: Add styles to Classic Editor screens to make them look more like the block editor
Version: 1.1
Author: Mark Root-Wiley
Author URI: https://MRWweb.com
*/
namespace MRW\FauxBlockEditor;

add_filter( 'admin_body_class', __NAMESPACE__ . '\admin_body_class' );
/**
 * Add the `faux-block-editor` class to the body element of a post type's editor screen
 */
function admin_body_class( $classes ) {

	$screen = get_current_screen();

	if( ! $screen->is_block_editor && 'my_post_type' === $screen->id ) {
		$classes .= ' faux-block-editor ';
	}

	return $classes;

}

add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\enqueue_admin_styles' );
function enqueue_admin_styles() {
	
	wp_enqueue_style(
		'faux-block-editor',
		plugins_url( 'faux-block-editor.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'faux-block-editor.css' )
	);

}