ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021

#wcjpn2021

WordCamp Japan 2021 の登壇資料です。

Transcript

1. ϒϩοΫΤσΟλʔΛ༻͍ͨWEB
   αΠτ։ൃͱΧελϜϑΟʔϧυͷ
   ͋ΓํΛߟ͑Δɻ
   WordCamp Japan 2021 / Toro_Unit
   1
   

   View Slide

2. $ whoami
   2
   

   View Slide

3. Toro_Unit /઎෦ ߛ (͏Β΂ ͻΖ͠)
   • Frontend Engineer
   • WordPress Plugin and Theme
   Developer
   • ௕໺ݝদຊࢢࡏॅɻձࣾ͸ࡳຈɻ
   Github: @torounit
   Twi/er: @Toro_Unit
   3
   

   View Slide

4. Gutenberg ΁ͷίϯτϦϏϡʔτ
   • ೔ຊޠೖྗͷόάใࠂ&ςετ
   • ΧελϜHTMLϒϩοΫͷϓϨϏϡʔػೳ΁ͷ editor-style ͷద
   ༻ɻ
   • wp-env ͷ destroy ػೳɻ
   • όάϑΟοΫεͱ͔ɻ
   4
   

   View Slide

5. 2018೥຤ɺϒϩοΫΤσΟλʔ͕
   WordPress ʹಋೖ͞Εͨ௚ޙ͔ΒϒϩοΫ
   ΤσΟλʔΛ͕ͬͭΓ׆༻ͨ͠αΠτΛ
   ࡞͖ͬͯ·ͨ͠ɻ
   5
   

   View Slide

6. View Slide

7. Ҿ༻ݩɿӡ༻΋࠷େݶߟྀʂίʔϙϨʔταΠτͰͷϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫ / WordCamp Osaka 2019 ௕୩઒޺෢ 7
   

   View Slide

8. ϒϩοΫΤσΟλʔҎલ
   8
   

   View Slide

9. Ҿ༻ݩɿΧελϜϑΟʔϧυ੡଄ۀ͔Βͷ୤٫ ʙϒϩοΫΤσΟλʔʢGutenbergʣΛΧελϜ͢Δํ๏ʙ / Shizumi Yoshiaki 9
   

   View Slide

10. ΫϥγοΫΤσΟλʔͰ͸ԣฒͼ౳ͷϨΠΞ΢τͷ࣮ݱ͕ͱͯ΋
    ೉͍͠ͷͰɺϨΠΞ΢τΛݻΊ্ͨͰೖྗཝʹίϯςϯπΛૠೖ
    ͍ͨ͠ͱ͍͏ཉٻɾཁ݅ɻ
    ΧελϜϑΟʔϧυͷϓϥάΠϯͰϨΠΞ΢τͳͲΛ੍ޚɻηΫ
    γϣϯ͝ͱͷݟग़͠ɺίϯςϯπೖྗཝɻ
    ฤूը໘ͷUIΛ੍ޚ͢Δํ๏ = ΧελϜϑΟʔϧυ
    10
    

    View Slide

11. σϝϦοτ
    • WordPress ͷݕࡧʹҾ͔͔ͬΒͳ͍ɻ
    • ௨ৗͷςʔϚͷ࡞ΓํͰ͸ίϯςϯπ͕ग़ྗ͞Εͳ͍ɻ
    11
    

    View Slide

12. ϒϩοΫΤσΟλʔҎޙ
    • ϒϩοΫύλʔϯ / ϒϩοΫςϯϓϨʔτΛ༻͍Δ͜ͱͰɺUX
    Λ޲্͔ͭɺσϝϦοτ͕ղܾ͞Εͨɻ
    • γϣʔτίʔυͳͲɺWYSIWYG తʹඍົͳػೳ΋ɺμΠφ
    ϛοΫϒϩοΫͰ௚ײతͳฤू͕Մೳʹɻ
    12
    

    View Slide

13. ΧελϜϑΟʔϧυ͸ෆཁʹͳͬͨͷ͔ʁ
    13
    

    View Slide

14. ͦΜͳ͜ͱ͸ແ͍ŋŋŋ
    14
    

    View Slide

15. Usecase
    • Πϕϯτ৘ใ౳Ͱɺهࣄͷެ։೔࣌ͱผͷ೔࣌ͷઃఆɻ( WP_Query ౳Ͱ
    ։࠵೔ॱʹग़ྗ)
    • ঎඼Ձ֨ɾαΠζɻ( WP_Query ౳ͰɺՁ֨ॱɺαΠζॱͳͲͰͷιʔτ)
    • ౤ߘαϜωΠϧͷΑ͏ͳϞϊ͕ෳ਺ඞཁɻ(هࣄ಺ͷը૾Λผϖʔδ౳Ͱ
    ग़ྗ)
    • CSV Ͱͷσʔλͷ౤ೖɻ
    15
    

    View Slide

16. ೖྗཝΛ࡞ΔͨΊ͚ͩͷΧε
    λϜϑΟʔϧυ͸ࢮΜ͕ͩɺ
    σʔλߏ଄ͱͯ͠ͷΧελϜ
    ϑΟʔϧυ͸ࠓޙ΋࢒Δ
    16
    

    View Slide

17. View Slide

18. ࠓ·Ͱ௨Γͷ΍ΓํͰΧελϜϑΟʔϧυΛ੍ޚ͢ΔσϝϦοτ
    • ೖྗཝ͕ڱ͍ɻUIͱͯ͠ඍົʢεΫϩʔϧ͢Ε͹ݟ͑·͕͢ʣ
    • ΧελϜϑΟʔϧυͷσʔλΛϒϩοΫͰ༻͍Δ͜ͱ͕೉͠
    ͍ɻʢΧελϜϑΟʔϧυ͸ɺهࣄΛอଘ͠ͳ͍ͱ൓ө͞Εͳ
    ͍ʣ
    18
    

    View Slide

19. ղܾࡦΛߟ͑Δ
    • ϒϩοΫΤσΟλʔͷUXͱΧελϜϑΟʔϧυͷೖྗ͕γʔϜ
    ϨεԽ͞ΕΕ͹ྑ͍ɻ
    • ϒϩοΫΤσΟλʔଆ͔ΒΧελϜϑΟʔϧυΛૢ࡞͢Δ͜ͱ
    Λߟ͑Δɻ
    19
    

    View Slide

20. Create Meta Block | Block Editor Handbook | WordPress Developer
    Resources
    handbook ʹ͋ΔɺΧελϜϑΟʔϧυΛѻ͏ϒϩοΫͷνϡʔτ
    ϦΞϧɻ
    20
    

    View Slide

21. import { registerBlockType } from '@wordpress/blocks';
    import { TextControl } from '@wordpress/components';
    import { useSelect } from '@wordpress/data';
    import { useEntityProp } from '@wordpress/core-data';
    import { useBlockProps } from '@wordpress/block-editor';
    registerBlockType( 'myguten/meta-block', {
    title: 'Meta Block',
    icon: 'smiley',
    category: 'text',
    edit( { setAttributes, attributes } ) {
    const blockProps = useBlockProps();
    const postType = useSelect(
    ( select ) => select( 'core/editor' ).getCurrentPostType(),
    []
    );
    const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
    const metaFieldValue = meta[ 'myguten_meta_block_field' ];
    function updateMetaValue( newValue ) {
    setMeta( { ...meta, myguten_meta_block_field: newValue } );
    }
    return (
    
    label="Meta Block Field"
    value={ metaFieldValue }
    onChange={ updateMetaValue }
    />
    
    );
    },
    } );
    21
    

    View Slide

22. View Slide

23. ϒϩοΫΛ࡞Δ࣌ʹߟྀ͢Δ͜ͱ
    • ctrl+c (cmd+c) ౳ͷγϣʔτΧοτΩʔ͕ҙਤ௨Γʹಈ͔͘ʁ Ͱೖ
    ྗཝΛ࡞Δͷ͕ϕλʔͬΆ͍ɻ
    • ϒϩοΫ͕ফ͑ͨͱ͖ʹΧελϜϑΟʔϧυ͸ͦͷ··Ͱ͍͍ͷ͔ʁ
    • ϒϩοΫ͕ෳ਺࡞ΒΕͳ͍Α͏ʹɺ "supports": { "multiple":
    false }
    • save Ͱ௚઀ΧελϜϑΟʔϧυͷ஋ΛऔΓग़͢͜ͱ͕ग़དྷͳ͍ͷͰɺ΍Γ͍ͨ
    ৔߹͸ɺa0ributes ͱͯ͠ผʹఆٛ͢Δඞཁ͋Γɻ(αΠτ಺ݕࡧ౳ͰͷϢʔε
    έʔεʣ
    23
    

    View Slide

24. αϯϓϧ
    24
    

    View Slide

25. View Slide

26. View Slide

27. αϯϓϧͷ Githubɻ
    h"ps:/
    /github.com/torounit/post-meta-block-example
    27
    

    View Slide

28. ՝୊ײ
    • ࠓͷͱ͜ΖɺϑΟʔϧυ͝ͱʹϒϩοΫΛ࡞੒ͨ͠ํ͕Αͦ͞
    ͏ɻWordPress ͷ API ଆͰͷܕͷ੍໿͕ڧ͍ͷͰɺͳΜʹͰ΋
    ࢖͑ΔϒϩοΫΈ͍ͨͳͷ͸ݫͦ͠͏ɻ
    • [type="email"], [type="number"] ౳ͷϑΟʔϧυΛ࢖͏ͱ஋ͷί
    ϐʔ͕ग़དྷͳ͍ɻ(ϒϩοΫͷίʔυ͕ίϐʔ͞ΕΔ)
    • όϦσʔγϣϯʹ΋৭ʑ޻෉͕ඞཁɻ
    28
    

    View Slide

29. ·ͱΊ
    • ϒϩοΫΤσΟλʔ͸ɺΫϥγοΫΤσΟλʔͷTinyMCE๊͕͍͑ͯ
    ͨ໰୊Λղܾ͕ͨ͠ɺͦΕҎ֎ͷ՝୊͸࢒͍ͬͯΔɻ
    • ʮϒϩοΫΤσΟλʔଆ͔Β WordPress Λૢ࡞͢Δʯͱ͍͏ൃ૝͕େ
    ࣄɻJSྗɺReactྗΛ਎ʹ͚ͭΔͱվળͰ͖Δ͜ͱ͕େ෯ʹ૿͑Δɻ
    • Gutenberg ͸ɺhandbook ʹίϯτϦϏϡʔτ͢Δͱɺ͜͏͍ͬͨ஌
    ͕ࣝೖͬͯ͘Δɻษڧͷ࠷୹ͷಓͷΓ͸ɺιʔε΍υΩϡϝϯςʔ
    γϣϯΛಡΜͰίϯτϦϏϡʔτ͢Δ͜ͱɻ
    29
    

    View Slide