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
830
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
shizumi
0
2.8k
Other Decks in Technology
See All in Technology
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
まだ間に合う! 2025年のhono/ssg事情
watany
3
660
様々なファイルシステム
sat
PRO
0
240
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
2
950
20251027_findyさん_音声エージェントLT
almondo_event
1
380
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
350
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
120
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
370
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
130
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.3k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
GitHub's CSS Performance
jonrohan
1032
470k
RailsConf 2023
tenderlove
30
1.3k
Gamification - CAS2011
davidbonilla
81
5.5k
Building Applications with DynamoDB
mza
96
6.7k
Docker and Python
trallard
46
3.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Producing Creativity
orderedlist
PRO
347
40k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
526
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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?