WordPress Blok Düzenleyici Eklentisi Genel Bilgisi

WordPress'teki geliştirme, sıçramalar ve sınırlarla modernize ediliyor. Birkaç gün önce içerik yönetim sistemimizin 5. versiyonunda zaten mevcut olan güncel teknolojileri anlatmıştım. Şimdi, yeni blok düzenleyicinin olanaklarını dikkate alarak WordPress için nasıl eklenti geliştireceğinizi öğretme zamanı.

Bugün, JavaScript tabanlı WordPress geliştirmelerimiz için Nelio'da kullandığımız ortak tabloyu anlatacağım .

GitHub'da WordPress için standart eklentimizin tüm kod tabanına sahipsiniz, bu nedenle bir geliştirici olarak ufkunuzu modernize etmemek ve genişletmemek için hiçbir mazeretiniz yok.

WordPress Blok Düzenleyicisi

Yeni WordPress eklentilerinin oluşturulmasına temel teşkil eden bir proje oluşturmanın ana nedeni, geliştiriciler olarak tüm projelerimizi birleştirip standart hale getirebilme ihtiyacımızdan kaynaklanmaktadır.

WordPress Plugin Boilerplate'den ilham alan fikrimiz, benzer bir şey yapmak, ancak blok düzenleyiciyi derleyiciler, aktarıcılar, paketleyiciler ve nihayetinde JavaScript projeleri için ortak geliştirme araçlarını kullanarak modern bir yığınla genişleten eklentilere odaklanmaktır.

Kurulum Ve Geliştirme Süreci

Temel olarak oluşturduğumuz eklenti kazan plakası doğrudan GitHub'dan indirilebilir. Bundan sonra, WordPress kurulumunuzun eklentiler klasörüne ( /wp-content/plugins/ ) taşıyabilirsiniz:

 git clone https://github.com/avillegasn/wp-beb.git

Bu, tüm içeriğin bulunduğu eklenti klasörünü indirecektir. Ardından, istediğiniz adı kullanmak için hem bu klasörü hem de içeriğini yeniden adlandırmanız gerekir. Örneğin, eklentiniz my-plugin olarak adlandırılacaksa:

• wp-beb dosyalarını my-plugin olarak yeniden adlandırın
• wp-beb my-plugin ile değiştir
• my_plugin wp_beb ile değiştir
• MY_PLUGIN WP_BEB ile değiştirin

Bunu yaptıktan sonra, eklentiyi derlemek ve son kodu oluşturmak için şunu çalıştırın:

 npm install && npm run build

Aşağıdaki araçları yüklemiş olmanız gerektiğini unutmayın:

• Node.js v8.9.1 veya üstü.
• npm v5.5.1 veya üstü.
• Besteci v1.8.1 veya üstü.

npm install komutu, sırasıyla node_modules ve vendor klasörlerindeki Node.js ve PHP bağımlılıklarını indirir. İşlem bittiğinde, derlenmiş dosyaların bulunduğu bir dist klasörünüz olacaktır. Artık WordPress'inizde eklentiyi etkinleştirmek güvenlidir.

Bir önceki komuta ek olarak, standart bilgimiz aşağıdaki ek komutları sağlar:

• npm run dev .
• npm run watch Dosyaları oluştur ve değişiklikleri izle.
• npm run build ve JS ve CSS'yi küçültün.
• npm run lint-php Hataları algılamak için PHP_CodeSniffer'ı PHP dosyalarında çalıştırın.
• npm run lint-php:fix fix PHP hatalarını düzeltmeyi denemek için phpcbf çalıştırın.
• npm run lint-css Hataları algılamak için SCSS dosyalarında stylelint çalıştırın.
• npm run lint-css:fix dosyalarındaki hataları düzeltmeye çalışın.
• npm run lint-js Hataları algılamak için eslint JS dosyalarında çalıştırın.
• npm run lint-js:fix JS dosyalarındaki hataları düzeltmeye çalışın.
• npm run lint PHP, SCSS ve JS dosyalarında linting işlemini çalıştırın.
• npm run update:packages Node.js'deki paket bağımlılıklarını güncelleyin.

Değişikliklerin gerçek zamanlı olarak derlenmesi ve paketlenmesi için genellikle kod geliştirirken npm run watch . Yine de nihai, kararlı bir sürüm oluşturmak için npm run build .

İçindekiler ve Klasör Yapısı

WordPress Block Editor Boilerplate'imiz aşağıdaki dosya ve klasörleri içerir:

• .babelrc . Babel yapılandırma dosyası.
• .editorconfig . Çeşitli düzenleyiciler ve IDE'lerde aynı proje üzerinde çalışan birden çok geliştirici için tutarlı kodlama stillerinin korunmasına yardımcı olan EditorConfig dosyası.
• .eslintignore . Belirli dosyaları ESLint linting işleminden hariç tutmak için kullanılır.
• .eslintrc . ESLint yapılandırma dosyası.
• .gitattributes . Git'teki yol adlarına nitelikler veren metin dosyası.
• .gitignore . Belirli dosyaları depodan çıkarmak için kullanılır.
  composer.json . Projenin PHP bağımlılıklarını açıklar ve başka meta verileri de içerebilir.
• composer.lock . Aynı proje üzerinde çalışan birden fazla geliştiriciyi PHP bağımlılıklarının aynı sürümlerine kilitlemek için kullanılır.
  index.php . Ne olursa olsun, sunucudaki iç dosya yapısını gizlemek için.
• LICENSE.txt . GNU GPL v2 lisansının kopyası.
• package-lock.json . Aynı proje üzerinde çalışan birden çok geliştiriciyi NPM bağımlılıklarının aynı sürümlerine kilitlemek için kullanılır.
• package.json . Proje için manifest dosyası. Gerekli paketlerin adlarını ve projeyi yönetmek için kullanabileceğiniz CLI komutlarını bulabileceğiniz merkezi yapılandırma deposu.
• phpcs.ruleset.xml . PHP_CodeSniffer yapılandırma dosyası.
• postcss.config.js . PostCSS yapılandırma dosyası.
• README.md . Şu anda okumakta olduğunuz dosya.
• readme.txt . WordPress eklentisi benioku dosyası şablonu.
• webpack.config.js . Web paketi için yapılandırma dosyası.
• wp-beb.php . WordPress eklentisinin ana dosyası.
• CSS, JS ve görüntü kaynaklarını içeren bir assets dizini.
• i18n için çeviri dosyalarını içeren bir languages dizini.
• WordPress blok düzenleyicisini genişletmek için blok tanımlarını içeren bir packages dizini.

Tüm bunların dışında, projeyi derlediğinizde, derlenmiş dosyaların bulunduğu dist klasörünü, PHP için bağımlılıkları ve yürütülebilir dosyaları içeren vendor dizinini ve NPM ve JavaScript için bağımlılıkları ve yürütülebilir dosyaları içeren node_modules dizinini alacaksınız.

WordPress Blok Düzenleyicisine Yeni Bir Blok Ekleyin

Bu WordPress Block Editor Boilerplate ile ilgili ilginç olan şey, varsayılan durumudur. Eklentiyi indirip derledikten sonra etkinleştirin ve düzenleyicinize yeni bir blok ekleyen tamamen işlevsel bir eklenti olduğunu keşfedeceksiniz.

Standart tablomuz tarafından eklenen Demo bloğu, önceki ekran görüntüsünde görebileceğiniz gibi, önünde bir kalp tire işareti bulunan basit bir metin bloğudur. Blok ayrıca, blok içindeki metnin renklerini değiştiren iki ek stil tanımlar. Bunlar, Gutenberg'de blokları ve stilleri nasıl oluşturacağınızı anlamanıza yardımcı olacaktır.

Bu bloğu düzenleyiciye ekleyen JavaScript kodu, packages/blocks/demo (buraya bakın). Bu bloğu silmek istiyorsanız, demo dizinini silin ve bunun packages/blocks/index.js dosyasındaki içe aktarımını ve kullanımını silin.

Ek olarak, demo bloğunun kodu, her biri registerBlockType tarafından kullanılan bağımsız değişkenlerin farklı bir bölümünü içeren farklı dosyalara bölünür.

Öte yandan, ek bir blok eklemek istiyorsanız, packages/blocks/demo çoğaltın ve bloğunuz için istediğiniz adı verin. JavaScript dosyalarını istediğiniz gibi değiştirin ve yeni bloğun ana dosyasını packages/blocks/index.js içine almayı unutmayın.

Bir Eklentiyle Blok Düzenleyiciyi Genişletin

Daha önce bahsettiğim demo bloğuna ek olarak, blok düzenleyici için kazan levhamız bir Gutenberg eklentisinin tanımını içerir. Bu "eklentinin" normal bir WordPress eklentisi olmadığını, blok düzenleyicinin kendisini genişleten bir şey olduğunu unutmayın. Dilerseniz “WordPress eklentisinin içinde bir eklenti”.

Eklentiyi sağ tarafta bulunan yukarıdaki ekran görüntüsünde görebilirsiniz. Bu eklenti, yayınla düğmesinin yanında sağ üstteki simgeye tıklanarak etkinleştirilir.

Eklenti, bir renk seçici (böylece Gutenberg'in içerdiği React bileşenlerini nasıl kolayca yeniden kullanabileceğinizi görebilirsiniz) ve düzenleyiciye programlı olarak bir demo bloğu eklemek için bir düğme (başka bir ilginç senaryo) içerir.

assets/src/js/admin içinde eklenti kodunuz var (burada görebilirsiniz). Özellikle, plugin.js dosyası registerPlugin çağrısını içerir ve plugin-component.js dosyası, daha önce bahsettiğim renk seçiciyi ve düğmeyi oluşturmaktan sorumlu olan bileşeni tanımlar.

Yine bu eklentiyi dilediğiniz gibi değiştirebilirsiniz. Veya isterseniz silebilirsiniz. Bunu yapmak için, wp-beb.php ana dosyasında (buraya bakın) sıraya alınmış plugin.js JavaScript dosyasını ve ilgili CSS dosyasını (buraya) kaldırmayı unutmayın.

Hadi bir şans verelim!

WordPress Block Editor Boilerplate'imizin, JS korkunuzdan kurtulmanıza ve WordPress blok editörü için uzantıları basit bir şekilde programlamaya başlamanıza yardımcı olacağını umuyoruz. Deneyin ve bize deneyiminizden bahsedin. Yorumlarınızı okumaktan mutluluk duyacağız!

Unsplash'ta Icons8 ekibi tarafından öne çıkan görsel .