Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Build Custom WordPress Blocks

797 views

Published on

Building (Gutenberg) blocks for the WordPress block editor is as easy or as hard as you want it to be. Learn how to do it the easy way with these slides from Morten Rand-Hendriksen's WordCamp Vancouver 2019 presentation "Blok Bilding Basiks 4 Basik Blok Bilding".

Published in: Technology
  • Be the first to comment

How to Build Custom WordPress Blocks

  1. 1. 4 Blok Bilding Basiks Basik Blok BildingMorten Rand-Hendriksen WordCamp Vancouver 2019
  2. 2. Matthew Henry, Unsplash Should I build a custom block?
  3. 3. Matthew Henry, Unsplash Should I build a custom block?
  4. 4. Appendix:
 How to Build Blocks Without Losing Your Mind
  5. 5. Rules for Block Building: • Blocks are plugin territory • Blocks are self-contained components • Blocks need care and feeding • Block building is as complicated as you make it
  6. 6. Equipment:
  7. 7. My setup: • Local by Flywheel • WordPress Beta Tester plugin • VS Code • ESLint + stylelint extensions
  8. 8. Blueprint
  9. 9. Development Production package.json ./src/ index.js your-plugin.php ./build/ editor.css styles.css
  10. 10. Development Production Buildprocess package.json ./src/ index.js your-plugin.php ./build/ editor.css styles.css Configures
  11. 11. Development Production Buildprocess package.json ./src/ index.js your-plugin.php ./build/ index.js editor.css styles.css
  12. 12. Development package.json ./src/ index.js One and done (usually). Where blocks are defined and you do the majority of your work. Verbose.
  13. 13. Production your-plugin.php ./build/ index.js editor.css styles.css Static configuration file for the plugin. Enqueues scripts and styles, lets WP know there are blocks available. The actual block script, compiled by the build process. Minified. Static stylesheets for the editor and the front-end.
  14. 14. Individual Rooms
  15. 15. Development Production Buildprocess package.json ./src/ index.js ./build/ index.js editor.css styles.css your-plugin.php
  16. 16. whatever-your-plugin-name-is.php Register plugin. Add action on initiation. Register script, styles, and block type.
  17. 17. whatever-your-plugin-name-is.php
  18. 18. whatever-your-plugin-name-is.php
  19. 19. whatever-your-plugin-name-is.php
  20. 20. whatever-your-plugin-name-is.php
  21. 21. whatever-your-plugin-name-is.php
  22. 22. whatever-your-plugin-name-is.php
  23. 23. your-plugin.php Development Production Buildprocess package.json ./src/ ./build/ index.js editor.css styles.css index.js
  24. 24. ./src/index.js Import dependencies. Register block.
  25. 25. ./src/index.js Import dependencies. Set block properties and attributes. Define editor output. Define saved front-end output.
  26. 26. ./src/index.js
  27. 27. ./src/index.js
  28. 28. ./src/index.js
  29. 29. ./src/index.js
  30. 30. ./src/index.js
  31. 31. ./src/index.js Import dependencies. Set block properties and attributes. Define editor output. Define saved front-end output.
  32. 32. 1. Make a plugin
  33. 33. 2. Set up the build process
  34. 34. 3. Build the block
  35. 35. 4. Use the block
  36. 36. Rules for Block Building: • Blocks are plugin territory • Blocks are self-contained components • Blocks need care and feeding • Block building is as complicated as you make it
  37. 37. Relevant links: • Official WordPress Block Editor Handbook • WordPress Content Blocks: Advanced course on LinkedIn Learning • GitHub repo with practical examples

×