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
400
ブロックエディターカスタマイズことはじめ #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
180
Cloudflare Meetup Nagano Vol.3
torounit
1
80
僕が考える 「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
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
450
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
880
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.3k
Other Decks in Programming
See All in Programming
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
130
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
0
190
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
700
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
400
CSC307 Lecture 17
javiergs
PRO
0
110
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
660
複数アプリケーションを育てていくための共通化戦略
irof
9
3.5k
Agent Rules as Domain Parser
yodakeisuke
1
440
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
710
Passkeys for Java Developers
ynojima
2
760
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
239
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Become a Pro
speakerdeck
PRO
28
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to train your dragon (web standard)
notwaldorf
92
6.1k
GitHub's CSS Performance
jonrohan
1031
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
How to Ace a Technical Interview
jacobian
276
23k
Gamification - CAS2011
davidbonilla
81
5.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
670
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