Baizy Custom Blocks
TypeScript(Vite ビルド)製のカスタムブロックをブロックエディターに追加します。
by Yuki Uota · github.com/yukiuota/baizy-custom-blocks · website
★ 0stars
0forks
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/yukiuota/baizy-custom-blocks/archive/refs/heads/main.zipReadme
Baizy Custom Blocks
TypeScript(Vite ビルド)製のカスタムブロックをブロックエディターに追加する WordPress プラグインです。 baizy テーマから独立させたもので、テーマに依存せず単体で動作します。
必要環境
- WordPress 6.0+
- PHP 8.0+
- Node.js 18+ / pnpm(ブロックを開発・ビルドする場合のみ)
インストール
- このディレクトリを
wp-content/plugins/baizy-custom-blocks/に配置 - 管理画面 →「プラグイン」→「Baizy Custom Blocks」を有効化
ビルド済みの build/custom-blocks.js が同梱されているため、利用するだけなら Node.js は不要です。
収録ブロック
カテゴリー「カスタムブロック」(baizy-blocks)に登録されます。
| ブロック | 名前 | ソース |
|---|---|---|
| サンプルブロック | my-blocks/sample-block |
src/blocks/sample-block/ |
| 別のサンプルブロック | my-blocks/another-block |
src/blocks/another-block/ |
| タイトルブロック | my-blocks/ttl-block |
src/blocks/ttl-block/ |
| Q&A ブロック | my-blocks/qa-block |
src/blocks/qa-block/ |
| ボックスフレックス | my-blocks/box-flex |
src/blocks/box-flex/(デフォルト無効) |
有効にするブロックは src/index.tsx の import で切り替えます。
開発
pnpm install
pnpm build # src/ → build/custom-blocks.js
pnpm start # watch ビルド
新しいブロックの追加
src/blocks/<block-name>/index.tsxを作成(registerBlockTypeで登録、category: "baizy-blocks")src/index.tsxにimport './blocks/<block-name>';を追加pnpm build
構成
baizy-custom-blocks/
├── baizy-custom-blocks.php プラグイン本体(エンキュー・カテゴリー登録)
├── build/
│ └── custom-blocks.js ビルド出力(コミット対象)
├── src/
│ ├── index.tsx エントリーポイント
│ └── blocks/ 各ブロックのソース
├── vite.config.mts
├── tsconfig.json
└── package.json