Designing & Building Gutenberg Blocks

Rich Tabor

Twitter: @richard_tabor

Welcome to the wonderful world of blocks!

Rich Tabor

Senior Product Manager, WordPress Experience @ GoDaddy

 

Previously:

Founded ThemeBeans, CoBlocks & Block Gallery

WordPress Reviewer, Envato

Leave here with a better understanding of block design & development

Today's goal:

Learn Javascript

Learn UX

Learn block fundamentals and Core UX patterns

Slides

slides.com/richtabor/building-blocks-wcphx

What is Design?

Experience

Design is...

Accessibility

Design is...

Internationalization

Design is...

Internationalization

Accessibility

Experience

The Anatomy of the Block Editor

Block Content

Block Settings Sidebar

Block Toolbar

Primary interface for adding & manipulating content

Two main patterns: Placeholders & Contextual Controls

Most intuitive

Block

Content Area:

Block-level controls consisting of 100% necessary commonly-used actions

Block Toolbar

Must be:

1. Contextual

2. Fitting within the current UI

3. Necessary for managing a block

Shows advanced settings and controls for the currently selected block.

Sidebar Settings

Must be:

1. Contextual

2. Not necessary for the basic block operation

A primer to

 Block Development

Block Assets

Registering JS & CSS Assets for a block

├── your-plugin.php

├── package.json

├── build

           ├── index.js

           ├── style.css

           ├── editor.css

└── src

           ├── block.js

           ├── edit.js

           ├── icon.js

           ├── index.js

           ├── save.js

           ├── style.scss

           ├── editor.scss

// Block Javascript
wp_register_script(
	'wcphx-blocks',
	plugins_url( 'build/index.js', __FILE__ ),
	$asset_file['dependencies'],
	$asset_file['version'],
);

// Editor Styling
wp_register_style(
	'wcphx-blocks-editor',
	plugins_url( 'editor.css', __FILE__ ),
	array( 'wp-edit-blocks' ),
	$asset_file['version']
);

// Frontend Styling
wp_register_style(
	'wcphx-blocks-frontend',
	plugins_url( 'style.css', __FILE__ ),
	array(),
	$asset_file['version']
);
// Register block
register_block_type(
	'wcphx-blocks/author',
	array(
		'editor_script' => 'wcphx-blocks',
		'style'         => 'wcphx-blocks-frontend',
		'editor_style'  => 'wcphx-blocks-editor',
	)
);

A closer look at Block Registration

registerBlockType( 'wcphx-blocks/author', {
	title: __( 'Building Blocks (Author)', 'wcphx-blocks' ),
	icon: 'user',
	category: 'common',
	example: {},
	attributes: {},
	edit() {
		return (
			<div>Hello from the editor</div>
		);
	},
	save() {
		return (
			<div>Hello from the front-end</div>
		);
	},
} );

Block Attributes you say?

attributes: {
	content: {
		type: 'array',
		source: 'children',
		selector: 'p',
	},
	alignment: {
		type: 'string',
		default: 'none',
	},
},

Edit Function

edit: ( props ) => {
	const { attributes: { content }, setAttributes, className } = props;
	const onChangeContent = ( newContent ) => {
		setAttributes( { content: newContent } );
	};
	return (
		<RichText
			tagName="p"
			className={ className }
			onChange={ onChangeContent }
			value={ content }
		/>
	);
},

Save Function, i.e. the Front-end

save: ( props ) => {
	return <RichText.Content tagName="p" value={ props.attributes.content } />;
},

Get Involved

  1. Bi-weekly block-based themes meeting, 1600 UTC (starting Feb 5)
  2. Weekly editor chat, 1400 UTC (Wednesdays)
  3. Weekly Gutenberg design triage, 1700 UTC (Tuesdays)

Questions?

Made with Slides.com