Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Toro_Unit (Hiroshi Urabe)

September 23, 2023
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

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

    Plugin and Theme Developer • Gutenberg Team Github: @torounit Twitter: @Toro_Unit 3
  2. • Gutenberg ͷ։ൃΛͪΐΖͬͱ΍ͬ ͯ·͢ɻ • Shinshu WP Meetup ͷΦʔΨφΠ βʔͯ͠·͢ɻ

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

  4. 11

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

    ӡ༻ऀͷཁ๬Ͱ͍͍ͪͪςΩετमਖ਼ʹςʔϚΛมߋ͢Δͷ͸ɺ ͓ޓ͍ʹͱͬͯ໘౗͍͘͞ɻ • ͍ͨͨ͜͠ͱͰ͸ແ͍͔΋͚ͩͲɺίεύ͕ѱ͍ɻͦΕ͕ੵ Έ্͕ͬͯ৘ใൃ৴ͷεϐʔυ͕஗͘ͳΔɻ 15
  6. ϫʔΫϑϩʔ • Figma ͷσβΠϯΛ֬ೝ͠ͳ͕Β࡞੒͢΂͖ϒϩοΫΛఆٛɻ • ϝϯόʔશһͰɺFigma ͷσʔλΛݟͳ͕Β͋ʔͩ͜ʔͩ ݴ͍߹ͬͯɺissue Λ࡞੒ɻ •

    ແཧ͡ΌͶʁͬͯͷ͸σβΠϯଆʹϑΟʔυόοΫɻ • جຊతʹ͸ɺࣗ෼ or ඿໺͞Μ͕ϒϩοΫΛ։ൃ͠ PR Λग़ ͠ɺ૬ޓʹϨϏϡʔɻ 27
  7. ॻࣜπʔϧόʔ API (Format API) • ଠࣈͱ͔ɺϋΠϥΠτΛͱ͔ΛςΩε τʹద༻ͨ͠Γ͢Δ΍ͭɻ೚ҙͷλ άɺ೚ҙͷΫϥεΛద༻Ͱ͖Δɻ • Ωϟονίϐʔɺݟग़͠ͷύλʔϯͱ

    ͔͸͜ΕͰ͍͍ͩͨͳΜͱ͔ͳΔͷ Ͱ͸ɻ https://ja.wordpress.org/team/ handbook/block-editor/how-to-guides/ format-api/ 34
  8. 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
  9. block.json "supports": { "spacing": { "margin": true }, "color": {

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

  11. 45

  12. 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
  13. 59

  14. 60

  15. ಉظύλʔϯ(࠶ར༻ϒϩοΫ)ͷ໰୊ɹ <!-- 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
  16. ϒϩοΫΤσΟλ͕ϦϦʔε ͞ΕͯͦΖͦΖ5೥ܦͪ· ͢ɻ • 2018೥12݄10೔ WordPress 5.0 • ϒϩοΫΤσΟλ͸ɺ7೥લ͘Β͍͔Β։ൃ ͕࢝·͍ͬͯΔɻ

    • ਐԽ͸ଓ͍͍ͯΔ͕ɺϒϩοΫΤσΟλࣗ ମ͸ผʹ৽͍͠΋ͷͰ͸ແ͍ɻ ϒϩοΫͷ࡞੒ νϡʔτϦΞϧ https://ja.wordpress.org/team/handbook/ block-editor/getting-started/create-block/ 81
  17. ͜ͷ5೥Ͱɺ • npx @wordpress/create-block ͰϒϩοΫ࡞੒͕؆୯ʹͰ͖ΔΑ͏ʹͳͬͨɻ • block.json ͷਐԽͰɺ؆୯ʹػೳ௥Ճ͕Ͱ͖ΔΑ͏ʹɻ • @wordpress/scripts

    ͰϏϧυͱ͔΋ΊͬͪΌ؆୯ʹɻ • @wordpress/env Ͱ։ൃ؀ڥ͕؆୯ʹɻWindows Ͱ΋ಈͧ͘ɻ • WordPress Playground Ͱ΋։ൃ؀ڥϚδ؆୯ʹɻ • npm ͷόʔδϣϯ͕Α͏΍͘ 8ܥʹɻ • υΩϡϝϯςʔγϣϯ΋νϡʔτϦΞϧ΋੔උ͞Εͨɻ(ࠓ·ͰΑΓ͍ͩͿ) • ೔ຊޠԽ΋͞ΕͯΔʂ 83
  18. ۀ຿্ɺϒϩοΫ։ൃͰඞཁͳ஌ࣝ • ϒϩοΫ։ൃͷجຊɺ(νϡʔτϦΞϧϨϕϧ) / React ͷجૅɻ • <RichText />: ஈམɾݟग़͠ϒϩοΫͳͲͰ࢖ΘΕͯΔςΩε

    τͷฤूίϯϙʔωϯτ • ը૾ͷઃఆɺஔ׵ • InnerBlocks Λར༻ͨ͠ϒϩοΫ ͜Ε͚ͩ஌ͬͯΕ͹ۀ຿ϨϕϧͰϒϩοΫΛ࡞Δʹ͸े෼ɻ 85
  19. @10up/block- components https://github.com/10up/block- components • ϒϩοΫ։ൃͰΑ͘ग़ͯ͘Δίϯ ϙʔωϯτΛ·ͱΊͨ΋ͷɻ • <Image />

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

  21. ϗϫΠτϋ΢εͷϦχϡʔΞϧͰͷϒϩοΫΤσΟλͷ׆༻ࣄ ྫ 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
  22. ඿໺͞Μͷ YouTube νϟϯωϧ https://www.youtube.com/@akihamano2805/videos ΧελϜϒϩοΫಓ৔ͷಈըɻ Ryan Welcher ͷ Twitch νϟϯωϧ

    https://www.twitch.tv/ryanwelchercodes ഑৴Ͱ࡞ͬͨɺϓϥάΠϯͳͲͷϨϙδτϦ: https://github.com/ ryanwelcher/twitch 91
  23. ϝσΟΞΫΤϦʹΑΔϨεϙϯγϒ • ݱ࣌఺Ͱ theme.json Ͱ͸࢖͑ͳ͍ɻ • ϝσΟΞΫΤϦ͕ɺͦ΋ͦ΋ WSIWYG ͱ૬ੑ͕ѱ͍ɻ •

    theme.json Ͱ͸ɺclamp + vw ʹΑΔΞϓϩʔνɻ • ΤσΟλͷ iframe ԽͰଟগϚγʹͳΔ͔΋͚ͩͲɺͲ͏ͩΖ͏ɻ • ݱ࣌఺Ͱ͸ɺΧϥϜϒϩοΫͷΑ͏ʹɺʮॎʹฒΜͩ΋ͷ͕ࠨ͔Βԣʹ ฒͿʯɺΑΓෳࡶͳ͜ͱ͸ߦ͏΂͖Ͱ͸ແ͍ͷͰ͸ɻ • ඇදࣔʹͳΔཁૉͷϋϯυϦϯά͕೉͍͠ɻ 96
  24. ͜ͷ5೥ͷมԽ WordPress ͕ WEBαΠτΛ࡞Δ্ͰҰ൪؆୯ͳπʔϧͩͬͨ ࣌୅͸ऴΘͬͨɻ • ϑϩϯτΤϯυͳΒɺNext.js / Astro +

    microCMS ͱ͔ɻ • ϒϩάͳΒɺNote ͱ͔ɻ • Wix/STUDIO/Squarespace ౳ͷαʔϏεɻ 99
  25. • Custom fields ! Blocks https://github.com/WordPress/ gutenberg/issues/51373 • Fields API

    https://github.com/sc0ttkclark/wordpress-fields- api ౳͕ϦϦʔε͞ΕͨΒ·ͨҧ͏ঢ়گʹͳΔ͔΋ɻ 103
  26. • ʮϖʔδͷ৽ن௥Ճʯ͕͋Δͷʹɺ݁ہςϯϓϨʔτϑΝΠ ϧΛ࿔ΔͳΒɺͳΜͷͨΊʹ CMS ͍ΕͯΜͷʁ • ΤσΟλʔ্Ͱ HTML ॻ͔ͤΔͳΒͳΜͰ WordPress

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