Skip to content

Modernize asset build pipeline (gulp → grab-deps + sass/postcss) (#12)#16

Merged
fumikito merged 5 commits into
masterfrom
chore/12-modernize-build
Jun 10, 2026
Merged

Modernize asset build pipeline (gulp → grab-deps + sass/postcss) (#12)#16
fumikito merged 5 commits into
masterfrom
chore/12-modernize-build

Conversation

@fumikito

@fumikito fumikito commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

概要

Closes #12
Closes #3

壊れた gulp 系ビルド(gulp@4 + node-sass + webpack@4、CI Node 14)を一掃し、kunoichi 標準ツールチェーンへ全面移行する破壊的移行です。あわせて #3(ブロックカテゴリ commonmedia)を畳み込みました。

ビルド

項目 Before After
JS gulp + webpack4 + babel7.5 @kunoichi/grab-deps(+ @wordpress/scripts、JSX対応)
CSS gulp-sass(node-sass) sass(Dart) + postcss/autoprefixer
ソース/出力 assets/(src) → dist/(out) src/jssrc/scss(src) → assets/(out)、dist/ 廃止
Lint eslint6 / stylelint13 wp-scripts lint-js / lint-style
FontAwesome v5(gulp copy) v5 据え置き(bin/copy.sh

CI(tarosky 標準ワークフローへ)

install-wp-tests.sh + svn + MySQL サービスコンテナの phpunit 構成(svn が ubuntu ランナーから消えて壊れていた)を、tarosky/* プラグインと同じ方式に置き換え:

  • PHPUnit は wp-env で実行npx wp-env startnpm test)。svn・MySQLサービス・install-wp-tests.sh 不要
  • PHP lint は再利用ワークフロー tarosky/workflows/.github/workflows/phpcs.yml@main(PHP 7.4)
  • php-short-open-tag.yml による短縮開始タグチェックを追加
  • assets ジョブに npm run build を追加(ビルド破壊を検知)
  • CI Node 14→20、actions/checkout/setup-node を v5 へ(Node24対応)

公開APIは不変(後方互換)

  • スクリプト/スタイルのハンドル名・依存配列、wp.kicon.IconSelector グローバル、register_block_type、ブロックの save() 出力 DOM をすべて維持
  • React は @wordpress/dependency-extraction により外部化(window.React)。旧 dist も同じ global React のため挙動同一

検証

  • ローカル: npm installnpm run build(全アセット生成)、npm run lint(eslint+stylelint)、npm test(wp-env で phpunit 9.6 → OK, 1 test
  • wp-env 実機 + Playwright:
    • 全アセットが assets/ パスで HTTP 200、ブロック登録 OK、Media カテゴリ表示(Change Icon block category to media #3
    • edit() 完全描画(IconSelector 動作)、JSエラー 0
    • 旧ビルドで保存した既存ブロック(複数属性パターン)が新ビルドで isValid: true → 既存コンテンツ無傷
  • CI: 全ジョブ green

備考

  • package-lock.json 非コミット方針のため assets/phpunit ジョブは npm install
  • WordPress 6.9/7.0 がコアに同名「Icon」ブロック(core/icon)を Media へ追加しており、インサーターでタイトルが衝突します。スコープ外ですが将来「Kunoichi Icon」等への改名検討余地あり(別issue推奨)。
  • ブロックは API version 1 のため iframe エディタ非推奨警告あり(既存仕様、別件)。

🤖 Generated with Claude Code

- Replace gulp@4/node-sass/webpack@4 toolchain with @kunoichi/grab-deps
  (+ @wordpress/scripts) for JS and sass/postcss for CSS.
- Restructure to kunoichi standard: src/js, src/scss (sources) build into
  assets/js, assets/css; drop dist/.
- Bump CI Node 14 -> 20; modernize eslint/stylelint via wp-scripts.
- Add bin/copy.sh to vendor FontAwesome 5 (kept at v5).
- Fold in #3: block category common -> media.

Public API preserved: script/style handles, dependency arrays, the
wp.kicon.IconSelector global, register_block_type, and the block save()
output are all unchanged. Verified in wp-env that existing saved blocks
remain valid (no block-validation errors).

Closes #12
Closes #3

Co-authored-by: Claude <noreply@anthropic.com>
fumikito and others added 2 commits June 10, 2026 17:52
bin/install-wp-tests.sh checks out the WP test suite via svn, which is
no longer pre-installed on ubuntu-latest runners (the phpunit matrix was
failing with 'svn: command not found', exit 127). Pre-existing breakage,
fixed here since this PR already modernizes the CI workflow.

Co-authored-by: Claude <noreply@anthropic.com>
Replace the svn + MySQL-service + install-wp-tests.sh phpunit setup (which
relied on subversion that ubuntu-latest no longer ships) with the org-standard
approach used by tarosky/* plugins:

- phpunit now runs inside wp-env (npx wp-env start && npm test) -- no svn,
  no MySQL service container, no install-wp-tests.sh.
- PHP lint uses the reusable tarosky/workflows phpcs.yml (PHP 7.4).
- Add short-open-tag check via the reusable php-short-open-tag.yml.
- assets job now also runs 'npm run build' to catch build breakage.
- tests/bootstrap.php defaults WP_TESTS_DIR to wp-env's /wordpress-phpunit.
- Add npm 'test'/'cli:test' scripts; give the phpunit testsuite a name.

Verified locally: 'npm test' runs phpunit 9.6 in the tests-cli container
and passes (OK, 1 test, 1 assertion).

Co-authored-by: Claude <noreply@anthropic.com>
@fumikito fumikito force-pushed the chore/12-modernize-build branch from 7ecc99a to 664416c Compare June 10, 2026 09:20
fumikito and others added 2 commits June 10, 2026 18:24
actions/checkout@v4 and setup-node@v4 run on Node 20, which GitHub forces
to Node 24 from 2026-06-16. v5 supports Node 24 natively and clears the
deprecation annotation.

Co-authored-by: Claude <noreply@anthropic.com>
WPCS 2.0's I18n sniff crashes on PHP 8.x; 3.0 runs on PHP 8 and matches
the tarosky standard. The dealerdirect/phpcodesniffer-composer-installer
plugin (pulled by WPCS 3) auto-registers the standard paths, so the
'phpcs --config-set installed_paths' dance is gone; lint now also covers
icon.php. Updated two ruleset sniff names that moved to the Universal
standard in WPCS 3 (DisallowShortTernary, DisallowShortArraySyntax) and
applied phpcbf autofixes (brace placement; dirname nesting -> dirname($p, 3)).

Verified: composer lint passes on PHP 8.3; npm test (wp-env phpunit) still OK.

Co-authored-by: Claude <noreply@anthropic.com>
@fumikito fumikito merged commit 28f9c1e into master Jun 10, 2026
6 checks passed
@fumikito fumikito deleted the chore/12-modernize-build branch June 10, 2026 13:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

npm devDependencies / ビルドパイプラインの近代化(破壊的移行) Change Icon block category to media

1 participant