開発環境GutenbergWordPress自作テーマをGutenbergに対応させるGutenbergの色設定を好きな色に変更するためのスニペット2018-12-26こんにちは、みみです。よーし冬休みの前半に、重い腰をあげて、このサイトをぼちぼちGutenbergに対応させながら記事を書いていこうかな、という思いつきで始まった独り言。考えても3記事で終わりそうに無い気がしてきたので、タグを付けてシリーズ化?しようかなと思います。今年中に終わらせたかったのだけど、そうも行かないっぽい。Pの記事を有り難く拝読していた時は、ほええそうなんだなあと呑気に捉えていたこの部分。個人的にはCSSとPHPの両方に色名を書くのが大変馬鹿馬鹿しいと思うので、PHPでSCSSをパースして登録するようなハックが登場することを待ちたい。P速攻で膝を連打する羽目になるとは。その2でサラッと書いてしまったのですが、Gutenbergの色設定の色を設定するのはfunction.phpに書くだけで良いのだけれど、それをテーマ側に反映するのには其のためのCSSが必要なのです。当たり前といえば当たり前だけど。・・・取り敢えず粛々とSCSSを書きましょう。フェーズ2とか3とか進む内に、ええ感じになるんじゃないですかね(目を逸らしつつ)。誰だってconfigはなるべく一箇所で済ませたいところ。PHPでパースまではいかないけど、取り敢えずSCSS側だけはさくっと変更できるように書いてみました。このくらいのスニペットならもう誰か書いている気がする(というかGutenbergの中にある気がする)ということに書いてしまってから毎回気付くよね...。ちなみに、文字色をつけると.has-text-colorというクラス名が付くのでtextはslug名に使っちゃダメというワナがあります。ハマったんですけどね。命名規則とは何であるかについて小一時間。いう訳でなんちゃってテストを書いておきます。目出度い色合わせにしてみました。おおできてる出来てる。問題はボタンアウトラインは角ボタンと段落の差異が要るなあ3パターン×色数×...ボーダーも調整が必要モバイル対応しなきゃこれは段落です。同じ色だとアフォーダンスに問題が。太字じゃカバーしきれないんー、改良の余地ありまくりですね。コレ書いてて気が付きましたが、相変わらずカラムの編集めっちゃ分かりづらいですね...。あとこれテーマ変えたら当然、色情報も消えるんだけど、それを考えるとちゃんと意味付けされたボタン設計した方がいいような、それも自己満足でしかないような。段落はともかく、やっぱり、ボタンの場合はいちいち色設定出来るより先ずはプライマリーとセカンダリーとボタン大小の4パターンで、状態毎の細かいスタイル設定もしてあげてあった方が使いやすいような気がするのだけど、カスタムブロックの出番かな...。この記事を書いた人mimi主に書いている人。