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
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Sh...
Search
Toro_Unit (Hiroshi Urabe)
June 17, 2023
Programming
1
420
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
Toro_Unit (Hiroshi Urabe)
June 17, 2023
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
210
Cloudflare Meetup Nagano Vol.3
torounit
1
100
僕が考える 「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.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.3k
Other Decks in Programming
See All in Programming
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
Langfuseと歩む生成AI活用推進
licux
3
300
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
170
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
RailsConf 2023
tenderlove
30
1.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing for Performance
lara
610
69k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Navigating Team Friction
lara
189
15k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Transcript
ϒϩοΫΤσΟλʔΧελϚΠζ͜ͱ͡Ί Toro_Unit @Shinshu WordPress Meetup 1
$ whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Developer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
• Gutenberg ͷ։ൃΛͪΐΖͬͱͬͯ·͢ɻ • Shinshu WP Meetup ͷΦʔΨφΠβʔͯ͠·͢ɻ • ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͨΓͯ͠·͢ɻ
• WordPress ͷΠϕϯτͰͬͨΓ͓ञҿΜͩΓͨ·ʹӡӦखͬͨΓͯ͠·͢ɻ 4
ϒϩοΫΤσΟλʔͷΧελϚΠζ 5
࣮݁ߏ͍͡ΕΔ 6
7
8
9
ओͳΧελϚΠζํ๏ • ϒϩοΫελΠϧ • ϒϩοΫύλʔϯ • ϒϩοΫόϦΤʔγϣϯ • ΦϦδφϧͷϒϩοΫΛ࡞ •
ϒϩοΫΤσΟλʔϓϥάΠϯͷ࡞ 10
ϒϩοΫελΠϧ 11
12
͍͍ͩͨͷϒϩοΫʹ͔͜͜Β class ͤΔɻ • جຊతʹ͋Μ·Γར༻ऀʹΘͤΔؾͷͳ͍ػೳɻ (Advanced) • ͲΜͳΫϥεॻ͍ͯྑ͍ͷ͔ར༻ऀΘ͔Βͳ͍ɻ 13
register_block_style( 'core/heading', array( 'name' => 'with-border', 'label' => 'With Border',
'inline_style' => <<< CSS .is-style-with-border { border-left: 6px blue solid; padding-left: 4px; } CSS, ) ); 14
15
• Ϋϥε͕༩͞ΕΔ͚ͩͳͷͰɺCSSผ్༻ҙ͢Δ͜ͱ Խɻ • wp_enqueue_style ͱ͔ɺadd_editor_style Ͱಥͬࠐ Ήɻ • inline_style
Ͱ CSS ΛՃ͢Δͷ͕ख͚ܰͩͲɺϓϨϏϡʔ ͰελΠϧ͕ར͔ͳ͍όά͕͋Δɻ • https://github.com/WordPress/gutenberg/issues/39944 16
ϒϩοΫύλʔϯ 17
18
19
• ෳͷϒϩοΫͷմΛҰൃͰಥͬࠐΊΔػೳɻ • themes/{your-theme}/patterns/{your-pattern}.php ͕ ͋Εɺࣗಈతʹύλʔϯͱͯ͠ೝࣝ͞ΕΔɻ 20
21
Pattern Manager • WP Engine • ϒϩοΫΤσΟλʔͰύλʔϯΛ࡞ ɺϑΝΠϧͱͯ͠อଘͱ͔Λͬ ͯ͘ΕΔϓϥάΠϯ
22
23
ϒϩοΫͷ࡞ 24
ϒϩοΫΛ࡞͢ΔϝϦοτ ίΞͷϒϩοΫͰग़དྷͳ͍HTMLߏ͕࡞ΕΔ • Group ϒϩοΫͰؤுΕग़དྷΔ͔͠Εͳ͍͚Ͳਏ͍ • ϒϩοΫΤσΟλΛߟྀ͠ͳ͍ߏͷHTML/CSSͷରԠ • ίΞϒϩοΫͷHTMLߏ͕ͨ·ʹมΘͬͨΓ͢ΔͷͰɺͦΕʹ߹Θͤͯର Ԡ͢Δඞཁ͕ͳ͍ɻ
• ෳࡶͳσβΠϯͱ͔ΛͬͯΔͱ่ΕͨΓ͕ͪ͠ɻ • γϯϓϧʹ͢Δํʹͳ͍ͬͯΔͷͰ࠷ۙͦ͜·ͰʹͳΒͳ͍͔ 25
26
27
PHP Ͱಈతʹ੍ޚ͢ΔϒϩοΫ • ϩάΠϯϢʔβʔʹͷΈදࣔ͢Δϝοηʔδ • ࠷৽ͷߘΛදࣔ • AB ςετ •
ϓϥάΠϯΛແޮʹ͢Δͱಈ࡞͠ͳ͘ͳΔ͜ͱʹҙ 28
ϒϩοΫΤσΟλΛߏ͢Δٕज़ • HTML/CSS (SCSS) • JavaScript (TypeScript) / React •
PHP 29
ͱΓ͋͑ͣɺϒϩοΫ࡞ʹඞཁͳͷ • Node.js • ΤσΟλ • WordPress ࣮ߦڥ 30
Node.js • JavaScript ͷ࣮ߦΤϯδϯ • ݱͷWEB։ൃͰίϨ͕ແ͍ͱ ͡·Βͳ͍ɻ 31
ෳͷόʔδϣϯͷ Node.js ΛΓସ͑ΔͨΊʹɺnvm ͱ ͔ Volta ͕ศརɻ ͦΜͳ͜ͱ͍ͭ͢Δͷʁ͚ͬͯͩͲɺաڈʹ࡞ͬͨϠπΛमਖ਼ͨ͠Γ͢Δͱ͖ͱ ͔ɺNode.js ͷ৽͍͠όʔδϣϯʹରԠͤͨ͞Γ͢Δͱ͖ͱ͔ɻ
32
ΤσΟλ • ͱΓ͋͑ͣ VSCode ͬͱ͚ؒҧ ͍ͳ͍ɻ • PHPStorm ͍͍ͧɻ 33
WordPress ͷ࣮ߦڥ 34
35
WordPress Playground for VS Code • VSCode Ͱ WordPress ։ൃΛ͢ΔͨΊͷ֦ுػೳ
• PHP ͱ͔ɹMySQL ͱ͔ Apache ͱ͔ԿͤͣʹɺWordPress ڥ ΛखݩͰҰൃͰ্ཱͪ͛ΒΕΔ • Windows Ͱಈ͘ɻ • ෦తʹ WASM + Node.js (express) • ͨ·ʹյΕͨΓͨ͠ͱ͖ɺ$HOME/.wp-now/wordpress-versions ͷதফͤͳ͓Δɻ 36
wp-env • Docker ্Ͱಈ͘ϩʔΧϧ͚ͷ։ൃڥ • ϒϩοΫΤσΟλͷ։ൃͱ͔ϓϥάΠϯ։ൃͰΑ͘ΘΕͯΔ • ࣗίϨΛࣄͰΑ͘͏ɻ wp-now •
wp-env ͬΆ͍ͭɺWASM Ͱಈ͘ɻVsCode ͷϠπத͜Εɻ 37
local • Docker ϕʔεɻGUI ͍ͭͯΔɻ • ৭ʑศརػೳ͕ೖͬͯΔɻ • Flywheel ͕։ൃ͚ͯͨ͠ͲɺWP
Engine ʹങऩ͞Εͨɻ • ྑ͘ղΜͳ͔ͬͨΒͱΓ͋͑ͣ͜Ε ͏ͷ͕͍͍͔ɻ https://localwp.com/ 38
39
40
41
ϒϩοΫͷͻͳܗͷ࡞ $ npx @wordpress/create-block 42
43
44
ϑΝΠϧ໊ ֓ཁ {ϓϥάΠϯ໊}.php WordPress ϓϥάΠϯϑΝΠϧ block.json ϒϩοΫͷઃఆɺϝλσʔλ index.js ϒϩοΫ༻ͷεΫϦϓτ edit.js
ཧը໘ͰͷϒϩοΫͷUI save.js ࣮ࡍʹอଘ͞Εɺදࣔ͞ΕΔϒϩοΫͷUI style.scss ϒϩοΫͷελΠϧ editor.scss ཧը໘ઐ༻ͷελΠϧ 45
νϡʔτϦΞϧ͋Γ·͢ɻ https://ja.wordpress.org/team/ handbook/block-editor/getting- started/create-block/ 46
ฤूՄೳͳςΩετΛՃ͢Δνϡʔτ ϦΞϧ npx @wordpress/create-block gutenpride \ɹ--template \ @wordpress/create-block-tutorial-template cd gutenpride
npm run start 47
ྫ͑͜Μͳͷ • useInnerBlocksProps ͰࢠϒϩοΫΛ͏αϯϓϧ 48
edit.js import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; export default
function Edit() { return ( <div {...useBlockProps({ className: "my-class" })}> <div {...useInnerBlocksProps({ className: "my-class__children" })} /> </div> ); } 49
save.js import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; export default
function save() { return ( <div {...useBlockProps.save({ className: "my-class" })}> <div {...useInnerBlocksProps.save({ className: "my-class__children" })} /> </div> ); } 50
͏ͪΐͬͱಥͬࠐΜͩνϡʔτϦΞϧ • GutenPride ΑΓ͏গ͠ಥͬࠐΜͩ νϡʔτϦΞϧɻ • ϒϩοΫͷαΠυόʔɾπʔϧόʔͷ ઃఆͱ͔ॻ͍ͯ͋ͬͨΓɻ 51
Gutenberg ͷιʔείʔυ • packages/block-library ҎԼʹίΞͷ ϒϩοΫͷίʔυ͕͋Δɻ • ಥͬࠐΜͩ͜ͱΓ͔ͨͬͨΒɺί ϨΛύΫΔɻ 52
ΧελϜϒϩοΫಓ • https://www.youtube.com/ @akihamano2805/videos • Gutenbergεʔύʔৄ͍͠͞Μ ͕ͬͯͨΧελϜϒϩοΫͷϫʔ Ϋγϣοϓ • ಈը
Vol.3͔Βɻ 53
learn.wordpress.org • WordPress ΦϑΟγϟϧͷνϡʔτ ϦΞϧαΠτ • ͍͍ͩͨӳޠ • ಈը͍ͭͯͨΓ͢Δɻ 54
ͦͷଞ Tip • ΧελϜϑΟʔϧυͱ͔औΓѻ͑Δ • ը૾ͷΞοϓϩʔυͱ͔10ߦ͘Β͍Ͱग़དྷΔ • React ͷࢿ࢈͕͑Δɻ •
React ྗΛ͑ΔͱΊͪΌͪ͘Ό͍Ζ͍Ζग़དྷΔ͚Ͳɺͦ͜ ·Ͱෳࡶͳͷ࡞Βͳ͍͜ͱଟ͍͔ͳ͊ɻ 55
ϒϩοΫ։ൃΛ͖ͯͨ͠ײ • νϡʔτϦΞϧϨϕϧͷࣝͰΓΕΔ͜ͱଟ͍ɻ • ͪΌΜͱ࡞Εͦͷ··ผͷҊ݅Ͱ͑Δɻ • ਤϒϩοΫͱ͔·͞ʹͦΕ • HTML ॻ͘ਓ͕ผʹ͍Δύλʔϯͱ͔ͦ͏͍͏ͷʹରԠͰ͖Δɻ
• ϒϩοΫελΠϧͰͱΓ͋͑ͣΔɺͦΕͰग़དྷͳ͔ͬͨΒɺ ͍ͮΒ͔ͬͨΒɺϒϩοΫ։ൃΛߟ͑Δɻ 56
ίʔυΛॻ͔ͣʹϒϩοΫ࡞ΕΔϓϥάΠϯͱ͔͋Δ͚ͲɺͲ͏ͳΜʁ • Α͘ग़͖ͯͯΔͱࢥ͏͚Ͳɺجຊతʹ PHPͰ੍ޚͯ͠Δͷ ͰɺϓϥάΠϯ͕ແޮͳΔͱɺίϯςϯπ͕ফ͑ͨΓ͢Δɻ • ී௨ʹJSͰॻ͔ΕͨϠπɺHTML͕ͦͷ··อଘ͞ΕͯΔͷ ͰɺϓϥάΠϯ͕ແޮʹͳͬͯɺίϯςϯπফ͑ͳ͍ɻ • ͦͷϓϥάΠϯͷґଘ͕ߴ͘ͳΓ͗ͯ͢ϦχϡʔΞϧͱ͔Ͱ
ʹͳΓ͕ͪɻ • ͦͷϓϥάΠϯͱҰ࿇ੜʹͳΕΔʁʁʁʁ 57
Any Question ? 58
Thanks! Twitter: @Toro_Unit Github: @torounit 59