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)
Cloudflare Meetup Nagano Vol.3
torounit
1
59
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
550
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
140
Fraxinus00tw assembly manual
fukumay
0
110
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
手を動かしてレベルアップしよう!
maruto
0
220
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
What's new in Go 1.24?
ciarana
1
110
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5k
Pwned Labsのすゝめ
ken5scal
2
450
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Code Review Best Practice
trishagee
67
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Producing Creativity
orderedlist
PRO
344
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Docker and Python
trallard
44
3.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Become a Pro
speakerdeck
PRO
26
5.2k
Gamification - CAS2011
davidbonilla
80
5.2k
Unsuck your backbone
ammeep
669
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Cult of Friendly URLs
andyhume
78
6.2k
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