Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

࣮͸݁ߏ͍͡ΕΔ 6

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ϒϩοΫελΠϧ 11

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ϒϩοΫύλʔϯ 17

Slide 18

Slide 18 text

18

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

ϒϩοΫͷ࡞੒ 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

WordPress ͷ࣮ߦ؀ڥ 34

Slide 35

Slide 35 text

35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39

Slide 40

Slide 40 text

40

Slide 41

Slide 41 text

41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

43

Slide 44

Slide 44 text

44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Any Question ? 58

Slide 59

Slide 59 text

Thanks! Twitter: @Toro_Unit Github: @torounit 59