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
380
ブロックエディターカスタマイズことはじめ #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)
Cloudflare Meetup Nagano Vol.3
torounit
1
55
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
540
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
3.9k
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
150
Grafana Cloudとソラカメ
devoc
0
170
Ruby on cygwin 2025-02
fd0
0
140
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
550
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
680
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
840
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Thoughts on Productivity
jonyablonski
69
4.5k
Docker and Python
trallard
44
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
How STYLIGHT went responsive
nonsquared
98
5.4k
GitHub's CSS Performance
jonrohan
1030
460k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Agile that works and the tools we love
rasmusluckow
328
21k
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