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

Transcript

1. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

63. None