ホーム > 雑記 > Block Themeにしてみましたので、とりあえず第一印象の共有など。

Block Themeにしてみましたので、とりあえず第一印象の共有など。

もともと、それほど凝ったデザインでもなかったので、今回WordPress6.2において、ベータの表記が取れることとなった、テーマエディター部分を使う目的で、オリジナルのブロックテーマにしました。

主なリソース

作り方の参考には、以下を参考にしました。

  • 作って学ぶ WordPress ブロックテーマ (Compass Web Development)

また作る際には、大本としてCreate Block Theme を利用しています。

具体的な作り方

作り方としては、プラグインを利用して、雛形となるテーマを作成し、そこからWordPressの管理画面で設定を追加し、一区切りごとに、プラグインを利用してテーマを上書きするという流れになります。

主には、WordPressの管理画面でテーマに変更を加えていくだけでどんどんテーマが作れるわけで、とても驚きが大きいものでした。

条件分岐などについては、都度テンプレートを分けるべきなのか、それとも条件分岐が利用できるブロックが今後デフォルトにも追加されるのか。そういったことが気になるところでありますが。とりあえずここまではできまして、一旦満足です。

この制作手法の主となる Create Block Theme プラグインについては WordPress.tvにビデオがあるのでまだ知らない人はぜひ見てみてください。

特にイケていると思った機能

useRootPaddingAwareAlignments というtheme.jsonに追記できる機能がとてもイケていました。

詳しい説明はこちらのHamanoさんの記事の該当箇所を読むのがわかりやすいと思います。

https://qiita.com/AkiHamano/items/4c1576131a71fc41ef41#settingsuserootpaddingawarealignments 

こちらは、サイト全体で画面幅に対して余白をもたせたいが。ヘッダーやフッター、コンテンツの途中などに、全幅で背景や画像を入れたい場合に、そのときは左右に余白をもたせたくない。しかし、その背景内では、余白を他と同じ様にもたせたい。

みたいなちょっとなにいってるんだ?となるかもですが、おそらく一度でもブロックエディタでサイトを作ったことがある人ならピンとくるあれが解決できる設定です。

こういうのが徐々に整えられていくのは大変助かりますね。(これまでテーマを提供されていた方が、独自にこういう問題に対応されていた場合に、その互換性を保ちつつ。新しい機能に対応しなければならないことが大変だ。ということも容易に想像がつきます。ありがとうございます。)

一応 このテーマのリポジトリのURLをはっつけておきます。とはいえほんとほとんど何もしてないので、ファイルのすくなさと、コレまでのテーマ(クラシックテーマ)との違いに、初めての人はびっくりしてもらうだけもらって、それだけで十分かと思います。

https://github.com/megane9988/block-theme-megane

ブロックエディターの今後について

WordPressではブロックエディターの次のフェーズとして共同編集が予定されています。コレまでに実装されたテーマ編集機能と組み合わさると、今後は画面を見ながら一緒にサイト作りをするといった、新しい体験ができるかもしれません。

わたしはそのことについて、とても楽しみにしています。ではまたいつかおあいしましょう。

おしらせ

  • クラシックエディターからブロックエディターに移行するノウハウ
  • ウェブクリエイターズニュース コラボ企画 2022年後半〜2023年 Web関連トピックスまとめ
    • YouTubeで雑談生配信します。どこからでも、ご参加いただけます。コメントもお待ちしてます。お気軽に情報共有しましょう。