Adım Atmak: İlk WordPress Blok Eklentimi Oluşturmak

Çoğu yıl gibi, bu ABD Bağımsızlık Günü'nü tüylü arkadaşlarımla birlikte geçirdim. Tüm pencereleri kapattım, panjurları kapattım, beyaz gürültü için birkaç fanı açtım ve televizyonu açtım. Kedilerim ve ben rahatladık. Genelde sarhoş olan yurttaşlarım gece gökyüzünde yüzlerce doları yakarken onları sakin tutmak benim işim. Bu benim ritüelim ve bundan zevk alıyorum.

Bu tatil için Star Trek: Lower Deck'in 1. Sezonunu yeniden izledik ve blok eklentisi oluşturmayı öğrendim.

Bu benim ilk denemem değildi. Blok düzenleyici yaklaşık üç yıl önce başlatıldığında, birkaç blok tipi fikirle uğraştım. Ancak, hiç uzağa gitmedim. Belgeler seyrekti ve ön uç tasarımı için önemsiz çanlar ve ıslıklar oluşturmanın ötesinde JavaScript ile neredeyse hiçbir deneyimim yoktu.

WP Tavern için yazmak üzere geliştirici olarak günlük işimi bırakmak, aynı zamanda blok geliştirmeyi öğrenmek için sınırlı zaman anlamına geliyordu. Ve son birkaç yıldır boş zamanımı başka projelerle doldurdum. Son zamanlarda, bir kez daha eğlence için bir şeyler inşa etmeye başlama isteği duydum. Geliştirme işinden uzatılmış iznim, yaratıcılığımın yeniden doldurulması için bir şans verirken, diğer ilgi alanlarımın peşinden gitmem için bana zaman verdi. Ara vermek bana biraz iyi geldi.

Dün öğleden sonra vakit geçirmek için vakit buldukça hemen içeri daldım. Birkaç saat dokümanları okuduktan, diğer geliştiricilerin kodlarını inceledikten ve bir şeyleri kırdıktan sonra, bir kırıntı listesi için işlevsel bir bloğum vardı.

Marcus Kazmierczak'ın Telif Hakkı Engelleme eklentisi, ilk sıkıntılardan birini aşmama yardımcı oldu. Sistemin nasıl çalıştığının özüne ulaşmak için vanilya JavaScript'inde yazılmış gerçek dünya, örnek olmayan kodu görmek yardımcı oldu.

Özel blok türleri oluşturmaya ilişkin genel düşüncelerim?

Düşündüğümden daha kolaydı. Belgeleme, aynı zamanda hem ezici hem de sınırlayıcıdır. Ne aradığınızı bile bilmiyorsanız doğru cevabı bulmak zordur. Giriş engeli, 2007'de ilk eklentimi oluşturduğumdan çok daha yüksek. Blok Tipi API bazı şeyleri aptalca basitleştirirken diğerlerini karmaşıklaştırıyor.

İlk blok tipimi editör tuvaline başarıyla eklemek memnuniyet vericiydi. Bu duygunun bir geliştirici olarak asla kaybolacağını sanmıyorum.

Site düzenleyicisi başladığında, kırıntı listesi gibi blokların potansiyeli beni heyecanlandırıyor. Birçok benzer özellik, yazı düzenleyicide bir anlam ifade etmiyor. Bununla birlikte, kullanıcılar şablonlarında doğrudan düzenlemeler yapabildiklerinde, bir olasılıklar dünyası açılacaktır.

Öğrenme eğrisi

Kendim ve başkaları için tehlike oluşturacak kadar JavaScript biliyorum. Profesyonel kariyerimin neredeyse tamamını WordPress alanında geçirmek PHP'ye odaklanmak anlamına geliyordu. Ancak programlama, programlamadır. Bir dili güçlü bir şekilde anladıktan sonra, başka bir dilde işlevsel bir komut dosyası oluşturmak için etrafta dolaşmak imkansız bir sıçrama değildir. Aynı temel kavramların çoğu orada. Zorluk, genellikle yeni bir sözdizimi öğrenmektir.

Ancak, "modern" JavaScript'in önündeki en büyük engel, derleme araçlarını, paketleyicileri ve daha fazlasını ayarlamaktır. Bu ilk kod satırını yazmak bile uzun bir emir olabilir.

Elbette, belgelerin bazılarında vanilya JavaScript örnekleri var, ancak temel bilgilerden daha karmaşık bir şeye girdiğinizde, artık o kadar vanilyalı değil. JavaScript'i paketlemek ve JSX sözdizimini dönüştürmek için bir yola ihtiyacınız olacak. Bu, web paketi ve Babel gibi araçlar anlamına gelir.

WordPress'in karmaşıklığın çoğunu kesmek için kendi komut dosyası vardır, ancak Laravel Mix'i öneririm. Aramızdaki en az bilgili JavaScript programcıları için bile yeterince basittir ve kapsamlı belgelere sahiptir. Araçlar hakkında daha az endişelenmek ve aslında kod yazmak hakkında daha fazla endişelenmek isteyenler için yapılmış bir komut dosyasıdır.

Blok inşa etmek de farklı bir sıçrama türüdür. Özel şablon etiketleri, kısa kodlar, widget'lar veya kancalar olsun, geleneksel WordPress geliştirme, bunları bir PHP ortamında oluşturmak anlamına gelir. Çoğu eklenti geliştiricisinin blok düzenleyici aracılığıyla kitlelere sunabilecekleri tonlarca özelliğe sahip olduğundan şüpheleniyorum. Genellikle sunucu tarafı işlemeye güvenirler. WordPress, bunu gerçekten ele almak için bir ServerSideRender bileşenine sahiptir.

Blok tiplerini kaydetmenin en kullanışlı özelliklerinden biri blok “destekler” sistemidir. Bir arka plan rengi seçeneği ister misiniz? Sadece bir satır kod yeterli olacaktır. Kullanıcının yazı tipi boyutu denetimine erişmesini ister misiniz? Bu da tek satır. Çok az çabayla, kullanıcılar için bir ton stil seçeneği eklemek için kırıntıları bloğumu genişlettim. Ve sitenin aktif temasına uyum sağlarlar.

Blok destekli özelliklerin listesi, hemen hemen hiçbir geliştirme maliyeti olmadan bir dizi standartlaştırılmış seçenek sunar. Daha önce form alanları oluşturmak için en gelişmiş araç olan Özelleştirme API'si bile bu kadar yaklaşmamıştı.

Bulmacanın blok düzenleme parçasının nasıl çalıştığını kavradıktan sonra özel denetçi kontrolleri oluşturmak kolaydı. Şimdilik, bir özelliği etkinleştirmek/devre dışı bırakmak için basit bir geçiş seçeneğim var. Çoğu zaman, en zor kısım sadece aradığınızı bulmaktır. WordPress, aralarından seçim yapabileceğiniz çok sayıda bileşen kitaplığına sahiptir.

Bu noktada istemci (editör) tarafında temel bir bloğum var. Karmaşıklığın çoğu sunucuda PHP aracılığıyla işlenir. Bunu bir öğleden sonra gergin kedilerle ilgilenirken yapabilirsem, daha fazla eklenti yazarının bu trene atlaması zor olmamalı. Geliştiricilerin minimum kodla bloklara dönüştürebilecekleri binlerce kısa kod ve widget vardır.

Ekmek kırıntıları bloğumu henüz vahşi doğaya salmaya hazır değilim. Hâlâ yapılması gereken bazı ince ayarlar ve uygulanması gereken birkaç gelişmiş özellik var. Ayrıca, kullanıcıların başlık şablonu gibi bir şeye bırakabilecekleri bir site düzenleyici bağlamında öncelikle bir içerik kırıntıları listesine ihtiyaç vardır. Henüz orada değiliz, ancak geldiğimizde şüphesiz nihai sonucu toplulukla paylaşacağım.

Ardından, sunucu tarafı işlemeye dayanmayan bir blok oluşturmaya çalışacağım. Sanırım artık alıştım. Bu ilk engeli aşmak her zaman en zor adımdır.