Getting to know Gutenberg

Tammie Lister @karmatosed: design lead for Gutenberg editor focus.

Making rich content should be easier than it is.

Usability tests, forums, trac, feedback...

We expect users to learn the WP way.

Whilst interfaces move on.

We expect developers to code the WP way.

Whilst the outside moves on.

Gutenberg is the entire publishing experience, starting with the editor.

Demo: look inside

Principles

Backwards compatibility
Portability of content
No commitment for content
Incremental development: phases

Accessibility matters

Working closely with experts
Finding solutions for new issues
Communication and learning

Features recently added

Nesting: being worked on
Drag and drop
Extensibility APIs: sidebar API is now fixed

Future features (beyond 5.0)

Collaborative editing
Footnotes
Commenting

Demo: placeholders

What about themes?

You do not need a special theme to use Gutenberg.

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

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' );

Demo: see in theme

What is a block?

Anatomy of a block

HTML
CSS
JS

* It all enqueues, React based.

Blocks aren't a new concept

The facts

You can turn it off with a plugin.

Link: 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.