unitone v3.0.0 の概要

変更

• テンプレート直下のテンプレートパーツ（template- で始まるテンプレートパーツ）の HTML 構造を変更

不具合の修正

• サイトエディターでグローバルスタイルの設定が反映されない不具合を改善

テンプレート直下のテンプレートパーツ（template- で始まるテンプレートパーツ）の HTML 構造を変更

先日の v2.0.0 のアップデートで HTML 構造の変更をおこなったのですが、よくよく見直しているともっと簡素く組めるなと閃いたので構造を変更しました。

v2.0.0 までは WordPress が出力する .wp-site-blocks なんかに CSS を書いて一番大外の部分のレイアウトをしていたのですが、レイアウトプリミティブなテーマなのにやっぱりこれはちょっと邪道感あるなと思っていました。でもどうしようもないしなーと思ってそうしていたのですが、これ unitone のカバーブロック使ったらシンプルに実装できるのでは！？と閃いてやってみたところ思ったとおりにできました。

Refactoring template HTML structures · inc2734/unitone@a8d18a5

Contribute to inc2734/unitone development by creating an account on GitHub.

ついでに v2.0.0 で追加した左ヘッダーレイアウト、左ヘッダーレイアウト用のブロックをつくって実装していたのですが、これもカバーブロックを使う形にすることで無駄なブロックと CSS を減らせました。左ヘッダーはレイアウトプリミティブだけできれいに実装する方法が思いつかなくて、カバーブロック + ちょっと CSS を追加という形で実装しています。

ブロックテーマは全部がブロックなので構造を変更してしまうとブロックバリデーションエラーが発生してしまってカスタマイズがやり直しになってしまうのでなるべくやりたくないと考えています…がなかなか最初は難しいですね…一応固まった！と思って v1.0.0 をリリースしたのですが、v2.0.0、v3.0.0 と来てしまっているので…。一応今回が一番シンプルな実装でしっくりきているので多分もうしばらくは大丈夫だろうと思うのですが、もっとこうしたほうが良いんじゃない？というところをみつけたときはぜひ GitHub や Slack やフォーラムでご意見くださいませ。

サイトエディターでグローバルスタイルの設定が反映されない不具合を改善

サイトエディターには「グローバルスタイル」というサイト全体の文字サイズや行間、色などを設定できる機能があります。unitone v2.0.0 までは文字サイズ・行間を設定したときにフロントには反映されるけどサイトエディター上では反映されない不具合がありました。

本当は設定を変更したときにリアルタイムに反映されるものなのですが、unitone は設計の都合上どうしてもリアルタイムの反映ができなかったので、設定を変更 → 保存 → ページをリロードすると反映された状態が確認できるようにしました。