カスタムフィールド製造業からの脱却 〜ブロックエディター（Gutenberg）をカスタムする方法〜

WordCampTokyo 2019のセッションにて発表しました登壇資料です。
デモについては、 https://sl.shizum.in/wct2019-demo こちらをご確認ください。

Transcript

2. ΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ ͣ͠Έʢ੩ւ
   ٛ໌ʣ 
3. ࣗݾ঺հ ઐ໳ֶߍଔۀޙ
   ྲྀ௨ؔ܎ͷϓϩάϥϚʹ
   ݁ࠗΛظʹୀ৬
   ಠཱͯ͠8FCۀքʹ
   ݱࡏ͸
   גࣜձࣾαϯφφ
   ͱ
   גࣜձࣾ$*&-
   ͷऔ క໾΍฼ߍͷඇৗۈߨࢣ΋΍͍ͬͯ·͢
 ۽ຊ8PSE1SFTT.FFUVQ
   ΦʔΨφΠβʔ
   5XJUUFS
   
   !4IJ[VNJ
   'BDFCPPL
   
   !:PTIJBLJ4IJ[VNJ ൃදऀۙӨʢ̑೥લʣ
4. ΧελϜϑΟʔϧυ੡଄ۀͬͯʁ
5. ΧελϜϑΟʔϧυ੡଄ۀͬͯʁ ͜ͷݴ༿͕ҙຯ͢Δͷ͸ֹ໘௨Γ ΧελϜϑΟʔϧυ੡଄ۀͳΒͼʹ8FCΞηϯϒϥʔͱ͍͏৬ۀʹ͍ͭͯ
   
   $BQJUBM
   1
 IUUQTDBQJUBMQKQXIBUJTDVTUPNGJFMEJOEVTUPSZBOEXFCBTTFNCMFS Ͱ͋Δɻ ΧελϜϑΟʔϧυΛۦ࢖ͯ͠
 8PSE1SFTTαΠτΛ࡞Δ࢓ࣄ
6. (VUFOCFSHͱϒϩοΫΤσΟλʔ
7. ࠓ೔ߦΘΕ͍ͯΔηογϣϯͷλΠτϧʢҰ෦ʣ (VUFOCFSHͱϒϩοΫΤσΟλʔ ɾθϩ͔Βֶ΅͏ʂϒϩοΫΤσΟλʔʢ(VUFOCFSHʣ
   
   ଜ্
   ௚ࢠ͞Μ
   ɾσβΠϯࣄྫͰݟΔ
   8PSE1SFTT
   ͷΧελϚΠζͱ
 ϒϩοΫΤσΟλʔʢ(VUFOCFSHʣ
   ͰมΘΔະདྷ
   
   ੴ௩
   ઍت͞Μ
   ɾΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫
   
 ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ

   
   ͜ͷηογϣϯ
8. ϒϩοΫΤσΟλʔͬͯ
   (VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ
9. 8IBU
   JT
   (VUFOCFSH ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ l(VUFOCFSHz
   JT
   UIF
   OBNF
   PG
   UIF
   QSPKFDU
   UP
   DSFBUF
   B
   OFX
   FEJUPS
   FYQFSJFODF
   GPS
   8PSE1SFTT IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPSDPOUSJCVUPSTGBR (VUFOCFSHͱ͸ʁ (VUFOCFSHͱ͸ɺ8PSE1SFTTͷ৽͍͠ΤσΟλʔΛ࡞੒͢Δ
 ϓϩδΣΫτͷ໊લͰ͢ɻ
10. ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ ৽ΤσΟλΛ࡞੒͢ΔϓϩδΣΫτͷ͜ͱΛ(VUFOCFSHͱݺͼ·͢
    (VUFOCFSHϓϩδΣΫτʹΑͬͯ஀ੜͨ͠
 ৽͍͠ΤσΟλʔͷ͜ͱΛϒϩοΫΤσΟλͱݺͼ·͢ɻ ͪͳΈʹ೥݄Ҏલ͸৽͍͠ΤσΟλʔͷ͜ͱΛ
 (VUFOCFSHͱݺΜͰ͍·ͨ͠ɻ
11. (VUFOCFSHϓϩδΣΫτͷͦͷઌ͸ʁ ΤσΟλʔΛɺϒϩοΫ Λར༻ͨ͠ܗʹ͢ΔͨΊ ͷج൫੔උɻ ϑΣʔζ ίϯςϯπͷ֎ଆΛΧε λϚΠζͰ͖ΔΑ͏ʹ͢ Δɻ ϑΣʔζ
 ίϥϘϨʔγϣϯػೳͷ ࣮૷ɻڞಉฤू͕Ͱ͖Δ Α͏ʹ͢Δɻ ϑΣʔζʢߏ૝தʣ ެࣜͰෳ਺ݴޠΛѻ͏ͨ Ίͷػೳͷಋೖɻ ϑΣʔζʢߏ૝தʣ
12. (VUFOCFSHϓϩδΣΫτͷͦͷઌ͸ʁ ೥݄ʹ։࠵͞Εͨɺ8PSE$BNQ
    64ʹͯ8PSE1SFTTͷڞಉ૑ ࢝ऀ.BUU
    .VMMFOXFHͷߨԋʹΑΓɺఏࣔ͞Ε·ͨ͠ɻ
13. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ɹ
14. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘
15. ͜Ε·Ͱೲ඼͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ୒ छྨʹ߹Θͤͨ಺༰Λొ࿥
16. "$'Λۦ࢖ͯ͠࡞ͬͨ
    ΦϦδφϧͷϒϩοΫΤσΟλʔ "$'
    "EWBODFE
    $VTUPN
    'JFMEͱ͍͏ɺ
 ΧελϜϑΟʔϧυ੡଄ۀΛࢧ͑Δπʔϧ
17. ͍Ζ͍Ζͳ໰୊఺͕ʜ
18. ͍Ζ͍Ζͳ໰୊఺͕ʜ ɾ ΧελϜϑΟʔϧυʹ͢΂ͯొ࿥͞ΕΔͨΊɺඪ४Ͱ͸αΠτ಺ ݕࡧ͕࢖͑ͳ͍ɻ
    ɾ
    ΧελϜϑΟʔϧυ΋ݕࡧର৅ʹ͢Ε͹Α͍͕ɺݕࡧʹ͕࣌ؒ ͔͔Δɻ
    ɾ ૢ࡞ϛε౳ͰผςʔϚʹมߋ͞ΕΔͱɺ಺༰͕Կ΋දࣔ͞Εͳ ͍ɻ
    ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲ඼ޙͷ୲౰ऀ͕ ͍Ζ͍Ζ৮ͬͨΓʜ
19. هࣄอଘ࣌ʹग़ྗ಺༰Λ
    QPTU@DPOUFOUʹॻ͖ࠐΉॲཧΛ
    ௥Ճ͍ͯ͠·͢ʢͨ͠ʣɻ
20. ϒϩοΫΤσΟλͷొ৔
21. ϒϩοΫΤσΟλʔͷొ৔
22. ͜Εͬͯࠓ·Ͱ࡞ͬͯͨ΋ͷʹ͍ۙʂʂ
23. ͡Ό͋࡞Γม͑ͪΌ͑͹ྑ͍͡ΌΜʂʂʂ
24. ʜͱ͍͏͜ͱͰࠓ
    ϒϩοΫΤσΟλʹ߹Θͤͨ
    ΧελϚΠζΛ͍ͯ͠·͢
25. ຊ೔͸ͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓࿩Ͱ͢
26. ࣗ͝਎ͰϒϩοΫΤσΟλΛΧελϜ͢Δͱ͖ͷ
    ࢀߟͱͯ͠͝ཡ͍ͩ͘͞
27. ݟग़͠ཁૉ
28. ͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ
    ɾ ը૾ʹ͢Δ͔ͷબ୒
 ʢσβΠϯʹґΔʣ
29. ϒϩοΫΤσΟλʔ ɾ େ͖͞͸ϨΠΞ΢τͷ બ୒ͰରԠ
    ɾ ը૾ˠΠϯϥΠϯը૾ ͷ࢖༻
30. ෼ׂίϯςϯπ
31. ͜Ε·Ͱ ɾ ࠨӈʹԿΛ഑ஔ͢Δ͔ Λࡉ͔͘બ୒
    ɾ ௥ՃͰ͖Δ಺༰Λݸผ ʹ࠶ઃఆ͢Δඞཁ͕͋ Δ
32. ϒϩοΫΤσΟλʔ ɾ ΧϥϜϒϩοΫΛ࢖͑ ͹ղܾ
    ɾ ొ࿥಺༰ͷ࠶ઃఆ͸ෆ ཁ
    ɾ ΧϥϜ਺΍ΧϥϜ͝ͱ ͷԣ෯ʢͰࢦఆʣͷ ࢦఆ΋Մೳ
33. ͱɺ͜͜·Ͱ͸
    ඪ४Ͱ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖༻͍ͯ͠·͢
34. ͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰ
    ͜Ε͚ͩͰ΋े෼ศརͰ͢
35. ͨͩ͠ʜ
    ग़ྗʹ͍ͭͯ͸ௐ੔Λ͢Δඞཁ͕͋Γ·͢
36. ඪ४ͷग़ྗ <h2>Heading</h2> )5.-
37. ͜͏͍ͨ͠ <div class="grid-x"> <div class="cell"> <h2>Heading</h2> </div> </div> )5.-
38. ϒϩοΫϑΟϧλͷ
    CMPDLTHFU4BWF&MFNFOU
    Λ࢖༻ͯ͠ɺ
    อଘܗࣜΛॻ͖׵͑Δ͜ͱ͕Ͱ͖·͢ɻ
39. +4ͷಡΈࠐΈ function smzberg_boilerplate_block() { wp_register_script( 'smzberg-custom-block', plugins_url( 'js/smzberg.js', __FILE__ ), [ 'wp-blocks', 'wp-element' ] ); register_block_type( 'smzberg-boilerplate/heading', [ 'editor_script' => 'smzberg-custom-block', ] ); } add_action( 'init', 'smzberg_boilerplate_block' ); 1)1 IUUQTTMTIJ[VNJOXDUEFNP
40. อଘ಺༰ΛϑΟϧλΛ࢖ͬͯॻ͖׵͑Δ let crel = wp.element.createElement; wp.hooks.addFilter( 'blocks.getSaveElement', 'smzberg-boilerplate/heading', function( element, blockType, blockAttributes ) { if ( 'core/heading' === blockType.name ) { // 見出し要素の保存形式を変更する return crel( 'div', { className: 'grid-x' }, crel( 'div', { className: 'cell' }, element ) ); } return element; } ); +4 IUUQTTMTIJ[VNJOXDUEFNP
41. ͢Ͱʹొ࿥ࡁΈͷ಺༰ʹ͍ͭͯ )5.-ͷܗ͕ࣜҟͳΔͨΊฤू ը໘ʹͯΤϥʔϝοηʔδ͕ද ࣔ͞ΕΔɻ ղܾ͢Δ·Ͱ͸ͦΕ·Ͱͷอଘ ܗࣜͷ··දࣔ͞ΕΔɻ
42. IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPS EFWFMPQFSTCMPDLBQJCMPDLSFHJTUSBUJPO ৄ͘͠͸
    #MPDL
    &EJUPS
    )BOECPPL
    ͷ
    #MPDL
    'JMUFSTΛ
    ͝ཡ͍ͩ͘͞
43. ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ
    ઃఆ߲໨͕଍Γͳ͍ͱ͖͸ʁ
44. #MPDL
    'JMUFST
    ͰରԠͰ͖·͢ɻ ɾCMPDLTSFHJTUFS#MPDL5ZQF
    ɾFEJUPS#MPDL&EJU
    ɾCMPDLTHFU4BWF$POUFOUFYUSB1SPQT
45. શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ
46. ͓໰͍߹Θͤઌ৘ใ ͜Μͳͷ
47. ͜Ε·Ͱ ɾ ܾ·ͬͨ಺༰Λॱ൪ʹ ొ࿥͍ͯ͘͠
    ɾ ొ࿥࣌ͷݟ͑ํͱαΠ τ্Ͱͷݟ͑ํ͸ҟͳ Δ
48. ϒϩοΫΤσΟλʔ ɾ ෳ਺ݸͷೖྗཝ͕ଘࡏ͢Δ΋ͷ΋࡞੒Ͱ͖Δ
    ɾ ౤ߘը໘Ͱͷݟͨ໨͸$44ΛؤுΕ͹΄΅ಉ༷ʹ࡞੒Մೳ
49. ΧελϜϒϩοΫͷ௥Ճํ๏͸ʁ
50. SFHJTUFS#MPDL5ZQFΛ࢖༻͠·͢
51. +4ͷಡΈࠐΈ function smzberg_boilerplate_block() { wp_register_script( 'smzberg-custom-block', plugins_url( 'js/smzberg.js', __FILE__ ), [ 'wp-blocks', 'wp-element', 'wp-edit' ] ); register_block_type( 'smzberg-boilerplate/heading', [ 'editor_script' => 'smzberg-custom-block', ] ); } add_action( 'init', 'smzberg_boilerplate_block' ); 1)1 IUUQTTMTIJ[VNJOXDUEFNP
52. ϒϩοΫͷ࡞੒ ͱͯ΋ೖΓ͖Ε ͳ͍ͷͰσϞʂ IUUQTTMTIJ[VNJOXDUEFNP
53. )BOECPPLʹ͸
    ΧελϜϒϩοΫͷ௥Ճͷํ๏΋
    νϡʔτϦΞϧͰࡌͬͯ·͢ʂ
54. #MPDL
    &EJUPS
    )BOECPPL΋
 ಡΜͰΈ·͠ΐ͏
55. ӳޠා͘ͳ͍Α (PPHMF຋༁͕຋༁ͯ͘͠Ε·͢ɻ
    ΄΅ҧ࿨ײͳ͘ಡΊΔΑ͏ʹͳΔͷͰɺར༻͠·͠ΐ͏ɻ
56. ͍Ζ͍Ζࢼߦࡨޡ͠ͳ͕Β΍͍ͬͯ·͢
57. ௐ΂࢝ΊΔͱͪΐͬͱ೉ͦ͠͏ʜ
    Ͱ΋ҊͣΔΑΓ࢈Ή͕қ͠
58. ࡞Γ͍ͨ΋ͷΛਫ਼ࠪͯ͠੔ཧ͢Δ͜ͱ
    ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ
59. Ͱ΋ཱͪࢭ·Γ͗ͣ͢ʹ
    ख΋ಈ͔ͯ͠ΈΔ͜ͱ
60. खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ
61. ࢲ͸ઃܭ͕Ұ൪ۤखͰ͢ ͔ͩΒͦ͜ઃܭͰɺཱͪࢭ·Γ͗ͯ͢͠·͏͘Β͍ͳΒɺҰͭσϞ Λ࡞ͬͯ͠·͏ͷ΋ख͔ͳͱࢥ͍ͬͯ·͢ɻ
    ͦ͜Ͱؾͮ͘͜ͱ΋৭ʑ͋Γ·͢ɻ
62. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ