Kansai WordPress Meetup@Kyoto Lightning talk

ブロックエディターに挑戦！

Transcript

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