Hello Gutenberg !!! / Shinshu WordPress Meetup vol.3

Transcript

1. Hello Gutenberg !!! Toro_Unit@ Shinshu WP Meetup vol.3 1

2. $ whoami 2

3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress

   Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3

4. ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢ 4

5. 5

6. Contribution • WordCamp Kyoto 2017 / Osaka 2018 / Ogijima

   2018 ࣮ߦҕһ • WordCamp Osaka 2018 Speaker. • etc... 6

7. Plugins and Themes • Custom Post Type Permalinks • Simple

   Post Type Permalinks • Powerful Posts Per Page (PPPP) • Smart PWA <- new! • Vanilla • and more... 7

8. WordPress 5.0 • ࣍ͷϝδϟʔόʔδϣϯ • ࠓ೥தʹ͸ϦϦʔε͞ΕΔ͸ͣɻɻɻʁ 8

9. 9

10. Gutenberg ৽͍͠ Gutenberg ฤूΤΫεϖϦΤϯε | https:// ja.wordpress.org/gutenberg/ • WordPress ͷશ͘৽͍͠౤ߘ/ฤूը໘ɻ

    10

11. 11

12. Editing Focus • ϖʔδͷ࡞੒ɺ౤ߘͷ࡞੒ʹͱʹ͔͘ϑΥʔΧεɻ • ʮϒϩοΫʯΛੵΈ্͛ΔܗͰهࣄΛฤूग़དྷΔΑ͏ʹɻ • ϨΠΞ΢τͳͲ΋ɺWordPress ͔Β HTML/CSS౳Λॻ͔ͣʹ

    ߦ͑ΔΑ͏ʹɻ 12

13. ϒϩοΫϕʔε • ཁૉΛ͋Δఔ౓ͷմͱͯ͠औΓѻ͏ɻ • ෳࡶͳHTMLΛඞཁͱ͢Δ΋ͷ΋ɺϒϩοΫͱͯ͠؆୯ʹऔ Γѻ͑ΔΑ͏ʹɻ • ϞμϯͳϒϩάͷϨΠΞ΢τ΋؆୯ʹ࡞੒Ͱ͖Δɻ 13

14. 14

15. 15

16. 16

17. 17

18. DEMO 18

19. Blocks • σϑΥϧτͰ ໿30छྨ + ༷ʑͳαʔϏεͷຒΊࠐΈʢTwitterͱ͔Youtubeͱ͔ʣ • ϒϩοΫͷ৘ใ͸ɺHTMLͱɺίϝϯτͰอଘɻ • PHPͰಈతʹ৘ใΛग़͢͜ͱ΋ग़དྷΔʢex.࠷৽ͷهࣄͷҰཡͱ͔ʣ

    19

20. Outline • ΞΫηγϏϦςΟͳͲʹ΋ܨ͕Δɻ஍ຯ͚ͩͲॏཁͳػೳɻ 20

21. Engineering 21

22. WP API + React 22

23. WP API • 4.7 ͰϚʔδ͞ΕͨREST API. ͜ΕʹΑΓ؅ཧը໘Λ JavaScriptͰ࡞Γସ͑Δ͜ͱ͕Մೳʹɻ React •

    Facebook͕த৺ʹ։ൃ͍ͯ͠ΔJavaScriptͰUIΛ࡞ΔͨΊͷ ϥΠϒϥϦɻ 23

24. Others • Babel :τϥϯεύΠϥ • Webpack :Ϗϧυπʔϧ • jest :Ϣχοτςετπʔϧ

    • etc... 24

25. ։ൃϓϩηε • ݱࡏ͸ WordPress ͷϓϥάΠϯͱͯ͠։ൃதɻ։ൃϨϙδτ Ϧ͸ Github.WordPress/gutenberg • Gutenberg ʹݶΒͣɺ৽ػೳ͸·ͣϓϥάΠϯͱͯ͠։ൃ͞

    ΕɺͦͷޙຊମʹϚʔδ͞ΕΔɻ 25

26. • Gutenberg ʹύον͕Ϛʔδ͞ΕΔͱɺWordPress 5.0 ʹ໊ લ͕ࡌΔͧʂʂ • ೔ຊޠٴͼϚϧνόΠτɺIMEܥ͸ଟ෼͍Ζ͍Ζෆ۩߹͋Δ ͔΋Αʁνϟϯεʂʂ •

    OSSͷ։ൃϑϩʔʹ;ΕΒΕΔྑ͍ػձɻ 26

27. Lets try! 27

28. https://wordpress.org/ gutenberg/handbook/ • APIͷ৘ใͱ͔͸ͦΕͳΓʹ͋Δɻ • ͳΜͲ΋͓ੈ࿩ʹͳΔ͠ɺͨͿΜ ιʔείʔυ΋ಡΉɻ 28

29. ɹGutenberg Ҏલͷهࣄ ʮΫϥγοΫʯϒϩοΫʹ·ͱΊͯ์Γ ࠐ·ΕΔͷͰɺಥવԿ͔͕มΘΔͱݴ͏ ͜ͱ͸ͳ͍ɻ ͜ΕΛϒϩοΫϕʔεʹม׵͢Δػೳ΋ ͋Δ͕ɺHTMLߏ଄΍ɺίϝϯτͳͲ͕ มΘΔͷͰ஫ҙ͕ඞཁɻ 29

30. 30

31. Notice • Gutenberg Λ࢖͍ͨ͘ͳ͍ɺ࢖͑ͳ͍৔߹͸ɺClassic Editor ϓϥάΠϯΛಋೖ͢Δͱɺ5.0Ҏ߱΋ࠓ·Ͱ௨ΓͷUIͰҾ͖ଓ ͖ฤूՄೳɻҊ݅࣍ୈ͔΋ɻ • ςʔϚଆͰ Gutenberg

    ༻ͷCSS΋͋Δఔ౓͸ॻ͔ͳ͍ͱ͍͚ ͳ͍ɻ • ͍͔ͭ͘ͷػೳ͸ɺςʔϚଆͰ໌ࣔతʹ add_theme_supoort Ͱએݴ͢Δඞཁɻ 31

32. ײ૝ͱ͔ 32

33. ΧελϜϑΟʔϧυͱͷൺֱɻ WordPress͸ΧελϜϑΟʔϧυʹ͍Ζ͍ΖೖΕΔΑ͏ͳઃܭʹͳ͍ͬͯͳ͍ɻ͋͘· Ͱ΋ϝλ৘ใΛೖΕΔ৔ॴɻget_post_meta ͩ͠ɻ ΦϦδφϧͷϒϩοΫΛ࡞ΕΔΑ͏ʹͳ͓ͬͯ͘ͱؒҧ͍ແ͘໾ʹཱͭͱࢥ͏ɻຊจཝ ʹͪΌΜͱίϯςϯπ͕ೖΔͷͰɺαΠτ಺ݕࡧͳͲΛΧελϚΠζ͠ͳͯ͘ྑ͍έʔ ε͸૿͑Δɻ ͨͩɺECαΠτͳͲʹ͓͚Δ঎඼ͷIDɺֹۚͳͲɺͦΕ୯ମͰݕࡧର৅ʹͳͬͨΓιʔ τͷ৚݅ʹͳΔΑ͏ͳϞϊɺ୯ମͷσʔλͱͯ͠औΓग़͍ͨ͠Ϟϊ͸ΧελϜϑΟʔϧ υͰɻ

    ࢖͍෼͚ΛͪΌΜͱߟ͑Δඞཁɻ 33

34. ΢ΣϒαΠτͷ։ൃํ๏ʹ͍ͭͯ • σβΠϯΧϯϓ ->HTML/CSS -> WordPressςʔϚʹɺΈ͍ͨͳϑϩʔ͸ଟ෼೉͠ ͍ɻ σϑΥϧτͰ͋Δఔ౓CSS͕ద༻͞Ε͍ͯΔͷͰɺͦΕΛελΠϦϯά͍ͯ͘͠ͱ ͍͏ྲྀΕʹ͠ͳ͍ͱେมͦ͏ɻ෼ۀ͍ͯ͠Δ৔߹͸ɺͦ͜ΒลΛڠௐ͠ͳ͕Βղܾ ͢Δඞཁ͕͋Δɻ

    • ͪΌΜͱཧղͯ͠࢖͑͹͔ͳΓָʹͳΔπʔϧͰ΋͋Δͱ͍͏͜ͱɻ • ࣾ಺ͰͷHTML/CSSϑϨʔϜϫʔΫ͕͋ΔͳΒΰϦΰϦʹΧελϚΠζͯ͠ Gutenbergͷग़ྗΛͦΕʹ߹ΘͤΔͷ΋खஈͱͯ͠͸େ͍ʹݕ౼ͷ༨஍͕͋Δɻ • WordPress Ҏ֎ͷબ୒ࢶͩͬͯ͋Δͧɻ 34

35. ·ͩ࣌ؒ͸͋ΔͷͰɺͱΓ͋͑ͣɺࠓ͔ΒͰ΋ ReactɺWP API Λ৮͓ͬͯ͘ͱྑ͍͜ͱ͋ΔΑଟ෼ɻ 35

36. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 36