Donโ€™t Be Afraid

of Gutenberg

ย 

ย 

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Where is Gutenberg Now?

  • v3.9.0 released 4 days ago
  • Over 450k tracked downloads
  • 6,264ย posts created yesterday*

  • High Growth since WP v4.9.8

  • https://gutenstats.blog/

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Where is Gutenberg Now?

  • Not without issues
  • Gutenberg is still in beta

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Where is Gutenberg Now?

  • Yoast SEO has begun Gutenberg-only features
  • Structured Data for Local SEO & WooCommerce SEO
  • Expect more popular plugins to follow soon.

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Where is Gutenberg Now?

A theme author would write:

h2 { color: red; }

ย 

The injected CSS would be

.editor-block-list__block h2 { color: red; }

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Backwards Compatibility

ย 

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Looking Forward

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

What to Watch For

ย 

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

Editor Styles

โ€‹

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

/**
 * Enqueue Gutenberg block editor style
 */
function my_gutenberg_editor_styles() {
    wp_enqueue_style(
        'my-block-editor-styles',
        get_stylesheet_uri() . '/style-editor.css', 
        false,
        '1.0',
        'screen'
    );
}

add_action(
    'enqueue_block_editor_assets',
    'my_gutenberg_editor_styles'
);

Editor Styles Continued

โ€‹

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

function my_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'strong magenta', 'theme' ),
            'slug' => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'light grayish magenta', 'theme' ),
            'slug' => 'light-grayish-magenta',
            'color' => '#d0a5db',
        ),
        array(
            'name' => __( 'very light gray', 'theme' ),
            'slug' => 'very-light-gray',
            'color' => '#eee',
        ),
    ) );
}

add_action( 'after_setup_theme', 'my_setup_theme_supported_features' );

Custom Page Templating

โ€‹

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com

function myplugin_register_book_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array(
            array( 'core/image', array(
                'align' => 'left',
            ) ),
            array( 'core/heading', array(
                'placeholder' => 'Add Author...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Add Description...',
            ) ),
        ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

Additional Information

โ€‹

obm.io/gutenfear ๐Ÿพ @DavidWolfpawย ๐Ÿพ fixupfox.com