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
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
Search
Shizumi Yoshiaki
November 02, 2019
Programming
0
2.4k
カスタムフィールド製造業からの脱却 〜ブロックエディター(Gutenberg)をカスタムする方法〜
WordCampTokyo 2019のセッションにて発表しました登壇資料です。
デモについては、
https://sl.shizum.in/wct2019-demo
こちらをご確認ください。
Shizumi Yoshiaki
November 02, 2019
Tweet
Share
More Decks by Shizumi Yoshiaki
See All by Shizumi Yoshiaki
今日から始めるfunctions.phpカスタマイズ入門
shizumi
0
420
こんなこともできるWP-CLI 〜0から触ってみよう!〜
shizumi
4
670
カスタムフィールド製造業からの脱却 〜オリジナルブロックエディタからGutenbergへ〜
shizumi
3
1.2k
Other Decks in Programming
See All in Programming
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
840
Swiftコードバトル必勝法
toshi0383
0
170
XStateでReactに秩序を与えたい
gizm000
0
730
How to Break into Reading Open Source
kaspth
2
220
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
910
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
670
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
400
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Done Done
chrislema
180
16k
Designing with Data
zakiwarfel
98
5k
4 Signs Your Business is Dying
shpigford
179
21k
GitHub's CSS Performance
jonrohan
1030
450k
Statistics for Hackers
jakevdp
794
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
A Tale of Four Properties
chriscoyier
155
22k
What's new in Ruby 2.0
geeforr
340
31k
KATA
mclloyd
27
13k
Transcript
None
ΧελϜϑΟʔϧυۀ͔Βͷ٫ ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ ͣ͠Έʢ੩ւٛ໌ʣ
ࣗݾհ ઐֶߍଔۀޙྲྀ௨ؔͷϓϩάϥϚʹ ݁ࠗΛظʹୀ৬ಠཱͯ͠8FCۀքʹ ݱࡏגࣜձࣾαϯφφͱגࣜձࣾ$*&-ͷऔ కߍͷඇৗۈߨࢣ͍ͬͯ·͢ ۽ຊ8PSE1SFTT.FFUVQΦʔΨφΠβʔ 5XJUUFS!4IJ[VNJ 'BDFCPPL!:PTIJBLJ4IJ[VNJ ൃදऀۙӨʢ̑લʣ
ΧελϜϑΟʔϧυۀͬͯʁ
ΧελϜϑΟʔϧυۀͬͯʁ ͜ͷݴ༿͕ҙຯ͢Δͷֹ໘௨Γ ΧελϜϑΟʔϧυۀͳΒͼʹ8FCΞηϯϒϥʔͱ͍͏৬ۀʹ͍ͭͯ$BQJUBM1 IUUQTDBQJUBMQKQXIBUJTDVTUPNGJFMEJOEVTUPSZBOEXFCBTTFNCMFS Ͱ͋Δɻ ΧελϜϑΟʔϧυΛۦͯ͠ 8PSE1SFTTαΠτΛ࡞Δࣄ
(VUFOCFSHͱϒϩοΫΤσΟλʔ
ࠓߦΘΕ͍ͯΔηογϣϯͷλΠτϧʢҰ෦ʣ (VUFOCFSHͱϒϩοΫΤσΟλʔ ɾθϩ͔Βֶ΅͏ʂϒϩοΫΤσΟλʔʢ(VUFOCFSHʣଜ্ࢠ͞Μ ɾσβΠϯࣄྫͰݟΔ8PSE1SFTTͷΧελϚΠζͱ ϒϩοΫΤσΟλʔʢ(VUFOCFSHʣͰมΘΔະདྷੴ௩ઍت͞Μ ɾΧελϜϑΟʔϧυۀ͔Βͷ٫ ʙϒϩοΫΤσΟλʔʢ(VUFOCFSHʣΛΧελϜ͢Δํ๏ʙ ͜ͷηογϣϯ
ϒϩοΫΤσΟλʔͬͯ (VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ
8IBUJT(VUFOCFSH ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ l(VUFOCFSHzJTUIFOBNFPGUIFQSPKFDUUPDSFBUFBOFXFEJUPS FYQFSJFODFGPS8PSE1SFTT IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPSDPOUSJCVUPSTGBR (VUFOCFSHͱʁ (VUFOCFSHͱɺ8PSE1SFTTͷ৽͍͠ΤσΟλʔΛ࡞͢Δ ϓϩδΣΫτͷ໊લͰ͢ɻ
ϒϩοΫΤσΟλʔͬͯ(VUFOCFSHͷ͜ͱ͡Όͳ͍ͷʁ ৽ΤσΟλΛ࡞͢ΔϓϩδΣΫτͷ͜ͱΛ(VUFOCFSHͱݺͼ·͢ (VUFOCFSHϓϩδΣΫτʹΑͬͯੜͨ͠ ৽͍͠ΤσΟλʔͷ͜ͱΛϒϩοΫΤσΟλͱݺͼ·͢ɻ ͪͳΈʹ݄Ҏલ৽͍͠ΤσΟλʔͷ͜ͱΛ (VUFOCFSHͱݺΜͰ͍·ͨ͠ɻ
(VUFOCFSHϓϩδΣΫτͷͦͷઌʁ ΤσΟλʔΛɺϒϩοΫ Λར༻ͨ͠ܗʹ͢ΔͨΊ ͷج൫උɻ ϑΣʔζ ίϯςϯπͷ֎ଆΛΧε λϚΠζͰ͖ΔΑ͏ʹ͢ Δɻ ϑΣʔζ ίϥϘϨʔγϣϯػೳͷ
࣮ɻڞಉฤू͕Ͱ͖Δ Α͏ʹ͢Δɻ ϑΣʔζʢߏதʣ ެࣜͰෳݴޠΛѻ͏ͨ Ίͷػೳͷಋೖɻ ϑΣʔζʢߏதʣ
(VUFOCFSHϓϩδΣΫτͷͦͷઌʁ ݄ʹ։࠵͞Εͨɺ8PSE$BNQ64ʹͯ8PSE1SFTTͷڞಉ ࢝ऀ.BUU.VMMFOXFHͷߨԋʹΑΓɺఏࣔ͞Ε·ͨ͠ɻ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ɹ
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘
͜Ε·Ͱೲ͖ͯͨ͠ฤूը໘ ίϯςϯπͷछྨΛબ छྨʹ߹Θͤͨ༰Λొ
"$'Λۦͯ͠࡞ͬͨ ΦϦδφϧͷϒϩοΫΤσΟλʔ "$' "EWBODFE$VTUPN'JFMEͱ͍͏ɺ ΧελϜϑΟʔϧυۀΛࢧ͑Δπʔϧ
͍Ζ͍Ζͳ͕ʜ
͍Ζ͍Ζͳ͕ʜ ɾ ΧελϜϑΟʔϧυʹͯ͢ొ͞ΕΔͨΊɺඪ४ͰαΠτ ݕࡧ͕͑ͳ͍ɻ ɾ ΧελϜϑΟʔϧυݕࡧରʹ͢ΕΑ͍͕ɺݕࡧʹ͕࣌ؒ ͔͔Δɻ ɾ ૢ࡞ϛεͰผςʔϚʹมߋ͞ΕΔͱɺ༰͕Կදࣔ͞Εͳ ͍ɻ
ɾ ผςʔϚΛೖΕͳ͍Α͏ʹ͍ͯ͠·͕ͨ͠ɺೲޙͷ୲ऀ͕ ͍Ζ͍Ζ৮ͬͨΓʜ
هࣄอଘ࣌ʹग़ྗ༰Λ QPTU@DPOUFOUʹॻ͖ࠐΉॲཧΛ Ճ͍ͯ͠·͢ʢͨ͠ʣɻ
ϒϩοΫΤσΟλͷొ
ϒϩοΫΤσΟλʔͷొ
͜Εͬͯࠓ·Ͱ࡞ͬͯͨͷʹ͍ۙʂʂ
͡Ό͋࡞Γม͑ͪΌ͑ྑ͍͡ΌΜʂʂʂ
ʜͱ͍͏͜ͱͰࠓ ϒϩοΫΤσΟλʹ߹Θͤͨ ΧελϚΠζΛ͍ͯ͠·͢
ຊͦͷ࡞ۀͷߟ͑ํʹ͍ͭͯͷ͓Ͱ͢
ࣗ͝ͰϒϩοΫΤσΟλΛΧελϜ͢Δͱ͖ͷ ࢀߟͱͯ͠͝ཡ͍ͩ͘͞
ݟग़͠ཁૉ
͜Ε·Ͱ ɾ ݟग़͠ཁૉͷେ͖ܾ͞ఆ ɾ ը૾ʹ͢Δ͔ͷબ ʢσβΠϯʹґΔʣ
ϒϩοΫΤσΟλʔ ɾ େ͖͞ϨΠΞτͷ બͰରԠ ɾ ը૾ˠΠϯϥΠϯը૾ ͷ༻
ׂίϯςϯπ
͜Ε·Ͱ ɾ ࠨӈʹԿΛஔ͢Δ͔ Λࡉ͔͘બ ɾ ՃͰ͖Δ༰Λݸผ ʹ࠶ઃఆ͢Δඞཁ͕͋ Δ
ϒϩοΫΤσΟλʔ ɾ ΧϥϜϒϩοΫΛ͑ ղܾ ɾ ొ༰ͷ࠶ઃఆෆ ཁ ɾ ΧϥϜΧϥϜ͝ͱ ͷԣ෯ʢͰࢦఆʣͷ
ࢦఆՄೳ
ͱɺ͜͜·Ͱ ඪ४Ͱ༻ҙ͞Ε͍ͯΔͷΛ༻͍ͯ͠·͢
͍Ζ͍Ζͱ४උ͞Ε͍ͯΔͷͰ ͜Ε͚ͩͰेศརͰ͢
ͨͩ͠ʜ ग़ྗʹ͍ͭͯௐΛ͢Δඞཁ͕͋Γ·͢
ඪ४ͷग़ྗ <h2>Heading</h2> )5.-
͜͏͍ͨ͠ <div class="grid-x"> <div class="cell"> <h2>Heading</h2> </div> </div> )5.-
ϒϩοΫϑΟϧλͷ CMPDLTHFU4BWF&MFNFOUΛ༻ͯ͠ɺ อଘܗࣜΛॻ͖͑Δ͜ͱ͕Ͱ͖·͢ɻ
+4ͷಡΈࠐΈ function smzberg_boilerplate_block() { wp_register_script( 'smzberg-custom-block', plugins_url( 'js/smzberg.js', __FILE__ ),
[ 'wp-blocks', 'wp-element' ] ); register_block_type( 'smzberg-boilerplate/heading', [ 'editor_script' => 'smzberg-custom-block', ] ); } add_action( 'init', 'smzberg_boilerplate_block' ); 1)1 IUUQTTMTIJ[VNJOXDUEFNP
อଘ༰ΛϑΟϧλΛͬͯॻ͖͑Δ let crel = wp.element.createElement; wp.hooks.addFilter( 'blocks.getSaveElement', 'smzberg-boilerplate/heading', function( element,
blockType, blockAttributes ) { if ( 'core/heading' === blockType.name ) { // 見出し要素の保存形式を変更する return crel( 'div', { className: 'grid-x' }, crel( 'div', { className: 'cell' }, element ) ); } return element; } ); +4 IUUQTTMTIJ[VNJOXDUEFNP
͢ͰʹొࡁΈͷ༰ʹ͍ͭͯ )5.-ͷܗ͕ࣜҟͳΔͨΊฤू ը໘ʹͯΤϥʔϝοηʔδ͕ද ࣔ͞ΕΔɻ ղܾ͢Δ·ͰͦΕ·Ͱͷอଘ ܗࣜͷ··දࣔ͞ΕΔɻ
IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPS EFWFMPQFSTCMPDLBQJCMPDLSFHJTUSBUJPO ৄ͘͠ #MPDL&EJUPS)BOECPPLͷ#MPDL'JMUFSTΛ ͝ཡ͍ͩ͘͞
ඪ४Ͱ༻ҙ͞Ε͍ͯΔ͚Ͳɺ ઃఆ߲͕Γͳ͍ͱ͖ʁ
#MPDL'JMUFSTͰରԠͰ͖·͢ɻ ɾCMPDLTSFHJTUFS#MPDL5ZQF ɾFEJUPS#MPDL&EJU ɾCMPDLTHFU4BWF$POUFOUFYUSB1SPQT
શ͘৽͍͠ϒϩοΫΛ࡞Γ͍ͨ
͓͍߹Θͤઌใ ͜Μͳͷ
͜Ε·Ͱ ɾ ܾ·ͬͨ༰Λॱ൪ʹ ొ͍ͯ͘͠ ɾ ొ࣌ͷݟ͑ํͱαΠ τ্Ͱͷݟ͑ํҟͳ Δ
ϒϩοΫΤσΟλʔ ɾ ෳݸͷೖྗཝ͕ଘࡏ͢Δͷ࡞Ͱ͖Δ ɾ ߘը໘Ͱͷݟͨ$44ΛؤுΕ΄΅ಉ༷ʹ࡞Մೳ
ΧελϜϒϩοΫͷՃํ๏ʁ
SFHJTUFS#MPDL5ZQFΛ༻͠·͢
+4ͷಡΈࠐΈ function smzberg_boilerplate_block() { wp_register_script( 'smzberg-custom-block', plugins_url( 'js/smzberg.js', __FILE__ ),
[ 'wp-blocks', 'wp-element', 'wp-edit' ] ); register_block_type( 'smzberg-boilerplate/heading', [ 'editor_script' => 'smzberg-custom-block', ] ); } add_action( 'init', 'smzberg_boilerplate_block' ); 1)1 IUUQTTMTIJ[VNJOXDUEFNP
ϒϩοΫͷ࡞ ͱͯೖΓ͖Ε ͳ͍ͷͰσϞʂ IUUQTTMTIJ[VNJOXDUEFNP
)BOECPPLʹ ΧελϜϒϩοΫͷՃͷํ๏ νϡʔτϦΞϧͰࡌͬͯ·͢ʂ
#MPDL&EJUPS)BOECPPL ಡΜͰΈ·͠ΐ͏
ӳޠා͘ͳ͍Α (PPHMF༁͕༁ͯ͘͠Ε·͢ɻ ΄΅ҧײͳ͘ಡΊΔΑ͏ʹͳΔͷͰɺར༻͠·͠ΐ͏ɻ
͍Ζ͍Ζࢼߦࡨޡ͠ͳ͕Β͍ͬͯ·͢
ௐ࢝ΊΔͱͪΐͬͱͦ͠͏ʜ ͰҊͣΔΑΓ࢈Ή͕қ͠
࡞Γ͍ͨͷΛਫ਼ࠪͯ͠ཧ͢Δ͜ͱ ͦͯ͠ɺઃܭΛ͔ͬ͠Γ͢Δ͜ͱ
Ͱཱͪࢭ·Γ͗ͣ͢ʹ खಈ͔ͯ͠ΈΔ͜ͱ
खΛಈ͔͢ͷָ͍ͬͯ͠Ͱ͢ΑͶʂ
ࢲઃܭ͕Ұ൪ۤखͰ͢ ͔ͩΒͦ͜ઃܭͰɺཱͪࢭ·Γ͗ͯ͢͠·͏͘Β͍ͳΒɺҰͭσϞ Λ࡞ͬͯ͠·͏ͷख͔ͳͱࢥ͍ͬͯ·͢ɻ ͦ͜Ͱؾͮ͘͜ͱ৭ʑ͋Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
None