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

Transcript

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

2. $ whoami 2

3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress

   Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3

4. • Gutenberg ͷ։ൃΛͪΐΖͬͱ΍ͬͯ·͢ɻ • Shinshu WP Meetup ͷΦʔΨφΠβʔͯ͠·͢ɻ • ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͨΓͯ͠·͢ɻ

   • WordPress ͷΠϕϯτͰ஻ͬͨΓ͓ञҿΜͩΓͨ·ʹӡӦख఻ͬͨΓͯ͠·͢ɻ 4

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

6. ࣮͸݁ߏ͍͡ΕΔ 6

7. 7

8. 8

9. 9

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

    ϒϩοΫΤσΟλʔϓϥάΠϯͷ࡞੒ 10

11. ϒϩοΫελΠϧ 11

12. 12

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

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

15. 15

16. • Ϋϥε͕෇༩͞ΕΔ͚ͩͳͷͰɺCSS͸ผ్༻ҙ͢Δ͜ͱ΋ Խɻ • wp_enqueue_style ͱ͔ɺadd_editor_style Ͱಥͬࠐ Ήɻ • inline_style

    Ͱ CSS Λ௥Ճ͢Δͷ͕ख͚ܰͩͲɺϓϨϏϡʔ ͰελΠϧ͕ར͔ͳ͍όά͕͋Δɻ • https://github.com/WordPress/gutenberg/issues/39944 16

17. ϒϩοΫύλʔϯ 17

18. 18

19. 19

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

21. 21

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

    22

23. 23

24. ϒϩοΫͷ࡞੒ 24

25. ϒϩοΫΛ࡞੒͢ΔϝϦοτ ίΞͷϒϩοΫͰ͸ग़དྷͳ͍HTMLߏ଄͕࡞ΕΔ • Group ϒϩοΫͰؤுΕ͹ग़དྷΔ͔΋͠Εͳ͍͚Ͳਏ͍ • ϒϩοΫΤσΟλΛߟྀ͠ͳ͍ߏ଄ͷHTML/CSS΁ͷରԠ • ίΞϒϩοΫͷHTMLߏ଄͕ͨ·ʹมΘͬͨΓ͢ΔͷͰɺͦΕʹ߹Θͤͯର Ԡ͢Δඞཁ͕ͳ͍ɻ

    • ෳࡶͳσβΠϯͱ͔Λ΍ͬͯΔͱ่ΕͨΓ͕ͪ͠ɻ • γϯϓϧʹ͢Δํ޲ʹͳ͍ͬͯΔͷͰ࠷ۙ͸ͦ͜·Ͱ໰୊ʹͳΒͳ͍͔΋ 25

26. 26

27. 27

28. PHP Ͱಈతʹ੍ޚ͢ΔϒϩοΫ • ϩάΠϯϢʔβʔʹͷΈදࣔ͢Δϝοηʔδ • ࠷৽ͷ౤ߘΛදࣔ • AB ςετ •

    ϓϥάΠϯΛແޮʹ͢Δͱಈ࡞͠ͳ͘ͳΔ͜ͱʹ஫ҙ 28

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

    PHP 29

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

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

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

    32

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

34. WordPress ͷ࣮ߦ؀ڥ 34

35. 35

36. WordPress Playground for VS Code • VSCode Ͱ WordPress ։ൃΛ͢ΔͨΊͷ֦ுػೳ

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

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

    wp-env ͬΆ͍΍ͭɺWASM Ͱಈ͘ɻVsCode ͷϠπ΋த਎͸͜Εɻ 37

38. local • Docker ϕʔεɻGUI ͍ͭͯΔɻ • ৭ʑศརػೳ͕ೖͬͯΔɻ • Flywheel ͕։ൃ͚ͯͨ͠ͲɺWP

    Engine ʹങऩ͞Εͨɻ • ྑ͘ղΜͳ͔ͬͨΒͱΓ͋͑ͣ͜Ε ࢖͏ͷ͕͍͍͔΋ɻ https://localwp.com/ 38

39. 39

40. 40

41. 41

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

43. 43

44. 44

45. ϑΝΠϧ໊ ֓ཁ {ϓϥάΠϯ໊}.php WordPress ϓϥάΠϯϑΝΠϧ block.json ϒϩοΫͷઃఆɺϝλσʔλ index.js ϒϩοΫ༻ͷεΫϦϓτ edit.js

    ؅ཧը໘ͰͷϒϩοΫͷUI save.js ࣮ࡍʹอଘ͞Εɺදࣔ͞ΕΔϒϩοΫͷUI style.scss ϒϩοΫͷελΠϧ editor.scss ؅ཧը໘ઐ༻ͷελΠϧ 45

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

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

    npm run start 47

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

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

    function Edit() { return ( <div {...useBlockProps({ className: "my-class" })}> <div {...useInnerBlocksProps({ className: "my-class__children" })} /> </div> ); } 49

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

    function save() { return ( <div {...useBlockProps.save({ className: "my-class" })}> <div {...useInnerBlocksProps.save({ className: "my-class__children" })} /> </div> ); } 50

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

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

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

    Vol.3͔Βɻ 53

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

55. ͦͷଞ Tip • ΧελϜϑΟʔϧυͱ͔΋औΓѻ͑Δ • ը૾ͷΞοϓϩʔυͱ͔΋10ߦ͘Β͍Ͱग़དྷΔ • React ͷࢿ࢈͕࢖͑Δɻ •

    React ྗΛ஁͑ΔͱΊͪΌͪ͘Ό͍Ζ͍Ζग़དྷΔ͚Ͳɺͦ͜ ·Ͱෳࡶͳͷ͸࡞Βͳ͍͜ͱଟ͍͔ͳ͊ɻ 55

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

    • ϒϩοΫελΠϧͰͱΓ͋͑ͣ΍ΔɺͦΕͰग़དྷͳ͔ͬͨΒɺ࢖ ͍ͮΒ͔ͬͨΒɺϒϩοΫ։ൃΛߟ͑Δɻ 56

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

    ୊ʹͳΓ͕ͪɻ • ͦͷϓϥάΠϯͱҰ࿇୑ੜʹͳΕΔʁʁʁʁ 57

58. Any Question ? 58

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