Climbing the Gutenberg: The new WordPress block editor

999ec503c62c8972cbbc00f0aa932f4f?s=47 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.

999ec503c62c8972cbbc00f0aa932f4f?s=128

Job

November 01, 2018
Tweet

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