$30 off During Our Annual Pro Sale. View Details »

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

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

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Programming

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

    View Slide

  8. 8

    View Slide

  9. 9

    View Slide

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

    View Slide

  11. ϒϩοΫελΠϧ
    11

    View Slide

  12. 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. 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. 18

    View Slide

  19. 19

    View Slide

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

    View Slide

  21. 21

    View Slide

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

    View Slide

  23. 23

    View Slide

  24. ϒϩοΫͷ࡞੒
    24

    View Slide

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

    View Slide

  26. 26

    View Slide

  27. 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. 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. 39

    View Slide

  40. 40

    View Slide

  41. 41

    View Slide

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

    View Slide

  43. 43

    View Slide

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