Gutenberg 101

Jacob McKinney

WordPress Developer

​

@jacobmcdev

Guten Tag,

Gutenberg

What we will cover:

• The Gutenberg User Interface
• Current Features of Gutenberg (Blocks, etc)
• Glimpses of Gutenberg in the Wild
• How to Prepare for Gutenberg

The Gutenberg UI

The WordPress we all know and love.

Gutenberg

Gutenberg Blocks and Features

Gutenberg Blocks

Gutenberg Blocks

• Classic
• Heading
• Subheading
• Paragraph
• List
• Quote
• Image
• Cover Image
• Gallery
• Audio
• Video
• File
• Pullquote
• Verse

• Code
• Custom HTML
• Preformatted
• Table
• Button
• Columns (beta)
• Page Break
• More
• Separator
• Spacer
• Widgets (Archives, Categories, Shortcodes, etc)
• Embeds

Block Settings

Block Settings in Action

Adding Blocks - Toolbar

Adding Blocks - Inline

Moving Blocks - Arrows

Moving Blocks - Dragging

Document Outline

Accessibility Warnings

Opt-in Features

Gotta touch code for these

¯\_(ツ)_/¯

​

• Default Block Styles
• Wide Alignments
• Block Color Palettes
• Disable Custom Colors
• Block Font Sizes

Gutenberg in the Wild

Atomic Blocks Theme

Atomic Blocks - Gutenberg Blocks Collection

• Post Grid
• Container
• Testimonial
• Inline Notice
• Accordion
• Share Icons
• Call-To-Action
• Customizable Button
• Spacer & Divider
• Author Profile
• Drop Cap

Drop It

Preparing for Gutenberg

What should you do?

1. Get excited!
2. Update all the things!
3. Consider replacing any legacy plugins.
4. Play with Gutenberg! (Check out Frontenberg)
5. Set up a staging site or local development site and test!
6. Download Gutenberg!

Resources

• Official Gutenberg Info - https://wordpress.org/gutenberg/
• Frontenberg - https://testgutenberg.com/
• Gutenberg Theme Support Docs - https://wordpress.org/gutenberg/handbook/extensibility/theme-support/
• Slides - https://jacobmckinney.com/wcbhm-gutenberg-101/

​

• Gutenberg Plugin - https://wordpress.org/plugins/gutenberg/
• Atomic Blocks Theme - https://wordpress.org/themes/atomic-blocks/
• Atomic Blocks Plugins - https://wordpress.org/plugins/atomic-blocks/
• Drop It Plugin - https://wordpress.org/plugins/dropit/
• Classic Editor Plugin (Don’t do it!) - https://wordpress.org/plugins/classic-editor/

Questions?