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
580
ブロックエディターを用いた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)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
160
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
230
Cloudflare Meetup Nagano Vol.3
torounit
1
110
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
420
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
470
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Other Decks in Technology
See All in Technology
Pure Goで体験するWasmの未来
askua
1
170
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
480
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
120
What is BigQuery?
aizack_harks
0
130
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
100
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
120
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
240
about #74462 go/token#FileSet
tomtwinkle
1
290
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Gamification - CAS2011
davidbonilla
81
5.5k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Six Lessons from altMBA
skipperchong
28
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Rails Girls Zürich Keynote
gr2m
95
14k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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