New Look: WordPress Gutenberg & Twenty Nineteen Theme

June 2019 Update: No longer using the Twenty Nineteen theme, it’s just too basic.

I’ve recently updated the design of this website using a new theme for WordPress, Twenty Nineteen. This is WordPress’s default theme for this year, and it is specifically designed for WordPress 5.0 and Gutenberg, the new WordPress editor.

The Classic WordPress editor was very simple and only allowed for very basic layout control. Because it was so lacking in features, a plethora of “page builders” were born which allowed more control over placement of content (such as responsive columns), as well as richer visual components such as pricing charts and multimedia slideshows. The old theme I used for this website, Cardinal, included one such page builder, the Swift Page Builder. Using the Cardinal theme and page builder, I could create a very professional-looking site with relative ease.

Unfortunately, using a page builder for each post meant that I was tied in to the Cardinal theme system. The columns, image galleries, lightboxes and other components that made up each post and page of my website were encoded in a special page builder markup that could not be transferred or imported into any other theme. It also meant that I couldn’t take advantage of WordPress importers to move my site to a system like Squarespace.

Lately, the Cardinal theme updates have been tapering off, in fact the Swift Themes website doesn’t even seem to be working any more. And I’ve noticed small bugs cropping up, perhaps due to incompatibilities with new versions of WordPress. So it was time to switch themes, even if it meant a time-consuming process of re-writing all of my posts in some other page builder system.

Luckily, recently WordPress released the new Gutenberg editor, which is basically a page builder. Centered on the concept of Blocks, Gutenberg allows developers to make reusable, rich components for building web pages.

So, this weekend I decided to take the plunge and re-write this website using Gutenberg with the Twenty Nineteen theme. Unfortunately I came across a number of issues with each system.

Twenty Nineteen Modifications

First, I made a child theme for Twenty Nineteen. Second, I made the following Theme CSS customizations for Twenty Nineteen:

/* Set width of theme to 1024 */

@media only screen and (min-width: 1024px) {
    .entry .entry-content>*,
    .entry .entry-summary>* {
        max-width: none;
    }
}


/* neutral background with lower contrast */

body {
    background-color: #eee;
    color: #111;
    max-width: 1024px;
}


/* Adjust spacing between top nav and content */

@media only screen and (min-width: 768px) {
    .site-header {
        padding: 3rem 0 4rem 0;
    }
    .entry .entry-header {
        margin-top: 0;
    }
    .hfeed .entry .entry-header {
        margin-top: 0;
    }
}


/* make search form inline */

.search-form .search-submit {
    display: inline;
}


/* Adjust search form width */

.widget_search .search-field {
    width: 160px;
}


/* style main nav menu font */

.main-navigation .main-menu>li>a {
    font-weight: 400;
    margin-right: 0.6rem;
    line-height: 2rem;
}


/* Remove annoying hr "nub". */

.entry .entry-title:before {
    content: none;
}

.widget .widget-title:before {
    content: none;
}


/* Add divider line back in */

.entry-header {
    border-top: 1px solid;
    border-color: #767676;
    padding-top: 40px;
}

.site-footer .widget-area {
    border-top: 1px solid;
    border-color: #767676;
    padding-top: 40px;
}


/* SITE TITLE */

.site-title {
    font-family: "Lora", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
    font-size: 1.6875em;
}


/* Titles */

@media only screen and (min-width: 768px) {
    .entry-title,
    .not-found .page-title,
    .error-404 .page-title,
    .has-larger-font-size,
    h2 {
        font-size: 2em;
    }
}


/* CAPTIONS */

.entry .entry-content .wp-block-image figcaption {
    color: #444;
}

.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
    position: absolute;
    bottom: initial;
    background: none;
    color: #444;
}

.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figure {
    display: initial;
    margin-bottom: 50px;
}


/* Margins between entries */

.entry {
    margin-top: calc(5 * 1rem);
}


/*---Hide reCaptcha v3 visible seal---*/

.grecaptcha-badge {
    opacity: 0 !important;
}


/* make code more visible */

.wp-block-code {
    color: #111;
    background-color: #dedede;
    border: 1px solid #111;
}

.entry .entry-content .wp-block-code code {
    font-size: .925em;
}

@media (max-width: 768px) {
    /* Resize body font for small screens */
    body {
        font-size: .875rem;
        line-height: 1.6;
    }
    .site-title {
        font-size: 1.3125em;
    }
    .site-description,
    .main-navigation,
    .nav-links,
    .page-title,
    .page-description,
    .comment-author .fn,
    .no-comments,
    h2.author-title,
    p.author-bio,
    h4 {
        font-size: 1em;
    }
    /* Make gallery columns responsive. */
    .wp-block-gallery.columns-2 {
        display: block;
    }
    .wp-block-gallery.columns-2 .blocks-gallery-item {
        width: 100%;
    }
    .wp-block-gallery.columns-3 {
        display: block;
    }
    .wp-block-gallery.columns-3 .blocks-gallery-item {
        width: 100%;
    }
    .entry .entry-footer {
        margin: 1rem 1rem 1rem;
    }
}

I also made some modifications to functions.php in order to load a Google font (Lora) and remove the responsive menu button that I found irritating:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

/* Add Lora Google Font */
function wpb_add_google_fonts() {
        //wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Lora:400,400i,700|Mo
ntserrat:400,400i,700', false ); 
        wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Lora:400,400i,700', fa
lse );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

/* Remove responsive menu button & hider. */
add_action( 'wp' , function(){
    remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 );
    remove_filter( 'walker_nav_menu_start_el', 'twentynineteen_add_dropdown_icons', 10, 4 );
    remove_filter( 'nav_menu_link_attributes', 'twentynineteen_nav_menu_link_attributes', 10, 4 );
    remove_filter( 'wp_nav_menu_objects', 'twentynineteen_add_mobile_parent_nav_menu_items', 10, 2 );
});

The category and search page for this theme were just showing excerpts of posts, which means no images were loading, either. I decided to show a “normal” post list view, so I had to copy over search.php and archive.php to my child theme and change the following:

// Retrieve the entire content so we see images as well in search and category results:
// get_template_part( 'template-parts/content/content', 'excerpt' );
get_template_part( 'template-parts/content/content', 'content' );

To be honest I didn’t have the greatest time updating to Gutenberg. The page-building Blocks are not great, less useful than the components I was used to in the Swift page builder. And I was very surprised that the image gallery columns are not responsive. (In other words, on mobile screens a three-column image gallery stays three columns, making the images very small, rather than collapsing down to a single-column layout with one image per row.

I was expecting more from WordPress. I think that in order to compete with services like Squarespace, WordPress should offer at least three very well-maintained and powerful themes to choose from, rather than a single theme each “year” that is very barebones.