Upgrading a classic theme for Gutenberg

With the release of WordPress 5.0 in early December 2018 web developers were forced to make a decision, install the Classic Editor plugin and continue to enjoy the post editor we’ve used for years or jump the new block editor experience. However, I quickly found a few of my themes were not ready.

I decided to challenge myself this weekend by taking the longtime defunct Default Theme also known as Kubrick and make it Gutenberg ready.

Kubrick needed surprisingly few tweaks to function properly.

After replacing defunct to include the sidebar all that was needed was a few minor CSS updates and the front end looked just as it did in 2010 when this workhorse of a theme was last updated.

The left and right margins adjusted to match the header and footer’s design

With the front end working properly I was ready to override the post editor’s default appearance.

Gutenberg’s default appearance

After some code research I enqueued custom CSS to override the post editor’s styles.

now the post editor reflects the layout and design of Kubrick’s post content area. Right down to the painfully small 13px text.

The final results almost perfectly mimic the front end.

The text is justified, I assumed it was left aligned… Woops.

And now… for the code

<?php
// Added to the bottom of functions.php
// Enqueue CSS and JS
require_once( __DIR__ . '/lib/enqueue-assets.php' );
functions.php
<?php
// enqueue-assets.php
namespace Default_Theme\Theming;
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_block_editor_assets' );
/**
 * Enqueue theme CSS in Editor only.
 */
function enqueue_block_editor_assets() {
        wp_enqueue_style(
                'kubrick-editor-css',
                get_stylesheet_directory_uri() . '/blocks.css',
                null,
        time() // Changedd for production
    );
}
enqueue-assets.php
/* * 
 * blocks.css 
 * styles the block editor for the 2010 Default Theme "Kubrick"
 * */

.wp-block,
.editor-post-title__block .editor-post-title__input {
        font-family: "Liberation Sans", sans-serif;
        max-width: 480px;
        
}

.wp-block,
.wp-block-paragraph.editor-rich-text__tinymce {
        font-family: "Liberation Sans", sans-serif;
        font-size: 13px;
        line-height: 1.333;
}
.editor-post-title__block .editor-post-title__input {
        font-size: 19px;
        font-weight: 700;
}
blocks.php

Kubrick still has its various front end flaws. But in a couple hours of research and past practice I was able to prepare an old theme for a new life post Gutenberg.

Resources

Published by Joseph Dickson

a web developer working in higher education and fan of WordPress.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.