Gutenberg: The Future is (Almost) Here

Rich content should be easier

But it's not.

GIF showing someone using the classic WordPress editor.

We expect people to learn the WordPress way

Modern interfaces have evolved.

We expect developers to code the WordPress way

Most designers and developers don't pay attention.

Gutenberg is the new publishing experience

It starts with just the editor.

Everything is a block

Unifies content uunder one umbrella. Work with one block, you can work with all blocks.

Blocks come with placeholders

Take up space in editor and infere the content they take in.

Blocks are editable

They can be moved around.

Custom blocks can be created

Say goodbye to complicated HTML, shortcodes and custom fields.

Let's look inside

Features coming

  • Nesting of blocks (there now, getting better)
  • Drag and drop
  • Extensibility APIs

Potentially coming

  • Collaborative editing
  • Footnotes
  • Commenting

What about themes?

Nothing special

You don't need a special theme to use Gutenberg.

Themes

Theme exploration: github.com/wordpress/gutenberg-theme

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

add_theme_support


add_theme_support( 'gutenberg', array(
	'wide-images' => true,
	'colors' => array(
		'#0073aa',
		'#229fd8',
		'#eee',
		'#444',
	),
));

Editor styles


function gutenbergtheme_editor_styles() {
	wp_enqueue_style( 'gutenbergthemeblocks-style', get_template_directory_uri() . '/css/gutenberg-styling.css' );
}
add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );

Templates


function register_testimonial_type() {
	$args = array(
		'public' => true,
		'label'  => 'Testimonials',
		'show_in_rest' => true,
		'template' => array(
			array( 'core/image', array(
				'align' => 'left',
			) ),
			array( 'core/quote', array(
				'style' => 2,
			) ),
		),
	);
register_post_type( 'testimonial', $args );
}
add_action( 'init', 'register_testimonial_type' );

What is a block?

Anatomy of a block

  • HTML
  • CSS
  • JS

*It all enqueues

Blocks aren't a new concept

The facts

You can turn it off with a plugin

See: wordpress.org/plugins/classic-editor/

Metaboxes

  • Some will continue to work with no changes.
  • Some will need updates.
  • Several can be converted to native blocks.
  • Some can transition to new Gutenberg native extension points.
  • There will be a mechanism for conflicting meta-boxes to load the classic editor.

Custom post types

  • Are supported.
  • Need REST API (show_in_rest) declaration.
  • Can opt out by not declaring “editor” support.
  • Will be able to declare supported and default blocks.

Shortcodes

  • Will work, there's a block for that.

What now?

When is it coming?

¯\_(ツ)_/¯

Needs more testing, not just within WordPress.

Needs people to make blocks.

Tell the team what you are making and doing with Gutenberg.

Get involved

Learn more: wordpress.org/gutenberg

Handbook: wordpress.org/gutenberg/handbook

Get the plugin: wordpress.org/plugins/gutenberg

GitHub repo: github.com/wordpress/gutenberg

Join the conversation: chat.wordpress.org #core-editor wed 14:00 UTC

Share your Gutenberg story, gutenblocks made .. tweet #gutenberg #wordpress

5.0 isn't planned yet, it will be just like any release

David A. Kennedy

Lead, Theme Team, Automattic.

WordPress Core Contributor.

Let's talk about Gutenberg... any questions?