$30 off During Our Annual Pro Sale. View Details »

Climbing the Gutenberg: The new WordPress block editor

Job
November 01, 2018

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.

Job

November 01, 2018
Tweet

More Decks by Job

Other Decks in Technology

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