クラシックテーマをハイブリッドテーマ(ブロックテーマ寄り)に切り替えていくメモ
クラシックテーマで作ったテーマをハイブリッドテーマに置き換えていきます。
保守範囲内での作業なので、かなり鈍足に毎月のんびりやっていきます。
経緯。
もともとは4年前に作ったサイト。
当時はもちろんブロックテーマなんて概念もなく、パターンとかもなかったので、ごりごりカスタムブロック作ってた。
ただの段落+見出しセットだけ〜とか、今だとパターンで十分事足りるものが多いので、今後も見据えてパターンに変えられるものは変えていこうと、(´ °ム° `)さんに「これ置き換えれるものは置き換えていい?」って聞いてOKが出たので、できる範囲で切り替えることに。
切り替えれるならブロックテーマに切り替えたいところではあるものの、ヘッダー・フッターとかは結構作り込みしてて保守範囲内では無理かなと判断。
この辺はそういう機会があればやるということで、メインの作業としてはいらないtheme.jsonの作成とかカスタムブロックをパターンに変えるとか、APIで代用できるものを変えるとか。カスタムフィールドをちょこちょこつかっているのでね。
ハイブリッドテーマ、エディターの項目がないから管理画面でtheme.jsonつくれない………
こういうときこそStudioの出番!!!!!Studioの環境下で適当に空テーマをつくって、theme.jsonだけつくる。
というわけでStudioの環境でCreate Block Themeから空テーマを作成
もともとのテーマで設定してたCSS変数のうち、カラーとかコンテンツ幅とかフォントとか、theme.jsonに移植できそうなものを移植していく。この時点で元のCSSは消さない。そのまま。
むしろtheme.jsonで指定した値は今の時点でCSS側に移植しない。(ゆっくり部分的にやっていくから)
404ページみたいなブロックテンプレートとしてではなく(ヘッダー・フッターはPHPのをそのまま使いたいから)コンテンツ部分をブロックにしたい場合は、ブロックパーツ化すればよさそう
こういう英語と日本語がセットになったタイトルのカスタムブロックを作ってたけど、これはグループの中に見出し+テキストのパターンで置き換えられそう
<div class="wp-block-example-block-decoration-title-title">
<div class="wp-block-example-block-decoration-title-title__sub">Title</div>
<h2 class="wp-block-example-block-decoration-title-title__main">タイトル</h2>
</div>