WPBones v2 — Webpack Sürümü

Gulp tarihe karıştı. Yarn komutları birleştirildi. TypeScript varsayılan. 14 boilerplate güncellendi. Tek bir php bones migrate:to-v2 ile geçiş yapın.

Gulp, run-s ve birçok eklentiye özgü yapılandırma dosyaları ile yıllarca çalıştıktan sonra, WPBones v2 tüm bu karmaşayı tek bir webpack tabanlı iş akışına indirgedi. Artık WPBones ile oluşturulan her eklenti, aynı yarn dev/build/test/format/lint komutlarını, aynı webpack yapılandırmasını ve aynı TypeScript + Jest + Prettier varsayılanlarını kullanıyor. Geçişi kolaylaştırmak için v2, php bones migrate:to-v2 ile birlikte geliyor — bu, eklentinizi yerinde yeniden yazan tek bir komutla otomatik bir geçiş aracıdır.

Bu, çerçevenin tarihindeki en büyük kırılma değişikliği ve geçiş yolunu mümkün olduğunca kısa tuttuk. Eğer WPBones eklentinizi modernize etmeyi ertelediyseniz, bu hafta sonu iyi bir fırsat.

v2’de Yenilikler

✨ Tek Webpack Yapılandırması, Sıfır Boilerplate

Eski v1.x iş akışı, run-s tarafından yönetilen gulp görevleri yığınıydı: SCSS’i derlemek için bir script, JS’i birleştirmek için bir başka script, TypeScript’i transpile etmek için bir diğeri, React uygulamalarını oluşturmak için bir başkası, dosyaları kopyalamak için bir diğeri. Her boilerplate kendi varyasyonuna sahipti ve her eklenti birbirinden uzaklaştı.

v2, tüm bunları resources/assets/ klasöründen otomatik olarak girişleri keşfeden tek bir webpack.config.js ile değiştiriyor:

• Bir dosya resources/assets/apps/.tsx içine bırakılır → public/apps/.js olarak derlenir.
• Bir klasör resources/assets/apps//index.tsx içine bırakılır → aynı şey.
• CSS/SCSS/LESS resources/assets/css/ içine bırakılır → public/css/.css olarak derlenir.
• TS/JS resources/assets/js/ içine bırakılır → public/js/.js olarak derlenir.

Artık yeni bir giriş kaydetmek için gulpfile.js dosyasını düzenlemeye gerek yok. run-s koordinasyonuna gerek kalmadan, dosyayı kaydedin ve webpack otomatik olarak algılar.

✨ Her Eklentide Birleştirilmiş Yarn Komutları

WPBones v2 tabanlı her eklenti — en sade Base boilerplate’den tam Mantine UI demosuna kadar — şimdi aynı beş komuta yanıt veriyor:

yarn dev       # izleme modu (webpack + @wordpress/scripts)
yarn build     # üretim derlemesi
yarn test      # Jest ile @wordpress/jest-preset-default
yarn format    # Prettier
yarn lint      # ESLint (WP preset)

Bir eklentiden diğerine geçerken yeni bir araç setini öğrenmeye gerek yok.

✨ TypeScript, Jest, Prettier — Kutudan Çıktığı Gibi Konfigüre Edilmiş

Her v2 eklentisi tsconfig.json (katı mod), jest.config.js ve .prettierrc ile birlikte gelir — tüm bunlar @wordpress/* ön ayarlarına bağlıdır. İstediğiniz yerde .ts / .tsx kullanabilir, kaynaklarınızın yanına Jest testlerini yazabilir ve her şeyin tutarlı kalmasını sağlamak için yarn format komutunu çalıştırabilirsiniz.

Seçim yapmaya gerek yok, ayrıca ayrı bir kurulum adımı yok. Sadece kod yazın.

✨ php bones migrate:to-v2 — Otomatik Geçiş Aracı

Kırılma değişikliği hikayesi karmaşık, bu yüzden v2, tek seferlik bir geçiş komutu ile geliyor:

php bones migrate:to-v2

Bu, gulpfile.js ve package-lock.json dosyalarını kaldırır, webpack.config.js / tsconfig.json / .prettierrc / jest.config.js dosyalarını çerçeve şablonlarından oluşturur, package.json betiklerini v2 setine yeniden yazar, gulp dönemi bağımlılıklarını kaldırır ve v2 setini yükler (@wordpress/scripts ^31, typescript, glob, webpack-remove-empty-scripts). Ardından yarn install && yarn build komutunu çalıştırın ve v2 üzerindesiniz.

Bu geçiş aracını, 14 boilerplate üzerinde kendimiz kullandık. Çalışıyor.

✨ php bones make:app ile rezerve edilmiş handle güvenliği

Bir eklenti içinde yeni bir React/TypeScript uygulaması oluşturmak artık tek bir komutla mümkündür:

php bones make:app my-dashboard

Bu komut aynı zamanda rezerve edilmiş WordPress çekirdek handle’larıyla (örneğin, dashboard, post, common, jquery, wp-element) uygulama oluşturmaya izin vermez. Bunun başına gelmiş olsak da, bu komut CLI’nin bunu önceden yakalamasını sağlıyor.

✨ 14 Boilerplate, v2.0.0 ile yeniden yayınlandı

WPBones ailesindeki her boilerplate, geçiş sürecinden geçti ve yeni bir CLAUDE.md ile birlikte geliyor. Bu dosya, genel bir bakış, test adımları, şablon kullanım talimatları ve çerçevenin yüzeyini listeleyerek kapsamlı bir bilgiyi içerir:

• Base — minimum başlangıç (JS/TS, SCSS/LESS/CSS, küçük bir React örneği, bir Jest testi)
• TypeScript — katı TS vitrin (arayüzler, jenerikler, birleşimler, tür korumaları, yardımcı türler)
• ReactJS — yalnızca @wordpress/* kütüphaneleri ile React, üçüncü parti UI kiti yok
• Mantine UI — tam yönetim uygulaması: tema, karanlık mod, sekmeler, formlar, modallar, bildirimler, DataTable
• API — kapanışlar + kontrolcüler + izin geri çağırmaları ile REST API yönlendirmeleri
• Routes — yönetici menü yönlendirmeleri + özel sayfa yönlendirmeleri + adlandırılmış URL yardımcıları
• Blade — BladeOne şablonlama (@foreach, {{ }}, kısımlar)
• CPT — özel gönderi türleri + hizmet sağlayıcılar olarak özel taksonomiler
• Cron — hizmet sağlayıcı yoluyla zamanlanmış olaylar
• Database — migration’lar, seeder’lar, sorgu oluşturucu, Eloquent ORM
• Hooks — plugin/hooks/*.php otomatik dahil etme geleneği
• Internationalization — çalışan bir İtalyan çevirisi ile POT/PO/MO/JSON hattı
• Options — bildirimli config/options.php + canlı $plugin->options erişimcisi
• Packages — her resmi wpbones/* composer paketinin demoları

Her biri bir GitHub şablon deposu — Bu şablonu kullan seçeneğine tıklayın, php bones rename komutunu çalıştırın ve çalışır bir eklentiniz olsun.

🐛 v2.0.1 — inline-scripts yönlendirme düzeltmesi

v2.0.1, v2.0.0 ile birlikte geliyor ve Mantine boilerplate testleri sırasında tespit ettiğimiz bir regresyonu düzeltmekte. Kısa versiyonu: withInlineScript() ve withLocalizeScript() artık adminAppsAssets’e doğru yönlendirmekte. v2.0.1 öncesinde, inline script, wp_add_inline_script() çalıştığında henüz eklenmediği için WordPress tarafından gizlice atılıyordu.

Bir eklenti ->withAdminAppsScript('my-app')->withInlineScript('my-app', 'window.MyApp = {…}') kombinasyonu varsa, window.MyApp undefined olarak geliyordu. Eğer böyle bir sorunla karşılaştıysanız, v2.0.1 bu sorunu düzeltiyor. Karşılaşmadıysanız, bu düzeltmeyi de ücretsiz alıyorsunuz.

🚀 Belgeler, Yenilendi

wpbones.com v2 için tamamen yenilendi:

• Her boilerplate için özel bir sayfa ile yeni Boilerplates bölümü
• V2’ye Geçiş kılavuzu, otomatik geçiş aracının adım adım kullanımını açıklıyor
• WordPress ortamları karşılaştırması (wp-env, Valet, Local, DDEV, Lando, Playground, Docker, Vagrant) — İşletim sisteminize ve çalışma akışınıza uygun yığını seçin
• Eski Gulp referansları core-plugin-files, getting-started ve official-packages dosyalarından kaldırıldı

Başlarken

WPBones’a Yeni mi Başlıyorsunuz?

Yapmak istediğiniz işe uygun bir boilerplate seçin, ardından:

gh repo create my-plugin --template wpbones/WPKirk-Boilerplate --public --clone
cd my-plugin
composer install
php bones rename "My Plugin"
yarn install && yarn build

Zaten v1.x üzerinde misiniz?

Eklenti kök dizininden:

# WPBones v2'yi al
composer require wpbones/wpbones:^2.0.1

# Otomatik geçiş aracını çalıştır
php bones migrate:to-v2

# Yeni geliştirme bağımlılıklarını yükle ve derle
yarn install && yarn build

V2’ye Geçiş kılavuzunu tamamını gözden geçirin, ne tür değişiklikler olduğunu öğrenin.

Bağlantılar

WPBones Hakkında

WPBones, WordPress eklenti geliştirme için Laravel tarzı bir çerçevedir. Size bir IoC konteyneri, hizmet sağlayıcıları, Blade şablonlama, Eloquent ORM, CLI kod oluşturucu ve Laravel’den aşina olduğunuz tüm kalıpları WordPress yaşam döngüsüne uyarlayarak sunar. Eğer Composer, yarn, webpack ve TypeScript’i WordPress kadar seviyorsanız, bu sizin için doğru çerçeve.