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
カスタムフィールド製造業からの脱却 〜オリジナルブロックエディタからGutenbergへ〜
Search
Shizumi Yoshiaki
March 26, 2019
Technology
4
1.4k
カスタムフィールド製造業からの脱却 〜オリジナルブロックエディタからGutenbergへ〜
2019年3月27日に開催されたWP Zoom UP #13で発表したミニセッションのスライドです。
Shizumi Yoshiaki
March 26, 2019
Tweet
Share
More Decks by Shizumi Yoshiaki
See All by Shizumi Yoshiaki
今日から始めるfunctions.phpカスタマイズ入門
shizumi
0
500
こんなこともできるWP-CLI 〜0から触ってみよう!〜
shizumi
4
820
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
shizumi
0
2.7k
Other Decks in Technology
See All in Technology
VCC 2025 Write-up
bata_24
0
140
BtoBプロダクト開発の深層
16bitidol
0
140
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.3k
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
100
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
120
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
14k
北海道の人に知ってもらいたいGISスポット / gis-spot-in-hokkaido-2025
sakaik
0
190
Findy Team+のSOC2取得までの道のり
rvirus0817
0
240
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
110
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
280
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Raft: Consensus for Rubyists
vanstee
139
7.1k
It's Worth the Effort
3n
187
28k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Practical Orchestrator
shlominoach
190
11k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Docker and Python
trallard
46
3.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
BBQ
matthewcrist
89
9.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Transcript
ΧελϜϑΟʔϧυۀ͔Βͷ٫ ΦϦδφϧϒϩοΫΤσΟλ͔ΒGutenberg ੩ւ ٛ໌ʢͣ͠Έʣ 2019-03-26
ࣗݾհ 1990ʢฏ2ʣੜ·Ε ઐֶߍଔۀޙ ྲྀ௨ؔͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ ಠཱͯ͠Webۀքʹ ݱࡏ גࣜձࣾαϯφφ ͷऔక ͍ͬͯ·͢
ߍͷඇৗۈߨࢣ͍ͬͯ·͢ Twitter : @Shizumi0705 ൃදऀۙӨʢ̑લʣ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ɹ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ छྨʹ߹Θͤͨ༰Λొ
ACFΛۦͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλ
͍Ζ͍Ζͳ͕…
͍Ζ͍Ζͳ͕… ɾ ΧελϜϑΟʔϧυʹͯ͢ొ͞ΕΔͨΊɺجຊతʹݕࡧʹֻ͔Βͳ͍ɻ ɾ ΧελϜϑΟʔϧυݕࡧରʹ͢ΕΑ͍͕ɺݕࡧʹ͕͔͔࣌ؒΔɻ ɾ ૢ࡞ϛεͰผςʔϚʹมߋ͞ΕΔͱɺ༰͕Կදࣔ͞Εͳ͍ɻ ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲޙͷ୲ऀ͕͍Ζ͍Ζ৮ͬͨΓ…
هࣄอଘ࣌ʹग़ྗ༰Λ post_contentʹॻ͖ࠐΉॲཧΛ Ճ͍ͯ͠·͢ɻ
Gutenbergͷొ
Gutenbergͷొ
͜Εͬͯࠓ·Ͱ࡞ͬͯͨͷʹ͍ۙʂʂ
͡Ό͋࡞Γม͑ͪΌ͑ྑ͍͡ΌΜʂʂʂ
…ͱ͍͏͜ͱͰࠓ Gutenbergʹ߹Θͤͨ ઃܭͷΓ͠Λ͍ͯ͠·͢
ຊͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓Ͱ͢
ࣗ͝ͰGutenbergΛΧελϜ͢Δͱ͖ͷ ߟ͑ํͷҰྫͱͯ͠ޚཡ͍ͩ͘͞
ݟग़͠ཁૉ
͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબʢσβΠϯʹґΔʣ
Gutenberg ɾ େ͖͞ϨΠΞτͷબͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ͷ༻
ׂίϯςϯπ
͜Ε·Ͱ ɾ ࠨӈʹԿΛஔ͢Δ͔Λࡉ͔͘બ ɾ ՃͰ͖Δ༰Λݸผʹ࠶ઃఆ͢Δඞ ཁ͕͋Δ
Gutenberg ɾ ΧϥϜϒϩοΫΛ͑ղܾ ɾ ొ༰ͷ࠶ઃఆෆཁ
ͱɺ͜͜·Ͱ ඪ४Ͱ༻ҙ͞Ε͍ͯΔͷΛ༻͍ͯ͠·͢
͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰศརͰ͢
ͨͩ͠… ग़ྗʹ͍ͭͯௐΛ͢Δඞཁ͕͋Γ·͢
௨ৗͷग़ྗ <h2>test</h2>
͜͏͍ͨ͠ <div class="grid_10 prefix_1 suffix_1”> <h2>test</h2> </div>
ϒϩοΫϑΟϧλͷ blocks.getSaveElement Λ༻͢Δ͜ͱͰɺ อଘܗࣜΛॻ͖͑Δ͜ͱ͕Ͱ͖·͢ɻ
https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/ ৄ͘͠ Gutenberg Handbook ͷ Block Filters Λ ޚཡ͍ͩ͘͞
ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ ઃఆ߲͕Γͳ͍ͱ͖ʁ
Block Filters Λۦ͢Δ͜ͱͰରԠͰ͖·͢ɻ ɾblocks.registerBlockType ɾeditor.BlockEdit ɾblocks.getSaveContent.extraProps
શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ
͓͍߹Θͤઌใ ͜Μͳͷ
͜Ε·Ͱ ɾ ܾ·ͬͨ༰Λॱ൪ʹొ͍ͯ͘͠ ɾ ొ࣌ͷݟ͑ํͱαΠτ্Ͱͷݟ͑ํ ҟͳΔ
Gutenberg ɾ ෳݸͷೖྗཝ͕ଘࡏ͢Δͷ࡞Ͱ͖Δ ɾ ߘը໘ͰͷݟͨCSSΛؤுΕ΄΅ಉ༷ʹ࡞Մೳ
ΧελϜϒϩοΫͷՃํ๏ʁ
registerBlockTypeΛ༻͠·͢
HandbookʹΧελϜϒϩοΫͷ Ճͷํ๏νϡʔτϦΞϧͰࡌͬͯ·͢ʂ
ͪΒͬͱGoogleϚοϓͷݕࡧݟ͚͑ͨͲ…
GoogleϚοϓͷݕࡧ
ਖ਼Ұ൪ઃܭ͢Δ্Ͱհͩͳ͊ͱ ࢥ͍ͬͯ·͢
PlaceSearchAPI͋ΔͷͰ ࡞Δ͜ͱՄೳͰ͢
ΫϥΠΞϯτ͝ͱʹAPIΩʔͷઃఆ͕ඞཁͳͷͰ ͦͷลΓผ్ը໘͕ඞཁʹͳΓͦ͏
Gutenberg͔ΒΕΔͷͰਂೖΓ͠·ͤΜ
ొ͑͞Ͱ͖Ε දࣔʹؔͯ͜͠Ε·Ͱಉ༷ʹͰ͖Δͣ
දࣔ༻ͷJS1͔͠ ग़ྗ͠ͳ͍ͱ͍͏෦
ηογϣϯ·ͰʹௐΑ͏ͱࢥ͍ͬͯ·͕ͨ͠ ؒʹ߹͍·ͤΜͰͨ͠ ͝ΊΜͳ͍͞
࣍ୈͰରԠͰ͖ΔͣͰ͢ʂ
ͱɺ͜Μͳײ͡ͰΰϦΰϦઃܭΛਐΊ͍ͯ·͢ɻ
ਖ਼ࢲ·ͩ·ͩษڧதͰ͢
࡞Γํʹ͍ͭͯઌਓୡ͕͍Βͬ͠ΌΔͷͰ ͦͷํͨͪͷใΛ ࢀߟʹ͍͖ͤͯͨͩ͞·͠ΐ͏
Gutenberg HandbookಡΜͰΈ·͠ΐ͏ mimi͞Μ͕ઌఔհ͞Ε·ͨ͠Ͷ
ӳޠා͘ͳ͍Α ֶੜͨͪʹ͍ͭݴ͏ݴ༿Ͱ͢ ࢲۤखͰ͢
ηογϣϯΛ࡞Δʹ͋ͨΓ ͍Ζ͍ΖͬͯΈ·͕ͨ͠
ௐ࢝ΊΔͱͪΐͬͱͦ͠͏ͳͷͰ͕͢ ҊͣΔΑΓ࢈Ή͕қ͠
࡞Γ͍ͨͷΛΏͬ͘Γਫ਼ࠪͯ͠ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ
Ͱཱͪࢭ·Γ͗ͣ͢ʹखಈ͔ͯ͠ΈΔ͜ͱ
खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ
ࢲઃܭ͕Ұ൪ۤखͰ͢
ͦͯ͠…
࣮·ͩΛͦΉ͚͍ͯΔ͕͋Γ·͢
͜Ε·ͰͷΧελϜϑΟʔϧυͷ༰ post_metaʹઃఆ͞Ε͍ͯ·͢
ਖ਼ࣜʹҠߦ͢ΔͷͰ͋Ε ͜Είϯόʔτ͠ͳ͚ΕͳΓ·ͤΜ
͜ͷลͷରॲͱ͔օ͞Μʹฉ͍ͯΈ͍ͨ͜ͱ͕ ͨ͘͞Μ͋Γ·͢ʂ
ͥͻ͜ͷ͋ͱͷ࠙ձͰ օ͞Μͱใަ͍ͤͯͩ͘͞͞ʂ
ݟ͍͖ͯͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
Any Questions?