ブロックテーマを作る 2024 - yarn, TypeScript, Tailwind, Vite設定編

主に開発者向け忘備録。ちょっとお試しする際のTIPSと、実際本気で作ろうとする時のアレコレなど（カジュアルに作るTIPSは他に色々あるので割愛）

※ 紆余曲折ありまくりの作業メモなので悪しからず

記録時のバージョンは以下の通り

WordPress: 5.6.3
Create Block Theme: 2.1.4
Node: 22.0.0

まずは一通り、公式ガイダンスなどに目を通す

公式情報

開発者用
https://developer.wordpress.org/themes/
一般用（日本語）

Create Block Theme

WordPress Developer Blog

A walk-through tutorial on using Create Block Theme plugin – WordPress Developer Blog

動画

日本語

外部ブログ、WEB BOOK

mimi

ローカルにWordPressを立てる方法（コマンドライン）

ざっと探って、よしCreate Block Theme使えば良さそうなのは分かったが…いやだから取り敢えずお試しに、コマンドラインからローカルにドンと作りたいのだがそういうのは無いのだろうか…という気持ちになるよね、他のライブラリとか使ってるとそういう気持ちになりそう。え、どうやってWordPressローカルに立てるの？てなるよね。Local？とか使うの…？えメンド…ってなるよね普段WordPress使ってないと。

@wordpress/create-blockみたいに@wordpress/create-block-themeはないの？て思う気がする。

ガイダンスなのにそこすっ飛ばしてくの？ぜんぜんGet Startedできないんですけど、ってなるよね…。
そういうとこやぞ、という気はする。
お気軽にテーマ開発を始めるでないぞ（まあそれはそうなのかもしれないが）、
と言われている気がして回れ右をする開発者は居そう。
書いてる中の人がWordPresser過ぎて、そういう視点が無い気がする。
（こういう愚痴っぽい脱線をして本筋からいつもズレる）

つまり取り敢えずローカルにWordPressを用意する必要があるので大人しく方法を探ろう。今のところオススメは wp-env 。（他にも色々方法はあるのでお好みでよし）。

ただしdockerが必要だからそれさえ面倒なら wp-now (WordPress Playground)もアリ。取り敢えずお試しならこっちで良い気がする。超簡単に立てられるのでやってみよう。

取り敢えず、適当なディレクトリの中で以下を実行するだけでOK。

npx @wp-now/wp-now start

mimi

空のブロックテーマを作ってみる

あとはCreate Block Theme関連の記事どおり、インストールしてBlock Themeの核を作れば良い。（インストール方法は割愛）

Create Block Themeをインストール後、

外観 > エディター > スタイル > スタイルを編集（鉛筆マーク）> 一番右上の「オプション（縦向き三点アイコン︙）」> プラグイン > Create Block Theme > Create Blank Theme

でもろもろを設定する。

（この複雑怪奇なUIなんとかならんかなー…エディターになんでもやらせすぎな気がするんだよなあ…全体のUIが整うまでの辛抱かなあ）

ココの右のエリア、現状何を選択している状態かカレントがわからないのが一番良くない処だと思うな…
（一応上の反転してるアイコンはあるのだがわかりにくい）

※ 本当にCreate Block Themeをするのが初めてなら、いきなりBlankから作らずに、前述のドキュメントなどを見てじっくり構成を理解するのが先だと思う。

mimi

コードを手に入れる

設定項目を入れて、Create Blank Themeボタンを押したら画面が切り替わって設定項目の内容から新しい空のテーマが作られる。

wp-nowを使った場合、実態のコードは Macだと
~/.wp-now/wp-content/playground/ 以下にあって、今のところ、ここを直接消さない限り消えないはず？なのでここを直接弄っても良いが、面倒。
実際の開発時は、wp-nowがこのあたりをアップデートするまでは（やるんじゃないかなと思ってるだけで実際は知らない）、wp-envで指定のディレクトリを読むようにする方が良いと思う。

取り敢えず生成されたファイル群をさくっと観るためにも Export Zip してみるのが良い気がする。

WordPress 6.5.3 時点だと以下の通り。

/YOUR THEME NAME
├── parts
│   ├── footer.html
│   └── header.html
├── readme.txt
├── screenshot.png
├── style.css
├── templates
│   └── index.html
└── theme.json

じゃあ一回これ作って置いときゃいいじゃん、ということになりそうだけれど、WordPressは常にアップデート（今のところ年4回メジャーアップデート）するので、メジャーアップデートのタイミング辺りで毎度Create Block Themeした方が吉。

いやしばらくは　https://wordpress.org/plugins/create-block-theme/#developers　見てアップデートしてたら取り敢えず再取得しといたほうが良いと思う。（ここだけのcliがほしいなー）

mimi

開発環境を設定するその1

ゲットした空テーマのファイルを使って、wp-envで開発環境を作る。ここは好みなので各自ご自由に。

※ wp-envにはdockerが必要なのでローカルにない場合はdockerをインストールする（割愛）

yarn init

yarnが好き（猫だから）なのでyarnで動くかお試ししてみる
https://yarnpkg.com/cli/init

yarn -v
4.1.1

yarn init

/YOUR PROJECT NAME
├── .editorconfig
├── .git
├── .gitattributes
├── .gitignore
├── .pnp.cjs
├── .yarn
├── README.md
├── package.json
└── yarn.lock

wp-envの設定

yarn add -D @wordpress/env

touch .wp-env.json

.wp-env.json の中身を以下のようにして保存。

{
  "core": "WordPress/WordPress#master",
  "themes": ["./theme"]
}

./theme 以下にさっき作ったCreate Block Themeの空のテーマの内容をコピーしてくる。

npx wp-env start

すると最新のWordPressがhttp://localhost:8888で立ち上がる(今だと 6.6-alpha-58242)。
themeは切り替わらないので管理画面にログインしてテーマの一覧からテーマへ変更する。

wp-envのより詳しいドキュメントはココ。いろいろできるので、好きなポート番号にしたりStableで立ち上げたり。あれこれ変更可能。wp-nowが言うには

wp-now does not include lifecycle scripts

だそう。（つまりwp-envではできる）

ここまではyarnで大丈夫そう。

/YOUR PROJECT NAME
├── .editorconfig
├── .git
├── .gitattributes
├── .gitignore
├── .pnp.cjs
├── .pnp.loader.mjs
├── .wp-env.json
├── .yarn
├── README.md
├── package.json
├── theme
│   ├── parts
│   │   ├── footer.html
│   │   └── header.html
│   ├── readme.txt
│   ├── screenshot.png
│   ├── style.css
│   ├── templates
│   │   └── index.html
│   └── theme.json
└── yarn.lock

ここまでぐらいは　yarn add @wordpress/create-empty-theme とかで作れると良いんだけどな…

mimi

開発環境を設定するその2

wp-scripts

WordPress開発のためのパッケージをYarnで使ってみるチャレンジ。

yarn add @wordpress/scripts -D

package.jsonのscriptsに以下を追加

"lint:js": "wp-scripts lint-js ./theme"

yarn lint:js

するとError: resolve-bin tried to access eslint, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.と言われたので

yarn add eslint -D

lint-styleもちゃんと動かなかったので、

yarn add stylelint --dev

してエラーは出ないけれど、lintしてくれてなさそう... 残念！

もしかしたら、あれこれ設定変えればなんとかなるかもだけど、wp-scriptsは全部盛りっちゃ全部盛り過ぎるので、wp-scriptsそのままは諦めて、個別にlinter部分だけ取り敢えず入れてみよう

yarn remove @wordpress/scripts stylelint

mimi

開発環境を設定するその3 Linter

というわけで気を取り直してLinter系を入れ直し

prettier

yarn add @wordpress/prettier-config -D
yarn add --dev --exact prettier

package.jsonに "prettier": "@wordpress/prettier-config" 追記

.prettierrc 作成して以下追記

"@wordpress/prettier-config"

.prettierignore作成して以下追記

.yarn
theme.json
yarn.lock

ESlint

yarn add @wordpress/eslint-plugin -D

yarn add eslint @eslint/js -D

eslint.config.js 作成して以下追記

import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

importのエラーが出るので、pacakage.jsonに"type": "module",を追記

Stylelint

さっき一回外したけど、改めて入れますｗ

yarn add @wordpress/stylelint-config -D
yarn add stylelint -D

.stylelintrc.jsonを作成して以下を追記

{
    "extends": "@wordpress/stylelint-config"
}

これで、stylelint './theme/**.css'とすればちゃんと走るんだけど、Unknown ruleエラーがめちゃくちゃ出てくるので調査
結果、最新のstylelintだとUnknown ruleエラーが出ちゃうので

yarn add --dev stylelint@14.9

としてダウングレードして対応

ここまでで
package.json こんな感じ。

{
	"type": "module",
	"name": "YOUR PROJECT NAME",
	"packageManager": "yarn@4.1.1",
	"scripts": {
		"wp-env": "npx wp-env start",
		"lint:js": "eslint ./theme/*/**.js",
		"lint:css": "stylelint './theme/**.css'",
		"format": "prettier . --write"
	},
	"devDependencies": {
		"@eslint/js": "^9.3.0",
		"@wordpress/env": "^9.10.0",
		"@wordpress/eslint-plugin": "^18.1.0",
		"@wordpress/prettier-config": "^3.15.0",
		"@wordpress/stylelint-config": "^21.41.0",
		"eslint": "^9.3.0",
		"prettier": "3.2.5",
		"stylelint": "14.9",
		"stylelint-config-prettier": "^9.0.5",
		"stylelint-config-recommended": "^14.0.0",
		"stylelint-config-standard": "^36.0.0",
		"stylelint-config-wordpress": "^17.0.0",
		"stylelint-prettier": "^5.0.0",
		"stylelint-scss": "^6.3.0"
	},
	"prettier": "@wordpress/prettier-config"
}

ファイル構成は以下の通り

/YOUR PROJECT NAME
├── .editorconfig
├── .git
├── .gitattributes
├── .gitignore
├── .pnp.cjs
├── .pnp.loader.mjs
├── .prettierignore
├── .prettierrc
├── .stylelintrc.json
├── .wp-env.json
├── .yarn
├── README.md
├── eslint.config.js
├── package.json
├── theme
│   ├── parts
│   │   ├── footer.html
│   │   └── header.html
│   ├── readme.txt
│   ├── screenshot.png
│   ├── style.css
│   ├── templates
│   │   └── index.html
│   └── theme.json
└── yarn.lock

mimi

設定にウンウン唸ってる時に、ちょうどリリースしてくれた

がめっちゃ役立つ！大感謝！
真似してyarnが自動生成したeditorconfigを下記にそのまま変更

mimi

.stylelintrc.json へのルール追加は実装しながら調整していこうと思うので一旦空で。
あと、PHP書かないで済むと良いなーと思って取り敢えずphpcs後回し（絶対必要だと思うけどｗ）

mimi

開発環境を設定するその4 ViteとTypeScriptとTailwind

JSは絶対書くのでTS化と、ViteでTailwind使いたい。うまくいきますように。

Vite

https://ja.vitejs.dev/config/

yarn add vite @vitejs/plugin-react -D
yarn add typescript ts-node -D

package.jsonのscriptsに以下を追記

"scripts": {
    	"build": "vite build",

vite.config.tsを追加して以下を追記

// https://vitejs.dev/config/
import tailwindcss from 'tailwindcss';

export default {
	css: {
		postcss: {
			plugins: [tailwindcss],
		},
	},
	build: {
		outDir: './dist/build',
		rollupOptions: {
			input: {
				main: 'src/index.html',
			},
			output: {
				entryFileNames: `assets/[name].js`,
				assetFileNames: (assetInfo) => {
					if (assetInfo.name) {
						if (assetInfo.name.match(/\.css/)) {
							return `assets/css/[name].css`;
						}
						if (assetInfo.name.match(/\.js|\.ts|\.tsx|\.jsx/)) {
							return `assets/js/[name].js`;
						}
						if (assetInfo.name.match(/\.png|\.jpg|\.webp|\.svg/)) {
							return `assets/images/[name].[ext]`;
						}
					}
					return `assets/[name].[ext]`;
				},
			},
		},
	},
};

viteで書き出すディレクトリのこと忘れてて、書き出しディレクトリをちょっと弄る
結果、dist 以下でテーマが走るので .wp-env.json の設定値を変更

たぶんもうちょっと簡単になる気がしなくもないが取り敢えずこれで動いた

Tailwind.css

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

tailwind.config.js のcontentに追記して以下のように変更

export default {
	content: ['./src/**/*.{vue,js,ts,jsx,tsx,html}'],
	theme: {
		extend: {},
	},
	plugins: [],
};

src/index.cssを追加して下記を追記

@tailwind base;
@tailwind components;
@tailwind utilities;

post.config.jsを追加して以下を追記

export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	},
};

TypeScript

tsconfig.json は取り敢えず yarn vite@latest で生成されたのをそのまま使ってみてる

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

ts関連の設定まだちゃんとしてない

package.json はこう

{
	"type": "module",
	"name": "techo",
	"packageManager": "yarn@4.1.1",
	"scripts": {
		"build": "vite build",
		"wp-env": "npx wp-env start",
		"lint:js": "eslint ./src/assets/*.{js,ts}",
		"lint:css": "stylelint './src/**/*.css'",
		"format": "prettier . --write"
	},
	"devDependencies": {
		"@eslint/js": "^9.3.0",
		"@vitejs/plugin-react": "^4.3.0",
		"@wordpress/env": "^9.10.0",
		"@wordpress/eslint-plugin": "^18.1.0",
		"@wordpress/prettier-config": "^3.15.0",
		"@wordpress/stylelint-config": "^21.41.0",
		"autoprefixer": "^10.4.19",
		"eslint": "^9.3.0",
		"postcss": "^8.4.38",
		"prettier": "3.2.5",
		"stylelint": "14.9",
		"stylelint-config-prettier": "^9.0.5",
		"stylelint-config-recommended": "^14.0.0",
		"stylelint-config-standard": "^36.0.0",
		"stylelint-config-wordpress": "^17.0.0",
		"stylelint-prettier": "^5.0.0",
		"stylelint-scss": "^6.3.0",
		"tailwindcss": "^3.4.3",
		"ts-node": "^10.9.2",
		"typescript": "^5.4.5",
		"vite": "^5.2.12"
	},
	"prettier": "@wordpress/prettier-config"
}

今のところ　@vitejs/plugin-react　要らない気がするな

ファイル構成はこんな感じ　たぶん…

.
├── .editorconfig
├── .git
├── .gitattributes
├── .gitignore
├── .pnp.cjs
├── .pnp.loader.mjs
├── .prettierignore
├── .prettierrc 
├── .stylelintrc.json
├── .wp-env.json
├── .yarn
├── README.md
├── dist
│   ├── build
│   │   ├── assets
│   │   │   └── css
│   │   │       └── main.css
│   │   └── src
│   │       └── index.html
│   ├── parts
│   │   ├── footer.html
│   │   └── header.html
│   ├── readme.txt
│   ├── screenshot.png
│   ├── style.css
│   ├── templates
│   │   └── index.html
│   └── theme.json
├── eslint.config.js
├── package.json
├── post.config.js
├── src
│   ├── assets
│   │   ├── main.css
│   │   └── main.ts
│   └── index.html
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

mimi

あとやることは、buildの前のformatとlintとか、husky設置とかとか。まだあるなー。
ちょっと中身の作業してからにしようかな。

TODO たぶんstylelintの周りで要らないライブラリがあるのでremoveする

mimi

Viteからやり直し

何かノイズが多い気がするので、最初からやり直す。

1. Vite ( TypeScript)

yarn create vite
? Project name: YOURPROJECTNAME

Vanilla, TypeScript を選択

（yarn initするとpackage.json上書きされるのでやめる）

cd YOURPROJECTNAME

2. Tailwind

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

yarn tailwindcss init -p 時に The local project doesn't define a 'packageManager' field て注意があったので"packageManager": "yarn@4.1.1",追記して、も一度鳴いておく

yarn

.yarnrc.ymlが生成される（ことでnode modules 使いながらYarn 4使うモードになる）

tailwind.config.js を tailwind.config.ts にリネーム

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx,html}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js を postcss.config.ts にリネーム

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [autoprefixer, tailwindcss],
};

src/style.cssの中身を以下に書き換え

@tailwind base;
@tailwind components;
@tailwind utilities;

試しに yarn build すると Cannot find module 'ts-node' とか言われるので

yarn add ts-node -D
yarn add -D @types/node

ビルドは通るようになった。
が、出力が変なので後ほどviteの設定を弄る。

3. wp-env

yarn add -D @wordpress/env
touch .wp-env.json

.wp-env.json

{
  "core": "WordPress/WordPress#master",
  "themes": ["./dist"]
}

package.jsonに以下追記

"wp-env": "wp-env start",

4. linter( prettier, ESlint )

yarn add @wordpress/prettier-config -D
yarn add --dev --exact prettier

package.jsonに "prettier": "@wordpress/prettier-config" 追記

touch .prettierrc
touch .prettierignore

.prettierrc

"@wordpress/prettier-config"

.prettierignore

.yarn
theme.json
yarn.lock

yarn add @wordpress/eslint-plugin -D
yarn add eslint @eslint/js -D
yarn add @babel/core -D
touch .eslintrc

.eslintrc

{
	"extends": ["plugin:@wordpress/eslint-plugin/recommended"],
}

ESlintは@wordpress/eslint-plugin/recommendedに合わせてダウングレード

yarn add eslint@7.32.0 -D

すると、TSもダウングレードしろって警告が出るので

yarn add typescript@4.3.5 -D

そうするとビルドがコケるようになるので
tsconfig.json を変更

{
	"compilerOptions": {
		"target": "ES2020",
		"useDefineForClassFields": true,
		"module": "ESNext",
		"lib": ["ES2020", "DOM", "DOM.Iterable"],
		"skipLibCheck": true,
		/* Bundler mode */
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"noEmit": true,

		/* Linting */
		"strict": true,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noFallthroughCasesInSwitch": true
	},
	"include": ["src"]
}

stylelint はTailwind使えるよう願って？ｗ、後回し

package.jsonに以下追記

"lint:js": "npx eslint './src/**/*.{js,ts}'",
"format": "prettier . --write"

5. vite.config.ts

touch vite.config.ts

vite.config.ts

// https://vitejs.dev/config/
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
	css: {
		postcss: {
			plugins: [tailwindcss(), autoprefixer()],
		},
	},
	build: {
		outDir: './dist/build',
		rollupOptions: {
			output: {
				entryFileNames: `assets/[name].js`,
				assetFileNames: (assetInfo) => {
					if (assetInfo.name) {
						if (assetInfo.name.match(/\.css/)) {
							return `assets/css/[name].css`;
						}
						if (assetInfo.name.match(/\.js|\.ts|\.tsx|\.jsx/)) {
							return `assets/js/[name].js`;
						}
						if (assetInfo.name.match(/\.png|\.jpg|\.webp|\.svg/)) {
							return `assets/images/[name].[ext]`;
						}
					}

					return `assets/[name].[ext]`;
				},
			},
		},
	},
};

yarn build して出力ファイルを確認

6. テーマファイルを設置してwp-env

最初に作ったテーマファイル群をdist以下にコピー

yarn wp-env して http://localhost:8888/wp-admin/ で管理画面にログイン。
テーマを有効化、でDONE!

mimi

ココまでの作業でこうなりました。
pacakge.json

{
	"name": "YOURPROJECTNAME",
	"private": true,
	"version": "0.0.0",
	"packageManager": "yarn@4.1.1",
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "tsc && vite build",
		"preview": "vite preview",
		"wp-env": "wp-env start",
		"lint:js": "npx eslint './src/**/*.{js,ts}'",
		"format": "prettier . --write"
	},
	"devDependencies": {
		"@babel/core": "^7.24.6",
		"@eslint/js": "^9.3.0",
		"@types/babel__core": "^7",
		"@types/node": "^20.12.13",
		"@wordpress/env": "^9.10.0",
		"@wordpress/eslint-plugin": "^18.1.0",
		"@wordpress/prettier-config": "^3.15.0",
		"autoprefixer": "^10.4.19",
		"eslint": "7.32.0",
		"postcss": "^8.4.38",
		"prettier": "3.2.5",
		"tailwindcss": "^3.4.3",
		"ts-node": "^10.9.2",
		"typescript": "4.3.5",
		"vite": "^5.2.0"
	},
	"prettier": "@wordpress/prettier-config"
}

tree はこんな感じ（publicとか要らないファイル消してます）

.
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .wp-env.json
├── .yarn
│   └── install-state.gz
├── .yarnrc.yml
├── dist
│   ├── build
│   │   ├── assets
│   │   │   ├── css
│   │   │   │   └── index.css
│   │   │   └── index.js
│   │   ├── index.html
│   │   └── vite.svg
│   ├── parts
│   │   ├── footer.html
│   │   └── header.html
│   ├── readme.txt
│   ├── screenshot.png
│   ├── style.css
│   ├── templates
│   │   └── index.html
│   └── theme.json
├── index.html
├── node_modules
├── package.json
├── postcss.config.ts
├── src
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

mimi

publicフォルダを使う

このままではthemeファイルの管理が面倒すぎるので、
publicフォルダ内にthemeのファイルを移動

tailwind.config.ts の設定を変更

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./src/**/*.{js,ts,jsx,tsx,html}',
		'./public/**/*.{js,ts,jsx,tsx,html}',
	],
	theme: {
		extend: {},
	},
	plugins: [],
};

これでdist内がいい感じに

.
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .wp-env.json
├── .yarn
│   └── install-state.gz
├── .yarnrc.yml
├── dist
│   ├── css
│   │   └── index.css
│   ├── index.html
│   ├── index.js
│   ├── parts
│   │   ├── footer.html
│   │   └── header.html
│   ├── readme.txt
│   ├── screenshot.png
│   ├── style.css
│   ├── templates
│   │   └── index.html
│   └── theme.json
├── index.html
├── package.json
├── postcss.config.ts
├── public
│   ├── parts
│   │   ├── footer.html
│   │   └── header.html
│   ├── readme.txt
│   ├── screenshot.png
│   ├── style.css
│   ├── templates
│   │   └── index.html
│   └── theme.json
├── src
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

mimi

phpcs は

をまんまいただく

composerのインストールは

にメモってるので割愛

touch composer.json
touch phpcs.xml.dist

composer.json

<?xml version="1.0"?>
<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="Example Project" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/PHPCSStandards/PHP_CodeSniffer/master/phpcs.xsd">

	<description>A custom set of rules to check for a WPized WordPress project</description>

	<!--
	#############################################################################
	COMMAND LINE ARGUMENTS
	https://github.com/PHPCSStandards/PHP_CodeSniffer/wiki/Annotated-Ruleset
	#############################################################################
	-->

	<file>.</file>

	<!-- Exclude WP Core folders and files from being checked. -->
	<exclude-pattern>/docroot/wp-admin/*</exclude-pattern>
	<exclude-pattern>/docroot/wp-includes/*</exclude-pattern>
	<exclude-pattern>/docroot/wp-*.php</exclude-pattern>
	<exclude-pattern>/docroot/index.php</exclude-pattern>
	<exclude-pattern>/docroot/xmlrpc.php</exclude-pattern>
	<exclude-pattern>/docroot/wp-content/plugins/*</exclude-pattern>

	<!-- Exclude the Composer Vendor directory. -->
	<exclude-pattern>/vendor/*</exclude-pattern>

	<!-- Exclude the Node Modules directory. -->
	<exclude-pattern>/node_modules/*</exclude-pattern>

	<!-- Exclude minified Javascript files. -->
	<exclude-pattern>*.min.js</exclude-pattern>

	<!-- Exclude yarn files. -->
	<exclude-pattern>/.yarn/*</exclude-pattern>

	<!-- Exclude dist files. -->
	<exclude-pattern>/dist/*</exclude-pattern>

	<!-- Strip the filepaths down to the relevant bit. -->
	<arg name="basepath" value="."/>

	<!-- Check up to 8 files simultaneously. -->
	<arg name="parallel" value="8"/>


	<!--
	#############################################################################
	SET UP THE RULESETS
	#############################################################################
	-->

	<!-- Include the WordPress-Extra standard. -->
	<rule ref="WordPress-Extra">
		<!--
		We may want a middle ground though. The best way to do this is add the
		entire ruleset, then rule by rule, remove ones that don't suit a project.
		We can do this by running `phpcs` with the '-s' flag, which allows us to
		see the names of the sniffs reporting errors.
		Once we know the sniff names, we can opt to exclude sniffs which don't
		suit our project like so.

		The below two examples just show how you can exclude rules/error codes.
		They are not intended as advice about which sniffs to exclude.
		-->

		<!--
		<exclude name="WordPress.WhiteSpace.ControlStructureSpacing"/>
		<exclude name="Modernize.FunctionCalls.Dirname.Nested"/>
		-->
	</rule>

	<!-- Let's also check that everything is properly documented. -->
	<rule ref="WordPress-Docs"/>

	<!-- Add in some extra rules from other standards. -->
	<rule ref="Generic.Commenting.Todo"/>

	<!-- Check for PHP cross-version compatibility. -->
	<!--
	To enable this, the PHPCompatibilityWP standard needs
	to be installed.
	See the readme for installation instructions:
	https://github.com/PHPCompatibility/PHPCompatibilityWP
	For more information, also see:
	https://github.com/PHPCompatibility/PHPCompatibility
	-->
	<!--
	<config name="testVersion" value="5.6-"/>
	<rule ref="PHPCompatibilityWP">
		<include-pattern>*\.php</include-pattern>
	</rule>
	-->


	<!--
	#############################################################################
	SNIFF SPECIFIC CONFIGURATION
	#############################################################################
	-->

	<!--
	To get the optimal benefits of using WordPressCS, we should add a couple of
	custom properties.
	Adjust the values of these properties to fit our needs.

	For information on additional custom properties available, check out
	the wiki:
	https://github.com/WordPress/WordPress-Coding-Standards/wiki/Customizable-sniff-properties
	-->
	<config name="minimum_wp_version" value="6.0"/>

	<rule ref="WordPress.WP.I18n">
		<properties>
			<property name="text_domain" type="array">
				<element value="YOURPROJECTPREFIX"/>
				<element value="library-textdomain"/>
			</property>
		</properties>
	</rule>

	<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
		<properties>
			<property name="prefixes" type="array">
				<element value="YOURPROJECTPREFIX"/>
			</property>
		</properties>
	</rule>


	<!--
	#############################################################################
	SELECTIVE EXCLUSIONS
	Exclude specific files for specific sniffs and/or exclude sub-groups in sniffs.
	#############################################################################
	-->

	<!--
	Sometimes, you may want to exclude a certain directory, like your tests,
	for select sniffs.
	The below examples demonstrate how to do this.

	In the example, the `GlobalVariablesOverride` rule is excluded for test files
	as it is sometimes necessary to overwrite WP globals in test situations (just
	don't forget to restore them after the test!).

	Along the same lines, PHPUnit is getting stricter about using PSR-4 file names,
	so excluding test files from the `WordPress.Files.Filename` sniff can be a
	legitimate exclusion.

	For more information on ruleset configuration optiones, check out the PHPCS wiki:
	https://github.com/PHPCSStandards/PHP_CodeSniffer/wiki/Annotated-Ruleset
	-->
	<rule ref="WordPress.WP.GlobalVariablesOverride">
		<exclude-pattern>/path/to/Tests/*Test\.php</exclude-pattern>
	</rule>
	<rule ref="WordPress.Files.FileName">
		<exclude-pattern>/path/to/Tests/*Test\.php</exclude-pattern>
	</rule>

</ruleset>

Excludeちょっと足した。

composer install

公式情報

Create Block Theme

WordPress Developer Blog

動画

外部ブログ、WEB BOOK

ローカルにWordPressを立てる方法（コマンドライン）

空のブロックテーマを作ってみる

コードを手に入れる

開発環境を設定する その1

yarn init

wp-envの設定

開発環境を設定する その2

wp-scripts

開発環境を設定する その3 Linter

prettier

ESlint

Stylelint

開発環境を設定する その4 ViteとTypeScriptとTailwind

Vite

Tailwind.css

TypeScript

Viteからやり直し

1. Vite ( TypeScript)

2. Tailwind

3. wp-env

4. linter( prettier, ESlint )

5. vite.config.ts

6. テーマファイルを設置してwp-env

publicフォルダを使う

開発環境を設定するその1

開発環境を設定するその2

開発環境を設定するその3 Linter

開発環境を設定するその4 ViteとTypeScriptとTailwind