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

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
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
10. Gutenberg ৽͍͠ Gutenberg ฤूΤΫεϖϦΤϯε | https:// ja.wordpress.org/gutenberg/ • WordPress ͷશ͘৽͍͠౤ߘ/ฤूը໘ɻ 10
12. Editing Focus • ϖʔδͷ࡞੒ɺ౤ߘͷ࡞੒ʹͱʹ͔͘ϑΥʔΧεɻ • ʮϒϩοΫʯΛੵΈ্͛ΔܗͰهࣄΛฤूग़དྷΔΑ͏ʹɻ • ϨΠΞ΢τͳͲ΋ɺWordPress ͔Β HTML/CSS౳Λॻ͔ͣʹ ߦ͑ΔΑ͏ʹɻ 12
13. ϒϩοΫϕʔε • ཁૉΛ͋Δఔ౓ͷմͱͯ͠औΓѻ͏ɻ • ෳࡶͳHTMLΛඞཁͱ͢Δ΋ͷ΋ɺϒϩοΫͱͯ͠؆୯ʹऔ Γѻ͑ΔΑ͏ʹɻ • ϞμϯͳϒϩάͷϨΠΞ΢τ΋؆୯ʹ࡞੒Ͱ͖Δɻ 13
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
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