Add theme support for Gutenberg

[seothemes]

@bgardner mentioned testing out Gutenberg with the beta version of the theme. Here are some suggestions based on what we've done to add basic support in our newer themes.

Alignwide and alignfull classes

Gutenberg has 2 new alignment classes that are not enabled by default. Theme support can be added for these new classes quite easily:

// Enable theme support for Gutenberg wide images.
add_theme_support( 'gutenberg', array(
	'wide-images' => true,
) );

Example - https://github.com/seothemes/genesis-starter/blob/master/functions.php#L82

Block styling

Gutenberg's blocks require some additional CSS, especially if theme support for the alignwide and alignfull classes is enabled. I'd suggest creating a new section in the stylesheet, just below the WordPress section containing all of the Gutenberg specific styles - https://github.com/copyblogger/genesis-sample/blob/beta/style.css#L918.

The CSS can be taken straight from the Gutenberg starter theme (with some minor adjustments) - https://github.com/WordPress/gutenberg-starter-theme/blob/master/css/blocks.css

Here's an example of what we're currently using - https://github.com/seothemes/genesis-starter/blob/master/assets/styles/_common.scss#L164

Considerations

The alignfull class is intended to stretch the full width of the screen. This doesn't work well on page layouts with a sidebar. One solution for this is to only allow alignfull styling on full-width layouts and fallback to alignwide styling on sidebar layouts.

[dreamwhisper]

@nickcernis and I were discussing adding this earlier today.

Edited to finish my thought: but haven’t determined whether or not to do it yet. We may wait.

[seothemes]

Also worth noting here that the default Gutenberg colors can be set. Something like this might be useful:

// Enable theme support for Gutenberg wide images.
add_theme_support( 'gutenberg', array(
    'wide-images' => true,
    'colors'      => array(
        genesis_sample_customizer_get_default_link_color(),
        genesis_sample_customizer_get_default_accent_color(),
    ),
) );

[bgardner]

I have plans ideas around Gutenberg and how that will apply to Genesis Sample, but since 2.6 is already in Beta with the release of Genesis relatively imminent, I'd like to hold off any Gutenberg specific stuff until the next version.

[nickcernis]

Just to add a link to the most helpful resource I've found for adding support for Gutenberg to themes, from the Automattic team:

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

It essentially covers everything @seothemes suggests here, which all seem like smart additions for a future release of Sample.

They also have reference themes here:

https://github.com/Automattic/fashion-blog
https://github.com/Automattic/handicraft
https://github.com/Automattic/ohana

[bgardner]

@seothemes

Ok, so consider this:

// Enable theme support for Gutenberg wide images.
add_theme_support( 'gutenberg', array(
    'wide-images' => true,
    'colors'      => array(
        genesis_sample_customizer_get_default_link_color(),
        genesis_sample_customizer_get_default_accent_color(),
    ),
) );

That works to display the default colors, but when you go to the customizer and change the default link and accent colors, those will not show up in the Gutenberg color palette. (Default remains.)

I thought of using:

genesis_sample_link_color
genesis_sample_accent_color

But that just throws the WSOD.

[bgardner]

Pinging @nickcernis @nathanrice on this as well.

[cjkoepke]

@bgardner Why not something like this:

add_theme_support( 'gutenberg', array(
    'wide-images' => true,
    'colors'      => array(
        get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ),
        get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ),
    ),
) );```

[bgardner]

Props @cjkoepke @seothemes

[nickcernis]

Gutenberg theme support for Genesis Sample is now feature-complete in the beta branch:

• Editor styles match front-end styles for common blocks. https://demo.studiopress.com/genesis-sample-beta/block-unit-test/
• Brian has added theme support for:
  • align-wide blocks for full and wide blocks.
  • editor-font-sizes for pre-selected paragraph font size.
  • editor-color-palette for on-brand colors.
• Column blocks are styled and responsive (but still labelled “beta” in Gutenberg, so may change).

I have documented all current quirks and workarounds with Gutenberg as it pertains to theme design in a Genesis Sample Wiki page here, which may be helpful for other Genesis child theme developers.

The current optimistic timeline for WordPress 5.0 with Gutenberg is 19 November 2018, falling back to 22 January 2019 if that release slips by nine days or more.