Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Reusable Blocks Everywhere

WordPress Reusable Blocks Everywhere

A tour of the new reusable blocks that are built into the new WordPress editing experience (formerly known as Gutenberg). This new feature lets you reuse content on the fly, quickly and easily without any special skills and without copying and pasting. Find out how to make the most of it!

This talk will feature how-tos and tips for users, but also include suggestions for designers and developers who want to make reusable blocks work with their themes.

Shannon Smith is a platform services specialist with WordPress.com VIP. She delivers content solutions to some of the biggest names in media, marketing, and enterprise. Shannon has over 15 years experience in open source web development. She is a long-time supporter of diversity, accessibility and internationalization, and was a WordPress Montreal community organizer for seven years. Shannon is also a hiker, poet, and mum of four.

Shannon Smith

May 11, 2019
Tweet

More Decks by Shannon Smith

Other Decks in Technology

Transcript

  1. WordCamp Calgary 2019
    Reusable Blocks Everywhere

    View Slide

  2. Shannon Smith
    Platform Services Specialist
    WordPress.com VIP
    http://chroni.ca

    View Slide

  3. New Block Editor
    A new post and page
    editing experience that
    makes it easy to create rich
    post layouts using “blocks”.

    View Slide

  4. Discover the Possibilities
    Let’s take a look at some feature highlights
    - Use block templates to guide content creation.
    - Eventually, you’ll use blocks instead of custom fields, shortcodes,
    metaboxes and other ad-hoc elements, becoming far more intuitive
    for editors.

    View Slide

  5. New Block Editor

    View Slide

  6. New Block Editor

    View Slide

  7. New Block Editor

    View Slide

  8. What is a Reusable
    Block?
    Blocks as content templates

    View Slide

  9. You can turn any block
    into a reusable block!

    View Slide

  10. Getting Started
    Creating reusable blocks
    is easy

    View Slide

  11. How Do I Create a Reusable Block?

    View Slide

  12. How Do I Create a Reusable Block?

    View Slide

  13. How Do I Create a Reusable Block?

    View Slide

  14. How Do I Create a Reusable Block?

    View Slide

  15. How Do I Create a Reusable Block?

    View Slide

  16. How Do I Manage My Reusable Blocks?

    View Slide

  17. How Do I Manage My Reusable Blocks?
    https://example.com/wp-admin/edit.php?post_type=wp_block

    View Slide

  18. Cool Ways to Use
    Reusable Blocks

    View Slide

  19. Call to Action (CTA)

    View Slide

  20. Complex Content

    View Slide

  21. Forms

    View Slide

  22. Disclaimer

    View Slide

  23. Reusable Blocks for Writing

    View Slide

  24. Reusable Blocks for Editing

    View Slide

  25. Tips & Tricks
    Get the most out of your
    reusable blocks

    View Slide

  26. Edit All Reusable Blocks at Once

    View Slide

  27. Reuse a Combination of Blocks

    View Slide

  28. Reuse a Combination of Blocks

    View Slide

  29. Reuse a Combination of Blocks

    View Slide

  30. Themes
    For Blocks?
    “These components can
    also take cues from themes
    — like the color palette
    component does—allowing
    the theme to overwrite the
    default colors.”
    https://hmn.md/white-papers/gutenberg-
    the-new-wordpress-editor/
    https://matiasventura.com/post/
    gutenberg-or-the-ship-of-theseus/

    View Slide

  31. Add CSS Classes to Reusable Blocks

    View Slide

  32. More Blocks Please!
    Where to get more reusable
    blocks

    View Slide

  33. Exporting / Importing Reusable Blocks

    View Slide

  34. Block Directory
    https://
    make.wordpress.org/
    meta/2019/03/08/the-
    block-directory-and-a-new-
    type-of-plugin/

    View Slide

  35. WordCamp Calgary 2019
    Questions?

    View Slide

  36. vip.wordpress.com/jobs

    View Slide