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