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

[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう！』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。

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
10. ϖʔδฤूը໘͸͜Μͳײ͡ɻ 10
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
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
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
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
106. Thanks! Github: @torounit Twitter / WP.org: @Toro_Unit torounit.com 106