Slide 1
Slide 1 text
Gutenberg 101
Jacob McKinney
WordPress Developer
@jacobmcdev
Slide 2
Slide 2 text
Guten Tag,
Gutenberg
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
The Gutenberg UI
Slide 5
Slide 5 text
The WordPress we all know and love.
Slide 6
Slide 6 text
Gutenberg
Slide 7
Slide 7 text
Gutenberg Blocks and Features
Slide 8
Slide 8 text
Gutenberg Blocks
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Block Settings
Slide 11
Slide 11 text
Block Settings in Action
Slide 12
Slide 12 text
Adding Blocks - Toolbar
Slide 13
Slide 13 text
Adding Blocks - Inline
Slide 14
Slide 14 text
Moving Blocks - Arrows
Slide 15
Slide 15 text
Moving Blocks - Dragging
Slide 16
Slide 16 text
Document Outline
Slide 17
Slide 17 text
Accessibility Warnings
Slide 18
Slide 18 text
Opt-in Features
Gotta touch code for these
¯\_(ツ)_/¯
● Default Block Styles
● Wide Alignments
● Block Color Palettes
● Disable Custom Colors
● Block Font Sizes
Slide 19
Slide 19 text
Gutenberg in the Wild
Slide 20
Slide 20 text
Atomic Blocks Theme
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Drop It
Slide 23
Slide 23 text
Preparing for Gutenberg
Slide 24
Slide 24 text
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!
Slide 25
Slide 25 text
● Official Gutenberg Info -
https://wordpress.org/gutenberg/
● Frontenberg - https://testgutenberg.com/
● Gutenberg Theme Support Docs -
https://wordpress.org/gutenberg/handbook/e
xtensibility/theme-support/
● Slides -
https://jacobmckinney.com/wcbhm-gutenber
g-101/
Resources
● 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/
Slide 26
Slide 26 text
Questions?