Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 (
); }, } ); 21

Slide 22

Slide 22 text

22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

αϯϓϧ 24

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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