Climbing the Gutenberg: The new WordPress block editor

At WordCamp Cape Town 2018, I gave a workshop focused on getting WordPress users comfortable with the new editor that's coming to WordPress 5.0 at the end of the month. We went through some of the basic features and some of the new options available through Gutenberg.

Transcript

1. @jobtex | @woocommerce | job.blog Climbing the Gutenberg
2. Hi, I’m Job ! " 
 ☕ 
 ⛰ ⚽
3. Gutenfree world • Gutenwho? - Johann Gensfleisch zur Laden zum Gutenberg - Or: “John To Load Goose Meat on the Good Mountain” - Printing press (mid 15th century) • Gutenberg 2 WordPress?
4. Tour guide 1 Gutenberg & the classic editor
5. Blocks, blocks, and blocks Basics 1.0
6. Blocks ‣ Go to: Posts > Add New ‣ Add the following blocks: - 1x Full-width cover image - 3x H2 and H3 - 3x Image (play around with size and position) - 1x Twitter, Facebook, YouTube … embed - 1x Widget - 1x More break - 1x Table ‣ Tip: Use a “lorem ipsum” generator for fast content
7. Blocks ‣ Reorder the blocks ‣ Move the blocks around
8. New & awesome features ‣ Add - 1x Button - 1x Drop cap to paragraph - 1x Media & Text ‣ Drag and drop images ‣ Navigate header elements
9. Tour guide, part 2
10. Blocks, blocks, and keyboards Basics 2.0
11. Reusable blocks ‣ Which collection of images/text could be handy to reuse on several pages? - Discuss in groups of 3-4 - Try creating those blocks on your site ‣ Reusable blocks - Select those blocks - Click: More options > Add to Reusable blocks - Use this block on a a different post/page
12. Shortcuts ‣ Find shortcuts by going to: More > Keyboard Shortcuts, or: - Mac: ^⌥H - Windows/Linux: Shift + Alt + H ‣ Try to recreate your post/page - Without using mouse/trackpad - Or as little as possible
13. Markdown ‣ Markdown = styling through keyboard - ## + space = H2 - * + space = unordered list - 1. + space = ordered list - `text` = code - > + space = quote ‣ Try adding the above elements
14. Live preview HTML ‣ Add a Custom HTML block ‣ Add some form of styling (e.g. <a href=“”></a> or <b></b>) ‣ Click on “Preview”
15. Some great plugins ‣ WooCommerce Gutenberg Products Block
 https://wordpress.org/plugins/woo-gutenberg-products-block/ ‣ Atomic Blocks
 https://wordpress.org/plugins/atomic-blocks/ ‣ Kadence Blocks
 https://wordpress.org/plugins/kadence-blocks/ ‣ Ultimate Gutenberg Blocks
 https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/ ‣ Editor blocks
 https://editorblockswp.com/
16. @jobtex | @woocommerce | job.blog Climbing the Gutenberg