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 を編集する必要があるが仕方ない。

[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/

theme.json セクションメモ

WordPress 5.8 から搭載された theme.json で設定できるフィールド、自分用メモ。(21/10/20時点)

version

settings

settings.border

settings.border.customColor

settings.border.customRadius

settings.border.customStyle

settings.border.customWidth

settings.color

settings.color.background

settings.color.custom

settings.color.customDuotone

settings.color.customGradient

settings.color.duotone

settings.color.gradients

settings.color.link

settings.color.pallette

settings.color.text

settings.custom

settings.layout

settings.layout.contentSize

settings.layout.wideSize

settings.spacing

settings.spacing.blockGap

settings.spacing.customMargin

settings.spacing.customPadding

settings.spacing.units

settings.typography

settings.typography.customFontSize

settings.typography.customFontStyle

settings.typography.customFontWeight

settings.typography.customLetterSpacing

settings.typography.customLineHeight

settings.typography.customTextDecorations

settings.typography.customTextTransforms

settings.typography.dropCap

settings.typography.fontFamilies

settings.typography.fontSizes

settings.blocks

styles

styles.border

styles.border.color

styles.border.radius

styles.border.style

styles.border.width

styles.color

styles.color.background

styles.color.gradient

styles.color.text

styles.filter

styles.filter.duotone

styles.spacing

styles.spacing.margin

styles.spacing.padding

styles.spacing.blockGap

styles.typography

styles.typography.fontFamily

styles.typography.fontSize

styles.typography.fontStyle

styles.typography.fontWeight

styles.typography.letterSpacing

styles.typography.lineHeight

styles.typography.textDecoration

styles.typography.fontStyletextTrasform

styles.block(ブロックスタイル)

styles.elements(要素スタイル)

customTemplates

templateParts