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.

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

19 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

×