Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Climbing the Gutenberg: The new WordPress block...

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. 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?
  2. 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
  3. New & awesome features ‣ Add - 1x Button -

    1x Drop cap to paragraph - 1x Media & Text ‣ Drag and drop images ‣ Navigate header elements
  4. 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
  5. 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
  6. Markdown ‣ Markdown = styling through keyboard - ## +

    space = H2 - * + space = unordered list - 1. + space = ordered list - `text` = code - > + space = quote ‣ Try adding the above elements
  7. Live preview HTML ‣ Add a Custom HTML block ‣

    Add some form of styling (e.g. <a href=“”></a> or <b></b>) ‣ Click on “Preview”
  8. 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/