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.

1. 4
Blok
Bilding
Basiks
Basik
Blok
BildingMorten Rand-Hendriksen
WordCamp Vancouver 2019

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

11. Development Production
Buildprocess
package.json
./src/
index.js
your-plugin.php
./build/
editor.css styles.css
Configures

12. Development Production
Buildprocess
package.json
./src/
index.js
your-plugin.php
./build/
index.js
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

16. Development Production
Buildprocess
package.json
./src/
index.js
./build/
index.js
editor.css styles.css
your-plugin.php

17. whatever-your-plugin-name-is.php
Register plugin.
Add action on initiation.
Register script, styles, and block type.

18. whatever-your-plugin-name-is.php

19. whatever-your-plugin-name-is.php

20. whatever-your-plugin-name-is.php

21. whatever-your-plugin-name-is.php

22. whatever-your-plugin-name-is.php

23. whatever-your-plugin-name-is.php

24. your-plugin.php
Development Production
Buildprocess
package.json
./src/ ./build/
index.js
editor.css styles.css
index.js

25. ./src/index.js
Import dependencies.
Register block.

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