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
- Bi-weekly block-based themes meeting, 1600 UTC (starting Feb 5)
- Weekly editor chat, 1400 UTC (Wednesdays)
- Weekly Gutenberg design triage, 1700 UTC (Tuesdays)
Questions?
Designing & Building Gutenberg Blocks
By richtabor
Designing & Building Gutenberg Blocks
Let’s dive in and learn the very basics of building fantastic Gutenberg blocks. We’ll explore the foundations of the block development, setting up a local block development environment, proper user experience techniques within blocks, and how to get involved with the Gutenberg design and technical community. While we won’t go super technical, you’ll leave the session with a clearer understanding of how to design and build Gutenberg blocks.
