Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14

Slide 15

Slide 15 text

15

Slide 16

Slide 16 text

16

Slide 17

Slide 17 text

17

Slide 18

Slide 18 text

DEMO 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Engineering 21

Slide 22

Slide 22 text

WP API + React 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Lets try! 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ײ૝ͱ͔ 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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