ブロック開発の流れ

ローカル環境を構築

主な開発環境構築方法

• local
• XAMPP
• Docker
• wp-env（Dockerベースのnpmパッケージ）

wp-env使用方法

使用方法

1. Docker Desktopをインストール、起動
2. PowerShellでDockerコマンドが使用できるか確認（docker -v）
3. デスクトップにdojo-blockフォルダを作成し、vscodeで開いてコマンドを叩く

npm i @wordpress/env --save-dev

4. 生成されたpackage.jsonに、scripts「”wp-env”: “wp-env”,」を追記

	"scripts": {
		"wp-env": "wp-env",
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	},
	"devDependencies": {
		"@wordpress/env": "^10.2.0",
		"@wordpress/scripts": "^27.9.0"
	}

.wp-env.jsonを作成し編集

{
	"plugins": ["."]
}

wp-envを起動する

npm run wp-env start

wp-envの設定が済んだプラグイン雛形を作成するコマンド
npx @wordpress/create-block dojo-block –wp-env

wp-env環境を削除するコマンド
npm run wp-env destroy

エラー

error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)

解決方法

HTTPのバージョンを確認
git config –global http.version

空だったので、HTTPのバージョンを設定
git config –global http.version HTTP/1.1

HTTPのバージョンを再確認
git config –global http.version
HTTP/1.1

RPC failed; curl 18 transfer closed with outstanding read data remaining

解決方法

gitのglobal設定で『post buffer』という設定の数値を上げる
git config –global http.postBuffer 524288000
解決せず

WordPress起動
ログインID：　admin
パスワード：　password

GitHubでコードを管理

1. Gitをインストール
2. リモートディポジトリ作成
3. ローカルをGit管理登録

git init
git add .
git commit -am “First Commit”
git branch -M main
git remote add origin git@github.com:tomari10/dojo-block.git
git push -u origin main

GitHub フロー

https://docs.github.com/ja/get-started/using-github/github-flow

他のプラグインとの衝突を防ぐ

dojo-block.php　→　Plugin Name
dojo-block.php　Update URI →  my-dojo-block
readme.txt　→　=== Dojo Block ===

関数名に接頭辞をつける

block.jsonの”name”: “create-block/dojo-block”
→”name”: “my-block/dojo-block”,

複数ブロックのビルド

ブロック１つ目

src/accordionを作成し、srcファルダの中身を移動

my-block.phpを編集

function create_block_dojo_block_block_init() {
	register_block_type( __DIR__ . '/build/accordion' );
}
add_action( 'init', 'create_block_dojo_block_block_init' );

buildフォルダを削除して再ビルド

ブロック２つ目

src/accordionをコピーして、src/balloonを作成

ブロック名を修正

dojo-block.phpを編集

function create_block_dojo_block_block_init() {
	register_block_type( __DIR__ . '/build/accordion' );
	register_block_type( __DIR__ . '/build/balloon' );
}
add_action( 'init', 'create_block_dojo_block_block_init' );

別の書き方

function create_block_dojo_block_block_init() {
	$blocks =array(
		'accordion',
		'balloon'
	);

	foreach($blocks as $block){
		register_block_type( __DIR__ . '/build/' . $block );
	}
}
add_action( 'init', 'create_block_dojo_block_block_init' );

参考

• @wordpress/env
• @wordpress/create-block
• GitのClone時に発生したエラー「 RPC failed; curl 92 HTTP/2 stream 7 was not closed cleanly before end of the underlying stream」