O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
4
Blok
Bilding
Basiks
Basik
Blok
BildingMorten Rand-Hendriksen
WordCamp Vancouver 2019
Matthew Henry, Unsplash
Should I build
a custom block?
Matthew Henry, Unsplash
Should I build
a custom block?
Appendix:

How to Build Blocks
Without Losing Your Mind
Rules for Block Building:
• Blocks are plugin territory
• Blocks are self-contained components
• Blocks need care and feed...
Equipment:
My setup:
• Local by Flywheel
• WordPress Beta Tester plugin
• VS Code
• ESLint + stylelint extensions
Blueprint
Development Production
package.json
./src/
index.js
your-plugin.php
./build/
editor.css styles.css
Development Production
Buildprocess
package.json
./src/
index.js
your-plugin.php
./build/
editor.css styles.css
Configures
Development Production
Buildprocess
package.json
./src/
index.js
your-plugin.php
./build/
index.js
editor.css styles.css
Development
package.json
./src/
index.js
One and done (usually).
Where blocks are defined and
you do the majority of your w...
Production
your-plugin.php
./build/
index.js
editor.css styles.css
Static configuration file for the
plugin. Enqueues script...
Individual Rooms
Development Production
Buildprocess
package.json
./src/
index.js
./build/
index.js
editor.css styles.css
your-plugin.php
whatever-your-plugin-name-is.php
Register plugin.
Add action on initiation.
Register script, styles, and block type.
whatever-your-plugin-name-is.php
whatever-your-plugin-name-is.php
whatever-your-plugin-name-is.php
whatever-your-plugin-name-is.php
whatever-your-plugin-name-is.php
whatever-your-plugin-name-is.php
your-plugin.php
Development Production
Buildprocess
package.json
./src/ ./build/
index.js
editor.css styles.css
index.js
./src/index.js
Import dependencies.
Register block.
./src/index.js
Import dependencies.
Set block properties and attributes.
Define editor output.
Define saved front-end output.
./src/index.js
./src/index.js
./src/index.js
./src/index.js
./src/index.js
./src/index.js
Import dependencies.
Set block properties and attributes.
Define editor output.
Define saved front-end output.
1. Make a plugin
2. Set up the build process
3. Build the block
4. Use the block
Rules for Block Building:
• Blocks are plugin territory
• Blocks are self-contained components
• Blocks need care and feed...
Relevant links:
• Official WordPress Block Editor Handbook
• WordPress Content Blocks: Advanced course on
LinkedIn Learning
...
How to Build Custom WordPress Blocks
Terminou este documento.
Transfira e leia offline.
Próximos SlideShares
What to Upload to SlideShare
Avançar
Próximos SlideShares
What to Upload to SlideShare
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

How to Build Custom WordPress Blocks

Baixar para ler offline

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".

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
  • EastBayWPMeetup

    Oct. 6, 2019
  • RoginaWang

    Oct. 2, 2019

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".

Vistos

Vistos totais

1.524

No Slideshare

0

De incorporações

0

Número de incorporações

331

Ações

Baixados

0

Compartilhados

0

Comentários

0

Curtir

2

×