ϒϩοΫΤσΟλʔΧελϚΠζ͜ͱ͡ΊToro_Unit @Shinshu WordPress Meetup1
View Slide
$ whoami2
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• Frontend Developer• WordPress Plugin and ThemeDeveloperGithub: @torounitTwitter: @Toro_Unit3
• Gutenberg ͷ։ൃΛͪΐΖͬͱͬͯ·͢ɻ• Shinshu WP Meetup ͷΦʔΨφΠβʔͯ͠·͢ɻ• ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͨΓͯ͠·͢ɻ• WordPress ͷΠϕϯτͰͬͨΓ͓ञҿΜͩΓͨ·ʹӡӦखͬͨΓͯ͠·͢ɻ4
ϒϩοΫΤσΟλʔͷΧελϚΠζ5
࣮݁ߏ͍͡ΕΔ6
7
8
9
ओͳΧελϚΠζํ๏• ϒϩοΫελΠϧ• ϒϩοΫύλʔϯ• ϒϩοΫόϦΤʔγϣϯ• ΦϦδφϧͷϒϩοΫΛ࡞• ϒϩοΫΤσΟλʔϓϥάΠϯͷ࡞10
ϒϩοΫελΠϧ11
12
͍͍ͩͨͷϒϩοΫʹ͔͜͜Β class ͤΔɻ• جຊతʹ͋Μ·Γར༻ऀʹΘͤΔؾͷͳ͍ػೳɻ(Advanced)• ͲΜͳΫϥεॻ͍ͯྑ͍ͷ͔ར༻ऀΘ͔Βͳ͍ɻ13
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
• Ϋϥε͕༩͞ΕΔ͚ͩͳͷͰɺCSSผ్༻ҙ͢Δ͜ͱԽɻ• wp_enqueue_style ͱ͔ɺadd_editor_style ͰಥͬࠐΉɻ• inline_style Ͱ CSS ΛՃ͢Δͷ͕ख͚ܰͩͲɺϓϨϏϡʔͰελΠϧ͕ར͔ͳ͍όά͕͋Δɻ• https://github.com/WordPress/gutenberg/issues/3994416
ϒϩοΫύλʔϯ17
18
19
• ෳͷϒϩοΫͷմΛҰൃͰಥͬࠐΊΔػೳɻ• themes/{your-theme}/patterns/{your-pattern}.php ͕͋Εɺࣗಈతʹύλʔϯͱͯ͠ೝࣝ͞ΕΔɻ20
21
Pattern Manager• WP Engine • ϒϩοΫΤσΟλʔͰύλʔϯΛ࡞ɺϑΝΠϧͱͯ͠อଘͱ͔Λͬͯ͘ΕΔϓϥάΠϯ22
23
ϒϩοΫͷ࡞24
ϒϩοΫΛ࡞͢ΔϝϦοτίΞͷϒϩοΫͰग़དྷͳ͍HTMLߏ͕࡞ΕΔ• Group ϒϩοΫͰؤுΕग़དྷΔ͔͠Εͳ͍͚Ͳਏ͍• ϒϩοΫΤσΟλΛߟྀ͠ͳ͍ߏͷHTML/CSSͷରԠ• ίΞϒϩοΫͷHTMLߏ͕ͨ·ʹมΘͬͨΓ͢ΔͷͰɺͦΕʹ߹ΘͤͯରԠ͢Δඞཁ͕ͳ͍ɻ• ෳࡶͳσβΠϯͱ͔ΛͬͯΔͱ่ΕͨΓ͕ͪ͠ɻ• γϯϓϧʹ͢Δํʹͳ͍ͬͯΔͷͰ࠷ۙͦ͜·ͰʹͳΒͳ͍͔25
26
27
PHP Ͱಈతʹ੍ޚ͢ΔϒϩοΫ• ϩάΠϯϢʔβʔʹͷΈදࣔ͢Δϝοηʔδ• ࠷৽ͷߘΛදࣔ• AB ςετ• ϓϥάΠϯΛແޮʹ͢Δͱಈ࡞͠ͳ͘ͳΔ͜ͱʹҙ28
ϒϩοΫΤσΟλΛߏ͢Δٕज़• HTML/CSS (SCSS)• JavaScript (TypeScript) / React• PHP29
ͱΓ͋͑ͣɺϒϩοΫ࡞ʹඞཁͳͷ• Node.js• ΤσΟλ• WordPress ࣮ߦڥ30
Node.js• JavaScript ͷ࣮ߦΤϯδϯ• ݱͷWEB։ൃͰίϨ͕ແ͍ͱ͡·Βͳ͍ɻ31
ෳͷόʔδϣϯͷ Node.js ΛΓସ͑ΔͨΊʹɺnvm ͱ͔ Volta ͕ศརɻͦΜͳ͜ͱ͍ͭ͢Δͷʁ͚ͬͯͩͲɺաڈʹ࡞ͬͨϠπΛमਖ਼ͨ͠Γ͢Δͱ͖ͱ͔ɺNode.js ͷ৽͍͠όʔδϣϯʹରԠͤͨ͞Γ͢Δͱ͖ͱ͔ɻ32
ΤσΟλ• ͱΓ͋͑ͣ VSCode ͬͱ͚ؒҧ͍ͳ͍ɻ• PHPStorm ͍͍ͧɻ33
WordPress ͷ࣮ߦڥ34
35
WordPress Playground for VS Code• VSCode Ͱ WordPress ։ൃΛ͢ΔͨΊͷ֦ுػೳ• PHP ͱ͔ɹMySQL ͱ͔ Apache ͱ͔ԿͤͣʹɺWordPress ڥΛखݩͰҰൃͰ্ཱͪ͛ΒΕΔ• Windows Ͱಈ͘ɻ• ෦తʹ WASM + Node.js (express)• ͨ·ʹյΕͨΓͨ͠ͱ͖ɺ$HOME/.wp-now/wordpress-versionsͷதফͤͳ͓Δɻ36
wp-env• Docker ্Ͱಈ͘ϩʔΧϧ͚ͷ։ൃڥ• ϒϩοΫΤσΟλͷ։ൃͱ͔ϓϥάΠϯ։ൃͰΑ͘ΘΕͯΔ• ࣗίϨΛࣄͰΑ͘͏ɻwp-now• wp-env ͬΆ͍ͭɺWASM Ͱಈ͘ɻVsCode ͷϠπத͜Εɻ37
local• Docker ϕʔεɻGUI ͍ͭͯΔɻ• ৭ʑศརػೳ͕ೖͬͯΔɻ• Flywheel ͕։ൃ͚ͯͨ͠ͲɺWPEngine ʹങऩ͞Εͨɻ• ྑ͘ղΜͳ͔ͬͨΒͱΓ͋͑ͣ͜Ε͏ͷ͕͍͍͔ɻhttps://localwp.com/38
39
40
41
ϒϩοΫͷͻͳܗͷ࡞$ npx @wordpress/create-block42
43
44
ϑΝΠϧ໊ ֓ཁ{ϓϥάΠϯ໊}.php WordPress ϓϥάΠϯϑΝΠϧblock.json ϒϩοΫͷઃఆɺϝλσʔλindex.js ϒϩοΫ༻ͷεΫϦϓτedit.js ཧը໘ͰͷϒϩοΫͷUIsave.js ࣮ࡍʹอଘ͞Εɺදࣔ͞ΕΔϒϩοΫͷUIstyle.scss ϒϩοΫͷελΠϧeditor.scss ཧը໘ઐ༻ͷελΠϧ45
νϡʔτϦΞϧ͋Γ·͢ɻhttps://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/46
ฤूՄೳͳςΩετΛՃ͢ΔνϡʔτϦΞϧnpx @wordpress/create-block gutenpride\ɹ--template\ @wordpress/create-block-tutorial-templatecd gutenpridenpm run start47
ྫ͑͜Μͳͷ• useInnerBlocksProps ͰࢠϒϩοΫΛ͏αϯϓϧ48
edit.jsimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';export default function Edit() {return ();}49
save.jsimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';export default function save() {return ();}50
͏ͪΐͬͱಥͬࠐΜͩνϡʔτϦΞϧ• GutenPride ΑΓ͏গ͠ಥͬࠐΜͩνϡʔτϦΞϧɻ• ϒϩοΫͷαΠυόʔɾπʔϧόʔͷઃఆͱ͔ॻ͍ͯ͋ͬͨΓɻ51
Gutenberg ͷιʔείʔυ• packages/block-library ҎԼʹίΞͷϒϩοΫͷίʔυ͕͋Δɻ• ಥͬࠐΜͩ͜ͱΓ͔ͨͬͨΒɺίϨΛύΫΔɻ52
ΧελϜϒϩοΫಓ• https://www.youtube.com/@akihamano2805/videos• Gutenbergεʔύʔৄ͍͠͞Μ͕ͬͯͨΧελϜϒϩοΫͷϫʔΫγϣοϓ• ಈը Vol.3͔Βɻ53
learn.wordpress.org• WordPress ΦϑΟγϟϧͷνϡʔτϦΞϧαΠτ• ͍͍ͩͨӳޠ• ಈը͍ͭͯͨΓ͢Δɻ54
ͦͷଞ Tip• ΧελϜϑΟʔϧυͱ͔औΓѻ͑Δ• ը૾ͷΞοϓϩʔυͱ͔10ߦ͘Β͍Ͱग़དྷΔ• React ͷࢿ࢈͕͑Δɻ• React ྗΛ͑ΔͱΊͪΌͪ͘Ό͍Ζ͍Ζग़དྷΔ͚Ͳɺͦ͜·Ͱෳࡶͳͷ࡞Βͳ͍͜ͱଟ͍͔ͳ͊ɻ55
ϒϩοΫ։ൃΛ͖ͯͨ͠ײ• νϡʔτϦΞϧϨϕϧͷࣝͰΓΕΔ͜ͱଟ͍ɻ• ͪΌΜͱ࡞Εͦͷ··ผͷҊ݅Ͱ͑Δɻ• ਤϒϩοΫͱ͔·͞ʹͦΕ• HTML ॻ͘ਓ͕ผʹ͍Δύλʔϯͱ͔ͦ͏͍͏ͷʹରԠͰ͖Δɻ• ϒϩοΫελΠϧͰͱΓ͋͑ͣΔɺͦΕͰग़དྷͳ͔ͬͨΒɺ͍ͮΒ͔ͬͨΒɺϒϩοΫ։ൃΛߟ͑Δɻ56
ίʔυΛॻ͔ͣʹϒϩοΫ࡞ΕΔϓϥάΠϯͱ͔͋Δ͚ͲɺͲ͏ͳΜʁ• Α͘ग़͖ͯͯΔͱࢥ͏͚Ͳɺجຊతʹ PHPͰ੍ޚͯ͠ΔͷͰɺϓϥάΠϯ͕ແޮͳΔͱɺίϯςϯπ͕ফ͑ͨΓ͢Δɻ• ී௨ʹJSͰॻ͔ΕͨϠπɺHTML͕ͦͷ··อଘ͞ΕͯΔͷͰɺϓϥάΠϯ͕ແޮʹͳͬͯɺίϯςϯπফ͑ͳ͍ɻ• ͦͷϓϥάΠϯͷґଘ͕ߴ͘ͳΓ͗ͯ͢ϦχϡʔΞϧͱ͔ͰʹͳΓ͕ͪɻ• ͦͷϓϥάΠϯͱҰ࿇ੜʹͳΕΔʁʁʁʁ57
Any Question ?58
Thanks!Twitter: @Toro_UnitGithub: @torounit59