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

Gutenberg için bir harita eklentisinin nasıl oluşturulacağına dair üçüncü ve son gönderiye hoş geldiniz. Son gönderimiz oldukça yoğundu ve birçok farklı şey gördük: bloğumuzun sahip olduğu özellikler, bir React bileşeni kullanarak bir haritanın nasıl ekleneceği, WordPress bileşenlerinin nasıl kullanılacağı ve hatta kullanıcı arayüzünü tanımlamak için kendi bileşenlerimizi nasıl oluşturacağımız vb. Bugün daha basit bir şeyi tartışacağız.

Bu yayında, Google Haritalar haritasının ön uçta nasıl oluşturulacağını göreceğiz. Bunu yapmak için save.js daha yakından bakacağız ve her şeyin beklendiği gibi çalışması için eklentide birkaç değişiklik yapacağız. Bu son gönderiyi, şimdiye kadar belirsiz olabilecek herhangi bir nokta hakkında yorum yapmak için de kullanacağım.

Harita Bloğumuzu Ön Uçta Görüntülemek İçin Nasıl Kaydedebiliriz?

Haritayı ön uçta görüntülemek için önce ön uçta oluşturulmasını istediğimiz HTML'yi tanımlamamız gerekir. Bir Gutenberg bloğunda bu, registerBlockType işlevinin save yöntemi tanımlanarak elde edilir. Bir önceki gönderide bahsettiğim gibi, bu yöntem package packages/blocks/nelio-maps/ save.js dosyasında tanımlanmıştır.

Yine, bu anlaşılması son derece basit bir işlevdir:

• 7. satırdan 25. satıra kadar bloğumuzla ilgili tüm öznitelikleri çıkarıyoruz. Yani, attributes.js tanımladığımız ve haritamızın görünümünü değiştiren tüm öznitelikler.
• 41. satırda, blok için bir konteyner görevi görecek div açıyoruz.
• 47. satırda haritanın kendisini saracak bir div buluyoruz. Çok ilginç bir şeye bakın: bu div , tanımında tüm attributes nesnesini içerir. Bu, niteliklerdeki tüm attributes (örneğin, 'data-lat': lat of line 34) HTML nitelikleri olarak oluşturulacağı anlamına gelir (örneğin, lat değişkeninin 2.48171 olduğu varsayılırsa, lat son HTML'de data-lat="2.48171" olarak görünecektir data-lat="2.48171" ).
• 49. satırda, işaretçinin koordinatlarını içeren küçük bir div eklenir.
• 59. satırda, edit.js içinde tanımladığımız RichText içeriği.

Bu nedenle, özünde, save yöntemi, bir haritayı ön uçta işlemekle ilgili tüm nitelikleri içeren bir HTML oluşturur. Peki, ne yanlış gidebilir? Pekala, eğer ön ucu şimdi açsaydınız, tüm göreceğiniz şu olurdu:

Yalnızca bazı RichText içeriğine sahip boş bir blok. Ne oldu?

Gutenberg Bloğumuzla Oluşturulan Bir Google Haritasını Oluşturmak için Eklentiyi Nasıl Değiştirirsiniz?

Bir Google Haritasını ön uçta görüntülemek için Google Haritalar kitaplığını ve onu haritayı oluşturmak için kullanan bir komut dosyasını yüklememiz gerekir. Bu son derece basittir ve daha önce WordPress için geliştirdiyseniz, bunu nasıl yapacağınızı bilmelisiniz.

Yapmamız gereken ilk şey, HTML'ye koyduğumuz verileri kullanarak bir Google Haritası oluşturabilecek bir komut dosyası oluşturmak. Bu komut dosyası, assets/src/js/public/public.js . Nasıl çalıştığını anlamak için daha yakından bakın:

• 9. satırda bir harita içeren tüm düğümleri ararız ( save yöntemine dahil ettiğimiz sınıflardan birine göre filtreleyerek) ve her biri için initGoogleMap yöntemini çağırırız.
• Bu yöntem, işini yapmak için iki işleve dayanır. Bir yandan, satır 55'in extractMarkerPositionIfAny işleviyle olası bir işaretçinin koordinatlarını çıkarır ve diğer yandan, haritanın tüm özelliklerini (merkez koordinatları, yakınlaştırma düzeyi, görünür düğmelerin listesi vb.) 26. satırdan function extractMapOptions . Her iki işlevin de, save yöntemine koyduğumuz data-something özniteliklerinin değerlerini okumaya adandığını unutmayın.
• Son olarak, bir harita oluşturduk (satır 18) ve Google Haritalar kitaplığı tarafından sağlanan sırasıyla Map ve Marker sınıflarını kullanarak bir işaretleyici (satır 21) ekledik.

Artık bu komut dosyasına sahip olduğumuza göre, projemizde yalnızca iki ek ince ayara ihtiyacımız var:

• Bir yandan, webpack.config.js web paketi yapılandırma dosyasını yeni oluşturduğumuz webpack.config.js betiğini aktaracak şekilde public.js . Kulağa zor gelebilir, ama aslında oldukça kolay: sadece bu dosyada bu dosyada yaptığım değişikliklere bakın.
• Öte yandan, bu yeni komut dosyasını (ve Google Haritalar kitaplığını!) ön uçta sıraya koymak için eklentiyi değiştirmemiz gerekiyor. Yine, bu taahhütte görebileceğiniz çok basit bir değişiklik.

Tüm bu değişiklikler yapıldıktan sonra, bu nihai sonuçtur:

Ne düşündüğünüzü biliyorum: tüm bunları elle yapmak yerine neden edit.js kullandığımız React bileşenini kullanmadık? Bu biraz zaman kazandırmaz mı?

Aslında, bir önceki gönderide gördüğümüz React bileşenini kullanmak bizi biraz beladan kurtarabilirdi... ama bir sorun var: React'e bağlı, yani kullanmak için React'i ön uçta yüklememiz gerekecekti. Ve bu çok fazla gibi görünüyor, sence de öyle değil mi?

Bekleyen Ayrıntılar

Son olarak, çok önemli olan bir konudan kısaca bahsetmeme izin verin, aksi takdirde eklentiniz çalışmaz: Google Haritalar API Anahtarı.

Google Haritalar API Anahtarı

Google Haritalar'ı kullanmak için bir API anahtarına sahip olmanız gerekir. Nasıl elde edileceği, Antonio'nun bize birkaç gün önce açıkladığı bir şey. Şimdi, onu nasıl kullanacağız?

Bir seçenek, eklentideki API anahtarımızı kodlamak olacaktır. Eklentiyi kullanacak tek kişi sizseniz, bu işe yarar. Ancak eklentinizi gerçek kullanıcılara dağıtmayı planlıyorsanız, bu çok kötü bir fikirdir, çünkü tüm Google hizmetleri ücretsiz değildir - bazıları ödenir ve herkes anahtarınızı kullanırsa maliyetler oldukça pahalı olabilir.

Bu durumlarda ne yapılmalı? Fikir çok basit: insanların kendi API anahtarlarını girmeleri için eklentiye bir yapılandırma seçeneği eklemeniz yeterli.

Bizim durumumuzda, API anahtarı olmayan bir harita eklerseniz, aşağıdaki uyarı mesajını göreceksiniz:

API anahtarını eklemeniz için sizi teşvik ediyor.

Genellikle, eklentinizin ayarlarını yönetmek için özel bir sayfa oluşturursunuz. Ancak, oluşturduğumuz kadar kolay ve basit bir eklenti için, farklı bir çözüm seçmemizin daha kolay olacağını düşündüm.

WordPress'te /wp-admin/options.php şuna benzeyen bir seçenekler ekranı vardır:

WordPress'te kayıtlı ve wp_options tablosunda bulunan tüm seçenekleri (neredeyse) düzenlemek için bir tür "güzel arayüz". Bu nedenle, eklentimizin tek yapması gereken, bu seçeneğin her zaman veritabanında mevcut olduğundan emin olmaktır (henüz bir API anahtarı ayarlanmamış olsa bile) ve kullanıcının bizim hiçbir şey yapmadan API anahtarını yapıştırması için "güzel bir arayüze" sahip olacağız. !

Bunu başarmak için, anahtar seçeneğinize her zaman bir değer ayarlayan bir işlevle (satır 134) init kancasını (bu işlemin 73. satırına bakın) kullanın. Seçenek henüz mevcut değilse, bu işlev, değerini varsayılan değere (boş bir dize) ayarlayacak ve seçeneği kaydedecektir. Zaten mevcutsa, yeni değer zaten sahip olduğumuzla aynı olacaktır ve bu nedenle güncelleme işlevi hiçbir şey yapmayacaktır. Akıllı ve etkili bir tüyo!

Özetle

Bu yazıda projemizdeki son engeli aştık: harita nasıl kaydedilir ve ön uçta nasıl görüntülenir. Temel olarak ihtiyacımız olan tek şey, haritayla ilgili tüm bilgileri (merkezi, düğmeleri görüntüleme seçenekleri, işaretçi vb.) içeren bir div ve onu ön uçta yeniden oluşturmak için küçük bir komut dosyasıydı .

Umarım bu eğitim sizi memnun etmiştir ve kendi projelerinizi üstlenmek için bir örnek teşkil eder. Gördüğünüz gibi, Nelio'da oluşturduğumuz gibi iyi bir temele sahip yeni bir projeye Gutenberg geliştirme için kazan plakası ile başlarsanız, fikirlerinizi gerçek projelere dönüştürmek çok daha kolay olacaktır.

Herhangi bir sorunuz varsa, aşağıdaki yorumlar bölümünde bize bildirin. İyi şanlar!

Artem Bali tarafından Unsplash'ta öne çıkan görsel .