Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

20分で作るGutenbergのブロック追加プラグイン

20 visualizaciones

Publicado el

第1回 群馬 WordPress Meetupで発表した資料です。

Publicado en: Ingeniería
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

20分で作るGutenbergのブロック追加プラグイン

  1. 1. 20 Gutenberg 1 WordPress Meetup @jyokyoku
  2. 2. 2
  3. 3. 3 36 WordPress 2017 2018 100 2
  4. 4. Gutenberg 4
  5. 5. 5
  6. 6. 1. 2. 6
  7. 7. • – – – 7
  8. 8. • – – – 8
  9. 9. 9
  10. 10. 1. PHP [ ] 2. JavaScript ES6 [ ] 3. React [ ] 4. JSX [ ] 10
  11. 11. PHP • ordPress 11
  12. 12. JavaScript ES6 • JavaScript • ES6 JavaScript – ES6 = ECMAScript 6th Edition – let const Class import/export – ES6 12
  13. 13. React • Facebook JavaScript • jQuery – AirBNB Slack Dropbox Instagram Facebook • Gutenberg React Component • 2 13
  14. 14. JSX • React • JavaScript HTML • React HTML – var element = <h1 className=“title”>Title</h1> 14
  15. 15. 15
  16. 16. 1. node.js [ ] 2. Babel [ ] 3. Webpack [ ] 16
  17. 17. node.js • JavaScript • npm • 17
  18. 18. Babel • • ES6 JSX JavaScript • ES6 JSX 18
  19. 19. Webpack • • JavaScript 1 • • Babel – Gulp Browserify 19
  20. 20. • PHP JavaScript ES6 • ES6/JSX • 20
  21. 21. 21 !! !?
  22. 22. 22
  23. 23. Create Guten Block 23
  24. 24. • Gutenberg • Babel SCSS 1 • npx • node.js 24
  25. 25. $ cd /wp/wp-content/plugins/ $ npx create-guten-block { } 25
  26. 26. 26
  27. 27. 27 plugin.php src/block/block.js JS src/block/editor.scss CSS src/block/style.scss CSS src/init.php PHP
  28. 28. • block.js • CSS SCSS CSS CSS • JS CSS init.php 28
  29. 29. 29
  30. 30. 30
  31. 31. block.js • registerBlockType • edit HTML • save HTML 31
  32. 32. • npm start • JSX ES6 SCSS 32 $ cd /wp/wp-content/plugins/{ } $ npm start
  33. 33. edit • pluginAttrs init.php • JSX 33 edit: function( props ) { const imgPath = pluginAttrs.imgDir + '/wapu.png'; return ( <div className={ props.className }> <img src={ imgPath } /> </div> ); },
  34. 34. save • edit • return 34 save: function( props ) { const imgPath = pluginAttrs.imgDir + '/wapu.png'; return ( <div className={ props.className }> <img src={ imgPath } /> </div> ); },
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. • edit save • • CapitalP – https://capitalp.jp/tag/before-gutenberg/ 38
  39. 39. 39

×