WordPress が生成する CSS 変数を Visual Studio Code で補完できるようにする

WordPress のコア、theme.json が CSS 変数を出力するが動的に生成されるため VSCode 開発時に Sass ファイルで補完できず開発のストレスとなるため補完できるようにする。

生成される CSS 変数をプロジェクト内に保存

/src/scss/foundation/_wp-variables.scss
といったファイルを作成し WordPress が生成する CSS 編集を保存する。

:root {
	--wp--preset--aspect-ratio--square: 1;
	--wp--preset--aspect-ratio--4-3: 4/3;
	--wp--preset--aspect-ratio--3-4: 3/4;
	--wp--preset--aspect-ratio--3-2: 3/2;
	--wp--preset--aspect-ratio--2-3: 2/3;
	--wp--preset--aspect-ratio--16-9: 16/9;
	--wp--preset--aspect-ratio--9-16: 9/16;
	--wp--preset--color--black: #000000;
    ︙
}

CSS Variable Autocomplete プラグイン導入

CSS Variable Autocomplete ( https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables ) をインストール

CSS Variable Autocomplete プラグイン設定

/.vscode/settings.json を編集 / 作成し以下を記述

// プロジェクト内のすべての css, scss, sass, less を補完対象としたい場合は以下
{
	"cssVariables.lookupFiles": [
		"**/*.css",
		"**/*.scss",
		"**/*.sass",
		"**/*.less",
	]
}

// 設定した _wp-valiables.scss のみを補完対象としたい場合は以下
{
	"cssVariables.lookupFiles": [
		"src/scss/foundation/_wp-variables.scss",
	]
}

これで補完されるようになる。
WordPress コアに仕様変更があった際や theme.json に変更を行った際は都度 _wp-valiables.scss を編集する必要があるが仕方ない。

CSS Subgrid で孫要素の行の高さを揃える

まずは通常の “親 > 子” の Subgrid の例。
.item に subgrid を指定することで .item 内の行の高さを揃えることができる。

<div class="container">
  <div class="item">
    <div class="item-media"><img src="imgPath"></div>
    <div class="item-title">タイトル</div>
    <div class="item-description">美しい風景と自然に触れる冒険に出かけましょう。説明文</div>
    <div class="item-paragraph">テキスト</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  …
</div>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

See the Pen CSS Subgrid by sho doi (@sho_doi) on CodePen.

次に “親 > 子 > 孫” の場合

<div class="container">
  <div class="item">
    <div class="item-inner">
      <div class="item-media"><img src="imgPath"></div>
      <div class="item-title">タイトル</div>
      <div class="item-description">美しい風景と自然に触れる冒険に出かけましょう。説明文</div>
      <div class="item-paragraph">テキスト</div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner"></div>
  </div>
  <div class="item">
    <div class="item-inner"></div>
  </div>
  …
</div>

というケース。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}
.item-inner {
  display: inherit;
  grid-template-rows: inherit;
  grid-row: inherit;
}

.item-inner で .item の display, grid-template-rows, grid-row を継承することで孫要素内の行の高さを揃えることができる。

See the Pen CSS Subgrid by sho doi (@sho_doi) on CodePen.

[theme.json] settings.border で枠線の設定を行う

テーマディレクトリのルートに配置する theme.json により全体としてブロックの枠線をサポートをどのように設定するか、またはブロックごとにどのように設定するかを定義することができる。

【環境】
WordPress 5.8.1
Gutenberg 11.7.1

枠線のサポートの有効/無効

テーマディレクトリのルートの theme.json で border セクションの customColor, customRadius, customStyle, customWidth の値を true とする事で枠線の色、角丸、スタイル、幅がサポートされる。

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
	}
}
グループブロックに枠線(色、角丸、スタイル、幅)がサポートされる

値を false としたものは枠線がサポートされない。
以下では customStyle 以外を false としたためブロックでは枠線(スタイル)のみのサポートとなる。

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": false,
			"customRadius": false,
			"customStyle": true,
			"customWidth": false
		}
	}
}
customStyle 以外を false としたため枠線(スタイル)のみサポートされる

ブロックセレクタによる上書き

settings セクションのサブセクションとしてブロックセレクタ(例:core/group )を用いる事ができ、先の設定を上書きし無効もしくは有効にできる。

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/group": {
				"border": {…},
				"color": {…},
				︙
			}
		}
	}
}

例えば全体としてはブロックに枠線(色、角丸、スタイル、幅)をサポートさせるがグループブロックでは色、角丸は無効とする場合このような記述となる。

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
		"blocks": {
			"core/group": {
				"border": {
					"customColor": false,
					"customRadius": false
				}
			}
		}
	}
}

コアとテーマの theme.json

theme.json はコア(wp-includes/theme.json)とテーマディレクトリのルート(wp-content/themes/my-theme/theme.json)が存在し後者で前者を上書きできる。
ただし、以下の記述だけではボタンブロックで枠線(角丸)がサポートされてしまう。

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": false,
			"customRadius": false,
			"customStyle": false,
			"customWidth": false
		}
	}
}
customRadius を false にしてもボタンブロックで枠線(角丸)がサポートされる

これはコア側にブロックセレクタ core/button が記述されておりブロックセレクタが settings/block の設定を上書きしたためとなる。
ボタンブロックで枠線(角丸)のサポートを無効にするにはテーマ側の theme.json のブロックセレクタ core/button に無効にする旨を記述する必要がある。

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/button": {
				"border": {
					"customRadius": false
				}
			}
		}
	}
}

ブロッグ毎の色、角丸、スタイル、幅のサポートの調べ方

色、角丸、スタイル、幅のサポートはブロック毎に異なる。
執筆段階で枠線はグループ、テーブル、ボタン、画像、検索、プルクォートブロックで用いられており、これらのサポート状況は以下の通りとなる。

グループ: 色、角丸、スタイル、幅
テーブル:色、スタイル、幅
ボタン:角丸
画像:角丸
検索:色、角丸
プルクォート: 色、角丸、スタイル、幅

であるのでブロックセレクタ core/buttoncustomColortrue としてもボタンブロックで色はサポートされない。

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/button": {
				"border": {
					"customColor": true
				}
			}
		}
	}
}
customColor を true としても枠線(色)はサポートされない

個々のブロックが色、角丸、スタイル、幅のいずれをサポートしているかは WordPress 内 wp-includes/blocks/block-name/block.json の supports > __experimentalBorder セクションで定義されている。
ボタンブロックの場合 radius のみ定義されているため色、スタイル、幅はサポートされない。

wp-includes/blocks/button/block.json

{
	"apiVersion": 2,
	"name": "core/button",
	"title": "Button",
	"category": "design",
	︙
	"supports": {
		"anchor": true,
		"align": true,
		"alignWide": false,
		"color": {
			"__experimentalSkipSerialization": true,
			"gradients": true
		},
		"typography": {
			"fontSize": true,
			"__experimentalFontFamily": true
		},
		"reusable": false,
		"__experimentalBorder": {
			"radius": true,
			"__experimentalSkipSerialization": true
		},
		"__experimentalSelector": ".wp-block-button__link"
	},
	︙
}

参考

Global Styles & theme.json – Full Site Editing https://fullsiteediting.com/lessons/global-styles/

グローバル設定とスタイル (theme.json) – Japanese Team — WordPress.org https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/

theme.json のセクション一覧はこちら

https://show-web.jp/2021/10/20/theme-json-settings/