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
560
ブロックエディターを用いた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)
Cloudflare Meetup Nagano Vol.3
torounit
1
64
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.5k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
390
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
430
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
860
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
4.3k
Other Decks in Technology
See All in Technology
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
新卒エンジニア研修の試行錯誤と工夫/nikkei-tech-talk-31
nishiuma
0
200
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
180
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
230
グループポリシー再確認
murachiakira
0
170
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
170
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
110
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
150
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
Featured
See All Featured
Become a Pro
speakerdeck
PRO
27
5.2k
A Tale of Four Properties
chriscoyier
158
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Thoughts on Productivity
jonyablonski
69
4.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Fireside Chat
paigeccino
37
3.3k
4 Signs Your Business is Dying
shpigford
183
22k
BBQ
matthewcrist
88
9.5k
Optimizing for Happiness
mojombo
377
70k
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