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
270
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)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.2k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.5k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.5k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
360
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
520
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
840
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
3k
Other Decks in Technology
See All in Technology
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
190
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
Can We Measure Developer Productivity?
ewolff
1
150
AGIについてChatGPTに聞いてみた
blueb
0
130
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
170
複雑なState管理からの脱却
sansantech
PRO
1
150
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
How GitHub (no longer) Works
holman
310
140k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Adopting Sorbet at Scale
ufuk
73
9.1k
Making Projects Easy
brettharned
115
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Six Lessons from altMBA
skipperchong
27
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
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