Gutenberg in Genesis

Neither the parent Genesis nor any of the official StudioPress child themes are Gutenberg-ready as of today.

No doubt this is going to change but in the meantime, we can add support for Gutenberg in our Genesis themes and style the blocks to match the rest of the site on the frontend.

This article provides the steps to get Genesis Sample 2.6.0 Gutenberg-ready.

Live Demo

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1

Install and activate Gutenberg plugin if you haven’t already.

[Optional] Add a page having Gutenberg test content with several blocks.

You might want to scroll down and select Full content layout in the Layout Settings metabox if you do not want sidebars.

Step 2

Let’s add theme support for wide and full Gutenberg blocks and a gutenberg-page class to the pages using Gutenberg.

Add the following in child theme’s functions.php:

// Adds theme support for wide and full Gutenberg blocks.
add_theme_support( 'align-wide' );

/**
 * Adds a `gutenberg-page` class to the pages using Gutenberg.
 */
add_action(
    'body_class', function( $classes ) {
        if ( function_exists( 'the_gutenberg_project' ) && gutenberg_post_has_blocks( get_the_ID() ) ) {
            $classes[] = 'gutenberg-page';
        }

        return $classes;
    }
);

[Optional] In my test site I have loaded Noto Serif Google font and applied it for headings and blockquote content in the CSS.

If you want to do the same, replace

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700',
    array(),
    CHILD_THEME_VERSION
);

with

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700|Noto+Serif:400,400i,700,700i',
    array(),
    CHILD_THEME_VERSION
);

in functions.php.

Step 3

Add the following in child theme’s style.css and modify to suit:

.gutenberg-page .entry-header {
    margin-bottom: 60px;
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Noto Serif", serif;
    font-weight: 700;
}

blockquote,
cite,
em,
i {
    font-family: "Noto Serif", serif;
}

h3 + h2,
.has-top-margin {
    margin-top: 60px;
}

p.wp-block-subhead,
.entry-content .wp-block-cover-image,
.wp-block-image,
.entry-content ul.wp-block-gallery,
.wp-block-text-columns,
.entry-content .wp-block-button,
blockquote.wp-block-quote,
.entry-content .wp-block-quote.is-large,
.wp-block-code,
.wp-block-audio,
.entry-content .wp-block-video,
.wp-block-preformatted,
.wp-block-verse,
.wp-block-table,
.wp-block-categories,
.entry-content .wp-block-latest-posts,
.wp-block-embed {
    margin-bottom: 60px;
}

.wp-block-columns {

    /* not using because of overflow */

    /* grid-gap: 40px; */

    margin-bottom: 60px;
}

.wp-block-columns .wp-block-image {
    margin-bottom: 0;
}

@media only screen and (min-width: 501px) {

    .wp-block-columns > *:not(.layout-column-1) {
        margin-left: 40px;
    }
}

.wp-block-columns p:last-child,
.wp-block-text-columns p:last-child {
    margin-bottom: 0;
}

.entry-content .alignwide {
    width: auto;
    max-width: 1000%;
    margin-right: calc(25% - 25vw);
    margin-left: calc(25% - 25vw);
}

.entry-content .alignfull {
    width: auto;
    max-width: 1000%;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.entry-content .alignwide > *,
.entry-content .alignfull > * {
    width: 100%;
}

.entry-content ul.wp-block-gallery {
    margin-left: 0;
}

.entry-content .wp-block-button__link:not(.has-background) {
    background-color: #333;
}

.entry-content .wp-block-button .wp-block-button__link {
    padding: 15px 30px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.entry-content .wp-block-button .wp-block-button__link:hover,
.entry-content .wp-block-button .wp-block-button__link:focus {
    background-color: #0073e5;
}

blockquote {
    margin-left: 0;
}

blockquote::before {
    display: none;
}

blockquote p {
    margin-bottom: 16px;
}

.wp-block-quote:not(.is-large) {
    padding-left: 16px;
    border-left: 4px solid #000;
}

.wp-block-quote cite {
    font-weight: bold;
}

.entry-content .wp-block-quote.is-large cite,
.entry-content .wp-block-quote.is-large footer {
    display: block;
}

code,
kbd,
pre,
samp {
    font-size: 16px;
}

.entry-content code {
    display: block;
    padding: 11px 22px;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    background-color: transparent;
}

.entry-content .wp-block-table {
    display: table;
}

tbody {
    border-bottom: none;
}

td {
    border: 1px solid #444;
}

td:first-child,
th:first-child {
    padding-left: 8px;
}

.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter {
    text-align: left;
}

@media only screen and (max-width: 500px) {

    .entry-content .wp-block-columns {
        display: block;
    }

    .wp-block-columns > *:not(:last-child) {
        margin-bottom: 20px;
    }

    .wp-block-text-columns {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .entry-content .wp-block-text-columns.columns-2 .wp-block-column {
        width: 100%;
    }

    .entry-content .wp-block-text-columns .wp-block-column {
        margin: 0;
    }

    .wp-block-text-columns .wp-block-column:not(:last-child) {
        margin-bottom: 40px;
    }
}

References:

https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/

https://davidsword.ca/development/check-current-page-uses-gutenberg-classic-editor/