Gutenberg için ilk bloğunuzu nasıl yapabilirsiniz?
WordPress’i seçen web sitelerinin sayısındaki sürekli büyüme ve piyasadaki baskın konumu WordPress geliştirme topluluğunu rahatlatmaz. WordPress çok kısa sürede çok değişecek. Ve WordPress’teki en büyük değişikliğe Gutenberg denir. Bu makalede Gutenberg hakkında konuşacağım ve önümüzdeki yıllar için WordPress ile geçimini sağlamaya devam etmeyi planlıyorsanız ustalaşmanız gereken bir kavram olan ilk bloğunuzu oluşturarak gelişimine nasıl katılacağınızı göstereceğim. Başlayalım! Gutenberg nedir? Gutenberg, WordPress için yeni bir içerik editörüdür. Ama bu bundan daha fazlası. Gutenberg, kullanıcıların ve geliştiricilerin WordPress ile çalışma şeklini değiştirecek.
Şimdiye kadar WordPress düzenleyicisini bir Microsoft Word belgesimiş gibi kullandınız. Bu, blok konsepti olay yerinde göründüğünde değişecektir. Artık WordPress içeriğiniz bloklardan oluşacak – paragraflar, resimler, başlıklar, alıntılar ve daha fazlası için bir bloğunuz olacak. Buna ek olarak, geliştirici topluluğu yeni özel bloklar ekleyen eklentiler yaparak delirecek. Gutenberg’in görünümüne bakmak istiyorsanız, Gutenberg’in ana geliştiricisi Matias Ventura’nın 2017 WordCamp US 2017 sırasında ana özelliklerini gösterdiği aşağıdaki videoyu kaçırmayın:
Ayrıca, Gutenberg’in sadece WordPress’te bir editör olmayacağını unutmayın – gelecekteki gelişim yinelemelerinde, blok kavramı WordPress’te widget ve menüler gibi diğer tanıdık kavramların yerini alacaktır. Yakında WordPress tüm bloklar olacak. Bu yüzden size bugün nasıl temel bir blok yapacağınızı öğretmekle ilgileniyorum. Gutenberg’i yükleyin ve etkinleştirin Gutenberg’in Nisan 2018’de WordPress sürüm 5.0’a dahil edilmeye hazır olacağı söyleniyor. Ancak Gutenberg WordPress’e girene kadar biraz daha beklememiz gerekiyor. Şu anda Gutenberg’i denemek istiyorsanız, eklentiyi yüklemelisiniz. Ancak dikkatli olun, WordPress üretim kurulumunuzda bunu yapmanızı tavsiye etmiyorum, çünkü hala geliştiriliyor ve bir şeye zarar verebilirsiniz. Bunun yerine test kurulumunu deneyin. Gutenberg eklentisini yükleyin, etkinleştirin ve yayınları veya sayfaları düzenlemeye gidin. Bu arada, test ettikten sonra fikrinizi duymak istiyorum, çünkü tüm bunlarla ilgili birçok tartışma var mı? Gutenberg’in ne olduğunu bildikten sonra Gutenberg için yeni bir blok oluşturalım, ellerimizi kirletelim ve birkaç şeyi kodlayalım, ha? Bunu yapmak için, Gutenberg için web sitemize müşteri referansları eklememizi sağlayan yeni bir blok oluşturacağız. Tanıklık, kişinin bir fotoğrafını, adı ve pozisyonunu ve ifadenin metnini içerecektir. İstediğimiz nihai sonuç şöyle görünecek:
Block/TestImonial/Editor.css, Gutenberg editöründe blog stillerini düzenlemek için CSS kuralları içerir.
Block/TestImonial/Style.css, kullanıcılar sitenize eriştiğinde ve nihai sonuçları gördüğünde ön uçta blogları düzenlemek için CSS kuralları içerir.
Nelio-Testimonial-Block.php, eklentiyi açıklamak için gereken başlığı belirlediğiniz ve önceki dizin.php dosyasını ekleyeceğiniz eklentinin ana dosyasıdır. Daha önce bir WordPress eklentisi yaptıysanız, buna aşina olmalısınız. Burada görebilirsiniz.
GitHub’daki tüm referans blok kodunu bulacaksınız.
Bir dosya ve eklenti yapısı işlevi oluşturduktan sonra gerekli olan enqueue dosyaları, yalnızca Gutenberg’in ihtiyaç duyduğu CSS ve JavaScript dosyalarını sıralamanız gerekir. Block/testomonial/index.php’yi aşağıdakilere benzeyecek şekilde değiştirin (GitHub’a bakınız):
Temel olarak iki kanca kullandığımızı unutmayın: enqueue_block_ededor_asses ve enqueue_block_assests. İlk kanca, Gutenberg Editor: Block.js ve Editor.css’de kullandığımız dosyayı dahil etmektir. Block.js dosyasının, bizimki ve uluslararası gibi bir blok yapmak istiyorsanız gerekli olan birkaç bağımlılık (WP-Blocks, WP-I18N ve WP-Element) bulunduğuna dikkat edilmelidir. İkinci kanca sadece ön uç stilini bekliyor: style.css. Yeni bir blok kaydedin Block.js (GitHub’daki dosyaya bağlantı). Her şeyden önce, Gutenberg RegisterBlockType yöntemi kullanılarak kolayca yapılabilecek yeni bir referans bloğu kaydetmeliyiz:
Bu çok fazla kod, değil mi? Ama panik yapmayın, adım adım açıklayacağım. İlk olarak, benzersiz bir dahili kimlik kullanarak bloğu adlandırırız. Bizim durumumuzda, bu isim ‘nelio/referans bloğu’. Ardından, nesneyi yalnızca ilgili tüm blok özellikleriyle geçirmemiz gerekir. Örneğin, başlıklar (satır 10), simgeler (satır 13), blok kategorileri (satır 16) ve birkaç ek özellik (19-47. Satırlar) vardır. Kolay değil mi? ?
Nitelikler, blok tarafından içerilecek özelliklerdir. Bizim durumumuzda, referans bloğu aşağıdakilere sahip olacaktır:
İsim: Bir referans yazan kişinin adı.
Pozisyon: Kişinin işi.
Referanslar: Test referansları.
MediaID: WordPress Media Kütüphanesinde Kimlik Görüntüsü.
MediaUrl: Kişinin URL resmi.
Hizalama: Metnin referanstaki bileşimi.
Hatırlanması gereken önemli bir şey aşağıdaki gibidir: onunla ilgili HTML öğeleri olan herhangi bir özellik benzersiz seçmen gerektirir veya Gutenberg, içerik açarken size bir hata verecektir. Yani, örneğin blokta
ile ilgili birkaç özelliğimiz varsa, her özellik için farklı seçmenlere sahip olmalıyız (bunu farklı bir CSS sınıfının adıyla yapabilirsiniz). Son olarak bir düzenleme ve blok depolama işlevi var . İkisine daha yakından bakalım! Bu düzenleme yöntemi, iyi şeylerin başladığı yerdir. Düzenleme yöntemi, Gutenberg’de düzenlenecek bir blok hazırlamanızı sağlar. Temel olarak, bu yöntem, editörde görüntülemek istediğimiz tüm bileşenler tarafından oluşturulan reaksiyon bileşenini döndürür. Bu şuna benziyor:
Çok karmaşık görünüyor, ama inan bana, hayır – onlar sadece bir reaksiyon bileşenleri koleksiyonu. Temel olarak, EL () işleviyle öğeleri netleştirerek HTML yapıları yapıyoruz. Örneğin, 79 ila 91 satırlarına bakarsanız, referans yapan kişinin konumunu içeren
etiketini tanımladığımızı göreceksiniz. Element sınıfını (nelio-testoniyal konum), görüntülenecek yer tutucuları (çevrilebilen pozisyonlar), öğe değerlerini (önceden belirlenmiş blok özelliklerinden aldığımız) ve onchange ve onfocus işlevini tanımlarız ( öznitelik değeri ve odağı kontrol edin). Bu desen tekrar tekrar tekrarlanır.
Ancak, bazı ek özellikler vardır. Örneğin, 37 ila 47. satırda medya kütüphanesinden bir resim seçmen açmak için bir düğme vardır. Bu bloklar kullanır. 22 ila 30 sıralarında, yeniden kullanılabilecek diğer bileşenleri de yeniden kullanıyoruz: Çubuk metin seviyesini değiştirebilirsiniz. Kaydet Yöntemi Kaydet Yöntemi, bloktan bilgi almak ve veritabanında depolanmaya hazırlamakla görevlendirilir. Bu, düzenleme yönteminden çok daha kolaydır ve aşağıdakilere benziyor: İçinde iki div daha içeren bir div öğesi oluşturduğumuzu unutmayın. Birincisinin tanıklık resmi ve ikincisi tanıklık metni, ifadesi ve pozisyonunu söyleyen kişinin adı ile üç paragraftır.
Bloklar Düzenleme Başka bir şey yapmazsak, editördeki sonuçlar çok iyi değildir (ama hey, başarılı!):
Editör için CSS stili olmadan referansları engelleyin (boş.css editörü). bazı gerçek veriler eklediğimizde aşağıdaki gibi görülür:
Bloğa içerik eklersek, resmin her şeyin taşmasını sağladığını görürüz. CSS kuvveti belirtilmedi. Ve yayın yayınlarsak, ziyaretçilerimiz böyle görüyor:
Ziyaretçilerimizin gördükleri ilk maketimizde istediğimiz şey değil.Style.css boş olduğu için CSS kullanmalıyız.Bu bloğun görünümünü iyileştirmek ve daha kullanıcı dostu hale getirmek için bazı stiller eklememiz gerekir.Başlangıçta sıraya aldığımız dosyaları hatırlıyor musunuz?Kesin olarak, Dosya Editor.css ve Style.css hakkında konuşuyoruz!Bu, her şeyin güzel görünmesi için değiştirmenin zamanı geldi.Birkaç dakika sonra (GitHub’daki iki dosyanın nihai sonuçlarını görebilirsiniz), Gutenberg’deki blok nihayet şöyle görünüyor: editöre CSS ekleyerek.Ve bu ön uçtaki görünüm:
Web sitemizi ziyaret edenler, stil.css’ye uygun CSS stilini eklediğimizde blokları doğru bir şekilde göreceklerdir. Kapanış kelimesi, Gutenberg’de yeni bir blok karmaşık olabilir, ancak adım adım yaparsanız beklenenden daha kolay olabilir. Temel şeyleri kodladıktan sonra, temel olarak sadece üç dosya ile çalışmanız gerekir. Birincisi, bloğun kendisini, özniteliklerini ve Kaydet ve Düzenleme yöntemini belirlediğiniz JavaScript dosyasıdır. Bu en karmaşık kısım. Örneğimizde, temel JavaScript kullandık, ancak React bileşenini tanımlamak için JSX sözdizimini kullanmamız daha kolay olacaktır. İsterseniz, bir sonraki yazıda JSX kullanarak referans bloğunu geliştirebiliriz. ? Bana yorumlar bölümünde söyle! Diğer iki önemli dosya, editör ve ön uç stillerini tanımlayanlardır: editor.css ve style.css. Küçük bir CSS’nin nihai sonuçta radikal değişiklikler sağlayabileceğini gördünüz. Kodu test etmenizi ve düzeltmenizi öneririm. Kaynaklar Bitirmeden önce, Gutenberg hakkında daha fazla bilgi edinmek istiyorsanız size ilginç kaynakların bir listesi vereyim. Gutenberg’in yakında geleceğini ve buna hazır olmalıyız! Gutenberg El Kitabı. Kaynak mükemmellik. Referans olarak mükemmel.
Gutenberg Zac Gordon Geliştirme Kursu. Adım adım kursları tercih edenlerden biriyseniz, bu şimdiye kadar bulacağınız en eksiksiz kurstur.
