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
390
ブロックエディターカスタマイズことはじめ #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
0
150
Cloudflare Meetup Nagano Vol.3
torounit
1
67
僕が考える 「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.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
430
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
560
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
870
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.3k
Other Decks in Programming
See All in Programming
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
120
VitestのIn-Source Testingが便利
taro28
6
1.7k
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
160
List とは何か? / PHPerKaigi 2025
meihei3
0
870
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
810
The Implementations of Advanced LR Parser Algorithm
junk0612
1
300
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
Being an ethical software engineer
xgouchet
PRO
0
210
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
330
RuboCop: Modularity and AST Insights
koic
2
540
SQL Server ベクトル検索
odashinsuke
0
180
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
522
40k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
We Have a Design System, Now What?
morganepeng
52
7.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Agile that works and the tools we love
rasmusluckow
328
21k
Rails Girls Zürich Keynote
gr2m
94
13k
Visualization
eitanlees
146
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Unsuck your backbone
ammeep
670
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
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