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
86
僕が考える 「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
450
ブロックエディターを用いた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
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
OPENLOGI Company Profile
hr01
0
67k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Optimizing for Happiness
mojombo
379
70k
What's in a price? How to price your products and services
michaelherold
246
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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