Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Toro_Unit (Hiroshi Urabe)

September 29, 2018
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. Hello Gutenberg !!!
    [email protected] 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. 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. 9

    View Slide

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

    View Slide

  11. 11

    View Slide

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

    View Slide

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

    View Slide

  14. 14

    View Slide

  15. 15

    View Slide

  16. 16

    View Slide

  17. 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. 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