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
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
Search
Toro_Unit (Hiroshi Urabe)
December 14, 2019
Technology
4
820
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
「SaCSS Special26 : WordPress&コンテンツ制作特集」の登壇資料です。
Toro_Unit (Hiroshi Urabe)
December 14, 2019
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.1k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.2k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.3k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
330
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
510
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.5k
プラグインとの付き合い方 #WPmeetupkobe / 2019-08-31 Kansai WordPress Meetup Kobe vol.10
torounit
4
1.4k
Other Decks in Technology
See All in Technology
地理情報とAPIのトレンド
nagix
0
160
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Classmethod Odyssey 登壇資料
yamahiro
0
390
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
MySQLのロックの種類とその競合
yoku0825
6
1.6k
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Azure AI ことはじめ
tsubakimoto_s
0
130
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
Ruby is Unlike a Banana
tanoku
96
10k
Building Adaptive Systems
keathley
34
2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Writing Fast Ruby
sferik
623
60k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
A Tale of Four Properties
chriscoyier
155
22k
Designing for humans not robots
tammielis
247
25k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Six Lessons from altMBA
skipperchong
24
3.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Transcript
ϒϩοΫΤσΟλʔͰม ΘΔɺWordPress Ͱͷ ΣϒαΠτ։ൃ Toro_Unit@SaCSS Special 26 1
$ whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Developer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Developer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 4
5
Plugins and Themes • Custom Post Type Permalinks • Advanced
Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 6
7
WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ
8
9
ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ߚ༿͕ݟ͝Ζɻ৽ͦɻ •
ΞϧΫϚ͕ΏΔΩϟϥάϥϯϓϦʹ ͳΓ·ͨ͠ɻ 10
ຊηογϣϯʹ͍ͭͯ ࠷ॳΧελϜϒϩοΫͷ։ൃͷೖͷ Λ͢ΔͭΓͰ͕ͨ͠ɺεϥΠυ120 ຕɺ2࣌ؒ10+్தٳܜ10×2ͷ༰ ʹͳͬͯ͠·ͬͨͷͰɺఘΊ·ͨ͠ɻ ίʔυΛॻ͖͍ͨਓͪ͜ΒͷεϥΠυ Λ͝ࢀর͍ͩ͘͞ɻ Block Editor ΧελϚΠζೖ
#WPmeetupOsaka / https:// speakerdeck.com/torounit/get-started- customize-for-block-editor 11
Block Editor Handbook • νϡʔτϦΞϧͳͲͦͦ͋͜͜Δ ͷͰɺͱΓ͋͑ͣಡΉɻࣸܦ͢Δ • ࠔͬͨΒಡΉɻ • ͱΓ͋͑ͣɺຖ͔Έ͠ΊͯಡΉɻ
12
Gutenberg Ҏ߱ͷςʔϚ࡞ʹ͚ ͯɺࠓֶͿ͖͜ͱ https://speakerdeck.com/waviaei/ gutenberg-yi-jiang-falsetemazuo- cheng-nixiang-kete-jin-xue-bubekikoto ·ͨɺͪ͜ΒͷεϥΠυซͤͯ͝ཡ͍ ͨͩ͘ͱΑ͍͔ͱࢥ͍·͢ɻ WordCamp Osaka
2019 Ͱͷηογϣ ϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓதʹ ؤுΔʣ 13
ӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτ ͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫհ https://speakerdeck.com/h2ham/ wordcamp-osaka-2019-h2ham-omuo ࣄྫͷͪ͜ΒΛͲ͏ͧɻ WordCamp Osaka 2019 Ͱͷηογϣ ϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓதʹ
ؤுΔʣ 14
΄Μ͍ͩ 15
ͦͦ WordPress ʹ͓͚ΔΤσΟλͷׂͱ 16
WordPress ͱ͍͏ CMS ͷ HTMLཧ • post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δஔɻ
• HTML Λԣஅతʹཧ͢ΔΈͰ͋Γɺ୯ҰͷϖʔδͦͷͷΛ ཧ͢ΔΈͰͳ͍ɻਤॻؗɻ • σʔλΛݩʹ HTML Λੜ͢ΔΘ͚Ͱͳ͍ɻ΄΅ͷ HTML ʹςʔϚͱ͍͏Λணͤͯ৴͢Δஔɻ • ͍ͬͯ͏͔࠷ॳ (0.71)ɺςʔϚ͢Βແ͔ͬͨɻ • https://github.com/mt8/wbkobe77/blob/master/index.php 17
18
19
20
• ͨͱ͑ɺconcrete5 ͱ͍͏ CMS ɺϒϩοΫ͝ͱʹσʔλ ϕʔεͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔Βσʔλ
ΛҾͬு͖ͬͯͯ̍ͭͷ HTML Λੜ͢Δɻ 21
• ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔ ͱ͔Λ͚ͭͯཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯ ςϯπཧɻͭ·Γϒϩάɻ • ͍͍ͤͥ ϔομͱϑολ͘Β͍ڞ௨Խͯ͠Ζ͏ɻఔɻ 22
ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷׂͱ 23
HTMLΘ͔Βͳ͍ͻͱͰɺ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ 24
ͭ·Γ͜Ε 25
ੈքҰࡶͳ WordPress ͷಈ࡞ͷղઆ 1. ϒϥβͰಈ͘ϗʔϜϖʔδϏϧμʔతͳԿ͔ͰHTMLΛ࡞ 2. ͦΕΛɺΤΫηϧͷ͍ͬͭ͢͝ʢMySQLʣʹอଘ 3. ΧςΰϦʔ/ͳͲͰɺநग़ͯ͠දࣔɻ
26
͍ͬͯ͏͔ͱͱϒϩάιϑτʂ since 2003.05.27 27
ࠓޙͷಈ Full Site Editting ͷ࣮ɻ ϖʔδશମɺΣϒαΠτΛͯ͋͢ͷΤσΟλʔͰ։ൃͰ͖ ΔΑ͏ʹ͢Δ༧ఆɻ • αΠτλΠτϧ /
φϏήʔγϣϯ ͳͲͷϒϩοΫ͢Ͱʹ։ ൃ͞Ε͍ͯΔɻ 28
ϒϩοΫΤσΟλʔͰมΘΒͳ͍͜ͱ • ΧελϜϑΟʔϧυͷऔΓѻ͍ɻ • ͦͦίϯςϯπΛΰϦΰϦೖΕΔശͰͳ͍ɻॴḨ͓·͚ ʢߘαϜωΠϧͱ͔෦తʹΧελϜϑΟʔϧυͰͰ͖ͯΔʣ • ςʔϚΛม͑ͯɺσϑΥϧτςʔϚʹมߋͯ͠ɺݟͨҎ֎ʹ Өڹ͠ͳ͍ͷ͕ WordPress
ͷςʔϚͷ͋Δ͖࢟ɻ • ͦ͏͍͏CMS͕΄͍͠ͳΒɺྫ͑ Drupal ͱ͔͍͍͑Μ͡Όͳ ͍͔ͳͱࢥ͏ɻ 29
ϒϩοΫΤσΟλʔͰΧελϚΠζͰ͖Δ͜ͱ • Ϣʔβʔ͕؆୯ʹσβΠϯΛ͍͡ΕΔΑ͏ʹ ( registerBlockStyle ) • ΦϦδφϧͳΧελϜϒϩοΫ ( registerBlockType
) • ϒϩοΫҎ֎ͰͷΧελϚΠζ ( registerPlugin ) • طଘͷڍಈͷมߋ ( addFilter, addAction ) 30
ϒϩοΫελΠϧ GUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ ͍ͭͯ͘Δɻඇৗʹศརɻ ઃఆ͞ΕΔɺis-style-hoge ͷΑ͏ͳܗࣜɻ "ߴͳઃఆ" ύωϧͷ "ՃCSS Ϋϥε"
Λૢ࡞͍ͯ͠Δͩ ͚ɻ Documentation : https://developer.wordpress.org/block- editor/developers/filters/block-filters/#block-style-variations 31
࣮ํ๏ɻ ΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔʹࢦఆ <?php function my_block_editor_assets() { wp_enqueue_script(
'my-block-editor-style', 'path/to/my-block-editor-style.js', array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'my_block_editor_assets' ); 32
wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻ const { registerBlockStyle } = wp.blocks; registerBlockStyle( 'core/quote',
{ name: 'hoge', label: '΄͛' } ); 33
ελΠϧ͕Ճ͞ΕΔɻeditor-style Λ ͪΌΜͱઃఆ͍ͯ͠ΕϓϨϏϡʔʹ ద༻͞ΕΔɻ • Ϙλϯͷؙ֯ελΠϧ • ςʔϒϧͷελΠϧ ͳͲಉ͡Έɻ ԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜
ΕΛ֮͑Δํ͕༗༻ੑߴ͍ɻ ϒϩοΫΛࣗ࡞͢ΔࡍɺσβΠϯͷό ϦΤʔγϣϯΛ૿͢ͳΒ͜ΕΛ͏ɻ 34
ΧελϜϒϩοΫ React ඞਢɻ • ΦϦδφϧͷϒϩοΫΛՃͰ͖Δɻ • PHP Λซ༻͢Δ͜ͱՄೳɻ( Dynamic Block
) 35
import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks }
from '@wordpress/block-editor'; const edit = ( { className } ) => ( <section className={ className }> <div className="wp-block-my-block-section__container"> <InnerBlocks /> </div> </section> ); const save = ( { className } ) => ( <section className={ className }> <div className="wp-block-my-block-section__container"> <InnerBlocks.Content /> </div> </section> ); 36
registerBlockType( 'my-block/section', { title: 'section', description: 'section', icon: 'text-page', category:
'layout', supports: { align: [ 'wide', 'full' ], anchor: true, }, edit, save, } ); 37
ϒϩοΫͷ࡞ΓํɺBlock Editor Χε λϚΠζೖ #WPmeetupOsaka ɺ Block Editor Handbook ΛಡΜͰͩ͘͞
͍ɻ 38
Dynamic Block PHP Λ༻͍ͨಈతͳॲཧΛߦ͑ΔϒϩοΫ • WP_Query ͳͲΛѻͬͯ࠷৽ͷߘΛදࣔ • ϩάΠϯ͍ͯ͠ΔϢʔβʔʹ͚ͨίϯςϯπɻ •
ϒϩοΫͰͷ A/Bςετ • ظؒݶఆͷίϯςϯπ • etc ... 39
example: Advanced Posts Blocks https://www.wordpress.org/plugins/ advanced-posts-blocks/ • ΧςΰϦʔ/λά/λΫιϊϛʔͱߘ λΠϓͰɺߜΓࠐ·ΕͨߘΛදࣔ ͢ΔɻϒϩοΫͳͲΛఏڙɻ
• TOPϖʔδͷ৽ணใҰཡͱ͔Ͱ ͏ɻ 40
41
• Dynamic Block ྩͷγϣʔτίʔυɻͦͷػೳΛఏڙ͠ ͍ͯΔ PHP ͕յΕΔɾফ͑ΔͳͲͰίϯςϯπʹӨڹ͕ग़ Δɻ • Static
ͳϒϩοΫͰ࡞ͨ͠ͷɺHTMLͱͯ͠ΤσΟλʹ อଘ͞ΕΔͷͰɺͦͷϒϩοΫΛఏڙ͍ͯ͠Δͷ͕ফ͑ͯ Өڹগͳ͍ɻ • React ͕ΜΖ͏ɻ 42
ʮཧը໘͔Β؆୯ʹϒϩοΫΛ࡞Ε·͢ʂʯͱ͍ͬͨϓϥά Πϯ͕͋Δ͕ɺDynamic Block Λ༻͍࣮ͨʹͳ͍ͬͯΔͷ ͕ଟ͍ɻ ͦͷϓϥάΠϯ͕ফ͑Δɾ։ൃऴྃɾPro ൛ʹҎ߱͢ΔͳͲ͕ ͋ͬͨ߹Ͳ͏͢ΔʁΑ͘ߟ͑ͯɺݕূ͔ͯ͠Β͏͜ͱɻه ࣄ͕100݅ɺ1000݅ʹͳ͔ͬͯΒߟ͍͑ͯɻ 43
ϒϩοΫΤσΟλʔͰม ΘΔ͜ͱ 44
Ϣʔβʔͷ࡞͢Δ HTML ͷ࣭ 45
• ෳࡶͳ HTML Λඞཁͱ͢ΔϨΠΞτɺσβΠϯϒϩοΫ ΤσΟλʔͰ؆୯ʹೖྗՄೳʹɻ • ԣ෯͕ 100% ʹͳΔը૾ͳͲϘλϯΛԡ͚ͩ͢Ͱ؆୯ʹɻ •
ϨεϙϯγϒͳΧϥϜϨΠΞτͳͲ࡞Մೳɻ 46
։ൃऀʹͱͬͯͷ HTML ͷࣗ༝ͷԼ 47
• ϒϩοΫΤσΟλʔ͕༻ҙͨ͠HTMLߏΛΧελϚΠζ͢ Δͷେมɻ • ͔ͳΓෳࡶͳϒϩοΫΛࣗ࡞͢ΔΑ͏ͳʹͳΔɻ • class ໊ࣗಈͰ༩͞ΕΔͨΊɺςʔϚΛ։ൃ͢ΔଆͰͦͷ ໋໊ʹ߹Θͤͨ CSS
Λ։ൃ͢Δඞཁ 48
49
50
• ੜͷεύΠεΛ͍͜ͳ͢ͱ͛͢ʔΧϨʔ͕࡞ΕΔ͚Ͳૉਓ ʹΉ͍ͣɻ • ΧϨʔคɺΧϨʔϧΛ͏ͱͱΓ͋͑ͣૉਓͰ͍ͩͿ؆ ୯ʹ࡞ΕΔ͚ͲɺࣅͨΑ͏ͳຯʹɻ • ຯʹมԽΛग़ͨ͢ΊʹҰඞཁɻ ͱΓ͋͑ͣɺΧϨʔ୭Ͱ࡞ΕΔΑ͏ʹͳͬͨ 51
ࠓ·Ͱ࡞͖ͬͯͨͷ εύΠεʹͩ͜Θͬͨ ΧϨʔ ͜Ε͔Β࡞Δ͖ͷ εύΠεʹͩ͜Θͬͨ ΧϨʔคɺΧ Ϩʔϧ 52
هࣄೖྗը໘ͷ ΧελϚΠζํ๏ / DX 53
͍··Ͱ 54
PHP ͱ jQuery 55
• ϑΥʔϜ PHP Ͱؤுͬͯ։ൃɻSetting API ͬͯ͋Δ͚ Ͳ͔ͳΓେมɻ • όϦσʔγϣϯɺϦϑΝϥʔͷ֬ೝͳͲ PHP
Ͱͬ͝Γ͝Γʹ ࣮ɻ • ͪΐͬͱϦονʹ͢ΔͨΊʹ jQuery 56
͜Ε͔Β 57
PHP ͱ React 58
• REST API ͔Βɺߋ৽Ͱ͖ΔΑ͏ʹɺ2~5ߦఔͷPHPΛهड़ • React Λ༻͍ͯUIΛ։ൃɻϒϩοΫΤσΟλʔͰ༻ҙ͞Ε͍ͯ ΔίϯϙʔωϯτͰαΫοͱ࣮ • ྫ͑ɺ<DateControl
/> ΧϨϯμʔͷUI·Ͱ͍ͭͯ͘Δ • ͕มߋ͞ΕͨΒɺJS Ͱ Ληοτ͢Δ͚ͩͰޙউखʹ σʔλͷૹ৴ɻ • React / JavaScript ͕Ͱ͖ΕΉͪΌͪ͘Όָʹͳͬͨͱ͍ ͑Δɻ 59
ͨͪʹٻΊΒΕΔมԽ 60
ٻΊΒΕΔεΩϧ͕େ෯ʹมԽ • CSSͷਂ͍ཧղ • WordPress ଆ͕ఏٞͯ͘͠ΔϒϩοΫͷHTMLޙଓɺclass ໊ɻͦΕ ʹ͑͏ΔɺCSSྗɻ • React
/ JavaScript ྗɻ • Gutenberg ͷιʔείʔυΛಡ·ͳ͍ͱΘ͔Βͳ͍͜ͱଟ͍ɻ • ίϯϙʔωϯτࢦɺՄมʹڧ͍σβΠϯͱϚʔΫΞοϓ • UI / UX ͷཧղɻ 61
ϫʔΫϑϩʔ 62
σΟϨΫγϣϯ • ҰͭҰͭͷϒϩοΫΛ͔ͬͪΓ࡞ͬͯͦΕΛࣗ༝ʹΈ߹Θ ͤͯαΠτΛ࡞Δͱ͍͏ํੑʹ͔͍ͬͯ͘ɻ • ϒϩοΫ͝ͱʹ༷Λ໌֬ʹɺৄࡉʹ͠ͳ͍ͱੵΉɻ • ઃఆ߲͕ଟ͍ͱ͕͔͔Δͷʹ୭͑ͳ͍ͷ͕ੜ· ΕΔɻ 63
σβΠϯ • ࣗ༝্͕͕Δ -> ίϯςϯπͷॱংΛϢʔβʔ͕ೖΕସ͑ͨΓͰ͖ ΔɻϚʔδϯͷ੍ޚͲ͏͢Δʁ • ࣗ༝ʹஔͯ͠յΕͳ͍σβΠϯ͕ཁٻ͞ΕΔɻ • ͦΕ͕ΧϥϜϨΠΞτͷதʹೖͬͯյΕͳ͍Α͏ͳɻ
• WEBαΠτͱ͍͏ΑΓɺΞϓϦέʔγϣϯͷΑ͏ͳൃ͕ཁٻ͞Ε Δɻ • ߋ৽͢ΔϢʔβʔʹ༧ଌՄೳͳσβΠϯɻ 64
HTML/CSS • XD ΛͱΓ͋͑ͣɺϒϥβͰݟΕΔΑ͏ʹ͢Ε͍͍ͱ͍͏ ൃͰ͍͍ͩͨੵΉɻ • ཁૉͷॱ൪͕มΘΔͳͲ͕ฏؾͰى͜Δ͠ɺࢠؔɺܑఋ ؔมΘͬͨΓ͢Δɻ • WordPress
ͷు͖ग़͢ཁૉʹ CSS Λॻ͘ɻΦϦδφϧͳ HTML / CSS ʹ WordPress Λ߹ΘͤΔͷϚδͰແཧɻ 65
JS • React ྗʂ • υΩϡϝϯτʹ༻ҙ͞Ε͍ͯΔίϯϙʔωϯτͷղઆ͕͋Δ ͷͰख़ಡ • ใϊϋ͕ઈରతʹগͳ͍ͷͰαΫοͱ࣮ݧͰ͖ΔΑ ͏ʹɻ
• ͦͷͨΊͷɾεέδϡʔϧ֬อ؊ɻ 66
શһ͕ϑΟʔυόοΫΛ͠߹ ͏ϫʔΫϑϩʔ͕ඞཁ 67
• ํͳϑΟʔυόοΫ͕େࣄɻͳ͔Α͘͠Α͏ɻ • ͤ͞Δલʹ૬ஊɻʮ͜͏͍͏ͷΓ͍ͨΜ͚ͩͲŋŋŋʯ • ͨ͠ͷΛ͞Ε͔ͯΒ૬ஊ͢Δͷؾ͕ॏ͍͠ɺ͞ ΕΔଆखΓͰΠϥοͱͯ͠Ζ͘ͳ͜ͱʹͳΒͳ͍Α΄ Μͱɻ • ΤϯδχΞʹͬͱૣ͘ݴͬͯΑʔͬͯݴ͍͍ͨؾ࣋ͪ
Θ͔Δ͚ͲɺΤϯδχΞޒཬໄதͳͷͰɺૣΊʹ૬ஊ͠ ͯɺ࣮ݧͯ͠Β͏ͷ͕٢ɻ 68
• ΞδϟΠϧతʹΒͳ͍ͱଟΈΜͳർฐ͢Δɻ • Կߟ͑ͣʹΥʔλʔϑΥʔϧͰਐΊΔͱଟɺΦϦδφ ϧͷϒϩοΫ͕100ݸ͘Β͍ੜ·ΕͯΤϯυϢʔβʔർฐ ͢Δ 69
ϒϩοΫ͝ͱͷ༷Λఆ͕ٛඞཁɻ • ϒϩοΫ͝ͱͷೖྗ߲ͷఆٛɻ • ͦΕɺߋ৽͢ΔϢʔβʔʹͱ͍͍ͬͯ͢ͷ͔ʁ • Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ • ΤσΟλͷࣗ༝͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠ βʔͱΈ͚ɻ
70
ฐࣾͷ߹ • ՄೳͳݶΓΧελϚΠβʔΘͣɺશͯϒϩοΫΤσΟ λʔ্Ͱ݁ɻ • σβΠϯ͔ΒϒϩοΫͷ༷Λى͜͢߹͋Δ͠ɺϫΠ ϠʔϑϨʔϜ͔ΒϒϩοΫͷ༷Λى͜͢߹͋ΔɻαΠ τཁ݅࣍ୈɻ 71
ϒϩοΫ࡞Ε͍͍ͬͯΜ͡Όͳ͍ɻ • ΧελϜϒϩοΫ͕େྔʹ͍͋ͬͯ͜ͳͤͳ͍ɻແཧɻ • registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦ ΤʔγϣϯΛ͍࣋ͨͤ͢ํʹ༷Λ͢ɻCSSઃܭྗ͕ཁ ٻ͞ΕΔɻ • ίΞͷϒϩοΫͷ
HTMLߏͰɺෆՄೳͳσβΠϯΛͲ͏ ͢Δ͔͍ͭͰݕ౼ࣄ߲ɻ 72
σβΠφʔɾσΟϨΫλʔͱڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍Α ࣗͰ࡞Εͳͯ͘ɺ͓ͬͯ͘͜ͱେࣄ 73
ઃܭΛ͔ͬ͠Γཧղͯ͠ɺ։ൃ͢Δ͜ͱ͕ॏཁɻ • ϓϥάΠϯ࡞ऀతʹɺσϑΥϧτςʔϚ͘Β͍Ͱ͔͠ νΣοΫ͠ͳ͍͠ɻ • ͱΓ͋͑ͣɺυΩϡϝϯτͷݴ͏ͱ͓ΓʹͪΌΜͱ࡞Δɻσ ϑΥϧτςʔϚͱಉ͡Α͏ͳߏͰ࡞ͬͯΈΔɻ • ΤσΟλมΘ͚ͬͨͲɺWordPress ͷຊ࣭มΘͬͯͳ͍
74
͍͞͝ʹ • ϒϩοΫΤσΟλʔόάͬͯΔ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/ gutenberg/issues • ͍ͮΒ͍ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/
gutenberg/issues • ӳޠΘ͔ΒΜ -> Google ༁ • ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ 75
ϑΟʔυόοΫͨ͠ͷʢҰ෦ʣ • https://github.com/WordPress/gutenberg/issues/11813 • ʮkaʯ͕ʮ͔ʯͰͳ͘ɺʮk͋ʯʹͳΔෆ۩߹ɻWP 5.0 ϦϦʔεલɻ • https://github.com/WordPress/gutenberg/issues/18362 •
֬ఆ࣌ʹΧʔιϧ͕มͳͱ͜ΖʹඈΜͰ͠·͏ෆ۩߹ɻ͓ ͱͱ͍ͬͯͨɻ 76
77
͍͘͢ͳΔͷ͔ͦ͏Ͱͳ͍͔ɺΒ࣍ୈɻ ͱΓ͋͑ͣΛ্͛Α͏ɻࠔͬͯΔ͜ͱΛ͑Α͏ɻ 78
Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on
Github and Making WordPress 79