Gutenberg İçin İlk Bloğunuzu Nasıl Oluşturursunuz?

Ne WordPress'i seçen web sitelerinin sayısındaki sürekli artış ne de pazardaki baskın konumu WordPress geliştirme topluluğunu rahatlattı. WordPress çok kısa sürede çok şey değiştirecek. Ve WordPress'teki en büyük değişikliğin adı Gutenberg .

Bu yazıda Gutenberg hakkında konuşacağım ve size ilk bloğunuzu oluşturarak gelişimine nasıl dahil olacağınızı göstereceğim, bu konsept ile hayatını kazanmaya devam etmeyi planlıyorsan kesinlikle ustalaşman gerekecek. Gelecek yıllar için WordPress . Başlayalım!

Gutenberg nedir?

Gutenberg, WordPress için yeni içerik editörüdür. Ama bundan çok daha fazlası. Gutenberg, kullanıcıların ve geliştiricilerin WordPress ile çalışma şeklini değiştirecek.

Şimdiye kadar WordPress editörünü bir Microsoft Word belgesiymiş gibi kullandınız. Pekala, sahnede blok kavramı ortaya çıktıkça bu durum değişmek üzere. Artık WordPress içeriğiniz bloklardan oluşacak; paragraflar, resimler, başlıklar, alıntılar ve daha fazlası için bloklarınız olacak. Ayrıca geliştirici topluluğu, yeni özel bloklar ekleyen eklentiler oluşturarak çılgına dönecek.

Gutenberg'in görünümüne ilk kez bir göz atmak istiyorsanız, Gutenberg'in baş geliştiricisi Matias Ventura'nın geçmiş WordCamp US 2017'de ana özelliklerini tanıttığı aşağıdaki videoyu kaçırmayın:

Ayrıca, Gutenberg'in yalnızca WordPress'te editör olmayacağını unutmayın; gelecekteki geliştirme yinelemelerinde blok konsepti, widget'lar ve menüler gibi WordPress'teki diğer tanıdık kavramların yerini alacak. Yakında WordPress tüm bloklar olacak. İşte bu yüzden bugün size temel bir bloğun nasıl oluşturulacağını öğretmekle ilgileniyorum.

Gutenberg'i kurun ve etkinleştirin

Gutenberg'in Nisan 2018'e kadar WordPress sürüm 5.0'a dahil edilmeye hazır olacağı söyleniyor. Ancak Gutenberg'in WordPress'e girmesine kadar biraz daha beklememiz gerekecek.

Şu anda Gutenberg'i denemek istiyorsanız bir eklenti yüklemeniz gerekecek. Ancak dikkatli olun, hala geliştirme aşamasında olduğundan ve bir şeyleri bozabileceğiniz için bunu üretim WordPress kurulumunuzda yapmanızı önermiyorum. Bunun yerine bir test kurulumunda deneyin.

Sadece Gutenberg eklentisini kurun, etkinleştirin ve bir gönderiyi veya sayfayı düzenlemeye gidin. Bu arada, tüm bunlarla ilgili çok fazla tartışma olduğu için test ettikten sonra fikrinizi duymak isterim.

Gutenberg için Yeni Bir Blok Oluşturalım

Artık Gutenberg'in ne olduğunu öğrendiğine göre, hadi ellerimizi kirletelim ve bazı şeyleri kodlayalım, olur mu? Bunu yapmak için, Gutenberg için web sitemize müşteri referansı eklememize izin veren yeni bir blok oluşturacağız. Referans, kişinin bir fotoğrafını, adını ve konumunu ve ayrıca referansın metnini içerecektir. İstediğimiz nihai sonuç şöyle görünecek:

Haydi çalışmasını sağlayalım!

Eklentinin Oluşturulması ve Dosya Yapısı

Öncelikle Gutenberg'de yeni bir bloğa sahip olmak için gerekli dosyaları içeren WordPress için bir eklenti oluşturacağız. Bunu yapmak için aşağıdaki gibi bir dosya ve klasör yapısı oluşturun:

İşte bu dosyalar hakkında bilmeniz gerekenler:

• block/testomonial/index.php bloğu tanımlayan dosyaların kuyruğa alınmasından ve hem arka uçta hem de WordPress ön ucunda görüntülenmesinden sorumludur.
• block/testimonial/block.js , referans bloğunun kendisini ve onu düzenlerken ve kaydederken davranışını tanımlar. Blokla ilgili en önemli “Gutenberg ile ilgili” dosyadır.
• block/testimonial/editor.css , blogu Gutenberg düzenleyicisinde biçimlendirmek için CSS kurallarını içerir.
• block/testimonial/style.css , bir kullanıcı sitenize eriştiğinde ve nihai sonucu görüntülediğinde blogu ön uçta biçimlendirmek için CSS kurallarını içerir.
• nelio-testimonial-block.php eklentinin ana dosyasıdır, burada eklentiyi tanımlamak için gereken başlıkları tanımlarsınız ve önceki index.php dosyasını eklersiniz. Daha önce bir WordPress eklentisi oluşturduysanız, buna zaten aşinasınızdır. Burada görebilirsiniz.

Referans bloğunun tüm kodunu GitHub'da bulacaksınız.

Gerekli Dosyaları Sıraya Alın

Dosyaları ve eklentinin çalışma yapısını oluşturduktan sonra, Gutenberg'in gerektirdiği hem CSS hem de JavaScript dosyalarını kuyruğa almanız yeterlidir. Sadece block/testomonial/index.php aşağıdaki gibi görünecek şekilde ayarlayın (GitHub'da bakın):

Temel olarak iki kanca kullandığımızı unutmayın: enqueue_block_editor_assets ve enqueue_block_assets . İlk kanca, Gutenberg editöründe kullandığımız dosyaları dahil etmek içindir: block.js ve editor.css . Ayrıca, block.js dosyasının bizimki gibi bir blok oluşturmak ve onu uluslararası hale getirmek istiyorsanız gerekli olan bazı bağımlılıklara ( wp-blocks , wp-i18n ve wp-element ) sahip olduğunu belirtmekte fayda var. İkinci kanca basitçe ön uç stillerini sıraya koyar: style.css .

Yeni Bloğu Kaydet

Şimdi block.js daha yakından bakalım (GitHub'daki dosyaya bağlantı). Her şeyden önce, Gutenberg'in registerBlockType yöntemini kullanarak kolayca yapılabilen yeni referans bloğunu kaydetmemiz gerekiyor:

Bu çok fazla kod, değil mi? Ama panik yapmayın, adım adım anlatacağım. Önce bloğu benzersiz, dahili bir tanımlayıcı kullanarak adlandırıyoruz. Bizim durumumuzda bu isim 'nelio/testimonial-block' . Ardından, bloğun tüm ilgili özelliklerine sahip bir nesneyi iletiyoruz. Örneğin, bir başlık (satır 10), bir simge (satır 13), bir blok kategorisi (satır 16) ve bazı ekstra nitelikler (19'dan 47'ye kadar satırlar) vardır. Kolay değil mi? ?

Nitelikler, bloğun içereceği özelliklerdir. Bizim durumumuzda, referans bloğu aşağıdakilere sahip olacaktır:

• name : referansı yazan kişinin adı.
• pozisyon : o kişinin işi.
• referans : referans metni.
• mediaID : WordPress medya kitaplığındaki görüntünün kimliği.
• mediaURL : kişinin resminin URL'si.
• hizalama : referanstaki metnin düzenlenmesi.

Akılda tutulması gereken önemli bir şey şudur: kendisiyle ilişkilendirilmiş bir HTML öğesi olan herhangi bir öznitelik benzersiz bir seçiciye ihtiyaç duyar, yoksa Gutenberg içeriği açarken size bir hata verir. Bu nedenle, örneğin blok içinde <p> etiketleriyle ilişkili birkaç özniteliğimiz varsa, her biri için farklı bir seçicimiz olmalıdır (bunu farklı CSS sınıf adlarıyla yapabilirsiniz).

Son olarak bloğun düzenleme ve kaydetme işlevlerine sahibiz. Gelin ikisine de yakından bakalım!

düzenleme Yöntemi

İyi şeylerin başladığı yer burasıdır. edit yöntemi, bloğu Gutenberg içinde düzenlemeye hazır hale getirmenizi sağlar. Temel olarak, bu yöntem, düzenleyicide görünmesini istediğimiz tüm bileşenlerden oluşan bir React bileşeni döndürür. Şuna benziyor:

Çok karmaşık görünüyor, ama inanın bana öyle değil—bunlar yalnızca bir grup React bileşeni. Temel olarak, öğeleri el() işleviyle iç içe geçirerek HTML yapısını oluşturuyoruz. Örneğin, 79'dan 91'e kadar olan satırlara bakarsanız, referansı yapan kişinin konumunu içeren <p> etiketini tanımladığımızı göreceksiniz. Öğenin sınıfını ( nelio-testimonial-position ), gösterilecek bir yer tutucuyu ( çevrilebilir olan Position ), öğenin değerini (önceden tanımlanmış blok özniteliklerinden aldığımız) ve onChange ve onFocus tanımlarız. işlevler (özniteliğin değerini güncellemek ve odağını kontrol etmek için). Bu model defalarca tekrar eder.

Bununla birlikte, bazı ek özellikler vardır. Örneğin, 37 ila 47. satırlarda medya kitaplığının görüntü seçicisini açmak için bir düğme vardır. Bu, Gutenberg'in yeniden kullanılabilir bir bileşeni olan blocks.MediaUpload kullanır. 22 ila 30. satırlarda ayrıca başka bir yeniden kullanılabilir bileşeni yeniden kullanıyoruz: metnin hizalamasını değiştirebileceğiniz çubuk.

kaydetme Yöntemi

save yöntemi, bloğa ait bilgileri alıp veri tabanına kaydetmek için hazırlamakla görevlidir. edit yönteminden çok daha kolaydır ve aşağıdakine benzer:

İçinde iki div daha içeren bir div öğesi oluşturduğumuza dikkat edin. İlkinde referansın görüntüsü, ikincisinde ise referans metni, referansı söyleyen kişinin adı ve pozisyonu ile üç paragraf var.

Bloğu Şekillendirmek

Başka bir şey yapmazsak, editördeki sonuç pek hoş olmaz (ama hey, işe yarıyor!):

bazı gerçek veriler eklediğimizde aşağıdaki gibi görünür:

Ve gönderiyi yayınlarsak, ziyaretçilerimizin gördüğü şudur:

Bu bloğun görünümünü iyileştirmek ve daha kullanıcı dostu hale getirmek için bazı stiller eklememiz gerekiyor. Başlangıçta sıraladığımız dosyaları hatırlıyor musunuz? Aynen, editor.css ve style.css dosyalarından bahsediyoruz! Şey, her şeyin güzel görünmesi için onları düzeltmenin zamanı geldi.

Birkaç dakika sonra (GitHub'da her iki dosyanın da nihai sonucunu görüntüleyebilirsiniz), Gutenberg'deki blok sonunda şöyle görünür:

ve ön uçta şöyle görünüyor:

Kapanış Konuşmaları

Gutenberg'de yeni bir blok oluşturmak karmaşık olabilir, ancak adım adım ilerlerseniz beklenenden daha kolaydır. Temel şeyleri kodladıktan sonra, temelde yalnızca üç dosyayla çalışmanız gerekir.

Birincisi, bloğun kendisini, niteliklerini ve save ve edit yöntemlerini tanımladığınız bir JavaScript dosyasıdır. Bu en karmaşık kısımdır. Örneğimizde temel JavaScript'i kullandık, ancak React bileşenlerini tanımlamak için JSX sözdizimini kullanırsak daha kolay. Benden isterseniz, gelecek bir gönderide JSX kullanarak referans bloğunu yeniden düzenleyebiliriz. ? Bana yorum bölümünde bildirin!

Diğer iki önemli dosya, hem düzenleyicinin hem de ön ucun stillerini tanımlayanlardır: editor.css ve style.css . Birazcık CSS'nin nihai sonuçta radikal bir değişiklik yapabileceğini zaten gördünüz. Kodu test etmenizi ve geliştirmenizi tavsiye ederim.

Kaynaklar

Bitirmeden önce, Gutenberg hakkında daha fazla bilgi edinmek isterseniz sizi ilginç kaynakların bir listesiyle baş başa bırakayım. Gutenberg'in yakında geleceğini ve buna hazır olmamız gerektiğini unutmayın!

• Gutenberg el kitabı. Kaynak mükemmel. Referans olarak mükemmel.
• Zac Gordon'un Gutenberg geliştirme kursu. Adım adım kursu tercih edenlerdenseniz, bu şimdiye kadar bulabileceğiniz en eksiksiz kurstur.
• Ahmed Awais Gutenberg. Bloklarınızı geliştirmeye başlamak istiyorsanız, Ahmed Awais'ten bazı temel örnekler.
• Github'daki Gutenberg örnekleri. Gutenberg için daha fazla blok geliştirme örneği.
• Gutenberg tasarım temelleri. Tasarımcıysanız, Gutenberg'in baş tasarımcılarından Tammie Lister'in bu yazısını kaçırmayın.
• Organik Temalar öğretici. Bunu oluşturmak için kullandığım inanılmaz bir eğitim. Şiddetle tavsiye ederim!
• Gutenberg Haberleri. Gutenberg ile ilgili haberleri kaçırmak istemiyorsanız bu haber sitesini takip etmelisiniz.

Unsplash'ta Caleb Woods'un Öne Çıkan Görseli.