Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
560
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
How native lazy objects will change Doctrine and Symfony forever
beberlei
1
390
Symfony AI in Action
el_stoffel
2
370
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
2
670
MS Ignite 2025で発表されたFoundry IQをRecap
satodayo
3
240
GitLab Duo Agent Platformで実現する“AI駆動・継続的サービス開発”と最新情報のアップデート
jeffi7
0
170
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
650
小さな判断で育つ、大きな意思決定力 / 20251204 Takahiro Kinjo
shift_evolve
PRO
1
330
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
9.9k
AI 時代のデータ戦略
na0
8
3.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
48k
その設計、 本当に価値を生んでますか?
shimomura
3
190
Design System Documentation Tooling 2025
takanorip
1
930
Featured
See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
80
Rails Girls Zürich Keynote
gr2m
95
14k
Into the Great Unknown - MozCon
thekraken
40
2.2k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
380
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Unsuck your backbone
ammeep
671
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
We Have a Design System, Now What?
morganepeng
54
7.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
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知識) •よく使うスタイルは、スタイルを選択できるよう にしておいた方が良さそう。 •フロントとエディターの見た目を一緒にするのは 結構大変(やってると便利)