Demystifying Gutenberg Blocks - Understanding the first steps to becoming a Gutenberg developer

Demystifying Gutenberg Blocks - Understanding the first steps to becoming a Gutenberg developer

1. 1. Fast 1 Fast Understanding the first steps to becoming a Gutenberg developer Demystifying Gutenberg Blocks
2. 2. Fast 2 Fast 01 02 03 04 05 06 Introduction Before you begin Start with something familiar Know what you don’t know MVP What’s next?
3. 3. Fast 3 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
4. 4. Fast 4 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
5. 5. Fast 5 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
6. 6. Fast 6 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
7. 7. Fast 7 Fast Before you begin ● Know your “why” ● See what’s available
8. 8. Fast 8 Fast Before you begin ● Know your “why” ● See what’s available
9. 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. 10. Fast 10 Fast Start with something familiar ● Genesis Custom Blocks ● ACF Blocks ● Create Block
11. 11. Fast 11 Fast Start with something familiar ● Genesis Custom Blocks ● ACF Blocks ● Create Block
12. 12. Fast 12 Fast Start with something familiar ● Genesis Custom Blocks ● ACF Blocks ● Create Block
13. 13. Fast 13 Fast Start with something familiar ● Genesis Custom Blocks ● ACF Blocks ● Create Block
14. 14. Fast 14 Fast Know what you don’t know ● Need to Know ● Good to Know ● Learn as you Grow
15. 15. Fast 15 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
16. 16. Fast 16 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
17. 17. Fast 17 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
18. 18. Fast 18 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6 ● @wordpress/blocks ● @wordpress/block-editor ● @wordpress/components ● @wordpress/i18n ● @wordpress/element ● @wordpress/editor
19. 19. Fast 19 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
20. 20. Fast 20 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6 ● React for Beginners by Wes Bos ● React Explained by Zac Gordon
21. 21. Fast 21 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
22. 22. Fast 22 Fast Load and Register Block Types ● The New Way ● The Old Way
23. 23. Fast 23 Fast Load and Register Block Types ● The New Way ● The Old Way block.json
24. 24. Fast 24 Fast Load and Register Block Types ● The New Way ● The Old Way register_block_type( __DIR__ );
25. 25. Fast 25 Fast Load and Register Block Types ● The New Way ● The Old Way registerBlockType( blockName, blockConfig );
26. 26. Fast 26 Fast Load and Register Block Types ● The New Way ● The Old Way enqueue_block_editor_assets
27. 27. Fast 27 Fast Load and Register Block Types ● The New Way ● The Old Way registerBlockType( blockName, blockConfig );
28. 28. Fast 28 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
29. 29. Fast 29 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes InspectorControls
30. 30. Fast 30 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes BlockControls
31. 31. Fast 31 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
32. 32. Fast 32 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
33. 33. Fast 33 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
34. 34. Fast 34 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected ● Editor Assets enqueue_block_editor_assets ● Frontend Assets wp_enqueue_scripts
35. 35. Fast 35 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
36. 36. Fast 36 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
37. 37. Fast 37 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
38. 38. Fast 38 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
39. 39. Fast 39 Fast Learn as you Grow ● @wordpress/data ● Plugins Sidebars
40. 40. Fast 40 Fast Learn as you Grow ● @wordpress/data ● Plugins Sidebars
41. 41. Fast 41 Fast Learn as you Grow ● @wordpress/data ● Plugins Sidebars
42. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
60. 60. Fast 60 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
61. 61. Fast 61 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
62. 62. Fast 62 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
63. 63. Fast 63 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
64. 64. Questions? Fast Confidential & Proprietary 64 @corywebb