#wcjpn2021
WordCamp Japan 2021 の登壇資料です。
ϒϩοΫΤσΟλʔΛ༻͍ͨWEBαΠτ։ൃͱΧελϜϑΟʔϧυͷ͋ΓํΛߟ͑ΔɻWordCamp Japan 2021 / Toro_Unit1
View Slide
$ whoami2
Toro_Unit /෦ ߛ (͏Β ͻΖ͠)• Frontend Engineer• WordPress Plugin and ThemeDeveloper• ݝদຊࢢࡏॅɻձࣾࡳຈɻGithub: @torounitTwi/er: @Toro_Unit3
Gutenberg ͷίϯτϦϏϡʔτ• ຊޠೖྗͷόάใࠂ&ςετ• ΧελϜHTMLϒϩοΫͷϓϨϏϡʔػೳͷ editor-style ͷద༻ɻ• wp-env ͷ destroy ػೳɻ• όάϑΟοΫεͱ͔ɻ4
2018ɺϒϩοΫΤσΟλʔ͕WordPress ʹಋೖ͞Εͨޙ͔ΒϒϩοΫΤσΟλʔΛ͕ͬͭΓ׆༻ͨ͠αΠτΛ࡞͖ͬͯ·ͨ͠ɻ5
6
Ҿ༻ݩɿӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτͰͷϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫ / WordCamp Osaka 2019 ୩ 7
ϒϩοΫΤσΟλʔҎલ8
Ҿ༻ݩɿΧελϜϑΟʔϧυۀ͔Βͷ٫ ʙϒϩοΫΤσΟλʔʢGutenbergʣΛΧελϜ͢Δํ๏ʙ / Shizumi Yoshiaki 9
ΫϥγοΫΤσΟλʔͰԣฒͼͷϨΠΞτͷ࣮ݱ͕ͱ͍ͯ͠ͷͰɺϨΠΞτΛݻΊ্ͨͰೖྗཝʹίϯςϯπΛૠೖ͍ͨ͠ͱ͍͏ཉٻɾཁ݅ɻΧελϜϑΟʔϧυͷϓϥάΠϯͰϨΠΞτͳͲΛ੍ޚɻηΫγϣϯ͝ͱͷݟग़͠ɺίϯςϯπೖྗཝɻฤूը໘ͷUIΛ੍ޚ͢Δํ๏ = ΧελϜϑΟʔϧυ10
σϝϦοτ• WordPress ͷݕࡧʹҾ͔͔ͬΒͳ͍ɻ• ௨ৗͷςʔϚͷ࡞ΓํͰίϯςϯπ͕ग़ྗ͞Εͳ͍ɻ11
ϒϩοΫΤσΟλʔҎޙ• ϒϩοΫύλʔϯ / ϒϩοΫςϯϓϨʔτΛ༻͍Δ͜ͱͰɺUXΛ্͔ͭɺσϝϦοτ͕ղܾ͞Εͨɻ• γϣʔτίʔυͳͲɺWYSIWYG తʹඍົͳػೳɺμΠφϛοΫϒϩοΫͰײతͳฤू͕Մೳʹɻ12
ΧελϜϑΟʔϧυෆཁʹͳͬͨͷ͔ʁ13
ͦΜͳ͜ͱແ͍ŋŋŋ14
Usecase• ΠϕϯτใͰɺهࣄͷެ։࣌ͱผͷ࣌ͷઃఆɻ( WP_Query Ͱ։࠵ॱʹग़ྗ)• Ձ֨ɾαΠζɻ( WP_Query ͰɺՁ֨ॱɺαΠζॱͳͲͰͷιʔτ)• ߘαϜωΠϧͷΑ͏ͳϞϊ͕ෳඞཁɻ(هࣄͷը૾ΛผϖʔδͰग़ྗ)• CSV Ͱͷσʔλͷೖɻ15
ೖྗཝΛ࡞ΔͨΊ͚ͩͷΧελϜϑΟʔϧυࢮΜ͕ͩɺσʔλߏͱͯ͠ͷΧελϜϑΟʔϧυࠓޙΔ16
17
ࠓ·Ͱ௨ΓͷΓํͰΧελϜϑΟʔϧυΛ੍ޚ͢ΔσϝϦοτ• ೖྗཝ͕ڱ͍ɻUIͱͯ͠ඍົʢεΫϩʔϧ͢Εݟ͑·͕͢ʣ• ΧελϜϑΟʔϧυͷσʔλΛϒϩοΫͰ༻͍Δ͜ͱ͕͍͠ɻʢΧελϜϑΟʔϧυɺهࣄΛอଘ͠ͳ͍ͱө͞Εͳ͍ʣ18
ղܾࡦΛߟ͑Δ• ϒϩοΫΤσΟλʔͷUXͱΧελϜϑΟʔϧυͷೖྗ͕γʔϜϨεԽ͞ΕΕྑ͍ɻ• ϒϩοΫΤσΟλʔଆ͔ΒΧελϜϑΟʔϧυΛૢ࡞͢Δ͜ͱΛߟ͑Δɻ19
Create Meta Block | Block Editor Handbook | WordPress DeveloperResourceshandbook ʹ͋ΔɺΧελϜϑΟʔϧυΛѻ͏ϒϩοΫͷνϡʔτϦΞϧɻ20
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
22
ϒϩοΫΛ࡞Δ࣌ʹߟྀ͢Δ͜ͱ• ctrl+c (cmd+c) ͷγϣʔτΧοτΩʔ͕ҙਤ௨Γʹಈ͔͘ʁ ͰೖྗཝΛ࡞Δͷ͕ϕλʔͬΆ͍ɻ• ϒϩοΫ͕ফ͑ͨͱ͖ʹΧελϜϑΟʔϧυͦͷ··Ͱ͍͍ͷ͔ʁ• ϒϩοΫ͕ෳ࡞ΒΕͳ͍Α͏ʹɺ "supports": { "multiple":false }• save ͰΧελϜϑΟʔϧυͷΛऔΓग़͢͜ͱ͕ग़དྷͳ͍ͷͰɺΓ͍ͨ߹ɺa0ributes ͱͯ͠ผʹఆٛ͢Δඞཁ͋Γɻ(αΠτݕࡧͰͷϢʔεέʔεʣ23
αϯϓϧ24
25
26
αϯϓϧͷ Githubɻh"ps://github.com/torounit/post-meta-block-example27
՝ײ• ࠓͷͱ͜ΖɺϑΟʔϧυ͝ͱʹϒϩοΫΛ࡞ͨ͠ํ͕Αͦ͞͏ɻWordPress ͷ API ଆͰͷܕͷ੍͕ڧ͍ͷͰɺͳΜʹͰ͑ΔϒϩοΫΈ͍ͨͳͷݫͦ͠͏ɻ• [type="email"], [type="number"] ͷϑΟʔϧυΛ͏ͱͷίϐʔ͕ग़དྷͳ͍ɻ(ϒϩοΫͷίʔυ͕ίϐʔ͞ΕΔ)• όϦσʔγϣϯʹ৭ʑ͕ඞཁɻ28
·ͱΊ• ϒϩοΫΤσΟλʔɺΫϥγοΫΤσΟλʔͷTinyMCE๊͕͍͑ͯͨΛղܾ͕ͨ͠ɺͦΕҎ֎ͷ՝͍ͬͯΔɻ• ʮϒϩοΫΤσΟλʔଆ͔Β WordPress Λૢ࡞͢Δʯͱ͍͏ൃ͕େࣄɻJSྗɺReactྗΛʹ͚ͭΔͱվળͰ͖Δ͜ͱ͕େ෯ʹ૿͑Δɻ• Gutenberg ɺhandbook ʹίϯτϦϏϡʔτ͢Δͱɺ͜͏͍͕ͬͨࣝೖͬͯ͘Δɻษڧͷ࠷ͷಓͷΓɺιʔευΩϡϝϯςʔγϣϯΛಡΜͰίϯτϦϏϡʔτ͢Δ͜ͱɻ29