私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜

Kansai WordPress Meetup 202312 で登壇した内容です

Transcript

1. 私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜 WORDP RE SS M EETUP OS A K A
2. 今日は私の経験談＋α なかんじです 自作ブロックの作り方だとか Reactでどうこうやるだとかそ んな話はしません！ ブロックエディターはいいぞ！ という布教です。 前提 https://nlab.itmedia.co.jp/nl/articles/2006/13/news009.html
3. 初めてのひと ブロックエディターってなんぞや？という ひとたち 難しそう…… なんとなく難しそうで遠巻きにしていたひ とたち こんなひとたちがターゲット
4. 案外ブロックエディターは 我々にやさしいですよ …ということを知ってもらいたい！ カスタム（自作）ブロックだけが全てじゃないよ 今日のゴール
5. 岡本 千秋 X@chiilogweb GitHub@chiilog 株式会社HAMWORKS 　フロントエンドデベロッパー 作ったプラグイン 　Simple Definition List Blocks プロフィール
6. 01 ブロックエディターは 触ってみましたか？
7. ブロックエディターになって5年 5年も経てばすっかりWordPressの入力＝ブロックが浸透してきたの ではないかな〜と思っていたんですが、そんなこともないのかも？ なんとなく難しそうで実はそっとクラシックエディターにしてます… って人もいたりするのかな？
8. ブロックエディター ＝“絶対”自作ブロックが必要 ブロックといえばカスタム（自作）ブロック！ なくらい話題が多い（※私調べ） こんなイメージないですか？
9. Reactがわからないと ブロックエディターは使えない 確かに、「自作ブロックを作りたければ」避けては通れないけれど… こんなイメージないですか？
10. それはハードルを上げすぎ！ エディターを触る前から前知識でそんなのばっかり入れてたらそりゃ あ怖くなるし自分には無理！ってなります。触る気も失せます。 私もその手のクチだったので、旧エディター（WYSIWYG）からどう してブロックエディター推しになったのかを振り返ってみます。
11. 02 ブロックエディター リリース当初の記憶
12. 私の当時の スキルセット
13. JS=jQuery まじでJavaScriptは苦手でした （いまも決して得意ではない） カスタムフィールド もう死語かもしれませんが「カスタムフィ ールド製造業者」でした がっつりCSS どこそこのクラスの中のなんとかタグ！み たいな拡張性のない書き方 コピペコード コードはコピペしてうごかすもの ※よく精査しましょうね………
14. その状況から180度変わる制作方法 まだブロックエディターが本番にリリースされる前から案件で採用し て触り始めたので、知見もないし手探りの状態でスタート。 UI自体もすっかり変わってしまっておびえる。
15. Reactはひとにお任せ！ カスタムブロックは他の人にお願いして、私はそのカスタムブロック のベースになるHTML・CSSをつくるなどしました。 その当時のテーマの作り方はすごーく前にスライドを作ってたので、 気になる方はそちらをどうぞ！本題からそれるので割愛です。 https://speakerdeck.com/chiilog/kofalse-nian-deshen-nituita-matomo-na- wordpresstemafalsezuo-rifang
16. そんな自分でもできたこと CSSだけでなんとかできるところに関しては、ブロックをつくるまで もありませんでした。 register_block_style を使ってパターン的なものをガンガン登録し ていきました。 ※当初は今ほど自由度も高くなく、今で言う「テンプレートパター ン」という概念もなかった
17. register_block_style とは 一部のデフォルトブロックに も用意されてる追加デザイン みたいなものを自作できる関 数。 これはデフォルトブロックとふれあう次の段 階の話かなとおもっています 覚えて帰ろう
18. そのためにどんなことをやったか ブロックは一部を除き、基本的に何かしらのクラス名を持ち、CSSが 適用されています。 つまり、 ・どういうクラス名がつけられていて ・どういうCSSが当たっているのか をわかっていないと、カスタマイズもなにもありません。
19. 地道にブロックと向き合う エディター上でブロックを配置して、プレビューで見る。 デザイン通りに実装するために、CSSを上書きする。 ブロックエディターになるまではだいたいカスタムフィールドで固定 の入力欄を作っていたので、エディター画面がほぼサイトと同じ見た 目になるのは新鮮で、「わぁーすごーい！たのしー！」ってなった覚 えがあります（楽しいばかりじゃなかったけど）
20. 03 今のブロックエディターは どうなっているの？
21. さっきまでのはリリース直後の話 管理画面からちょっとしたスタイル変更なんてなかったし、カラムの CSSは思い出したくもないくらいしんどいCSS書かれてたし、もしか したらその当時触って「イヤーッ！」って離脱した人もいるかも 今聞いてるみなさんも「ウワ…なんか大変そうじゃん…」「難しそう じゃん…」って思ってるかも……
22. 今からは現在の話 いま、WordPressは6.4.2になり、なにやらテーマ自体が全部ブロッ クに代わろうとしています。PHPをたくさんゴリゴリ書いてテーマを つくる時代が終焉に向かっている（かもしれない）のです。 そんな状況で、いちいちCSSを細々書かないといけないなんてそりゃ あしんどい。フォントサイズなんて管理画面から変えたい！あわよく ば余白だって！
23. その願い、 叶いました WordPressの管理画面を 一緒に見てみましょう やったぜ
24. 結構カスタマイズできません？ フォントサイズや余白を管理画面から触れるだけで随分リリース当初 の話のときとイメージが変わりませんか？ ……調整できても使い回せないと大変？それはそう。 結局管理画面から触れても、毎回同じ設定をするのはすごく大変。
25. なんと、 それもできます WordPressの管理画面を 一緒に見てみましょう やったぜ
26. 04 まとめ
27. イメージは変わりましたか？ デフォルトブロック同士を組み合わせてデザインを実現する。 複数箇所で使うのなら、パターンに入れて使い回す。 それが管理画面でぽちぽちしたらできる……なんと素敵でしょう。 どうでしょうか？ハードルに感じますか？ でも、待っててもエディターはもとには戻りません。 慣れるなら今じゃないかなと私は思います。
28. どうしてこの話をしたの？ 推しに来たのは大前提です。が、先程すこし触れた通り、いよいよテ ーマさえもブロックでつくる時代がやってきました。 そんなのまだまだ先でしょ？と思いきや、theme.jsonを用意すれば、 クラシックテーマ（いわゆるPHPゴリゴリのテーマ）でもブロックテ ーマの機能が使えるハイブリッドなテーマが作れたりもするので、こ れは使わないともったいない…！
29. 慣れるなら、今 ブロックテーマもカスタムブロックも、基礎（＝デフォルトブロッ ク）を理解してないといつまでも難しいままです。 そして、その基礎たるデフォルトブロックも随分と扱いやすくなって きたように思います。そして、おそらくこの先もより良くなっていく でしょう。
30. 05 やってみよう
31. デフォルトのブロックを とにかく触ってみる デフォルトテーマ（※重要）を有効化して、 どんなブロックがあるんだろうな〜って触ってみる ステップ1
32. ブロックのスタイルを 触ってみる ブロックによってデフォルトで触れるスタイルがちがう そのへんをなーんとなく「へえ〜」って思う ステップ2
33. ブロックを組み合わせて どんなことができるか実験 実現できるスタイルって実は結構あるかも！？ ここは自分のひらめきの世界。引き出しをつくろう ステップ3
34. ステップ3で作った組み合わせを パターンにしてみる 何回も使う組み合わせはパターンにしておくと◎ どういう基準でパターン化するとかふわっと考えてみる ステップ4
35. 06 おすすめイベント
36. 今こそ知りたい ブロックエディターの 使い方入門 2023/12/13 (水) 21:00〜 オンラインイベント イベント https://www.meetup.com/ja-JP/learn- wordpress-online- workshops/events/296966740/
37. WordPressの新テーマ TT4を触ってみる&今 年のWordPressを振り 返ろう #89 2023/12/16 (土) 20:00〜 オンラインイベント イベント https://wpzoom.connpass.com/event/303727/
38. 今からWordPressをはじめます！テーマを作ってみたいです！という人 は、Twenty Twenty-Fourのテーマを有効化して、ブロックの基礎やブロ ックテーマとはなんぞや？を、手を動かして理解してみるのがいいと思い ます。 最近ブロックテーマを作り始めましたが、本当〜〜〜〜〜〜〜〜にいかに デフォルトブロックの振る舞いを理解しているかが大事だな！って思いま した。 まだまだブロックテーマは知見もすくない未知の世界です。 これを機にブロックと慣れ親しんで、一緒に頑張りませんか？
39. THANK YOU! ご清聴ありがとうございました!