How to Build Custom WordPress Blocks
3 likes1,786 views
This document discusses building custom blocks for WordPress and provides an overview of the process. It recommends that blocks be built as plugins and be self-contained components. It outlines the typical development and production setup, with source code in one directory and built files like minified scripts and stylesheets in another. The key steps are to make a plugin, set up the build process, build the block, and then use the block. Links to additional resources on the block editor and examples are also provided.
How to Build Custom WordPress Blocks
- 2. Matthew Henry, Unsplash Should I build a custom block?
- 4. Matthew Henry, Unsplash Should I build a custom block?
- 5. Appendix: How to Build Blocks Without Losing Your Mind
- 6. 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
- 7. Equipment:
- 8. My setup: • Local by Flywheel • WordPress Beta Tester plugin • VS Code • ESLint + stylelint extensions
- 9. Blueprint
- 10. Development Production package.json ./src/ index.js your-plugin.php ./build/ editor.css styles.css
- 13. Development package.json ./src/ index.js One and done (usually). Where blocks are defined and you do the majority of your work. Verbose.
- 14. 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.
- 15. Individual Rooms
- 17. whatever-your-plugin-name-is.php Register plugin. Add action on initiation. Register script, styles, and block type.
- 24. your-plugin.php Development Production Buildprocess package.json ./src/ ./build/ index.js editor.css styles.css index.js
- 26. ./src/index.js Import dependencies. Set block properties and attributes. Define editor output. Define saved front-end output.
- 27. ./src/index.js
- 28. ./src/index.js
- 29. ./src/index.js
- 30. ./src/index.js
- 31. ./src/index.js
- 32. ./src/index.js Import dependencies. Set block properties and attributes. Define editor output. Define saved front-end output.
- 33. 1. Make a plugin
- 34. 2. Set up the build process
- 35. 3. Build the block
- 36. 4. Use the block
- 37. 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
- 38. Relevant links: • Official WordPress Block Editor Handbook • WordPress Content Blocks: Advanced course on LinkedIn Learning • GitHub repo with practical examples