Kodlayarak, WordPress Block Editörü için bir block tasarlamak istiyorsunuz ve nereden başlamanız gerektiğini bilmiyorsunuz. O zaman doğru yere geldiniz, hoş geldiniz. Bu yazıda, WordPress tarafından geliştirilen @wordpress/create-block paketini kullanarak hızlı bir şekilde bir block nasıl oluşturulur onu gösteriyorum. Hemen başlayalım.

@wordpress/create-block Paketi ile WordPress Editörü İçin Bir Block Oluşturmanın Aşamaları

Bir WordPress bloğu oluşturmanın en pratik yollarından biri @wordpress/create-block paketini kullanmaktır. Bu paket ile block oluştururken takip edeceğimiz adımları şöyle sıralayabiliriz:

1. npm yüklü bir bilgisayarda, Visual Studio Code editörü ile localhostta kurulu olan WordPress kurulumunun wp-content klasörünü aç.
2. Visual Studio Code ekranında terminali aç ve terminalde, wp-content/plugins dizinine git
3. wp-content/plugins dizininde, npx @wordpress/create-block eklentimin-adi komutunu çalıştır
4. Terminalde eklenti dizinine git:
   • cd eklentimin-adi
5. npm install @wordpress/scripts --save-dev komutunu çalıştır
6. npm start komutunu çalıştır
7. WordPress yönetim panelinden eklentiyi etkinleştir
8. WordPress yönetim panelinden bir sayfayı düzenlemek için aç ve bu sayfada block editörünü açıp bloğu test et

Bir WordPress Block’u Oluşturmak İçin Gerekenler Nedir?

• Bir WordPress Block Editörü bloğu kodlayabilmek için şu konularda bilginizin olması gereklidir:
  • Localhost ile bir WordPress kurulumunu kullanabilme
  • Temel düzeyde WordPress dosya yapısını bilme
  • Temel düzeyde WordPress eklenti oluşturma bilgisi
  • Temel düzeyde Visual Studio Code bilgisi
  • Temel düzeyde komut istemcisi (terminal) komutlarını bilme
  • Temel düzeyde HTM, JavaScript, CSS, Node.js, EcmaScript 6
  • Babel ve WebPack mantığını bilme

• Bu derste vereceğim kodların sorunsuz çalışabilmesi için bilgisayarınızda gerekli olan ortamlar şunlardır:
  • XAMPP Server
  • Localhost ile çalışan WordPress Kurulumu
  • Visual Studio Code Programı
  • Node.js

• Benim bilgisayarımdaki programların sürümleri şöyledir:
  • Windows 10
  • Visual Studio Code: 1.68
  • Node.js: v16.13.2
  • npm: 8.4.0
  • WordPress: 6.0
  • “@wordpress/scripts”: ^23.3.0 (Bunu zaten kuracağız.)
    • WebPack işlerini bizi yormadan bu paket halledecek.

WordPress İçin Bir Block Oluşturmaya Başlamadan Önce

• Bir block oluşturmak için, öncelikle şu hazırlıkları yapmalıyız:
  • XAMPP Server’da Apache ve MySQL açılmalıdır.
  • Visual Studio Code açılmalıdır.
    • Visual Studio Code ile localhostta kurulu olan wordpress siteminizin plugins dizini açılmalıdır.
    • Visual Studio Code’un terminal penceresi açılmalıdır.
      • Terminalde, komut satırı, WordPress kurulumunun plugins (eklentiler) dizininde olmalıdır.
• Bu işlemler yapıldıysa artık bir WordPress Block Editörü bloğu oluşturabiliriz.

• Yazının burasından sonra kullanacağım şu iki kavramı şöyle anlamalısınız:
  • Kod editör: Visual Studio Code
  • Terminal: Visual Studio Code programının terminal penceresi

@wordpress/create-block Paketi ile WordPress Block Editör İçin Bir Block Oluşturma Aşamalarının Detayları

1. @wordpress/create-block Komutunu Çalıştır

• Terminalin komut satırı plugins dizininde iken, aşağıdaki komutu terminale yapıştırıp enter tuşuna basın:

npx @wordpress/create-block sc-cards

• Yukarıdaki komutta:
  • Kararı size bağlı olan tek kısım "sc-cards" kısmıdır.
    • Bu kısım, oluşturacağınız eklentinin ve bloğun adıdır.
      • Ben SiteCenneti.com markası ile bir kart bloğu kurmayı tasarladığım için bu adı verdim.
    • Siz, kendinize en uygun ismi bulup onu vermelisiniz.
    • Daha sonradan da değiştirilebilecek bir kısımdır.

• Bu komuta enter dediğinizde şöyle bir soru ile karşılaşıyoruz:

Need to install the following packages:
  @wordpress/create-block
Ok to proceed? (y)

• Bu soru; “WordPress paketini yüklemek istediğinizden eminseniz “y” tuşuna ve ardından enter tuşuna basınız.” demek istiyor.
  • Biz de zaten bu yüzden buradayız ve dediğini yapıyoruz.
• Sonra terminalde şöyle bir görüntü oluşuyor:

• Bu işlem biraz zaman alabilir, sabırlı olmakta fayda var.
• Her şey yolunda gittiyse, kırmızı yazıları görmeden terminal imleci tekrar plugins dizininde kendini gösterecektir.
• Bu işlem sonucunda, plugins klasöründe sc-cards adında bir klasör oluşmalıdır.
  • Bu klasör, oluşturduğumuz eklentinin klasörüdür.
  • Bu eklenti ile aslında, sc-cards adında bir block da oluşturmuş oluyoruz fakat henüz kullanıma hazır değil.
  • Bu klasör şöyle görünmelidir:

2. Terminalde Eklenti Dizinine Gitme

• Bu aşamada terminalin komut satırında, oluşturduğumuz sc-cards eklentisinin dizinine gitmemiz gerekiyor.
  • Bunun için komut satırı plugins dizininde iken şu komutu çalıştırıyoruz:

cd sc-cards

3. @wordpress/scripts Komutunu Çalıştırma

• Bu aşamada @wordpress/scripts paketine ihtiyacımız var.
  • Bunun için terminale, sc-cards dizininde iken aşağıdaki komutu yapıştırıp enter tuşuna basıyoruz.
    • Bu işlem de biraz uzun sürebilir.

npm install @wordpress/scripts --save-dev

• @wordpress/scripts yüklerken terminalimizde bol morlu bir takım akışlar olur:

4. “npm start” Komutunu Çalıştırma

• Artık sıra yavaş yavaş kod yazmaya geliyor. Şu aşamada çalıştırmamız gereken son bir komut kaldı.
• Aşağıdaki komut, yazdığımız kodları derleyip, tarayıcıların anlayabileceği hale getirir ki biz de WordPress sitemizde sonuçları görelim:

npm start

• Bir aksilik olmazsa, bu işlem terminalde şöyle bir çıktı oluşturacaktır:

• Bu komut çalıştıktan sonra, eklenti dizinimizde build adında yeni bir klasör ve bu klasörün altında bazı doyalar oluşturacaktır.
• Bu komuttan sonra eklenti dizinimiz şöyle görünecektir:

5. WordPress Yönetim Panelinden Eklentiyi Etkinleştirme

• Aslında biz bir WordPress eklentisi oluşturduk.
  • Bu eklenti, oluşturduğumuz bloğun kodlarını içermektedir.
• Bu yüzden, her WordPress eklentisi gibi, çalışması için yönetim panelinden etkinleştirilmesi gerekir.
  • Yönetim paneline gidip etkinleştiriyoruz.

6. Block Editöründe Oluşturduğumuz Bloğu Görme

• Artık bloğumuzu oluştuğu hali ile kullanabiliriz.
  • Bunun için, WordPress’in yönetim paneline girip bir yazı ya da sayfa açmamız gerekiyor.
    • Zaten bir tane açıksa, eklentiyi etkinleştirdikten sonra, sayfayı yinelememiz gerekir.
  • Açtığımız sayfada, editörün arama özelliği ile “sc-cards” araması yaparsak bizi gülümseyerek karşılayan bloğumuzu görürüz:

• Oluşturduğumuz bloğu seçersek şöyle bir çıktı ile karşılaşırız:

• Temaya gidip bakarsak da şöyle bir block ile karşılaşırız:

Çok da havalı görünmediğini biliyorum. Hatta dinamik bir block bile değil, metnini bile düzenleyemiyoruz. Ama şimdilik…

Sonuç

Bir WordPress Block Editörü bloğu oluşturmanın yollarından biri budur. Fakat, block oluşturmak, işin başlangıcıdır. Bundan sonrası, gerekli kodlamalar ile bloğu canlandırmak ve amacımıza uygun hale getirmektir.

Bundan sonrasını merak ediyorsanız bizi takip etmeye ve yorumlarınız ile bize güç vermeye devam ediniz.