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

JavaScript Not Required: Converting Complex Client Sites to Gutenberg

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.


Sallie Goetsch

June 03, 2020

More Decks by Sallie Goetsch

Other Decks in Technology


  1. JavaScript Not Required Converting Complex Client Sites to Gutenberg

  2. What’s with the Star Wars Reference?

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

  4. 2016: How’s That Working for You? Matt Me From Dinosaur

    Comics by Ryan North State of the Word 2016
  5. At the Same Time… https://www.slideshare.net/photomatt/state-of-the-word-2016

  6. 2017: Jumping on the Bandwagon

  7. 2018: Let’s Do This Gutenberg Thing

  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
  9. Block Template in PHP

  10. Block Template in WP Editor

  11. ACF Template 2016

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

  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)
  14. Adding Gutenberg Support to Your Theme When it’s not there

  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/
  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.
  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.
  18. Reusable Blocks Two Ways Though one may become obsolete

  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
  20. Example: Tax ID for Nonprofit

  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.
  22. Example: FAQ Accordion

  23. Should This Be a Block or a Custom Post Type?

    The Content Decision Tree
  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)
  25. Use CPT If… Pagination is required (unlimited instances) Need to

    show in multiple places (e.g. archive & single) Need taxonomies
  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
  27. Custom Blocks without JavaScript Because I still haven’t had time

    to learn React and you might not want to
  28. Tools for Creating Custom Blocks •Advanced Custom Fields (ACF) Pro

    • BlockLab •LazyBlocks • MB Blocks (for Meta Box) WP Tavern Comparison Article
  29. Why Choose ACF for Blocks? I use ACF Pro on

    most sites I’m working with sites that use ACF for templates
  30. Register Block Type

  31. Create Field Group

  32. Create Block Template

  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
  34. Add CSS for Block Display

  35. Inserting the Block From the block inserter (+) With the

    “/” shortcut
  36. Block in Edit Mode

  37. Block in Preview Mode

  38. Block on Front End of Site

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

    to change
  40. Plugins to Manage & Extend Blocks •Find My Blocks •

    Fabrica Reusable Block Instances •EditorsKit • Disable Gutenberg Autosave •Conditional Blocks (also Pro) • Block Navigation
  41. Find My Blocks

  42. EditorsKit

  43. Conditional Blocks

  44. Plugins for Individual Blocks •Anchor Block • Slides & Presentations

    •Visual Link Preview • LuckyWP Table of Contents •Gutenslider • OpenStreetMap for Gutenberg
  45. Anchor Block

  46. GutenSlider

  47. Visual Link Preview

  48. Blocks I Like from Block Libraries Atomic Blocks • Sections

    & Layouts • Container •Call to Action CoBlocks •Media Card •Gallery Blocks •Food & Drink •Features •Services
  49. Example: Atomic Blocks CTA

  50. Example: CoBlocks Media Card

  51. Example: CoBlocks Food & Drinks

  52. Blocks I Like from Block Libraries Kadence Blocks • Row

    Layout •Advanced Heading • Advanced Buttons •Tabs • Accordion •Icon List •Spacer/Divider
  53. Example: Advanced Heading

  54. Example: Tabs

  55. Example: Full-Width Row Layout

  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
  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/