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 vol.3
Search
Toro_Unit (Hiroshi Urabe)
September 29, 2018
Technology
1
250
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
6.8k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
1
850
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
8.9k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
300
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
370
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
490
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
2.9k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.4k
Other Decks in Technology
See All in Technology
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
任意コード実行の原理
ffri
0
170
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
Vos logs méritent mieux que la config par défaut
lyrixx
2
270
AMLD 2024 - Build Your Own GPT
donlelef
1
260
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.4k
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
2.8k
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
OpenTelemetry実践 はじめの一歩
taxin
0
310
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
370
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Web Components: a chance to create the future
zenorocha
304
41k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Visualization
eitanlees
135
14k
Fireside Chat
paigeccino
19
2.6k
Faster Mobile Websites
deanohume
296
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
4 Signs Your Business is Dying
shpigford
174
21k
The Invisible Customer
myddelton
114
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
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