How to even begin? What would I even create? And what tools should I use to create it? For a developer who hasn’t spent much time with JavaScript beyond tweaking a few jQuery scripts, approaching Gutenberg development can feel like an impenetrable fortress reserved for only the best and brightest frontend engineers. The barriers to entry are increasingly daunting, with tools like React, JSX, Node, NPM, and Webpack evolving faster than ever.
But it doesn’t have to be intimidating. Cory Webb guides you through the maze as he breaks down Gutenberg to make it easier than ever to start developing custom blocks for your clients.
9. Fast 9
Fast
Before you begin
● Know your “why”
● See what’s available
Genesis Blocks, CoBlocks, Stackable, Ultimate Addons for Gutenberg, Otter Blocks, Ultimate Blocks, Kadence Blocks, and PublishPress Blocks
10. Fast 10
Fast
Start with something
familiar
● Genesis Custom Blocks
● ACF Blocks
● Create Block
11. Fast 11
Fast
Start with something
familiar
● Genesis Custom Blocks
● ACF Blocks
● Create Block
12. Fast 12
Fast
Start with something
familiar
● Genesis Custom Blocks
● ACF Blocks
● Create Block
13. Fast 13
Fast
Start with something
familiar
● Genesis Custom Blocks
● ACF Blocks
● Create Block
42. Fast 42
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
43. Fast 43
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
● Easy
○ Local by Flywheel
○ DevKinsta by Kinsta
● Intermediate
○ MAMP
○ XAMPP
● Advanced
○ VVV
○ Docker
44. Fast 44
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub source: https://www.npmjs.com/package/@wordpress/create-block
npx @wordpress/create-block
45. Fast 45
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub mvp-block.php
46. Fast 46
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub block.json
47. Fast 47
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub src/index.js
48. Fast 48
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub src/edit.js
49. Fast 49
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub src/save.js
50. Fast 50
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
51. Fast 51
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
52. Fast 52
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
import { RichText } from ‘@wordpress/block-editor’;
import blockEditor from ‘@wordpress/block-editor’;
const RichText = blockEditor.RichText;
const { RichText } = wp.blockEditor;
53. Fast 53
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
54. Fast 54
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
55. Fast 55
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
56. Fast 56
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
57. Fast 57
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
58. Fast 58
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
59. Fast 59
Fast
MVP
● Set up a local development
environment
● Let’s use Create Block
● Add some Attributes and
Components
● Build & Voila
● GitHub
https://github.com/corywebb/wcus-mvp