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
880
ブロックエディターで変わる、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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
200
Cloudflare Meetup Nagano Vol.3
torounit
1
90
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.8k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
410
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.3k
Other Decks in Technology
See All in Technology
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
230
TROCCO今昔
gtnao
0
180
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
190
An introduction to Claude Code SDK
choplin
3
3.1k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
120
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
200
Digitization部 紹介資料
sansan33
PRO
1
4.6k
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
150
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
590
MCPに潜むセキュリティリスクを考えてみる
milix_m
0
100
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fireside Chat
paigeccino
37
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Art, The Web, and Tiny UX
lynnandtonic
300
21k
Balancing Empowerment & Direction
lara
1
480
YesSQL, Process and Tooling at Scale
rocio
173
14k
How GitHub (no longer) Works
holman
314
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
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