ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24

Transcript

1. ϒϩοΫΤσΟλʔΧελϚΠζ͜ͱ͸͡Ί
   Toro_Unit @Shinshu WordPress Meetup
   1
   

   View Slide

2. $ whoami
   2
   

   View Slide

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

   View Slide

4. • Gutenberg ͷ։ൃΛͪΐΖͬͱ΍ͬͯ·͢ɻ
   • Shinshu WP Meetup ͷΦʔΨφΠβʔͯ͠·͢ɻ
   • ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͨΓͯ͠·͢ɻ
   • WordPress ͷΠϕϯτͰ஻ͬͨΓ͓ञҿΜͩΓͨ·ʹӡӦख఻ͬͨΓͯ͠·͢ɻ
   4
   

   View Slide

5. ϒϩοΫΤσΟλʔͷΧελϚΠζ
   5
   

   View Slide

6. ࣮͸݁ߏ͍͡ΕΔ
   6
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. ओͳΧελϚΠζํ๏
    • ϒϩοΫελΠϧ
    • ϒϩοΫύλʔϯ
    • ϒϩοΫόϦΤʔγϣϯ
    • ΦϦδφϧͷϒϩοΫΛ࡞੒
    • ϒϩοΫΤσΟλʔϓϥάΠϯͷ࡞੒
    10
    

    View Slide

11. ϒϩοΫελΠϧ
    11
    

    View Slide

12. View Slide

13. ͍͍ͩͨͷϒϩοΫʹ͔͜͜Β class ͸଍ͤΔɻ
    • جຊతʹ͋Μ·Γར༻ऀʹ࢖ΘͤΔؾͷͳ͍ػೳɻ
    (Advanced)
    • ͲΜͳΫϥεॻ͍ͯྑ͍ͷ͔΋ར༻ऀ͸Θ͔Βͳ͍ɻ
    13
    

    View Slide

14. register_block_style(
    'core/heading',
    array(
    'name' => 'with-border',
    'label' => 'With Border',
    'inline_style' => <<< CSS
    .is-style-with-border {
    border-left: 6px blue solid;
    padding-left: 4px;
    }
    CSS,
    )
    );
    14
    

    View Slide

15. View Slide

16. • Ϋϥε͕෇༩͞ΕΔ͚ͩͳͷͰɺCSS͸ผ్༻ҙ͢Δ͜ͱ΋
    Խɻ
    • wp_enqueue_style ͱ͔ɺadd_editor_style Ͱಥͬࠐ
    Ήɻ
    • inline_style Ͱ CSS Λ௥Ճ͢Δͷ͕ख͚ܰͩͲɺϓϨϏϡʔ
    ͰελΠϧ͕ར͔ͳ͍όά͕͋Δɻ
    • https://github.com/WordPress/gutenberg/issues/39944
    16
    

    View Slide

17. ϒϩοΫύλʔϯ
    17
    

    View Slide

18. View Slide

19. View Slide

20. • ෳ਺ͷϒϩοΫͷմΛҰൃͰಥͬࠐΊΔػೳɻ
    • themes/{your-theme}/patterns/{your-pattern}.php ͕
    ͋Ε͹ɺࣗಈతʹύλʔϯͱͯ͠ೝࣝ͞ΕΔɻ
    20
    

    View Slide

21. View Slide

22. Pattern Manager
    • WP Engine ੡
    • ϒϩοΫΤσΟλʔͰύλʔϯΛ࡞
    ੒ɺϑΝΠϧͱͯ͠อଘͱ͔Λ΍ͬ
    ͯ͘ΕΔϓϥάΠϯ
    22
    

    View Slide

23. View Slide

24. ϒϩοΫͷ࡞੒
    24
    

    View Slide

25. ϒϩοΫΛ࡞੒͢ΔϝϦοτ
    ίΞͷϒϩοΫͰ͸ग़དྷͳ͍HTMLߏ଄͕࡞ΕΔ
    • Group ϒϩοΫͰؤுΕ͹ग़དྷΔ͔΋͠Εͳ͍͚Ͳਏ͍
    • ϒϩοΫΤσΟλΛߟྀ͠ͳ͍ߏ଄ͷHTML/CSS΁ͷରԠ
    • ίΞϒϩοΫͷHTMLߏ଄͕ͨ·ʹมΘͬͨΓ͢ΔͷͰɺͦΕʹ߹Θͤͯର
    Ԡ͢Δඞཁ͕ͳ͍ɻ
    • ෳࡶͳσβΠϯͱ͔Λ΍ͬͯΔͱ่ΕͨΓ͕ͪ͠ɻ
    • γϯϓϧʹ͢Δํ޲ʹͳ͍ͬͯΔͷͰ࠷ۙ͸ͦ͜·Ͱ໰୊ʹͳΒͳ͍͔΋
    25
    

    View Slide

26. View Slide

27. View Slide

28. PHP Ͱಈతʹ੍ޚ͢ΔϒϩοΫ
    • ϩάΠϯϢʔβʔʹͷΈදࣔ͢Δϝοηʔδ
    • ࠷৽ͷ౤ߘΛදࣔ
    • AB ςετ
    • ϓϥάΠϯΛແޮʹ͢Δͱಈ࡞͠ͳ͘ͳΔ͜ͱʹ஫ҙ
    28
    

    View Slide

29. ϒϩοΫΤσΟλΛߏ੒͢Δٕज़
    • HTML/CSS (SCSS)
    • JavaScript (TypeScript) / React
    • PHP
    29
    

    View Slide

30. ͱΓ͋͑ͣɺϒϩοΫ࡞੒ʹඞཁͳ΋ͷ
    • Node.js
    • ΤσΟλ
    • WordPress ࣮ߦ؀ڥ
    30
    

    View Slide

31. Node.js
    • JavaScript ͷ࣮ߦΤϯδϯ
    • ݱ୅ͷWEB։ൃͰ͸ίϨ͕ແ͍ͱ͸
    ͡·Βͳ͍ɻ
    31
    

    View Slide

32. ෳ਺ͷόʔδϣϯͷ Node.js Λ੾Γସ͑ΔͨΊʹ͸ɺnvm ͱ
    ͔ Volta ͕ศརɻ
    ͦΜͳ͜ͱ͍ͭ͢Δͷʁͬͯ࿩͚ͩͲɺաڈʹ࡞ͬͨϠπΛमਖ਼ͨ͠Γ͢Δͱ͖ͱ
    ͔ɺNode.js ͷ৽͍͠όʔδϣϯʹରԠͤͨ͞Γ͢Δͱ͖ͱ͔ɻ
    32
    

    View Slide

33. ΤσΟλ
    • ͱΓ͋͑ͣ VSCode ࢖ͬͱ͚͹ؒҧ
    ͍ͳ͍ɻ
    • PHPStorm ΋͍͍ͧɻ
    33
    

    View Slide

34. WordPress ͷ࣮ߦ؀ڥ
    34
    

    View Slide

35. View Slide

36. WordPress Playground for VS Code
    • VSCode Ͱ WordPress ։ൃΛ͢ΔͨΊͷ֦ுػೳ
    • PHP ͱ͔ɹMySQL ͱ͔ Apache ͱ͔Կ΋ͤͣʹɺWordPress ؀ڥ
    ΛखݩͰҰൃͰ্ཱͪ͛ΒΕΔ
    • Windows Ͱ΋ಈ͘ɻ
    • ಺෦తʹ͸ WASM + Node.js (express)
    • ͨ·ʹյΕͨΓͨ͠ͱ͖͸ɺ$HOME/.wp-now/wordpress-versions
    ͷத਎ফͤ͹ͳ͓Δɻ
    36
    

    View Slide

37. wp-env
    • Docker ্Ͱಈ͘ϩʔΧϧ޲͚ͷ։ൃ؀ڥ
    • ϒϩοΫΤσΟλͷ։ൃͱ͔ϓϥάΠϯ։ൃͰΑ͘࢖ΘΕͯΔ
    • ࣗ෼͸ίϨΛ࢓ࣄͰ΋Α͘࢖͏ɻ
    wp-now
    • wp-env ͬΆ͍΍ͭɺWASM Ͱಈ͘ɻVsCode ͷϠπ΋த਎͸͜Εɻ
    37
    

    View Slide

38. local
    • Docker ϕʔεɻGUI ͍ͭͯΔɻ
    • ৭ʑศརػೳ͕ೖͬͯΔɻ
    • Flywheel ͕։ൃ͚ͯͨ͠ͲɺWP
    Engine ʹങऩ͞Εͨɻ
    • ྑ͘ղΜͳ͔ͬͨΒͱΓ͋͑ͣ͜Ε
    ࢖͏ͷ͕͍͍͔΋ɻ
    https://localwp.com/
    38
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. ϒϩοΫͷͻͳܗͷ࡞੒
    $ npx @wordpress/create-block
    42
    

    View Slide

43. View Slide

44. View Slide

45. ϑΝΠϧ໊ ֓ཁ
    {ϓϥάΠϯ໊}.php WordPress ϓϥάΠϯϑΝΠϧ
    block.json ϒϩοΫͷઃఆɺϝλσʔλ
    index.js ϒϩοΫ༻ͷεΫϦϓτ
    edit.js ؅ཧը໘ͰͷϒϩοΫͷUI
    save.js ࣮ࡍʹอଘ͞Εɺදࣔ͞ΕΔϒϩοΫͷUI
    style.scss ϒϩοΫͷελΠϧ
    editor.scss ؅ཧը໘ઐ༻ͷελΠϧ
    45
    

    View Slide

46. νϡʔτϦΞϧ͋Γ·͢ɻ
    https://ja.wordpress.org/team/
    handbook/block-editor/getting-
    started/create-block/
    46
    

    View Slide

47. ฤूՄೳͳςΩετΛ௥Ճ͢Δνϡʔτ
    ϦΞϧ
    npx @wordpress/create-block gutenpride
    \ɹ--template
    \ @wordpress/create-block-tutorial-template
    cd gutenpride
    npm run start
    47
    

    View Slide

48. ྫ͑͹͜Μͳͷ
    • useInnerBlocksProps ͰࢠϒϩοΫΛ࢖͏αϯϓϧ
    48
    

    View Slide

49. edit.js
    import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
    export default function Edit() {
    return (
    
    
    
    );
    }
    49
    

    View Slide

50. save.js
    import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
    export default function save() {
    return (
    
    
    
    );
    }
    50
    

    View Slide

51. ΋͏ͪΐͬͱಥͬࠐΜͩνϡʔτϦΞϧ
    • GutenPride ΑΓ΋͏গ͠ಥͬࠐΜͩ
    νϡʔτϦΞϧɻ
    • ϒϩοΫͷαΠυόʔɾπʔϧόʔͷ
    ઃఆͱ͔ॻ͍ͯ͋ͬͨΓɻ
    51
    

    View Slide

52. Gutenberg ͷιʔείʔυ
    • packages/block-library ҎԼʹίΞͷ
    ϒϩοΫͷίʔυ͕͋Δɻ
    • ಥͬࠐΜͩ͜ͱ΍Γ͔ͨͬͨΒɺί
    ϨΛύΫΔɻ
    52
    

    View Slide

53. ΧελϜϒϩοΫಓ৔
    • https://www.youtube.com/
    @akihamano2805/videos
    • Gutenbergεʔύʔৄ͍͠඿໺͞Μ
    ͕΍ͬͯͨΧελϜϒϩοΫͷϫʔ
    Ϋγϣοϓ
    • ಈը͸ Vol.3͔Βɻ
    53
    

    View Slide

54. learn.wordpress.org
    • WordPress ΦϑΟγϟϧͷνϡʔτ
    ϦΞϧαΠτ
    • ͍͍ͩͨӳޠ
    • ಈը͍ͭͯͨΓ͢Δɻ
    54
    

    View Slide

55. ͦͷଞ Tip
    • ΧελϜϑΟʔϧυͱ͔΋औΓѻ͑Δ
    • ը૾ͷΞοϓϩʔυͱ͔΋10ߦ͘Β͍Ͱग़དྷΔ
    • React ͷࢿ࢈͕࢖͑Δɻ
    • React ྗΛ஁͑ΔͱΊͪΌͪ͘Ό͍Ζ͍Ζग़དྷΔ͚Ͳɺͦ͜
    ·Ͱෳࡶͳͷ͸࡞Βͳ͍͜ͱଟ͍͔ͳ͊ɻ
    55
    

    View Slide

56. ϒϩοΫ։ൃΛ͖ͯͨ͠ײ૝
    • νϡʔτϦΞϧϨϕϧͷ஌ࣝͰ৐Γ੾ΕΔ͜ͱଟ͍ɻ
    • ͪΌΜͱ࡞Ε͹ͦͷ··ผͷҊ݅Ͱ΋࢖͑Δɻ
    • ஍ਤϒϩοΫͱ͔͸·͞ʹͦΕ
    • HTML ॻ͘ਓ͕ผʹ͍Δύλʔϯͱ͔ͦ͏͍͏ͷʹରԠͰ͖Δɻ
    • ϒϩοΫελΠϧͰͱΓ͋͑ͣ΍ΔɺͦΕͰग़དྷͳ͔ͬͨΒɺ࢖
    ͍ͮΒ͔ͬͨΒɺϒϩοΫ։ൃΛߟ͑Δɻ
    56
    

    View Slide

57. ίʔυΛॻ͔ͣʹϒϩοΫ࡞ΕΔϓϥάΠϯͱ͔͋Δ͚ͲɺͲ͏ͳΜʁ
    • Α͘ग़͖ͯͯΔͱ͸ࢥ͏͚Ͳɺجຊతʹ PHPͰ੍ޚͯ͠Δͷ
    ͰɺϓϥάΠϯ͕ແޮͳΔͱɺίϯςϯπ͕ফ͑ͨΓ͢Δɻ
    • ී௨ʹJSͰॻ͔ΕͨϠπ͸ɺHTML͕ͦͷ··อଘ͞ΕͯΔͷ
    ͰɺϓϥάΠϯ͕ແޮʹͳͬͯ΋ɺίϯςϯπ͸ফ͑ͳ͍ɻ
    • ͦͷϓϥάΠϯ΁ͷґଘ͕ߴ͘ͳΓ͗ͯ͢ϦχϡʔΞϧͱ͔Ͱ໰
    ୊ʹͳΓ͕ͪɻ
    • ͦͷϓϥάΠϯͱҰ࿇୑ੜʹͳΕΔʁʁʁʁ
    57
    

    View Slide

58. Any Question ?
    58
    

    View Slide

59. Thanks!
    Twitter: @Toro_Unit
    Github: @torounit
    59
    

    View Slide