Örneklerle Gutenberg Geliştirme: Google Haritalar (bölüm 1)

Birkaç gün önce WordPress.org eklenti dizininde yeni bir eklenti yayınladık: Nelio Haritalar. Adından da anlaşılacağı gibi, WordPress düzenleyicisine yeni bir blok türü ekleyen bir haritalar eklentisidir . Bununla, sayfalarımıza veya yayınlarımıza kolayca bir Google haritası ekleyebiliriz. İşte nasıl göründüğü:

Nelio Maps, tamamen Gutenberg için tasarlanmış ilk eklentilerimizden biridir. Nispeten basit bir eklenti olmasına rağmen, çok kullanışlı bir üründür. Bir yandan, web sitesine harita eklemek isteyen herhangi bir kullanıcı artık basit ve hafif bir eklenti yükleyerek bunu yapabilir. Öte yandan, Gutenberg'de geliştirme yapmak isteyen herhangi bir geliştiricinin artık sadece bu yazıyı okuyarak "sıfırdan" bir eklentinin nasıl oluşturulacağına dair gerçek bir örneği var.

Böyle bir eklenti geliştirmenin dünyadaki en kolay şey olmadığının farkında olduğum için bu öğreticiyi üç farklı bölüm halinde düzenledim. Bugün, nihai ürünü oluşturmak için kullanacağımız iskeleti elde edebilmemiz için “sıfırdan” eklentinin nasıl oluşturulacağını açıklayacağım. İkinci gönderide, WordPress blok düzenleyicide nasıl etkileşimli bir harita elde edileceğini açıklayacağım ve eklentiyi yapmak için oluşturduğum tüm bileşenleri göreceğiz. Son olarak, üçüncü ve son gönderide haritayı veritabanına nasıl kaydedeceğimizi ve ön uçta nasıl gösterebileceğimizi göreceğiz .

Projemizi ve İstediğimiz Eklentiyi Tanımlamak

Bu bir gerçek gibi görünebilir, ancak herhangi bir yeni projeye başlamadan önce yapmamız gereken ilk şey, söz konusu projeyle neyi başarmak istediğimizi tanımlamaktır. Dahil etmek istediğimiz işlevlere bağlı olarak, farklı gereksinimlerimiz olacaktır. Öyleyse, bu eğitimde ne tür bir harita eklentisi uygulamak istediğimizi tanımlayalım.

Bunlar projenin gereksinimleri:

1. Sayfalarına veya gönderilerine bir (veya birden fazla) harita ekleyebilmelidir .
2. Haritayı herhangi bir yere ortalamak mümkün olmalıdır.
   • ya haritayı fare ile sürükleyerek
   • veya bir arama kutusunda konumu aramak.
3. Haritanın boyutu hem genişlik hem de yükseklik olarak ayarlanabilir olmalıdır
4. Harita farklı stiller (siyah beyaz, özel renk paletleri vb.)
5. Kullanıcı haritaya bir işaretçi ekleyebilmelidir.
6. Bir işaretçi varsa, haritaya işaretçi hakkında ek bilgiler içeren bir metin kutusu eşlik etmelidir.

Hırslı, değil mi? Pekala, başlayalım!

“Sıfırdan” Gutenberg Eklentisi Nasıl Oluşturulur

Blogumuzu takip ediyorsanız, muhtemelen Antonio'nun birkaç gün önce Nelio'da oluşturduğumuz bir eklenti ortak plakası kullanarak eklentilerin nasıl oluşturulacağını açıklayan bir gönderi yayınladığını görmüşsünüzdür. Henüz onun gönderisini okumadıysanız, önce onu okumanızı tavsiye ederim, çünkü eklentimiz Antonio'nun orada açıkladığı wp-beb eklentisini temel alacaktır.

Projemize başlamak için yapacağımız ilk şey Nelio'nun kazan plakası eklentisini yansıtmak. Öncelikle GitHub hesabınızda yeni bir depo oluşturun. Ardından, standart sayfamızı yansıtmak için Github'ın yardım sayfalarında açıklanan adımları izleyin:

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

Projeniz hazır olduğunda, projeyi derlemek ve böylece WordPress sitenizde görebilmek için README.md bulunan talimatları izleyin.

Eklenti Tanımlayıcısını Eklentinize Nasıl Dönüştürürsünüz

Eklenti dökümantasyonunda göründüğü gibi, yapmamız gereken ilk şey, kaynak kodundaki projenin adını değiştirmek. Yani, wp-beb tüm oluşumlarını (hem büyük hem de küçük harf, kısa çizgi veya alt çizgi ile) eklentimizin adıyla (benim durumumda nelio-maps ) değiştirmeniz gerekir.

Bunun için aşağıdaki betiği kullanabiliriz:

Nelio maps int satırları 5, 8, 9 ve 10'u eklentinizin adı ne olursa olsun değiştirmeniz gerekeceğini unutmayın.

Öte yandan, eklenti belgelerini değiştirmek için de iyi bir zaman. Bir yandan README.md ve readme.txt dosyalarını yeni eklentinizin amacını yansıtacak şekilde düzenlemeniz gerekir (tabii ki temel olarak bizim standart sayfamızı kullandığınızı belirtmeyi unutmadan). Diğer yandan, WordPress'in Eklentiler ekranında eklentiyi görüntülemek için kullandığı veriler olduğundan, ana PHP dosyasındaki ilk yorumu değiştirmelisiniz.

Nelio Maps projesinin ilk taahhüdünde tüm bu değişiklikleri nasıl yaptığımı görebilirsiniz.

Eklenti Tanımlayıcısı Gereksiz Şeylerden Nasıl Temizlenir

Nelio'nun standart eklentisi varsayılan olarak birkaç bileşen içerir: (a) bir demo bloğu ve (b) bir Gutenberg eklentisi. Sadece bir blok (harita) oluşturmakla ilgilendiğimiz için, kalan her şeyi (Gutenberg eklentisi) ortadan kaldıracağız.

Bu adım oldukça basittir, çünkü temelde gereksiz şeyleri eklentiden "silmek" üzerine kuruludur. Spesifik olarak şunları yapmalıyız:

1. assets klasöründe (Gutenberg eklentisinin eklendiği yer, stili ve simgesi) görünen tüm içerikten kurtulun.
2. webpack.config.js dosyasını temizleyin, çünkü az önce kaldırdığımız assets dosyaları kullanan birkaç kural vardır.
3. Artık var olmayan bir stil sayfası ve bir JavaScript dosyası oluşturduğundan, eklentinin ana dosyasını temizleyin.

Bu taahhütte tüm değişiklikleri görebilirsiniz. Kodu tekrar derlerseniz, Demo bloğunun hala var olduğunu, ancak ekranın sağ üst köşesinde görünen Gutenberg eklentisinin olmadığını göreceksiniz.

Özet

Bugünkü yazımızda Gutenberg için nasıl eklenti oluşturulacağını gördük. Öncelikle oluşturmak istediğimiz proje tipini tanımladık ve gereksinimlerini belirledik. Daha sonra, Nelio'dan kazan plakası eklentisini yeni bir projeye uyarlamak için gereken adımları gördük. Yani, Nelio'nun standart projesini nasıl klonlayacağımızı ve özel ihtiyaçlarımızı karşılamak için nasıl temizleyeceğimizi gördük.

Gelecek hafta, bu yazının başında tanımladığımız tüm işlevleri yerine getirmesi için Demo bloğunu değiştireceğimiz bu öğreticinin ikinci bölümünde görüşmek üzere.

Unsplash'ta Brett Zeck'in öne çıkan görseli .