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

Transcript

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

   View Slide

2. $ whoami
   2
   

   View Slide

3. Toro_Unit
   ઎෦ ߛ (͏Β΂ ͻΖ͠)
   • Frontend Engineer
   • WordPress Plugin and Theme
   Developer
   Github: @torounit
   Twitter: @Toro_Unit
   3
   

   View Slide

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

   View Slide

5. View Slide

6. Contribution
   • WordCamp Kyoto 2017 / Osaka
   2018 / Ogijima 2018 ࣮ߦҕһ
   • WordCamp Osaka 2018 Speaker.
   • etc...
   6
   

   View Slide

7. Plugins and Themes
   • Custom Post Type Permalinks
   • Simple Post Type Permalinks
   • Powerful Posts Per Page (PPPP)
   • Smart PWA • Vanilla
   • and more...
   7
   

   View Slide

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

   View Slide

9. View Slide

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

    View Slide

11. View Slide

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

    View Slide

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

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. DEMO
    18
    

    View Slide

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

    View Slide

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

    View Slide

21. Engineering
    21
    

    View Slide

22. WP API + React
    22
    

    View Slide

23. WP API
    • 4.7 ͰϚʔδ͞ΕͨREST API. ͜ΕʹΑΓ؅ཧը໘Λ
    JavaScriptͰ࡞Γସ͑Δ͜ͱ͕Մೳʹɻ
    React
    • Facebook͕த৺ʹ։ൃ͍ͯ͠ΔJavaScriptͰUIΛ࡞ΔͨΊͷ
    ϥΠϒϥϦɻ
    23
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Lets try!
    27
    

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

31. Notice
    • Gutenberg Λ࢖͍ͨ͘ͳ͍ɺ࢖͑ͳ͍৔߹͸ɺClassic Editor
    ϓϥάΠϯΛಋೖ͢Δͱɺ5.0Ҏ߱΋ࠓ·Ͱ௨ΓͷUIͰҾ͖ଓ
    ͖ฤूՄೳɻҊ݅࣍ୈ͔΋ɻ
    • ςʔϚଆͰ Gutenberg ༻ͷCSS΋͋Δఔ౓͸ॻ͔ͳ͍ͱ͍͚
    ͳ͍ɻ
    • ͍͔ͭ͘ͷػೳ͸ɺςʔϚଆͰ໌ࣔతʹ add_theme_supoort
    Ͱએݴ͢Δඞཁɻ
    31
    

    View Slide

32. ײ૝ͱ͔
    32
    

    View Slide

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

    View Slide

34. ΢ΣϒαΠτͷ։ൃํ๏ʹ͍ͭͯ
    • σβΠϯΧϯϓ ->HTML/CSS -> WordPressςʔϚʹɺΈ͍ͨͳϑϩʔ͸ଟ෼೉͠
    ͍ɻ
    σϑΥϧτͰ͋Δఔ౓CSS͕ద༻͞Ε͍ͯΔͷͰɺͦΕΛελΠϦϯά͍ͯ͘͠ͱ
    ͍͏ྲྀΕʹ͠ͳ͍ͱେมͦ͏ɻ෼ۀ͍ͯ͠Δ৔߹͸ɺͦ͜ΒลΛڠௐ͠ͳ͕Βղܾ
    ͢Δඞཁ͕͋Δɻ
    • ͪΌΜͱཧղͯ͠࢖͑͹͔ͳΓָʹͳΔπʔϧͰ΋͋Δͱ͍͏͜ͱɻ
    • ࣾ಺ͰͷHTML/CSSϑϨʔϜϫʔΫ͕͋ΔͳΒΰϦΰϦʹΧελϚΠζͯ͠
    Gutenbergͷग़ྗΛͦΕʹ߹ΘͤΔͷ΋खஈͱͯ͠͸େ͍ʹݕ౼ͷ༨஍͕͋Δɻ
    • WordPress Ҏ֎ͷબ୒ࢶͩͬͯ͋Δͧɻ
    34
    

    View Slide

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

    View Slide

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

    View Slide