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)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
160
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
230
Cloudflare Meetup Nagano Vol.3
torounit
1
110
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
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
470
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
580
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Other Decks in Programming
See All in Programming
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
450
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
iOSDC.pdf
chronos2500
2
650
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
220
CSC305 Lecture 04
javiergs
PRO
0
230
Current States of Java Web Frameworks at JCConf 2025
kishida
0
580
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
dynamic!
moro
9
5.6k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Documentation Writing (for coders)
carmenintech
75
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Pragmatic Product Professional
lauravandoore
36
6.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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