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
Hello Gutenberg !!! / Shinshu WordPress Meetup ...
Search
Toro_Unit (Hiroshi Urabe)
September 29, 2018
Technology
1
280
Hello Gutenberg !!! / Shinshu WordPress Meetup vol.3
Toro_Unit (Hiroshi Urabe)
September 29, 2018
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
130
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
220
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
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
580
Other Decks in Technology
See All in Technology
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
350
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Writing Fast Ruby
sferik
628
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Speed Design
sergeychernyshev
32
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Practical Orchestrator
shlominoach
190
11k
It's Worth the Effort
3n
187
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Transcript
Hello Gutenberg !!! Toro_Unit@ Shinshu WP Meetup vol.3 1
$ whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢ 4
5
Contribution • WordCamp Kyoto 2017 / Osaka 2018 / Ogijima
2018 ࣮ߦҕһ • WordCamp Osaka 2018 Speaker. • etc... 6
Plugins and Themes • Custom Post Type Permalinks • Simple
Post Type Permalinks • Powerful Posts Per Page (PPPP) • Smart PWA <- new! • Vanilla • and more... 7
WordPress 5.0 • ࣍ͷϝδϟʔόʔδϣϯ • ࠓதʹϦϦʔε͞ΕΔͣɻɻɻʁ 8
9
Gutenberg ৽͍͠ Gutenberg ฤूΤΫεϖϦΤϯε | https:// ja.wordpress.org/gutenberg/ • WordPress ͷશ͘৽͍͠ߘ/ฤूը໘ɻ
10
11
Editing Focus • ϖʔδͷ࡞ɺߘͷ࡞ʹͱʹ͔͘ϑΥʔΧεɻ • ʮϒϩοΫʯΛੵΈ্͛ΔܗͰهࣄΛฤूग़དྷΔΑ͏ʹɻ • ϨΠΞτͳͲɺWordPress ͔Β HTML/CSSΛॻ͔ͣʹ
ߦ͑ΔΑ͏ʹɻ 12
ϒϩοΫϕʔε • ཁૉΛ͋Δఔͷմͱͯ͠औΓѻ͏ɻ • ෳࡶͳHTMLΛඞཁͱ͢ΔͷɺϒϩοΫͱͯ͠؆୯ʹऔ Γѻ͑ΔΑ͏ʹɻ • ϞμϯͳϒϩάͷϨΠΞτ؆୯ʹ࡞Ͱ͖Δɻ 13
14
15
16
17
DEMO 18
Blocks • σϑΥϧτͰ 30छྨ + ༷ʑͳαʔϏεͷຒΊࠐΈʢTwitterͱ͔Youtubeͱ͔ʣ • ϒϩοΫͷใɺHTMLͱɺίϝϯτͰอଘɻ • PHPͰಈతʹใΛग़͢͜ͱग़དྷΔʢex.࠷৽ͷهࣄͷҰཡͱ͔ʣ
19
Outline • ΞΫηγϏϦςΟͳͲʹܨ͕Δɻຯ͚ͩͲॏཁͳػೳɻ 20
Engineering 21
WP API + React 22
WP API • 4.7 ͰϚʔδ͞ΕͨREST API. ͜ΕʹΑΓཧը໘Λ JavaScriptͰ࡞Γସ͑Δ͜ͱ͕Մೳʹɻ React •
Facebook͕த৺ʹ։ൃ͍ͯ͠ΔJavaScriptͰUIΛ࡞ΔͨΊͷ ϥΠϒϥϦɻ 23
Others • Babel :τϥϯεύΠϥ • Webpack :Ϗϧυπʔϧ • jest :Ϣχοτςετπʔϧ
• etc... 24
։ൃϓϩηε • ݱࡏ WordPress ͷϓϥάΠϯͱͯ͠։ൃதɻ։ൃϨϙδτ Ϧ Github.WordPress/gutenberg • Gutenberg ʹݶΒͣɺ৽ػೳ·ͣϓϥάΠϯͱͯ͠։ൃ͞
ΕɺͦͷޙຊମʹϚʔδ͞ΕΔɻ 25
• Gutenberg ʹύον͕Ϛʔδ͞ΕΔͱɺWordPress 5.0 ʹ໊ લ͕ࡌΔͧʂʂ • ຊޠٴͼϚϧνόΠτɺIMEܥଟ͍Ζ͍Ζෆ۩߹͋Δ ͔Αʁνϟϯεʂʂ •
OSSͷ։ൃϑϩʔʹ;ΕΒΕΔྑ͍ػձɻ 26
Lets try! 27
https://wordpress.org/ gutenberg/handbook/ • APIͷใͱ͔ͦΕͳΓʹ͋Δɻ • ͳΜͲ͓ੈʹͳΔ͠ɺͨͿΜ ιʔείʔυಡΉɻ 28
ɹGutenberg Ҏલͷهࣄ ʮΫϥγοΫʯϒϩοΫʹ·ͱΊͯ์Γ ࠐ·ΕΔͷͰɺಥવԿ͔͕มΘΔͱݴ͏ ͜ͱͳ͍ɻ ͜ΕΛϒϩοΫϕʔεʹม͢Δػೳ ͋Δ͕ɺHTMLߏɺίϝϯτͳͲ͕ มΘΔͷͰҙ͕ඞཁɻ 29
30
Notice • Gutenberg Λ͍ͨ͘ͳ͍ɺ͑ͳ͍߹ɺClassic Editor ϓϥάΠϯΛಋೖ͢Δͱɺ5.0Ҏ߱ࠓ·Ͱ௨ΓͷUIͰҾ͖ଓ ͖ฤूՄೳɻҊ݅࣍ୈ͔ɻ • ςʔϚଆͰ Gutenberg
༻ͷCSS͋Δఔॻ͔ͳ͍ͱ͍͚ ͳ͍ɻ • ͍͔ͭ͘ͷػೳɺςʔϚଆͰ໌ࣔతʹ add_theme_supoort Ͱએݴ͢Δඞཁɻ 31
ײͱ͔ 32
ΧελϜϑΟʔϧυͱͷൺֱɻ WordPressΧελϜϑΟʔϧυʹ͍Ζ͍ΖೖΕΔΑ͏ͳઃܭʹͳ͍ͬͯͳ͍ɻ͋͘· ͰϝλใΛೖΕΔॴɻget_post_meta ͩ͠ɻ ΦϦδφϧͷϒϩοΫΛ࡞ΕΔΑ͏ʹͳ͓ͬͯ͘ͱؒҧ͍ແ͘ʹཱͭͱࢥ͏ɻຊจཝ ʹͪΌΜͱίϯςϯπ͕ೖΔͷͰɺαΠτݕࡧͳͲΛΧελϚΠζ͠ͳͯ͘ྑ͍έʔ ε૿͑Δɻ ͨͩɺECαΠτͳͲʹ͓͚ΔͷIDɺֹۚͳͲɺͦΕ୯ମͰݕࡧରʹͳͬͨΓιʔ τͷ݅ʹͳΔΑ͏ͳϞϊɺ୯ମͷσʔλͱͯ͠औΓग़͍ͨ͠ϞϊΧελϜϑΟʔϧ υͰɻ
͍͚ΛͪΌΜͱߟ͑Δඞཁɻ 33
ΣϒαΠτͷ։ൃํ๏ʹ͍ͭͯ • σβΠϯΧϯϓ ->HTML/CSS -> WordPressςʔϚʹɺΈ͍ͨͳϑϩʔଟ͠ ͍ɻ σϑΥϧτͰ͋ΔఔCSS͕ద༻͞Ε͍ͯΔͷͰɺͦΕΛελΠϦϯά͍ͯ͘͠ͱ ͍͏ྲྀΕʹ͠ͳ͍ͱେมͦ͏ɻۀ͍ͯ͠Δ߹ɺͦ͜ΒลΛڠௐ͠ͳ͕Βղܾ ͢Δඞཁ͕͋Δɻ
• ͪΌΜͱཧղ͔ͯ͑͠ͳΓָʹͳΔπʔϧͰ͋Δͱ͍͏͜ͱɻ • ࣾͰͷHTML/CSSϑϨʔϜϫʔΫ͕͋ΔͳΒΰϦΰϦʹΧελϚΠζͯ͠ Gutenbergͷग़ྗΛͦΕʹ߹ΘͤΔͷखஈͱͯ͠େ͍ʹݕ౼ͷ༨͕͋Δɻ • WordPress Ҏ֎ͷબࢶͩͬͯ͋Δͧɻ 34
·ͩ࣌ؒ͋ΔͷͰɺͱΓ͋͑ͣɺࠓ͔ΒͰ ReactɺWP API Λ৮͓ͬͯ͘ͱྑ͍͜ͱ͋ΔΑଟɻ 35
Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 36