Demystifying Gutenberg Blocks - Understanding the first steps to becoming a Gutenberg developer
•
0 j'aime•337 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Demystifying Gutenberg Blocks - Understanding the first steps to becoming a Gutenberg developer
Similaire à Demystifying Gutenberg Blocks - Understanding the first steps to becoming a Gutenberg developer (20)
Dernier
Dernier (20)
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a Gutenberg developer
- 1. Fast 1 Fast Understanding the first steps to becoming a Gutenberg developer Demystifying Gutenberg Blocks
- 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. Fast 3 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
- 4. Fast 4 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
- 5. Fast 5 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
- 6. Fast 6 Fast Introduction ● Cory Webb ● Waco, TX ● Software Engineer, Fast ● Previously at Reaktiv
- 7. Fast 7 Fast Before you begin ● Know your “why” ● See what’s available
- 8. Fast 8 Fast Before you begin ● Know your “why” ● See what’s available
- 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
- 14. Fast 14 Fast Know what you don’t know ● Need to Know ● Good to Know ● Learn as you Grow
- 15. Fast 15 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
- 16. Fast 16 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
- 17. Fast 17 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
- 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. Fast 19 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
- 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. Fast 21 Fast Underlying Technology ● Node.js & npm ● @wordpress/scripts ● Dependencies ● React ● JSX & ES6
- 22. Fast 22 Fast Load and Register Block Types ● The New Way ● The Old Way
- 23. Fast 23 Fast Load and Register Block Types ● The New Way ● The Old Way block.json
- 24. Fast 24 Fast Load and Register Block Types ● The New Way ● The Old Way register_block_type( __DIR__ );
- 25. Fast 25 Fast Load and Register Block Types ● The New Way ● The Old Way registerBlockType( blockName, blockConfig );
- 26. Fast 26 Fast Load and Register Block Types ● The New Way ● The Old Way enqueue_block_editor_assets
- 27. Fast 27 Fast Load and Register Block Types ● The New Way ● The Old Way registerBlockType( blockName, blockConfig );
- 28. Fast 28 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
- 29. Fast 29 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes InspectorControls
- 30. Fast 30 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes BlockControls
- 31. Fast 31 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
- 32. Fast 32 Fast Need to Know ● Underlying Technology ● Load and Register Block Types ● Add Block Components ● Props and Attributes
- 33. Fast 33 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
- 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. Fast 35 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
- 36. Fast 36 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
- 37. Fast 37 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
- 38. Fast 38 Fast Good to Know ● Editor Assets vs Frontend Assets ● Dynamic Blocks and ServerSideRender ● Internationalization (i18n) ● isSelected
- 39. Fast 39 Fast Learn as you Grow ● @wordpress/data ● Plugins Sidebars
- 40. Fast 40 Fast Learn as you Grow ● @wordpress/data ● Plugins Sidebars
- 41. Fast 41 Fast Learn as you Grow ● @wordpress/data ● Plugins Sidebars
- 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
- 60. Fast 60 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
- 61. Fast 61 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
- 62. Fast 62 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
- 63. Fast 63 Fast What’s Next? ● Extend the MVP ● Share With the World ● Keep Learning
- 64. Questions? Fast Confidential & Proprietary 64 @corywebb