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

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

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

September 29, 2018
Tweet

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