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.4k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / 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
830
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.8k
Other Decks in Technology
See All in Technology
Fargateを使った研修の話
takesection
0
120
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.5k
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.6k
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.5k
いまさらのStorybook
ikumatadokoro
0
140
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
4 Signs Your Business is Dying
shpigford
180
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Writing Fast Ruby
sferik
626
61k
RailsConf 2023
tenderlove
29
880
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
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