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

Disable URL Guessing in WordPress

Placing the following PHP code snippet below in your theme’s funtions.php file will disable a WordPress feature that attempts to automatically redirect a bad url to an actual post or page with a similar url.

Please note, if there are any broken links to your website or it’s pages that benefit from this feature it will now lead to a standard 404 error page.

/* Disable URL guessing - https://www.bloggersignal.com/stop-wordpress-from-guessing-urls */
add_filter('redirect_canonical', 'pz_no_redirect_404');

function pz_no_redirect_404($redirect_url)
{
    if (is_404()) {
        return false;
    }
    return $redirect_url;
}

The above was found in a post at https://www.bloggersignal.com/stop-wordpress-from-guessing-urls

Adding alt text to a post thumbnail

While working on a custom navigation using WP_Query and has_post_thumbnail for an icon I ran into an accessibility concern. By default, the_post_thumbnail will not display an alt tag when rendered in the browser. In the following code snippet I add an alt tag using the image file’s title.

<?php

// The Post Array
$args = array(
	'category_name'	=> 'disasters, emergency-procedures',
	'orderby'	=> 'title',
	'order'		=> 'ASC',
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo '<a href="' . get_permalink() . '">'; 
		echo '<article class="emergency-icon">';
			// check if the post has a Post Thumbnail assigned to it.
			if ( has_post_thumbnail() ) {

				the_post_thumbnail(
					array(40,40),
					array('alt' => get_the_title() )
				);
			}

			echo '<span class="entry-title">' . get_the_title() . '</span>';
		echo '</article>';
		echo '</a>';
	}
	/* Restore original Post Data */
	wp_reset_postdata();
} else {
	// no posts found
}

In short the code above starts with a query that looks for categories slugged”disasters” and emergency-procedures then orders the results by title in ascending order.

Customized html is then wrapped around the results along with an alt attribute taken from the image’s title then included within the img tag.

Technically speaking, it would be more appropriate to use the alt field set for the image. However, alt text has to be generated manually where as the title is automatically created when media is uploaded to the library.

Removing specific Gutenberg core blocks and options

As I eagerly await WordPress 5.0 and its integration of the Gutenberg block editor there were several features that I found troubling from the standpoint of a web designer and developer. All of which are the result of too many options for the end user.

I work in an enterprise environment so many of these features would be fantastic for a blog, but can easily get in the way of a higher education website.

  1. Limit the available core blocks to only what’s needed.
  2. Remove the ability for users to set almost any font size in the paragraph tool.
  3. Remove ability for users to set their own text and background colors.

Limit the available core blocks

function pz_allowed_block_types( $allowed_block_types, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $allowed_block_types;
    }
    return array( 
	'core/paragraph',
	'core/image',
	'core/gallery',
	'core/html',
	'core/list',
	'core/heading',
	'core/subhead',
	'core/quote',
	'core/audio',
	'core/cover-image',
	'core/file',
	'core/video',
	'core/table',
	'core/verse',
	'core/freeform',
	'core/preformatted',
	'core/pullquote',
	'core/button',
	'core/text-columns',
	'core/next-page',
	'core/separator',
	'core/spacer',
	'core/shortcode',
	'core/archieves',
	'core-embed/twitter',
	'core-embed/youtube',
	'core-embed/facebook',
	'core-embed/instagram',
	'core-embed/wordpress',
	'core-embed/spotify',
	'core-embed/flickr',
	'core-embed/vimeo',
	'core-embed/issuu',
	'core-embed/slideshare',
	);
}

add_filter( 'allowed_block_types', 'pz_allowed_block_types', 10, 2 );

Font sizes

// disable manual font sizes
add_theme_support( 'disable-custom-font-sizes' );

Remove the color palette

// disable custom colors
add_theme_support( 'disable-custom-colors' );

// remove color palette
add_theme_support( 'editor-color-palette' );

The Complete Plugin

I’m still learning all things Gutenberg Use at your own risk 🙂

<?php
/**
 * @package pz_gutenberg_settings
 * @version 1.0
 */
/*
Plugin Name: PZ Gutenberg Block Editor Settings
Plugin URI: https://www.pitzer.edu
Description: Restricts some Gutenberg block editor core features and adds customized defaults
Author: Joseph Dickson
Version: 1.0
Author URI: https://www.pitzer.edu

Allow only the following core blocks
Blog post that worked: https://rudrastyh.com/gutenberg/remove-default-blocks.html
Official Documentation: https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/
*/

function pz_allowed_block_types( $allowed_block_types, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $allowed_block_types;
    }
    return array( 
	'core/paragraph',
	'core/image',
	'core/gallery',
	'core/html',
	'core/list',
	'core/heading',
	'core/subhead',
	'core/quote',
	'core/audio',
	'core/cover-image',
	'core/file',
	'core/video',
	'core/table',
	'core/verse',
	'core/freeform',
	'core/preformatted',
	'core/pullquote',
	'core/button',
	'core/text-columns',
	'core/next-page',
	'core/separator',
	'core/spacer',
	'core/shortcode',
	'core/archieves',
	'core-embed/twitter',
	'core-embed/youtube',
	'core-embed/facebook',
	'core-embed/instagram',
	'core-embed/wordpress',
	'core-embed/spotify',
	'core-embed/flickr',
	'core-embed/vimeo',
	'core-embed/issuu',
	'core-embed/slideshare',
	);
}

add_filter( 'allowed_block_types', 'pz_allowed_block_types', 10, 2 );

// disable manual font size slider and input box
add_theme_support( 'disable-custom-font-sizes' );

// disable custom colors
add_theme_support( 'disable-custom-colors' );

// remove color palette
add_theme_support( 'editor-color-palette' );

// adjust preset font sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' => __( 'small', 'themeLangDomain' ),
		'shortName' => __( 'S', 'themeLangDomain' ),
		'size' => 13,
		'slug' => 'small'
    	),
	array(
        	'name' => __( 'Standard', 'themeLangDomain' ),
        	'shortName' => __( 'D', 'themeLangDomain' ),
        	'size' => 16,
        	'slug' => 'standard'
	),	
	array(
        	'name' => __( 'medium', 'themeLangDomain' ),
        	'shortName' => __( 'M', 'themeLangDomain' ),
        	'size' => 20,
        	'slug' => 'medium'
	),
	array(
		'name' => __( 'large', 'themeLangDomain' ),
		'shortName' => __( 'L', 'themeLangDomain' ),
		'size' => 24,
		'slug' => 'large'
    	),
	array(
		'name' => __( 'extra large', 'themeLangDomain' ),
        	'shortName' => __( 'XL', 'themeLangDomain' ),
		'size' => 28,
		'slug' => 'extra-large'
	)
) );
?>

The above code was wrapped together from the following pages