Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordC...
Search
Toro_Unit (Hiroshi Urabe)
June 20, 2021
Technology
0
520
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
#wcjpn2021
WordCamp Japan 2021 の登壇資料です。
Toro_Unit (Hiroshi Urabe)
June 20, 2021
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.2k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.4k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.4k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
350
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
830
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.6k
プラグインとの付き合い方 #WPmeetupkobe / 2019-08-31 Kansai WordPress Meetup Kobe vol.10
torounit
4
1.4k
Other Decks in Technology
See All in Technology
Mocking in Rust Applications
taiki45
1
380
Estrategias de escalabilidade para projetos web
jessilyneh
2
230
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
310
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
190
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
220
LLVM/ASMを使った有限体の高速実装
herumi
0
120
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
190
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
320
Eventual Detection Engineering
ken5scal
0
1.3k
自作Cコンパイラ 8時間の奮闘
soukouki
0
410
Functional TypeScript
naoya
11
4.6k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Featured
See All Featured
Building an army of robots
kneath
302
42k
Web Components: a chance to create the future
zenorocha
308
42k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Fireside Chat
paigeccino
31
2.9k
Building Adaptive Systems
keathley
36
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Why Our Code Smells
bkeepers
PRO
334
56k
Transcript
ϒϩοΫΤσΟλʔΛ༻͍ͨWEB αΠτ։ൃͱΧελϜϑΟʔϧυͷ ͋ΓํΛߟ͑Δɻ WordCamp Japan 2021 / Toro_Unit 1
$ whoami 2
Toro_Unit /෦ ߛ (͏Β ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer • ݝদຊࢢࡏॅɻձࣾࡳຈɻ Github: @torounit Twi/er: @Toro_Unit 3
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 Developer
Resources handbook ʹ͋ΔɺΧελϜϑΟʔϧυΛѻ͏ϒϩοΫͷνϡʔτ ϦΞϧɻ 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 ( <div { ...blockProps }> <TextControl label="Meta Block Field" value={ metaFieldValue } onChange={ updateMetaValue } /> </div> ); }, } ); 21
22
ϒϩοΫΛ࡞Δ࣌ʹߟྀ͢Δ͜ͱ • ctrl+c (cmd+c) ͷγϣʔτΧοτΩʔ͕ҙਤ௨Γʹಈ͔͘ʁ <RichText>Ͱೖ ྗཝΛ࡞Δͷ͕ϕλʔͬΆ͍ɻ • ϒϩοΫ͕ফ͑ͨͱ͖ʹΧελϜϑΟʔϧυͦͷ··Ͱ͍͍ͷ͔ʁ •
ϒϩοΫ͕ෳ࡞ΒΕͳ͍Α͏ʹɺ "supports": { "multiple": false } • save ͰΧελϜϑΟʔϧυͷΛऔΓग़͢͜ͱ͕ग़དྷͳ͍ͷͰɺΓ͍ͨ ߹ɺa0ributes ͱͯ͠ผʹఆٛ͢Δඞཁ͋Γɻ(αΠτݕࡧͰͷϢʔε έʔεʣ 23
αϯϓϧ 24
25
26
αϯϓϧͷ Githubɻ h"ps:/ /github.com/torounit/post-meta-block-example 27
՝ײ • ࠓͷͱ͜ΖɺϑΟʔϧυ͝ͱʹϒϩοΫΛ࡞ͨ͠ํ͕Αͦ͞ ͏ɻWordPress ͷ API ଆͰͷܕͷ੍͕ڧ͍ͷͰɺͳΜʹͰ ͑ΔϒϩοΫΈ͍ͨͳͷݫͦ͠͏ɻ • [type="email"],
[type="number"] ͷϑΟʔϧυΛ͏ͱͷί ϐʔ͕ग़དྷͳ͍ɻ(ϒϩοΫͷίʔυ͕ίϐʔ͞ΕΔ) • όϦσʔγϣϯʹ৭ʑ͕ඞཁɻ 28
·ͱΊ • ϒϩοΫΤσΟλʔɺΫϥγοΫΤσΟλʔͷTinyMCE๊͕͍͑ͯ ͨΛղܾ͕ͨ͠ɺͦΕҎ֎ͷ՝͍ͬͯΔɻ • ʮϒϩοΫΤσΟλʔଆ͔Β WordPress Λૢ࡞͢Δʯͱ͍͏ൃ͕େ ࣄɻJSྗɺReactྗΛʹ͚ͭΔͱվળͰ͖Δ͜ͱ͕େ෯ʹ૿͑Δɻ •
Gutenberg ɺhandbook ʹίϯτϦϏϡʔτ͢Δͱɺ͜͏͍ͬͨ ͕ࣝೖͬͯ͘Δɻษڧͷ࠷ͷಓͷΓɺιʔευΩϡϝϯςʔ γϣϯΛಡΜͰίϯτϦϏϡʔτ͢Δ͜ͱɻ 29