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.

What about posts written in classic editor?

What now?

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

Take if for a test drive: testgutenberg.com/

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 13:00 UTC

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

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

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