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
Kansai WordPress Meetup@Kyoto Lightning talk
Search
Yoriyasu Nishimura
January 18, 2020
Technology
0
520
Kansai WordPress Meetup@Kyoto Lightning talk
ブロックエディターに挑戦!
Yoriyasu Nishimura
January 18, 2020
Tweet
Share
More Decks by Yoriyasu Nishimura
See All by Yoriyasu Nishimura
失敗談から 運用しやすいサイトの作り方を 考えてみた
yori3
0
2.6k
Other Decks in Technology
See All in Technology
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.1k
Witchcraft for Memory
pocke
1
410
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
280
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
310
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
470
Prox Industries株式会社 会社紹介資料
proxindustries
0
310
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
320
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Music & Morning Musume
bryan
46
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Done Done
chrislema
184
16k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Gamification - CAS2011
davidbonilla
81
5.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Documentation Writing (for coders)
carmenintech
72
4.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Transcript
మ͍͏ͪʹଧͯʂʁ ϒϩοΫΤσ Ολʔʹઓʂ 2020年1月18日 西村 依泰
ࣗݾհ •Facebook:yoriyasu.nishimura •Twitter:@yori3_otim2 •GitHub:github.com/yori3 Webデザイナー(自称) マークアップエンジニア(仕事) 西村 依泰(yori3)
ࠓճ͢͜ͱ •WordPressのブロックエディターを使って やったこと •ブロックエディター使ってみた感想
ࠓճ͞ͳ͍͜ͱ •ブロックエディターの使いかた。 •ソースコードの解説
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。 •ブロックエディターあんまり触ってないな。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。 •ブロックエディターあんまり触ってないな。 よし、やろう
ͬͨ͜ͱ •自分のサイトをブロックエディター化 •固定ページはhtml直打ち →固定ページもブロックエディターで作る •管理画面そのまま →フロントとエディターのスタイルを合わせる
ελΠϧΛઃఆ •言語ごとのシンタックスハイライトを出したかったの で、ソースコードブロックのスタイルを設定できるよ うにした。 •ソースコードのシンタックスハイライト →prism.jsを使用 •prism.jsのルール(クラス名にlanguage-〇〇を含む) に従ってクラスがつくように、スタイルを作成
ελΠϧΛઃఆ
ελΠϧΛઃఆ •割と簡単に設定できた。 •選択するだけで設定できると楽。
ݻఆϖʔδϒϩοΫΤσ ΟλʔͰ࡞Δ •基本は既存のブロックを使う。 •カスタムブロックもやってみたかったので、調べ ながらdl,dt,ddタグを作る。
ݻఆϖʔδϒϩοΫΤσ ΟλʔͰ࡞Δ •高度な設定でクラス名をつけられるので、割と自 由度は高い。 •カスタムブロックはReact.js使うので、ちょっと 難易度高め。
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ フロント エディター
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ フロント エディター
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ •見た目が揃ってると、編集していてわかりやすい。 •エディターで生成される htmlが複雑なので 合わせるのが結構つらい
None
ͬͯΈͨײ •ブロックエディターでも結構思い通りできる。 (要CSS知識) •よく使うスタイルは、スタイルを選択できるよう にしておいた方が良さそう。 •フロントとエディターの見た目を一緒にするのは 結構大変(やってると便利)