JavaScript Not Required: Converting Complex Client Sites to Gutenberg

Slide 1

Slide 1 text

JavaScript Not Required Converting Complex Client Sites to Gutenberg

Slide 2

Slide 2 text

What’s with the Star Wars Reference?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

2017: Jumping on the Bandwagon

Slide 7

Slide 7 text

2018: Let’s Do This Gutenberg Thing

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Block Template in PHP

Slide 10

Slide 10 text

Block Template in WP Editor

Slide 11

Slide 11 text

ACF Template 2016

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Reusable Blocks Two Ways Though one may become obsolete

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Example: Tax ID for Nonprofit

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

Example: FAQ Accordion

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Create Field Group

Slide 32

Slide 32 text

Create Block Template

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Add CSS for Block Display

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Block in Edit Mode

Slide 37

Slide 37 text

Block in Preview Mode

Slide 38

Slide 38 text

Block on Front End of Site

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Find My Blocks

Slide 42

Slide 42 text

EditorsKit

Slide 43

Slide 43 text

Conditional Blocks

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Anchor Block

Slide 46

Slide 46 text

GutenSlider

Slide 47

Slide 47 text

Visual Link Preview

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Example: Atomic Blocks CTA

Slide 50

Slide 50 text

Example: CoBlocks Media Card

Slide 51

Slide 51 text

Example: CoBlocks Food & Drinks

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Example: Advanced Heading

Slide 54

Slide 54 text

Example: Tabs

Slide 55

Slide 55 text

Example: Full-Width Row Layout

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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