Slide 1
Slide 1 text
మ͍͏ͪʹଧͯʂʁ
ϒϩοΫΤσ
Ολʔʹઓʂ
2020年1月18日
西村 依泰
Slide 2
Slide 2 text
ࣗݾհ
•Facebook：yoriyasu.nishimura
•Twitter：@yori3_otim2
•GitHub：github.com/yori3
Webデザイナー（自称）
マークアップエンジニア（仕事）
西村 依泰（yori3）
Slide 3
Slide 3 text
ࠓճ͢͜ͱ
•WordPressのブロックエディターを使って
やったこと
•ブロックエディター使ってみた感想
Slide 4
Slide 4 text
ࠓճ͞ͳ͍͜ͱ
•ブロックエディターの使いかた。
•ソースコードの解説
Slide 5
Slide 5 text
8PSE$BNQ͕ऴΘͬͯ
•WordCamp楽しかった。
Slide 6
Slide 6 text
8PSE$BNQ͕ऴΘͬͯ
•WordCamp楽しかった。
•ブロックエディター関連のセッション人気。
Slide 7
Slide 7 text
8PSE$BNQ͕ऴΘͬͯ
•WordCamp楽しかった。
•ブロックエディター関連のセッション人気。
•ブロックエディターあんまり触ってないな。
Slide 8
Slide 8 text
8PSE$BNQ͕ऴΘͬͯ
•WordCamp楽しかった。
•ブロックエディター関連のセッション人気。
•ブロックエディターあんまり触ってないな。
よし、やろう
Slide 9
Slide 9 text
ͬͨ͜ͱ
•自分のサイトをブロックエディター化
•固定ページはhtml直打ち
→固定ページもブロックエディターで作る
•管理画面そのまま
→フロントとエディターのスタイルを合わせる
Slide 10
Slide 10 text
ελΠϧΛઃఆ
•言語ごとのシンタックスハイライトを出したかったの
で、ソースコードブロックのスタイルを設定できるよ
うにした。
•ソースコードのシンタックスハイライト
→prism.jsを使用
•prism.jsのルール（クラス名にlanguage-〇〇を含む）
に従ってクラスがつくように、スタイルを作成
Slide 11
Slide 11 text
ελΠϧΛઃఆ
Slide 12
Slide 12 text
ελΠϧΛઃఆ
•割と簡単に設定できた。
•選択するだけで設定できると楽。
Slide 13
Slide 13 text
ݻఆϖʔδϒϩοΫΤσ
ΟλʔͰ࡞Δ
•基本は既存のブロックを使う。
•カスタムブロックもやってみたかったので、調べ
ながらdl,dt,ddタグを作る。
Slide 14
Slide 14 text
ݻఆϖʔδϒϩοΫΤσ
ΟλʔͰ࡞Δ
•高度な設定でクラス名をつけられるので、割と自
由度は高い。
•カスタムブロックはReact.js使うので、ちょっと
難易度高め。
Slide 15
Slide 15 text
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ
フロント エディター
Slide 16
Slide 16 text
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ
フロント エディター
Slide 17
Slide 17 text
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ
•見た目が揃ってると、編集していてわかりやすい。
•エディターで生成される
htmlが複雑なので
合わせるのが結構つらい
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
ͬͯΈͨײ
•ブロックエディターでも結構思い通りできる。
（要CSS知識）
•よく使うスタイルは、スタイルを選択できるよう
にしておいた方が良さそう。
•フロントとエディターの見た目を一緒にするのは
結構大変（やってると便利）