emulsion today

WordPress 6.4 に更新されて、今　6.4向けに更新したスタイルなどが、「ほんとにその設定は、正解だったの？テスト」を行っています。

/**
         * WordPress 6.4
         fallback full site editor global style
*/
.is-dark-theme,
.is-fse-dark{

    --wp--custom--color--palette-base: #1b262c;
    --wp--custom--color--pallette-contrast: #ffffff;
    --wp--custom--color--pallette-primary: #aaaaaa;
    // link color
    --wp--custom--color--pallette-secondary: #728603;
    // link hover color
    --wp--custom--color--pallette-tertiary: #8ea729;
    --wp--custom--color--pallette-complementary: #2C211B;
...
}

グローバルスタイルの背景色が黒系背景になった場合（スタイルバリエーションを変更した時のように、theme.jsonによる黒背景用の色設定を追加することができない為）body要素内の背景色検知クラス（emulsion独自）を使って黒系の背景の場合に、自動的に、CSS変数を変更するという目的で追加した設定でしたが、

色設定用のパレットが、6.4で進化したのを見落として、ちょっとした問題が発生していました。

6.4でパレットの進化とは、以下のように特定の色を選択すると、カスタムパレットの色も同期するようになった事です。

このため、テーマのアイコンの色は、CSSで指定したとおりに変更になるのですが、そのどれかを選択すると、カスタムパレットに表示された色とは異なる、デフォルトの色が表示されてしまう(アイコンの色は、CSSの設定に依存するが、アイコンをクリックした時にカスタムパレットにセットされる色は、theme.jsonのデフォルト値）という問題でした。

CSSではなく、theme.jsonのフィルターを利用しようかとか、無い知恵を絞ってみましたが、パレットのCSSの変更は思いとどまることにして、もっとマイナーなボーダーやコードの配色、ボタンの配色等テーマ用のものにとどめることにしました。

.is-dark-theme,
.is-fse-dark-global{
    --wp--custom--border--common-color: #888;
    --wp--custom--border--common: var(--wp--custom--border--common-width) var(--wp--custom--border--common-style) var(--wp--custom--border--common-color);
    --wp--custom--color--code-tag-bg: #364549;
    --wp--custom--color--code-tag-text: #1bff4a;
    --wp--custom--color--banner-bg: rgba(255,255,255,.1);
    --wp--custom--color--banner-text: #ffffff;
    --wp--custom--color--stripe: rgba(255,255,255,.1);
    --wp--custom--color--toc-bg: #364549;
    --wp--custom--color--button-bg: #000000;
    --wp--custom--color--button-text: #cccccc;
    --wp--custom--color--unknown-bg: #f8f8ff;
    --wp--custom--color--dark-mode-bg: #1b262c;
    --wp--custom--marker--color:#90ee90;
...
}

.is-fse-dark から、.is-fse-dark-global にクラスも変更しました。

emulsion テーマの場合、どんなスタイルバリエーションが使用されているかをbody要素クラス、fse-scheme-(style variation name)がありますが、fse-scheme-defaultクラスが適用されていて、色変更があった場合に、is-fse-dark-global が追加されます。

ただ、テーマの作り手からの要望としては、以下の通りです。

黒系の背景にする場合は、黒系のスタイルバリエーションを選択してから背景を変更、白系の背景色を設定する場合は、白系のスタイルバリエーションをセットしてから、背景色を調整するようにしてください。
　

グローバルスタイルの変更についてのTIPS

emulsion 2.9.3では、このようなことで、パレットフォールバック用のスタイルを削除したいと思います。

カスタムHTMLブロックについて、

以前、block vs HTML coding という記事を書きました。
ブロックテーマを普通に使用するような時代になっちゃったわけですが、人それぞれ、やりたいことはいろいろあって、「ここだけちょっとスタイル足して」とか、そういった用途でカスタムHTMLブロック使いたいという需要は結構あるように思いますが、過去の経験？で、自動的に段落が追加されたり、WordPress特有の整形機能で、使い道が少ないと思っている人も結構いるのではないかと思います。

また、ブロックテーマの選択肢も多くなってきていますが、「ブロックのスタイルは、コアでサポートされるので楽ちんですが、カスタムHTMLに記述されるHTMLに関しては、サポートされないのでそれらは、スタイルを自分で合わせないといけない。」といった事で、使い勝手が悪いというところもあるかもしれません。

いま、どんな感じ?という事で、カスタムHTMLブロックの見直しや、使い方の工夫について、考えています。

例えば、テーブルコンテンツブロック（gutenberg)ってありますよね。TOCを表示してくれる便利なブロックですが、H1~H4までは、TOCに表示したいけど、h5,h6は省きたい。という処理をしたいときに

その記事のh5,h6は、カスタムHTMLブロックで要素を書くとか、「望む機能が完全に整備されていない場合の便法」として使ったり、

100回記事書いて、あるかないか程度の頻度で追加するスタイル。なんて時にも役に立つかもしれない。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

カスタムHTMLブロック内では、ブロックタグが使えないといったところを除き、特にWordPressの整形機能が働くこともなく、以前より便利に使えそうでした。

<div style="background:#eee;">test</div>
<style>body{color:red;}</style>
<script>alert('hello');</script>