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 Spec...
Search
Toro_Unit (Hiroshi Urabe)
December 14, 2019
Technology
4
840
ブロックエディターで変わる、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.3k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.5k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.6k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
370
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
410
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
530
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
3.2k
プラグインとの付き合い方 #WPmeetupkobe / 2019-08-31 Kansai WordPress Meetup Kobe vol.10
torounit
4
1.4k
Other Decks in Technology
See All in Technology
なぜCodeceptJSを選んだか
goataka
0
160
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
190
UI State設計とテスト方針
rmakiyama
2
590
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
150
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
230
2024年にチャレンジしたことを振り返るぞ
mitchan
0
140
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
450
Featured
See All Featured
Being A Developer After 40
akosma
87
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing Experiences People Love
moore
138
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Become a Pro
speakerdeck
PRO
26
5k
Designing for humans not robots
tammielis
250
25k
Practical Orchestrator
shlominoach
186
10k
Building Your Own Lightsaber
phodgson
103
6.1k
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