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
   

   View Slide

2. Hi, I’m Job
   ! " 

   ☕ 

   ⛰ ⚽
   

   View Slide

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?
   

   View Slide

4. Tour guide 1
   Gutenberg & the classic editor
   

   View Slide

5. Blocks, blocks, and blocks
   Basics 1.0
   

   View Slide

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
   

   View Slide

7. Blocks
   ‣ Reorder the blocks
   ‣ Move the blocks around
   

   View Slide

8. New & awesome features
   ‣ Add
   - 1x Button
   - 1x Drop cap to paragraph
   - 1x Media & Text
   ‣ Drag and drop images
   ‣ Navigate header elements
   

   View Slide

9. Tour guide, part 2
   

   View Slide

10. Blocks, blocks, and keyboards
    Basics 2.0
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. Markdown
    ‣ Markdown = styling through keyboard
    - ## + space = H2
    - * + space = unordered list
    - 1. + space = ordered list
    - `text` = code
    - > + space = quote
    ‣ Try adding the above elements
    

    View Slide

14. Live preview HTML
    ‣ Add a Custom HTML block
    ‣ Add some form of styling (e.g. or )
    ‣ Click on “Preview”
    

    View Slide

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/
    

    View Slide

16. @jobtex | @woocommerce | job.blog
    Climbing the Gutenberg
    

    View Slide