Photosynthesic blog

Gutenbergの色設定を好きな色に変更するためのスニペット

2018-12-26

こんにちは、みみです。

よーし冬休みの前半に、重い腰をあげて、このサイトをぼちぼちGutenbergに対応させながら記事を書いていこうかな、という思いつきで始まった独り言。なのですが、どう考えても3記事で終わりそうに無い気がしてきたので、タグを付けてシリーズ化?しようかなと思います。今年中に終わらせたかったのだけど、そうも行かないっぽい。

スポンサーリンク

その1を書いた後に気がついたCapital Pの記事を有り難く拝読していた時は、ほええそうなんだなあと呑気に捉えていたこの部分。

また、個人的にはCSSとPHPの両方に色名を書くのが大変馬鹿馬鹿しいと思うので、PHPでSCSSをパースして登録するようなハックが登場することを待ちたい。

Before Gutenberg – テーマをGutenbergに対応させる – Capital P

速攻で膝を連打する羽目になるとは。

そう、自分で作ったテーマをGutenbergへ対応させていこう その2でサラッと書いてしまったのですが、Gutenbergの色設定の色を設定するのはfunction.phpに書くだけで良いのだけれど、それをテーマ側に反映するのには其のためのCSSが必要なのです。当たり前といえば当たり前だけど。

・・・取り敢えず粛々とSCSSを書きましょう。たぶん、フェーズ2とか3とか進む内に、ええ感じになるんじゃないですかね(目を逸らしつつ)。

でも誰だってconfigはなるべく一箇所で済ませたいところ。PHPでパースまではいかないけど、取り敢えずSCSS側だけはさくっと変更できるように書いてみました。まあこのくらいのスニペットならもう誰か書いている気がする(というかGutenbergの中にある気がする)ということに書いてしまってから毎回気付くよね…。

ちなみに、文字色をつけると.has-text-colorというクラス名が付くのでtextはslug名に使っちゃダメというワナがあります。まあまんまとハマったんですけどね。命名規則とは何であるかについて小一時間。

という訳でなんちゃってテストを書いておきます。

目出度い色合わせにしてみました。

おおできてる出来てる。

これは段落です。

んー、改良の余地ありまくりですね。

コレ書いてて気が付きましたが、相変わらずカラムの編集めっちゃ分かりづらいですね…。あとこれテーマ変えたら当然、色情報も消えるんだけど、それを考えるとちゃんと意味付けされたボタン設計した方がいいような、それも自己満足でしかないような。

でもなあ、段落はともかく、やっぱり、ボタンの場合はいちいち色設定出来るより先ずはプライマリーとセカンダリーとボタン大小の4パターンで、状態毎の細かいスタイル設定もしてあげてあった方が使いやすいような気がするのだけど、カスタムブロックの出番かな…。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter