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

by Chiaki Okamoto

Slide 1

Slide 1 text

私の推しはブロックエディター〜デフォルトブロックに触れ合う〜 WORDP RE SS M EETUP OS A K A

Slide 2

Slide 2 text

今日は私の経験談＋α なかんじです自作ブロックの作り方だとか Reactでどうこうやるだとかそんな話はしません！ブロックエディターはいいぞ！という布教です。前提 https://nlab.itmedia.co.jp/nl/articles/2006/13/news009.html

Slide 3

Slide 3 text

初めてのひとブロックエディターってなんぞや？というひとたち難しそう…… なんとなく難しそうで遠巻きにしていたひとたちこんなひとたちがターゲット

Slide 4

Slide 4 text

案外ブロックエディターは我々にやさしいですよ …ということを知ってもらいたい！カスタム（自作）ブロックだけが全てじゃないよ今日のゴール

Slide 5

Slide 5 text

岡本千秋 X@chiilogweb GitHub@chiilog 株式会社HAMWORKS 　フロントエンドデベロッパー作ったプラグイン　Simple Definition List Blocks プロフィール

Slide 6

Slide 6 text

01 ブロックエディターは触ってみましたか？

Slide 7

Slide 7 text

ブロックエディターになって5年 5年も経てばすっかりWordPressの入力＝ブロックが浸透してきたのではないかな〜と思っていたんですが、そんなこともないのかも？なんとなく難しそうで実はそっとクラシックエディターにしてます… って人もいたりするのかな？

Slide 8

Slide 8 text

ブロックエディター＝“絶対”自作ブロックが必要ブロックといえばカスタム（自作）ブロック！なくらい話題が多い（※私調べ）こんなイメージないですか？

Slide 9

Slide 9 text

Reactがわからないとブロックエディターは使えない確かに、「自作ブロックを作りたければ」避けては通れないけれど… こんなイメージないですか？

Slide 10

Slide 10 text

それはハードルを上げすぎ！エディターを触る前から前知識でそんなのばっかり入れてたらそりゃあ怖くなるし自分には無理！ってなります。触る気も失せます。私もその手のクチだったので、旧エディター（WYSIWYG）からどうしてブロックエディター推しになったのかを振り返ってみます。

Slide 11

Slide 11 text

02 ブロックエディターリリース当初の記憶

Slide 12

Slide 12 text

私の当時のスキルセット

Slide 13

Slide 13 text

JS=jQuery まじでJavaScriptは苦手でした（いまも決して得意ではない）カスタムフィールドもう死語かもしれませんが「カスタムフィールド製造業者」でしたがっつりCSS どこそこのクラスの中のなんとかタグ！みたいな拡張性のない書き方コピペコードコードはコピペしてうごかすもの ※よく精査しましょうね………

Slide 14

Slide 14 text

その状況から180度変わる制作方法まだブロックエディターが本番にリリースされる前から案件で採用して触り始めたので、知見もないし手探りの状態でスタート。 UI自体もすっかり変わってしまっておびえる。

Slide 15

Slide 15 text

Reactはひとにお任せ！カスタムブロックは他の人にお願いして、私はそのカスタムブロックのベースになるHTML・CSSをつくるなどしました。その当時のテーマの作り方はすごーく前にスライドを作ってたので、気になる方はそちらをどうぞ！本題からそれるので割愛です。 https://speakerdeck.com/chiilog/kofalse-nian-deshen-nituita-matomo-na- wordpresstemafalsezuo-rifang

Slide 16

Slide 16 text

そんな自分でもできたこと CSSだけでなんとかできるところに関しては、ブロックをつくるまでもありませんでした。 register_block_style を使ってパターン的なものをガンガン登録していきました。 ※当初は今ほど自由度も高くなく、今で言う「テンプレートパターン」という概念もなかった

Slide 17

Slide 17 text

register_block_style とは一部のデフォルトブロックにも用意されてる追加デザインみたいなものを自作できる関数。これはデフォルトブロックとふれあう次の段階の話かなとおもっています覚えて帰ろう

Slide 18

Slide 18 text

そのためにどんなことをやったかブロックは一部を除き、基本的に何かしらのクラス名を持ち、CSSが適用されています。つまり、・どういうクラス名がつけられていて・どういうCSSが当たっているのかをわかっていないと、カスタマイズもなにもありません。

Slide 19

Slide 19 text

地道にブロックと向き合うエディター上でブロックを配置して、プレビューで見る。デザイン通りに実装するために、CSSを上書きする。ブロックエディターになるまではだいたいカスタムフィールドで固定の入力欄を作っていたので、エディター画面がほぼサイトと同じ見た目になるのは新鮮で、「わぁーすごーい！たのしー！」ってなった覚えがあります（楽しいばかりじゃなかったけど）

Slide 20

Slide 20 text

03 今のブロックエディターはどうなっているの？

Slide 21

Slide 21 text

さっきまでのはリリース直後の話管理画面からちょっとしたスタイル変更なんてなかったし、カラムの CSSは思い出したくもないくらいしんどいCSS書かれてたし、もしかしたらその当時触って「イヤーッ！」って離脱した人もいるかも今聞いてるみなさんも「ウワ…なんか大変そうじゃん…」「難しそうじゃん…」って思ってるかも……

Slide 22

Slide 22 text

今からは現在の話いま、WordPressは6.4.2になり、なにやらテーマ自体が全部ブロックに代わろうとしています。PHPをたくさんゴリゴリ書いてテーマをつくる時代が終焉に向かっている（かもしれない）のです。そんな状況で、いちいちCSSを細々書かないといけないなんてそりゃあしんどい。フォントサイズなんて管理画面から変えたい！あわよくば余白だって！

Slide 23

Slide 23 text

その願い、叶いました WordPressの管理画面を一緒に見てみましょうやったぜ

Slide 24

Slide 24 text

結構カスタマイズできません？フォントサイズや余白を管理画面から触れるだけで随分リリース当初の話のときとイメージが変わりませんか？ ……調整できても使い回せないと大変？それはそう。結局管理画面から触れても、毎回同じ設定をするのはすごく大変。

Slide 25

Slide 25 text

なんと、それもできます WordPressの管理画面を一緒に見てみましょうやったぜ

Slide 26

Slide 26 text

04 まとめ

Slide 27

Slide 27 text

イメージは変わりましたか？デフォルトブロック同士を組み合わせてデザインを実現する。複数箇所で使うのなら、パターンに入れて使い回す。それが管理画面でぽちぽちしたらできる……なんと素敵でしょう。どうでしょうか？ハードルに感じますか？でも、待っててもエディターはもとには戻りません。慣れるなら今じゃないかなと私は思います。

Slide 28

Slide 28 text

どうしてこの話をしたの？推しに来たのは大前提です。が、先程すこし触れた通り、いよいよテーマさえもブロックでつくる時代がやってきました。そんなのまだまだ先でしょ？と思いきや、theme.jsonを用意すれば、クラシックテーマ（いわゆるPHPゴリゴリのテーマ）でもブロックテーマの機能が使えるハイブリッドなテーマが作れたりもするので、これは使わないともったいない…！

Slide 29

Slide 29 text

慣れるなら、今ブロックテーマもカスタムブロックも、基礎（＝デフォルトブロック）を理解してないといつまでも難しいままです。そして、その基礎たるデフォルトブロックも随分と扱いやすくなってきたように思います。そして、おそらくこの先もより良くなっていくでしょう。

Slide 30

Slide 30 text

05 やってみよう

Slide 31

Slide 31 text

デフォルトのブロックをとにかく触ってみるデフォルトテーマ（※重要）を有効化して、どんなブロックがあるんだろうな〜って触ってみるステップ1

Slide 32

Slide 32 text

ブロックのスタイルを触ってみるブロックによってデフォルトで触れるスタイルがちがうそのへんをなーんとなく「へえ〜」って思うステップ2

Slide 33

Slide 33 text

ブロックを組み合わせてどんなことができるか実験実現できるスタイルって実は結構あるかも！？ここは自分のひらめきの世界。引き出しをつくろうステップ3

Slide 34

Slide 34 text

ステップ3で作った組み合わせをパターンにしてみる何回も使う組み合わせはパターンにしておくと◎ どういう基準でパターン化するとかふわっと考えてみるステップ4

Slide 35

Slide 35 text

06 おすすめイベント

Slide 36

Slide 36 text

今こそ知りたいブロックエディターの使い方入門 2023/12/13 (水) 21:00〜オンラインイベントイベント https://www.meetup.com/ja-JP/learn- wordpress-online- workshops/events/296966740/

Slide 37

Slide 37 text

WordPressの新テーマ TT4を触ってみる&今年のWordPressを振り返ろう #89 2023/12/16 (土) 20:00〜オンラインイベントイベント https://wpzoom.connpass.com/event/303727/

Slide 38

Slide 38 text

今からWordPressをはじめます！テーマを作ってみたいです！という人は、Twenty Twenty-Fourのテーマを有効化して、ブロックの基礎やブロックテーマとはなんぞや？を、手を動かして理解してみるのがいいと思います。最近ブロックテーマを作り始めましたが、本当〜〜〜〜〜〜〜〜にいかにデフォルトブロックの振る舞いを理解しているかが大事だな！って思いました。まだまだブロックテーマは知見もすくない未知の世界です。これを機にブロックと慣れ親しんで、一緒に頑張りませんか？

Slide 39

Slide 39 text

THANK YOU! ご清聴ありがとうございました!