Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
20
Gutenberg
1 WordPress Meetup
@jyokyoku
2
3
36
WordPress
2017 2018 100
2
Gutenberg
4
5
1.
2.
6
•
–
–
–
7
•
–
–
–
8
9
1. PHP [ ]
2. JavaScript ES6 [ ]
3. React [ ]
4. JSX [ ]
10
PHP
• ordPress
11
JavaScript ES6
• JavaScript
• ES6 JavaScript
– ES6 = ECMAScript 6th Edition
– let const
Class import/export
– ES6
12
React
• Facebook JavaScript
• jQuery
– AirBNB Slack Dropbox Instagram Facebook
• Gutenberg React Component
• 2
13
JSX
• React
• JavaScript HTML
• React HTML
– var element = <h1 className=“title”>Title</h1>
14
15
1. node.js [ ]
2. Babel [ ]
3. Webpack [ ]
16
node.js
• JavaScript
• npm
•
17
Babel
•
• ES6 JSX
JavaScript
• ES6 JSX
18
Webpack
•
• JavaScript
1
•
• Babel
– Gulp Browserify
19
• PHP JavaScript ES6
• ES6/JSX
•
20
21
!!
!?
22
Create Guten Block
23
• Gutenberg
• Babel
SCSS 1
• npx
• node.js
24
$ cd /wp/wp-content/plugins/
$ npx create-guten-block { }
25
26
27
plugin.php
src/block/block.js JS
src/block/editor.scss CSS
src/block/style.scss CSS
src/init.php PHP
• block.js
• CSS SCSS CSS
CSS
• JS
CSS init.php
28
29
30
block.js
• registerBlockType
• edit HTML
• save HTML
31
•
npm start
• JSX ES6 SCSS
32
$ cd /wp/wp-content/plugins/{ }
$ npm start
edit
• pluginAttrs init.php
• JSX
33
edit: function( props ) {
const imgPath = pluginAttrs.imgDir + '/wapu.png';
return (
...
save
• edit
• return
34
save: function( props ) {
const imgPath = pluginAttrs.imgDir + '/wapu.png';
return (
<div classNam...
35
36
37
• edit save
•
• CapitalP
– https://capitalp.jp/tag/before-gutenberg/
38
39
Nächste SlideShare
Wird geladen in …5
×

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

24 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×