JavaScript Not Required: Converting Complex Client Sites to Gutenberg

The introduction of Gutenberg created a great disturbance in the Force in 2018. Rather than leading WordPress to the Dark Side, however, the block editor gives WordPress developers in 2020 the opportunity to be heroes to our clients in new ways. And thanks to some great tools, you don’t have to learn JavaScript if you don’t want to.

Whether you’re thinking of building a new site with the block editor or converting an existing site to blocks, you’ll learn something you can apply:

• How to build an attractive site with only core blocks: 2018 and 2020
• How to add Gutenberg support to an existing theme.
• Which block collections have the best block for ________
• How ACF (Advanced Custom Fields) blocks give PHP developers superpowers
• Two ways to save time and labor with reusable blocks
• How to decide when to create a custom post type and when to create a block
• How to build block templates for custom post types and why they rock
• Keeping your clients on brand with the Gutenberg color palette
• Helpful plugins for modifying, exporting, restricting, and locating blocks
• What clients love about the block editor—and what they don’t
Code examples and other resources will be available so you can review details and get a head start on your own projects.

Transcript

1. JavaScript Not Required
   Converting Complex Client Sites to Gutenberg
   

   View Slide

2. What’s with the Star Wars Reference?
   

   View Slide

3. Matt
   Warned Us
   in 2015
   https://2015.us.wordcamp.org/2015/12/07/state-of-the-word-2015/
   

   View Slide

4. 2016: How’s That Working for You?
   Matt Me
   From Dinosaur Comics by Ryan North
   State of the Word 2016
   

   View Slide

5. At the Same Time…
   https://www.slideshare.net/photomatt/state-of-the-word-2016
   

   View Slide

6. 2017: Jumping on the Bandwagon
   

   View Slide

7. 2018: Let’s Do This Gutenberg Thing
   

   View Slide

8. Block-
   Based
   Portfolio
   Plugin
   Checks for active Gutenberg plugin
   Registers Portfolio Post Type…with Block
   Template…in PHP
   Uses Core Blocks (as of 2018)
   Includes Block Attribute Reference
   Look, Ma, no JavaScript!
   https://github.com/wpfangirl/block-portfolio
   

   View Slide

9. Block
   Template in
   PHP
   

   View Slide

10. Block Template
    in WP Editor
    

    View Slide

11. ACF Template 2016
    

    View Slide

12. Jan 2019: First All-
    Gutenberg Site
    https://www.manrs.org/
    

    View Slide

13. How I Built That
    Modified 4 Key Theme Files
    init.php (adds theme
    support)
    front-end.css (block
    styles for front end)
    style-editor.css (block
    styles for editor)
    core-blocks.js
    (adds/removes block
    styles)
    Started with a Gutenberg-compatible Genesis theme
    (Corporate Pro)
    

    View Slide

14. Adding Gutenberg Support to
    Your Theme
    When it’s not there already
    

    View Slide

15. The Whole List as of 2020
    • Default block styles
    • Wide Alignment
    • Block Color Palettes
    • Block Gradient Presets
    • Block Font Sizes
    • Editor Styles / Dark Editor Style
    • Responsive Embeds
    https://developer.wordpress.org/block-editor/developers/themes/theme-support/
    

    View Slide

16. Add to Functions.php…or Get Fancy
    Genesis themes store Gutenberg info in…
    • config/appearance.php
    •lib/gutenberg/init.php
    • lib/gutenberg/inline-styles.php
    Only the call to run init.php is in the
    functions file.
    

    View Slide

17. For Sanity’s Sake…
    Start with a Gutenberg-
    enabled theme if you can.
    Otherwise, pick one starter or
    parent theme’s method to
    work with.
    

    View Slide

18. Reusable Blocks Two Ways
    Though one may become obsolete
    

    View Slide

19. As
    Intended:
    a Global
    Block
    Edit Edit Once, Update Everywhere
    Insert in Insert in Multiple Posts
    Add Add to Reusable Blocks
    Configure Configure Your Block
    

    View Slide

20. Example: Tax ID for Nonprofit
    

    View Slide

21. As a
    Template
    Add Add Content
    Convert Convert to Regular Block
    Insert Insert Block
    Add Add to Reusable Blocks
    Configure Configure block without content
    This is what
    block patterns
    are for, but they
    didn’t exist yet.
    

    View Slide

22. Example:
    FAQ
    Accordion
    

    View Slide

23. Should This Be a Block or a
    Custom Post Type?
    The Content Decision Tree
    

    View Slide

24. Use
    Blocks
    If…
    Pagination is not required
    (limited instances)
    Only needs to show on that
    post/page or in that form
    Don’t need taxonomies (can
    organize by drag and drop)
    

    View Slide

25. Use CPT
    If…
    Pagination is required
    (unlimited instances)
    Need to show in multiple
    places (e.g. archive & single)
    Need taxonomies
    

    View Slide

26. Example: Team Members
    Block
    •Small company or
    only executives
    •Only need on Team
    page
    •Only showing basic
    info
    CPT
    • Large company
    • Need taxonomies for
    execs, VPs, etc.
    • Needs a single view
    with details as well as
    a list or grid
    

    View Slide

27. Custom Blocks without
    JavaScript
    Because I still haven’t had time to learn React and you might
    not want to
    

    View Slide

28. Tools for Creating Custom Blocks
    •Advanced Custom Fields (ACF) Pro
    • BlockLab
    •LazyBlocks
    • MB Blocks (for Meta Box)
    WP Tavern Comparison Article
    

    View Slide

29. Why Choose
    ACF for
    Blocks?
    I use ACF Pro on
    most sites
    I’m working with
    sites that use ACF for
    templates
    

    View Slide

30. Register Block Type
    

    View Slide

31. Create Field Group
    

    View Slide

32. Create
    Block
    Template
    

    View Slide

33. What That
    Template
    Is Doing
    • Creates id attribute allowing for
    custom "anchor" value.
    • Creates class attribute allowing for
    custom "className" and "align"
    values.
    • Wraps fields in a div with ID and
    class
    • Links to the PDF file
    • Displays post thumbnail if one
    exists; otherwise displays
    attachment image
    

    View Slide

34. Add CSS
    for Block
    Display
    

    View Slide

35. Inserting the Block
    From the block inserter (+) With the “/” shortcut
    

    View Slide

36. Block in Edit Mode
    

    View Slide

37. Block in Preview Mode
    

    View Slide

38. Block on
    Front End
    of Site
    

    View Slide

39. Some Favorite Block Plugins
    Totally subjective, not comprehensive, and subject to change
    

    View Slide

40. Plugins to Manage & Extend Blocks
    •Find My Blocks
    • Fabrica Reusable Block Instances
    •EditorsKit
    • Disable Gutenberg Autosave
    •Conditional Blocks (also Pro)
    • Block Navigation
    

    View Slide

41. Find My Blocks
    

    View Slide

42. EditorsKit
    

    View Slide

43. Conditional Blocks
    

    View Slide

44. Plugins for Individual Blocks
    •Anchor Block
    • Slides & Presentations
    •Visual Link Preview
    • LuckyWP Table of Contents
    •Gutenslider
    • OpenStreetMap for Gutenberg
    

    View Slide

45. Anchor
    Block
    

    View Slide

46. GutenSlider
    

    View Slide

47. Visual Link
    Preview
    

    View Slide

48. Blocks I Like from Block Libraries
    Atomic Blocks
    • Sections &
    Layouts
    • Container
    •Call to Action
    CoBlocks
    •Media Card
    •Gallery Blocks
    •Food & Drink
    •Features
    •Services
    

    View Slide

49. Example: Atomic Blocks CTA
    

    View Slide

50. Example: CoBlocks Media Card
    

    View Slide

51. Example: CoBlocks Food & Drinks
    

    View Slide

52. Blocks I Like from Block Libraries
    Kadence Blocks
    • Row Layout
    •Advanced Heading
    • Advanced Buttons
    •Tabs
    • Accordion
    •Icon List
    •Spacer/Divider
    

    View Slide

53. Example: Advanced Heading
    

    View Slide

54. Example:
    Tabs
    

    View Slide

55. Example: Full-Width Row Layout
    

    View Slide

56. Selected
    References
    Core Blocks
    WordPress Editor
    Gutenberg Template Library
    Gutenberg Block Directory
    Block Editor Handbook
    Bill Erickson’s Gutenberg Series
    Building Gutenberg Blocks with ACF
    

    View Slide

57. Questions?
    • Sallie Goetsch
    • Twitter & Instagram:
    @salliegoetsch
    • Website:
    https://www.wpfangirl.com
    • Email: sallie@wpfangirl.com
    • Meetup:
    https://www.meetup.com/Ea
    stbay-WordPress-Meetup/
    

    View Slide