Gutenberg 101 - WordCamp Birmingham 2018

A quick introduction to WordPress' new Gutenberg User Interface.

Transcript

1. Gutenberg 101 Jacob McKinney WordPress Developer @jacobmcdev
2. Guten Tag, Gutenberg
3. 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
4. The Gutenberg UI
5. The WordPress we all know and love.
6. Gutenberg
7. Gutenberg Blocks and Features
8. Gutenberg Blocks
9. 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
10. Block Settings
11. Block Settings in Action
12. Adding Blocks - Toolbar
13. Adding Blocks - Inline
14. Moving Blocks - Arrows
15. Moving Blocks - Dragging
16. Document Outline
17. Accessibility Warnings
18. Opt-in Features Gotta touch code for these ¯\_(ツ)_/¯ • Default Block Styles • Wide Alignments • Block Color Palettes • Disable Custom Colors • Block Font Sizes
19. Gutenberg in the Wild
20. Atomic Blocks Theme
21. 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
22. Drop It
23. Preparing for Gutenberg
24. 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!
25. • 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/
26. Questions?