エディタの追加CSSについて

tenman

, ,

WordPress 6.2でサイトエディタが正式版になり、新しい「追加CSS」「ブロック追加CSS」が追加され、様々な場所からCSSのカスタマイズを行うことができるようになりました。

複数の場所からCSSの設定ができるようになった事で、どの場所にどういったCSSを記述することがサイトのCSSの管理上便利なのかをユーザー自身が考えていく必要がありそうです。

このようなことから、emulsion テーマでも、「実際動作するの？」といった点を含めて、動作確認を始めました。

emulsion テーマの場合以下のような動作になり、追加したCSSが削除されてしまうようなこともありそうなので、メモに残すことにしました。

テーマでCSS設定が可能な場所と、動作確認の結果

  1. theme.json を元にした　CSS 変数の生成
  2. カスタマイザーの 追加CSS
    • 記述内容は、ユーザーが自由に記述できる
  3. エディタの追加CSS
    • 記述内容は、ユーザーが自由に記述できる
    • スタイル一覧で、デザインを変更した場合にはスタイルは削除されます。
  4. エディタの ブロック追加CSS
    • 記述内容は、ユーザーが自由に記述できる(2個目のルールセット以降)
    • スタイル一覧で、デザインを変更した場合にはスタイルは削除されます。
  5. エディタのテンプレート内のブロックCSS
    • ブロックにクラスまたは、スタイルとしてテンプレートに追加される
    • 例えば、スタイル一覧「Default」でサイトヘッダーの色を、テーマパレットの　secondary color に変更した場合　「Midnight」に変更すると、テーマパレットのsecondary color に変更になります。
    • デフォルトパレット、カラーピッカーを使用して、色を変更した場合は、スタイル一覧「Default」を「Midnight」に変更しても、指定した色が維持されます。
  6. 投稿、固定ページのテンプレート内のブロックCSS
    • ブロックにクラスまたは、スタイルとしてテンプレートに追加される
    • エディタのテンプレート内のブロックCSS と同様の動作になります。
  7. 投稿、固定ページのブロックCSS
    • ブロックにクラスまたは、スタイルとしてテンプレートに追加される
    • エディタのテンプレート内のブロックCSS と同様の動作になります。
  8. emulsion テーマ　投降、固定ページのカスタムフィールドを使ったCSS
    • ユーザーの記述したスタイルに、セレクタを追加したスタイル(編集中の投稿、固定ページ内でのみスタイルが適用される）
    • 例
    • カスタムフィールド名:css
    • カスタムフィールド値：
      • h2{
      • color:yellow;
      • }
    • テーマは、body要素にhas-custom-styleを追加の上、以下のようにフロントエンドのCSSセレクタを追加します
      • .has-custom-style.postid-100118 h2｛
      • color:yellow;
      • }
    • カスタムフィールドのCSSのセレクターに、.has-custom-style　が記述されている場合には、セレクタの加工を行いません。