ブロックエディターカスタマイズことはじめ #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
10. ओͳΧελϚΠζํ๏ • ϒϩοΫελΠϧ • ϒϩοΫύλʔϯ • ϒϩοΫόϦΤʔγϣϯ • ΦϦδφϧͷϒϩοΫΛ࡞੒ • ϒϩοΫΤσΟλʔϓϥάΠϯͷ࡞੒ 10
11. ϒϩοΫελΠϧ 11
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
16. • Ϋϥε͕෇༩͞ΕΔ͚ͩͳͷͰɺCSS͸ผ్༻ҙ͢Δ͜ͱ΋ Խɻ • wp_enqueue_style ͱ͔ɺadd_editor_style Ͱಥͬࠐ Ήɻ • inline_style Ͱ CSS Λ௥Ճ͢Δͷ͕ख͚ܰͩͲɺϓϨϏϡʔ ͰελΠϧ͕ར͔ͳ͍όά͕͋Δɻ • https://github.com/WordPress/gutenberg/issues/39944 16
17. ϒϩοΫύλʔϯ 17
20. • ෳ਺ͷϒϩοΫͷմΛҰൃͰಥͬࠐΊΔػೳɻ • themes/{your-theme}/patterns/{your-pattern}.php ͕ ͋Ε͹ɺࣗಈతʹύλʔϯͱͯ͠ೝࣝ͞ΕΔɻ 20
22. Pattern Manager • WP Engine ੡ • ϒϩοΫΤσΟλʔͰύλʔϯΛ࡞ ੒ɺϑΝΠϧͱͯ͠อଘͱ͔Λ΍ͬ ͯ͘ΕΔϓϥάΠϯ 22
24. ϒϩοΫͷ࡞੒ 24
25. ϒϩοΫΛ࡞੒͢ΔϝϦοτ ίΞͷϒϩοΫͰ͸ग़དྷͳ͍HTMLߏ଄͕࡞ΕΔ • Group ϒϩοΫͰؤுΕ͹ग़དྷΔ͔΋͠Εͳ͍͚Ͳਏ͍ • ϒϩοΫΤσΟλΛߟྀ͠ͳ͍ߏ଄ͷHTML/CSS΁ͷରԠ • ίΞϒϩοΫͷHTMLߏ଄͕ͨ·ʹมΘͬͨΓ͢ΔͷͰɺͦΕʹ߹Θͤͯର Ԡ͢Δඞཁ͕ͳ͍ɻ • ෳࡶͳσβΠϯͱ͔Λ΍ͬͯΔͱ่ΕͨΓ͕ͪ͠ɻ • γϯϓϧʹ͢Δํ޲ʹͳ͍ͬͯΔͷͰ࠷ۙ͸ͦ͜·Ͱ໰୊ʹͳΒͳ͍͔΋ 25
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
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
42. ϒϩοΫͷͻͳܗͷ࡞੒ $ npx @wordpress/create-block 42
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