ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23

Toro_Unit (Hiroshi Urabe)

September 23, 2023

Tweet Share

Transcript

1. ブロックエディタをゴリゴリに使い倒してサイトを作った話 Toro_Unit @Kansai WordPress Meetup 2023.09.23

2. $ whoami

3. Toro_Unit 占部 紘 (うらべ ひろし) • Frontend Developer • WordPress

   Plugin and Theme Developer • Gutenberg Team Github: @torounit Twitter: @Toro_Unit 3

4. 長野県松本市[^1]からきました * 毎回ピザ食ってます。 * 9/30 @松本 * 11/18 @松本 (仮)

5. • Gutenberg ͷ։ൃΛͪΐΖͬͱ΍ͬ ͯ·͢ɻ • Shinshu WP Meetup ͷΦʔΨφΠ βʔͯ͠·͢ɻ

   • ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͨ Γͯ͠·͢ɻ • WordPress ͷΠϕϯτͰ஻ͬͨΓ͓ ञҿΜͩΓͨ·ʹӡӦख఻ͬͨΓ͠ ͯ·͢ɻ 5

6. WordCamp Tokyo 2023 2023/10/21@༗໌ ேΠνͷηογϣϯͷύωϧσΟεΧο γϣϯʹొஃ͠·͢ɻΑΖ͘͠Ͳ͏ͧɻ https://tokyo.wordcamp.org/2023/ session/session-a1/ 6

7. Agenda 1. ֓ཁ 2. ϒϩοΫͷ։ൃʹ͍ͭͯ 3. ςʔϚଆͷ։ൃ 4. ϒϩοΫΤσΟλʔΛ࢖͍౗͢͜ͱʹΑΔϝϦοτ 5.

   ϒϩοΫ։ൃͰֶͿ΂͖͜ͱ 6. ՝୊ײ 7. ͓ؾ࣋ͪද໌ 7

8. ڈ೥ͷ೥຤ʹαΠτΛϦχϡʔΞϧ͠·ͨ͠ɻ https://satori.marketing • ΢ν͸ WP ଆͷ࣮૷ͱ͔΋Ζ΋Ζ୲౰ɻσβΠϯ͸֎෦ɻ • ։ൃظؒ͸ɺ3-4ϲ݄͘Β͍ɻ 8

9. 9

10. ϖʔδฤूը໘͸͜Μͳײ͡ɻ 10

11. 11

12. ͍͍ͩͨಉ͡ݟͨ໨! 12

13. • ࡞੒ϒϩοΫ਺ɿ27ݸ • ਌ࢠؔ܎ͷϒϩοΫ͸1ͭͷϒϩοΫͱͯ͠Χ΢ϯτ͢Δ ͱɺ20ݸ͘Β͍ɻ • αΠτͷن໛ʹͯ͠͸͋Μ·Γଟ͘ͳ͍ؾ͕͢Δ͚Ͳɺօ͞ ΜͲ͏Ͱ͢ʁ 13

14. ϦχϡʔΞϧͰղܾ͔ٕͨͬͨ͠ज़తͳ՝୊ • ݻఆϖʔδ / ηϛφʔ৘ใ / ಋೖࣄྫ ౳͕ΧελϜϑΟʔϧ υ·ΈΕͰɺߋ৽Ͱ͖ͳ͍ɻ •

    ςϯϓϨʔτଆ΋ if จ·ΈΕͰɺϝϯςφϯε͕ࠔ೉ɻ • ڍಈ͕ෆ໌ͱ͔͍Ζ͍Ζɻ 14

15. • ΧελϜϑΟʔϧυࡇΓͱɺςʔϚ಺ͷ if จࡇΓɺαΠτอकͰ ؔΘ͍ͬͯͨࣗ෼ͨͪ΋͍Ζ͍Ζ͠ΜͲ͍ɻ • मਖ਼ґཔ͕དྷΔͨͼʹɺίʔυΛमਖ਼͠ɺͦΕΛ֬ೝͯ͠΋Β͏ ͷ΋ɺͦΕΛผͷαʔόʔʹσϓϩΠͯ͠ݟͯ΋Β͏ඞཁ͕͋ Γɺ·͊·͊ίετ͕ߴ͍ɻ •

    ӡ༻ऀͷཁ๬Ͱ͍͍ͪͪςΩετमਖ਼ʹςʔϚΛมߋ͢Δͷ͸ɺ ͓ޓ͍ʹͱͬͯ໘౗͍͘͞ɻ • ͍ͨͨ͜͠ͱͰ͸ແ͍͔΋͚ͩͲɺίεύ͕ѱ͍ɻͦΕ͕ੵ Έ্͕ͬͯ৘ใൃ৴ͷεϐʔυ͕஗͘ͳΔɻ 15

16. ϒϩοΫΤσΟλ΁ͷ׳Εɻ • ͠Εͬͱɺ5.0 ͰϒϩοΫΤσΟλʹม͚͑ͨͲɺಛʹԿ΋ ݴΘΕͣɻ • ࠷ॳ͸ΫϥγοΫϒϩοΫͰهࣄΛॻ͍͍͕ͯͨɺঃʑʹϒ ϩοΫʹͳ͍ͬͯͬͨɻ • ෆ໌఺ͱ͔͸ͪ͜ΒͰ૬ஊʹ৐ͬͨΓɻ

    16

17. શ෦ϒϩοΫΤσΟλʔͰ؅ཧ͢Δํ ޲ͰͷϦχϡʔΞϧ 17

18. ͜ͷҊ݅Λ΍Δ্ͰɺҰ൪େࣄʹͨ͜͠ͱɻ ؅ཧը໘͔ΒฤूෆՄೳͳจࣈྻ͸࡞Βͳ͍ɻ 18

19. Why ? 19

20. • ʮ͜͜͸Ͳ͏΍ͬͯߋ৽͢Δͷʁͷ໰͍ͷલʹɺͦ΋ͦ΋ࣗ ෼ͨͪͰߋ৽Ͱ͖Δʁʯͱ͍͏໰͍͕݁ߏ߹ͬͨɻ • ͍͍ͪͪͦ͜Λؾʹ͢Δͷͬͯ CMS ͱͯ͠͸Ͳ͏ͳͷʁ • ະདྷ͕༧ଌෆՄೳɻઌํͷ޿ใͷํ਑΋൒೥ޙɺ1೥ޙʹม ΘΔ͔΋ɻ

    20

21. ࣗ෼ͨͪͷ৘ใൃ৴Λࣗ਎Ͱίϯτϩʔϧ͍͔ͨ͠ΒCMSΛ࢖͏ΜͩΑͶʁ 21

22. ։ൃମ੍ 22

23. ͸·ͷ͞Μ(@wildworks) • ϒϩοΫ։ൃɺΤσΟλʔͷ֦ுͷ ϓϥάΠϯΛத৺ʹ୲౰ɻ • Gutenberg ͷ͛͢ʔ΍ͭɻ • WC Tokyo

    ͰҰॹʹ஻Γ·͢ɻ 23

24. K͞Μ(@mypacecreator) • ςʔϚ։ൃɺϒϩοΫΛར༻ͯ͠ͷ ϖʔδ࡞੒Λத৺ʹ୲౰ɻ • ʮWordPressςʔϚ;ͭʔʹ࡞ͬ ͯʯͬͯΦʔμʔʹͪΌΜͱී௨ʹ ࡞ͬͯ͘ΕΔɻ • ςʔϚͪΌΜͱ

    ී௨ʹ ࡞Δͬͯ΄Μ ͱʹग़དྷΔਓ͕গͳ͍ɻ 24

25. ࣗ෼ͷ୲౰ • ϒϩοΫ౳ͷ࢓༷ͷܾఆɻίʔυͷϚʔδɻ • ϒϩοΫ։ൃɻ • ࡉ͔͍ϓϥάΠϯ։ൃɻ • ΧελϜϑΟʔϧυΛ༻͍ΔՕॴͷΤσΟλʔͷ֦ுͱ͔ɻ 25

26. ϒϩοΫͷ։ൃ 26

27. ϫʔΫϑϩʔ • Figma ͷσβΠϯΛ֬ೝ͠ͳ͕Β࡞੒͢΂͖ϒϩοΫΛఆٛɻ • ϝϯόʔશһͰɺFigma ͷσʔλΛݟͳ͕Β͋ʔͩ͜ʔͩ ݴ͍߹ͬͯɺissue Λ࡞੒ɻ •

    ແཧ͡ΌͶʁͬͯͷ͸σβΠϯଆʹϑΟʔυόοΫɻ • جຊతʹ͸ɺࣗ෼ or ඿໺͞Μ͕ϒϩοΫΛ։ൃ͠ PR Λग़ ͠ɺ૬ޓʹϨϏϡʔɻ 27

28. ϒϩοΫΤσΟλʔΛ༻͍ͨαΠτ੍࡞ʹ͓͚Δॾ໰୊ 28

29. ϒϩοΫ਺ͷංେԽ 29

30. • σβΠϯΛ۪௚ʹϒϩοΫԽ͢ΔͱϒϩοΫ਺͕ංେԽ͢ Δɻ • ։ൃɺ؅ཧɺӡ༻ɺอकɺ༷ʑͳͱ͜ΖͰίετ͕͔͔Δɻ • ͳʹ࢖ͬͯྑ͍ͷ͔Θ͔Βͳ͘ͳΔɻ • ϒϩοΫελΠϧ /

    ϒϩοΫύλʔϯͰ΋ಉ༷ͷ໰୊͸ى͖ Δɻ 30

31. ͜ͷ໰୊΁ͷղܾࡦͱͯ͠΍ͬͨ͜ͱɻ ॻࣜπʔϧόʔ API (Format API) 31

32. ݟग़͠ΛίΞͷʮݟग़͠ʯϒ ϩοΫͰ࡞੒ RichText Λ֦ு͢Δ͜ͱͰɺ <span class="your-custom-class"></span> Λ଍ͤΔΑ͏ʹɻ ϒϩοΫΛબͿΑΓ͸௚ײతʹૢ࡞Ͱ ͖ɺݻఆϖʔδͳͲͷࢠݟग़͠౳ʹ༻͍ Δ͜ͱͰɺϒϩοΫΛ࡞੒͢Δඞཁ͕ແ

    ͘ͳΔɻ 32

33. Demo 33

34. ॻࣜπʔϧόʔ API (Format API) • ଠࣈͱ͔ɺϋΠϥΠτΛͱ͔ΛςΩε τʹద༻ͨ͠Γ͢Δ΍ͭɻ೚ҙͷλ άɺ೚ҙͷΫϥεΛద༻Ͱ͖Δɻ • Ωϟονίϐʔɺݟग़͠ͷύλʔϯͱ

    ͔͸͜ΕͰ͍͍ͩͨͳΜͱ͔ͳΔͷ Ͱ͸ɻ https://ja.wordpress.org/team/ handbook/block-editor/how-to-guides/ format-api/ 34

35. import { registerFormatType, toggleFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton

    } from '@wordpress/block-editor'; const MyCustomButton = ( { isActive, onChange, value } ) => { return ( <RichTextToolbarButton icon="editor-code" title="Sample output" onClick={ () => { onChange( toggleFormat( value, { type: 'my-custom-format/sample-output', } ) ); } } isActive={ isActive } /> ); }; registerFormatType( 'my-custom-format/sample-output', { title: 'Sample output', tagName: 'samp', className: null, edit: MyCustomButton, } ); 35

36. RichText Extension ؅ཧը໘͔ΒͦͷลͷઃఆΛߦ͑ΔΑ͏ ʹ͢ΔϓϥάΠϯɻ(඿໺͞Μ࡞) https://wordpress.org/plugins/richtext- extension/ ࠓճ͸ઃఆͳͲΛϨϙδτϦͰ؅ཧͨ͠ ͔ͬͨͷͰɺjsonϑΝΠϧͰઃఆΛఆٛ Ͱ͖ΔΑ͏ʹͨ͠΋ͷΛผ్։ൃ͍ͯ͠ Δɻ

    36

37. ޮՌ • ݟग़ؔ͠࿈ͷϒϩοΫͰ࡞੒ͨ͠΋ͷ͕ 3͚ͭͩɻ • ΞΠίϯΛࢦఆͰ͖ΔΑ͏ʹͨ͠Ϡπͱ͔ɻ • ݟग़͠/ڧௐͷσβΠϯͷόϦΤʔγϣϯͷ΄ͱΜͲΛ௨ৗͷ ݟग़͠ɾஈམϒϩοΫͰ࣮ݱɻ 37

38. ςʔϚͱϒϩοΫͷ੹຿͕ᐆດ 38

39. • ৭ͷఆٛͳͲ͸ theme.json Ͱߦ͍͍ͨɻ • ϒϩοΫଆͰCSSΛهड़͢ΔͱɺςʔϚଆͰͷΧελϚΠζ ͕೉͘͠ͳΔɻ • ͜͜ΒลΛͪΌΜͱ͠ͳ͍ͱɺλεΫͷ෼ղ͕೉͘͠ͳΔ ͠ɺઃܭ͕ഁ୼͢ΔݪҼɻ

    39

40. ৭͸ɺςʔϚଆͰఆٛ • ϒϩοΫଆͰ͸جຊతʹɺ৭ͳͲΛ ࣋ͨͳ͍ɻ(ϨΠΞ΢τͷΈ) • ৭ɺόϦΤʔγϣϯͳͲ͸ɺςʔϚ ଆͰఆٛ͢Δɻ • ίΞͷελΠϧΛςʔϚͰ্ॻ͖͢ Δͷͱಉ͡։ൃϑϩʔͰ࡞ۀग़དྷΔ

    Α͏ʹɻ 40

41. • ϒϩοΫଆͷ੹຿͸ɺཁૉͷ഑ஔఔ౓ʹɻ(੾Γ෼͚͸೉͠ ͍ɻ) • CSS ͸શମతʹ΋͏গ͠ςʔϚଆͰهड़ͯ͠΋ྑ͔ͬͨͱ͸ ࢥͬͯΔ͕ɺࣄલʹͦ͜ΒลΛઃܭͰ͖Δͷ͔͸ͪΐͬͱΘ ͔Βͳ͍ɻ 41

42. block.json "supports": { "spacing": { "margin": true }, "color": {

    "text": true, "background": true } }, Block Supports ͷઃఆͰɺ؅ཧը໘ଆͰઃఆग़དྷΔ߲໨Λ૿΍ͯ͠ɺσβΠϯ తͳ੍໿ΛϒϩοΫଆͰ͸ͳΔ΂࣋ͨ͘ͳ͍Α͏ʹɻ 42

43. ϒϩοΫελΠϧҎ֎ͷํ๏ͰͷελΠϧͷ֦ுΛߟ͑Δ • ϒϩοΫελΠϧ͸ɺ୯Ұͷ class ͔͠ίϯτϩʔϧग़དྷͳ ͍ͷͰ͙͢ʹංେԽ͢Δɻ • എܠ3छྨxxϘʔμʔ3छྨͰɺ9छྨͷελΠϧ͕ඞཁʹ ͳΔɻ •

    ϒϩοΫελΠϧ͕ଟ͗͢Δͱར༻ࠔ೉ɻ 43

44. 44

45. 45

46. Block Extensions https://gutenberg.10up.com/ reference/Blocks/block-extensions 10up੡ͷ @10up/block-components ౳ Λ༻͍ΔͱղܾՄೳɻ (ࠓճ͸ෆ࠾༻) 46

47. import { registerBlockExtension } from '@10up/block-components'; function BlockEdit(props) {...} function

    generateClassNames(attributes) {...} registerBlockExtension( 'core/group', { extensionName: 'background-patterns', attributes: { hasBackgroundPattern: { type: 'boolean', default: false, }, backgroundPatternShape: { type: 'string', default: 'dots', }, backgroundPatternColor: { type: 'string', default: 'green' } }, classNameGenerator: generateClassNames, Edit: BlockEdit, } ); 47

48. ςʔϚ։ൃ 48

49. ϒϩοΫςʔϚ or ΫϥγοΫςʔϚʁ • 2022/08ͷঢ়گ(WordPress 6.0)Ͱ͸ɺϒϩοΫςʔϚ͸Ϧε Ϋ͕ߴ͍ͱ൑அɻ • theme.json Λಋೖͨ͠ΫϥγοΫςʔϚʢϋΠϒϦουςʔ

    ϚʣΛ࡞੒ɻ 49

50. ςʔϚ։ൃͰ͓ئ͍ͨ͜͠ͱ 50

51. جຊతʹ͸ɺී௨ʹςʔϚ࡞ͬͯʂͱ͍͏ײ͡ɻ • ͜͜Ͱݴ͏ී௨͸ɺWP.org ʹܝࡌ͢ΔΑ͏ͳςʔϚͱಉ͡ Α͏ͳײ͡Ͱɺͱ͍͏͜ͱɻ • ଍Γͳ͍ཁૉ͸ɺregister_block_style Ͱ௥Ճ͢Δ͔ɺϒ ϩοΫଆͰରԠɻ •

    ಛผͳ class ͸جຊతʹ͸༻ҙͤͣɺ؅ཧը໘্ͰͷઃఆͰ ରԠɻ 51

52. CSS ʹ͍͔ͭͯΜ͕͑Δ͜ͱɻ • ϝϯςφϯεੑΛͲ͏֬อ͢Δ͔ɻͲ͏ݮΒ͔͢ɻ • Ұ౓͔͠ग़ͯ͜ͳ͍Α͏ͳελΠϧ͕૿Ճ͢Δͱϝϯςφϯ εੑ͕Լ͕Δɻ 52

53. ͜ͷ໰୊΁ͷղܾࡦͱͯ͠΍ͬͨ͜ͱɻ ΤσΟλͰग़དྷΔ͜ͱ͸ΤσΟλଆͰ 53

54. • ϑΥϯταΠζͷઃఆɺϒϩοΫͷ ϚʔδϯͳͲ͸جຊతʹ͸ΤσΟ λʔ্ͰରԠɻ • ͦ͜ΒลΛ؆୯ʹมߋՄೳͳͷ͕ྑ ͞ɻ • HTMLͷ؅ཧʁ WordPress

    ͷϦϏ δϣϯͰɻ • ൚༻తͳ΋ͷΛͳΔ΂͘࡞ͬͯɺͦ ΕΛ૊Έ߹ΘͤͯϖʔδΛ࡞ΔΠ ϝʔδɻ 54

55. HTML / CSS ։ൃͰ͸ແ͘ɺ͋͘·Ͱ΋ςʔϚ։ൃͱଊ͑Δɻ • தͰͲΜͳϖʔδͰ΋͋Δఔ౓։ൃՄೳͳΑ͏ʹɺσβΠϯ γεςϜΛఏڙ͢Δͷ͕ςʔϚͷ໾ׂɻ • HTML Λॻ͘ͷ͸جຊతʹ͸ΤσΟλʔͷ໾ׂɻ

    55

56. ී௨ʹςʔϚ࡞ͬͯͱ͸ݴ͏΋ͷͷɺ theme.json ͷಋೖͰςʔϚଆͰؾΛݣ ͏͜ͱ͕ͦΕͳΓʹ͋Δɻ ৄࡉ͸ɺ ʲWordPressʳ डୗ։ൃʹ͓͚ΔϋΠ ϒϦουςʔϚ։ൃ: https://qiita.com/ AkiHamano/items/

    4166dd093e2ba03c57d7 ͕ΊͬͪΌৄ͍͠ɻ 56

57. λΠτϧͷऔѻ͍ ϖʔδ͝ͱʹλΠτϧͷϨΠΞ΢τ͕ҧͬͨΓɺ ΧελϚΠζͨ͘͠ͳͬͨΓ͢ΔͷͰɺ the_title() ͸ςϯϓϨʔτʹهड़͠ͳ͍ํ͕ ྑ͍͔΋ɻ ͦͷ୅ΘΓʹɺλΠτϧϒϩοΫ(core/post- title) Λ༻͍ΔΑ͏ʹͨ͠ํ͕Ұ؏ੑ͕͋ͬͯ ྑ͍ɻ

    ৽ن࡞੒࣌ʹɺλΠτϧϒϩοΫΛࣗಈͰ௥Ճ͢ ΔΑ͏ʹ͢Δͱ͔ͰରԠɻ • VK Block Patterns(Vector,Inc ੡) / Pattern Manager (WP Engine) ͱ͔Ͱɻ 57

58. ΢ΟδΣοτͷ໰୊ WordPress 5.8 ͔Β΢ΟδΣοτͰ΋ϒϩοΫΤσΟλʔ͕ར༻ Մೳʹͳ͕ͬͨɻ • ΤσΟλʔͷը໘෯͕ҧ͏ɻαΠυόʔҎ֎ʹ͸ෆదɻ • ग़ྗ͞ΕΔϚʔΫΞοϓ͕ҧ͏ɻ(چདྷͷ΢ΟδΣοτͱͷޓ ׵ੑ)

    ͳͲͷ໰୊ɻ 58

59. 59

60. 60

61. ϒϩοΫςϯϓϨʔτύʔπͷಋೖ • ϒϩοΫςʔϚͷςϯϓϨʔτύʔ πػೳΛɺΫϥγοΫςʔϚͰ΋ར ༻Մೳʹɻ(WP 6.1) 61

62. ͦͷଞॾ໰୊ 62

63. ಉظύλʔϯ(࠶ར༻ϒϩοΫ)ͷ໰୊ɹ <!-- wp:block {"ref": 123} /--> ͷΑ͏ʹอଘ͞Εɺ <div class=" block-editor-block-list__block

    wp-block has-block-overlay block-library-block__reusable-block-container is-reusable wp-block-block block-editor-block-list__layout" aria-label="ϒϩοΫ: ύλʔϯ"> ࠶ར༻ϒϩοΫͷத਎ </div> ͷΑ͏ʹɺΤσΟλʔ্Ͱ͸ϨϯμϦϯά͞Εɺϖʔδͱͯ͠ ͸ɺத਎͕ͦͷ··ग़ྗ͞ΕΔɻ 63

64. • ࠶ར༻ϒϩοΫͷத਎͕ɺalignwide, alignfull ౳Λ࣋ͬ ͍ͯͨ৔߹ɺ͜ΕΒ͕ΤσΟλʔ্Ͱਖ਼͘͠දࣔ͞Εͳ͍ɻ • ࠶ར༻ϒϩοΫͷ਌ʹɺʮίϯςϯτ෯Λ࢖༻͢ΔΠϯφʔ ϒϩοΫʯΛ off ʹͨ͠ɺશ෯ͷάϧʔϓΛ༻ҙ͠ɺͦͷத

    ʹ࠶ར༻ϒϩοΫΛೖΕΔ͜ͱͰରԠɻ άϧʔϓϒϩοΫͷڍಈ͸৭ʑͱ೉͍͠ɻɻɻ 64

65. ϒϩοΫΤσΟλʔΛ࢖͍͓ͨ͢ϝϦοτ 65

66. ςʔϚͷσϓϩΠճ਺͕ݮΔɻ • ςʔϚͳͲΛมߋ͠ͳͯ͘ྑ͍ͷͰɺσϓϩΠͰͷࣄނͳͲ ͕ஔ͖ʹ͘͘ɻ • ಈ͍ͯΔίʔυΛมߋ͢Δͷ͸ɺϦεΫ͕͋ΔߦҝͰ͸͋ Δɻ 66

67. ϒϩοΫΤσΟλؒͰͷίϐϖ͕Մೳ • جຊతʹ ϩʔΧϧ؀ڥʹ DB ͸ಉظ͠ͳ͍Ͱ։ൃɻ • ࠔͬͨΒɺϒϩοΫΤσΟλͷίʔυΛڞ༗ͨ͠Γɻ • Ͳ͏ͯ͠΋खݩʹཉ͔ͬͨ͠Βɺ։ൃαʔόʔ͔Β

    xml ΛΤ Ϋεϙʔτͯ͠ɺΠϯϙʔτͨ͠Γɻ 67

68. ίϯςϯπ؅ཧͷ UX ͷ޲্ • ʮจࣈྻͷมߋ͕ग़དྷΔ͔ग़དྷͳ͍͔ʯΛϢʔβʔ͕ߟ͑ͳ ͯ͘ྑ͍Α͏ʹɻ • ʮ͜͜͸มߋՄೳ/͜͜͸ग़དྷ·ͤΜʯ͕͋Δͱͦ΋ͦ΋ Ϣʔβʔ͕ࠞཚ͢Δɻ •

    ςΩετͷมߋ͘Β͍ࣗ෼ͨͪͰαΫοͱग़དྷΔΑ͏ʹͳͬ ͍ͯͨํ͕ɺ૒ํָͰ͢ΑͶɻ 68

69. ࠶ར༻ੑͷ޲্ • ஍ਤϒϩοΫͳͲͷϑϩϯτଆͰͷ ౳Λ༻͍ͨϒϩοΫ౳Λͻͱ·ͱΊ ʹɻ࠶ར༻ੑͷ޲্ɻ • ಉ͡ϒϩοΫΛਓੜͰ2౓ͱ࡞Βͳ͍ ͱ͍͏ؾ࣋ͪɻ • npm

    Ͱ഑෍͞Ε͍ͯΔɺReact ͷࢿ ࢈͕ͦͷ··࢖͑Δɻ 69

70. σβΠϯΛ੍ޚ͢ΔͨΊͷϩδοΫͷഉআ • ΧελϜϑΟʔϧυɺςϯϓϨʔτͰͷ if จ͕ WordPress α ΠτϝϯςφϯεੑΛඇৗʹѱ͘͢Δɻ • 1ϖʔδͷͨΊʹςϯϓϨʔτʹϩδοΫΛهड़ͨ͠Γ౳

    Ͱɺഁ୼ͨ͠αΠτΛԿݸ΋ݟ͖ͯ·ͨ͠ΑͶʁ • ͦͷΧελϜϑΟʔϧυɺҠߦग़དྷΔʁ໰୊ 70

71. ͜͜਺೥ͷ޻਺ͷมԽ 71

72. • ϒϩοΫΤσΟλҎલͱͦΜͳʹมΘͬͯͳ͍ؾ͸͢Δɻ • ϒϩοΫΤσΟλʹͳ͔ͬͨΒ޻਺͕૿͑ͨͬͯ͜ͱ΋ແ ͍ɻ • ΧελϜϑΟʔϧυӠʑͱ͔ͷ࿩͕ݮͬͨͿΜɺτϯτϯͳ Πϝʔδɻ • PHP

    Λॻ͍ͯͨ޻਺͕ React ʹͳͬͨײ֮ɻ 72

73. ϒϩοΫύλʔϯ or ϒϩοΫ։ൃ 73

74. ݁࿦ɿͲͬͪ΋࢖͏ɻ 74

75. • ωετͨ͠άϧʔϓϒϩοΫͷ૊Έ߹ΘͤͰఏڙ͞ΕΔσβ Πϯ͸؅ཧͮ͠Β͍ɻ • ෳ਺ͷσβΠϯͷཁૉΛ·ͱΊͯ౤ೖ͢Δػೳ͕ϒϩοΫύ λʔϯɻ୯ཱͷσβΠϯཁૉΛఏڙ͢Δͷ͸ϒϩοΫ୯Ґɻ • ࣗ༝ͳϚʔΫΞοϓΛఏڙ͢Δͷ͸ϒϩοΫΛ։ൃ͠ͳ͍ͱ ೉͍͠ɻ 75

76. HTML/CSS Ͱग़དྷΔ͜ͱɾग़དྷͳ͍͜ͱΛ఻͑Δͷͬͯ·͊ ·͊େมͰͨ͠ΑͶʁ • ͦͯͪ͠ΌΜͱ఻͑ΒΕͯΔ͔΋Θ͔Βͳ͍ɻ • ͍ͯ͏͔ࣗ෼ͷͰ͖Δग़དྷͳ͍ͷ൑அ΋೉͍͠ɻ • ͦ͏͍͏αϯϓϧαΠτ͸͋Δ͚Ͳࠓճ͸ग़དྷͳ͍Μͩ ΑʔͬͯͷΛ఻͑Δͷ೉͍͠ɻ

    76

77. ϒϩοΫΤσΟλͰग़དྷΔ͜ͱग़དྷͳ͍͜ͱΛ఻͑Δͷ͸ɺͨ ͿΜɺ͜ΕͷഒҎ্೉͍͠ 77

78. • άϧʔϓϒϩοΫͷڍಈͱ͔೉͍͠ɻWordPress͕ಈతʹੜ ੒͢ΔCSS΋͋Δɻ • ؅ཧը໘ͰͦͷσβΠϯΛ࠶ݱग़དྷͨͱͯ͠΋ɺάϧʔϓϒ ϩοΫͷωετ͕ଟ͗ͯ͢ૢ࡞͕೉͍͠ͱ͔ɻ 78

79. ʮࣗ༝ʹHTML/CSSΛهड़͢Ε͹ͳΜͱ͔ͳΔʯͱ͍͏࠷ऴख ஈΛ͍࣋ͬͯΔͱඇৗʹָɻ • ͱΓ͋͑ͣίΞͷϒϩοΫͷ૊Έ߹ΘͤͰߟ͑ͯΈͯɺμϝ ͦ͏ͳΒϒϩοΫ։ൃ͢Δ͔ʔɺΈ͍ͨͳɻ • ฤूՄೳͳ HTML ͷύʔπΛ࡞ΕΕ͹ྑ͍ɻ •

    ςΩετͱը૾ͷมߋ͘Β͍͕ग़དྷΔ͚ͩͰେ఍ͷ͜ͱ͸ ΍͚ͬͭΒΕΔɻ 79

80. ϒϩοΫ։ൃͰֶͿ΂͖͜ͱ 80

81. ϒϩοΫΤσΟλ͕ϦϦʔε ͞ΕͯͦΖͦΖ5೥ܦͪ· ͢ɻ • 2018೥12݄10೔ WordPress 5.0 • ϒϩοΫΤσΟλ͸ɺ7೥લ͘Β͍͔Β։ൃ ͕࢝·͍ͬͯΔɻ

    • ਐԽ͸ଓ͍͍ͯΔ͕ɺϒϩοΫΤσΟλࣗ ମ͸ผʹ৽͍͠΋ͷͰ͸ແ͍ɻ ϒϩοΫͷ࡞੒ νϡʔτϦΞϧ https://ja.wordpress.org/team/handbook/ block-editor/getting-started/create-block/ 81

82. ։ൃΨΠυ • νϡʔτϦΞϧΑΓͪΐͬͱಥͬࠐ Μͩઆ໌ɻ 82

83. ͜ͷ5೥Ͱɺ • npx @wordpress/create-block ͰϒϩοΫ࡞੒͕؆୯ʹͰ͖ΔΑ͏ʹͳͬͨɻ • block.json ͷਐԽͰɺ؆୯ʹػೳ௥Ճ͕Ͱ͖ΔΑ͏ʹɻ • @wordpress/scripts

    ͰϏϧυͱ͔΋ΊͬͪΌ؆୯ʹɻ • @wordpress/env Ͱ։ൃ؀ڥ͕؆୯ʹɻWindows Ͱ΋ಈͧ͘ɻ • WordPress Playground Ͱ΋։ൃ؀ڥϚδ؆୯ʹɻ • npm ͷόʔδϣϯ͕Α͏΍͘ 8ܥʹɻ • υΩϡϝϯςʔγϣϯ΋νϡʔτϦΞϧ΋੔උ͞Εͨɻ(ࠓ·ͰΑΓ͍ͩͿ) • ೔ຊޠԽ΋͞ΕͯΔʂ 83

84. ʮKansai WordPress Meetup Osaka #4 ϒϩοΫΤσΟλʔͷ࿩Λ͠Α͏ʯ 2019/11/16 https://speakerdeck.com/torounit/get-started-customize-for-block-editor 84

85. ۀ຿্ɺϒϩοΫ։ൃͰඞཁͳ஌ࣝ • ϒϩοΫ։ൃͷجຊɺ(νϡʔτϦΞϧϨϕϧ) / React ͷجૅɻ • <RichText />: ஈམɾݟग़͠ϒϩοΫͳͲͰ࢖ΘΕͯΔςΩε

    τͷฤूίϯϙʔωϯτ • ը૾ͷઃఆɺஔ׵ • InnerBlocks Λར༻ͨ͠ϒϩοΫ ͜Ε͚ͩ஌ͬͯΕ͹ۀ຿ϨϕϧͰϒϩοΫΛ࡞Δʹ͸े෼ɻ 85

86. @10up/block- components https://github.com/10up/block- components • ϒϩοΫ։ൃͰΑ͘ग़ͯ͘Δίϯ ϙʔωϯτΛ·ͱΊͨ΋ͷɻ • <Image />

    ίϯϙʔωϯτΛ࢖͏ͩ ͚Ͱɺը૾ͷΞοϓϩʔυɺஔ׵ɺ ͱ͔΋ҰൃͰ࣮૷ग़དྷͨΓɻ 86

87. 87

88. Gutemnerg BestPractices 10up ͕·ͱΊͯΔɺϕετϓϥΫςΟεɻ 88

89. WordCamp US 2023 ͰͷϒϩοΫ ΤσΟλͷࣄྫͷηογϣϯ ԿݴͬͯΔͷ͔ྑ͘ղΒͳͯ͘΋ɺ؅ཧը໘ͷσϞݟͯɺ͛͢ʔͬͯͳΔɻ 89

90. ϗϫΠτϋ΢εͷϦχϡʔΞϧͰͷϒϩοΫΤσΟλͷ׆༻ࣄ ྫ All The Presidents Websites https://www.youtube.com/watch?v=pO4uhroOWew NASA For All

    Userkind: NASA Web Modernization and WordPress https://www.youtube.com/watch?v=d0ZekwvlM_w Hands on with NASA's new digital platform - 2023 WCUS Annapolis https://www.youtube.com/watch?v=pzRHrckpz44 90

91. ඿໺͞Μͷ YouTube νϟϯωϧ https://www.youtube.com/@akihamano2805/videos ΧελϜϒϩοΫಓ৔ͷಈըɻ Ryan Welcher ͷ Twitch νϟϯωϧ

    https://www.twitch.tv/ryanwelchercodes ഑৴Ͱ࡞ͬͨɺϓϥάΠϯͳͲͷϨϙδτϦ: https://github.com/ ryanwelcher/twitch 91

92. ϢʔβʔͷϑΟʔυόοΫେࣄ 92

93. • ʮϢʔβʔ͕࢖͍΍͍͢Α͏ʹʯͱࢥͬͯ࡞ͬͯΔ͚Ͳɺ Ϣʔβʔ͕࢖͍΍͍͢ͱࢥͬͯΔ͔͸Θ͔Βͳ͍ɻ • HTMLΛॻ͚ͳ͍ਓͷؾ͕࣋ͪΘ͔Δ͜ͱ͸ແ͍ɻ • ๻Β͕HTMLΛֶΜͩͱ͖ͱঢ়گ΋ҧ͏ɻ • ॳ৺ऀͷࠒͷؾ࣋ͪΛࢥ͍ͩͯ͠΋ɺͦΕ͕ࠓͷϢʔβʔ ͷߟ͑Ͱ͋Δอূ͸Ͳ͜ʹ΋ͳ͍ɻ

    • ࣗ෼͕ͨͪؾݣ͍Ͱ࣮૷ͨ͠ػೳ͕ෆศΛট͍͍ͯͨΓɺٯ ΋Α͋͘Δɻ 93

94. ϢʔβʔͷϑΟʔυόοΫΛฉ͜͏ • ͦ͏͍͏ҙຯͰαΠτͷอकɺࡉ͔͍ػೳ௥ՃͳͲΛ͠ଓ͚ ͍ͯͨͷ͸ͱͯ΋ྑ͔ͬͨɻ • Ϣʔβʔ͕΍Γ͍ͨ͜ͱɺຊ౰ʹࠔͬͯډΔ͜ͱΛ஌Δେ͖ ͳख͕͔Γɻ • 1िʹ1ຊهࣄΛॻ͍͍ͯͨϢʔβʔ͕ͷهࣄ͕2ຊ૿͑ͨ ΓɺΑΓίϯςϯπ࡞੒ʹूதग़དྷΔΑ͏ʹ͢Δͷ͕ɺ؅ཧ

    ը໘Λ࡞ΔɺΧελϚΠζ͢Δҙຯɻ 94

95. ՝୊ 95

96. ϝσΟΞΫΤϦʹΑΔϨεϙϯγϒ • ݱ࣌఺Ͱ theme.json Ͱ͸࢖͑ͳ͍ɻ • ϝσΟΞΫΤϦ͕ɺͦ΋ͦ΋ WSIWYG ͱ૬ੑ͕ѱ͍ɻ •

    theme.json Ͱ͸ɺclamp + vw ʹΑΔΞϓϩʔνɻ • ΤσΟλͷ iframe ԽͰଟগϚγʹͳΔ͔΋͚ͩͲɺͲ͏ͩΖ͏ɻ • ݱ࣌఺Ͱ͸ɺΧϥϜϒϩοΫͷΑ͏ʹɺʮॎʹฒΜͩ΋ͷ͕ࠨ͔Βԣʹ ฒͿʯɺΑΓෳࡶͳ͜ͱ͸ߦ͏΂͖Ͱ͸ແ͍ͷͰ͸ɻ • ඇදࣔʹͳΔཁૉͷϋϯυϦϯά͕೉͍͠ɻ 96

97. ωΨςΟϒϚʔδϯ / position: absolute • ʮॏͳΔʯͱ͍͏දݱ͕ɺϒϩοΫΤσΟλͱ૬ੑ͕ѱ͍ɻ ؅ཧը໘্Ͱͷཁૉͷબ୒Λ೉͘͢͠Δɻ • ෳ਺ͷྡ઀ͨ͠ϒϩοΫͷ༨നͳͲͷલఏ͕͋ͬͯ੒ཱ͢Δ ΋ͷͳͷͰɺยํʹมߋ͕ೖͬͨΓ͢ΔͱɺϨΠΞ΢τ่͕

    ΕΔɻ 97

98. ͍͞͝ʹɺ͓ؾ࣋ͪ 98

99. ͜ͷ5೥ͷมԽ WordPress ͕ WEBαΠτΛ࡞Δ্ͰҰ൪؆୯ͳπʔϧͩͬͨ ࣌୅͸ऴΘͬͨɻ • ϑϩϯτΤϯυͳΒɺNext.js / Astro +

    microCMS ͱ͔ɻ • ϒϩάͳΒɺNote ͱ͔ɻ • Wix/STUDIO/Squarespace ౳ͷαʔϏεɻ 99

100. ࣗ෼͕ WordPress Λಋೖ͢Δཧ༝ 100

101. ΧελϚΠζՄೳͳڧྗͳΤσΟλʔΛඋ͍͑ͯΔ͔Β 101

102. • ΤσΟλʔʹϝϦοτ͕ݟ͍ͩͤͳ͍αΠτɺWSIWYGͰ͋ Δ͜ͱʹϝϦοτ͕ͳ͍αΠτ౳Ͱ͸ WordPress Λಋೖ͢Δ ͷ͸ඍົ͔ͳͱɻ • HTML Λ࠷ॳʹ࡞Γ͖ͬͯɺҰ෦ͷཁૉ͚ͩߋ৽͍ͨ͠ͱ͔ Ͱ͋Ε͹ɺAstro

     + HeadlessCMS ͱ͔ͷ΄͏͕ϩʔίετͰ ͸ɻ 102

103. • Custom fields ! Blocks https://github.com/WordPress/ gutenberg/issues/51373 • Fields API

     https://github.com/sc0ttkclark/wordpress-fields- api ౳͕ϦϦʔε͞ΕͨΒ·ͨҧ͏ঢ়گʹͳΔ͔΋ɻ 103

104. • ʮϖʔδͷ৽ن௥Ճʯ͕͋Δͷʹɺ݁ہςϯϓϨʔτϑΝΠ ϧΛ࿔ΔͳΒɺͳΜͷͨΊʹ CMS ͍ΕͯΜͷʁ • ΤσΟλʔ্Ͱ HTML ॻ͔ͤΔͳΒͳΜͰ WordPress

     ͍Ε ͯΜͷʁ • WEBͷྑ͙ͬͯ͢͞ʹมߋग़དྷΔ͜ͱ͡Όͳ͍ͷʁ • CMS ΛΘ͟Θ͟ಋೖ͢ΔҙຯͬͯԿ? 104

105. 105

106. Thanks! Github: @torounit Twitter / WP.org: @Toro_Unit torounit.com 106