Gutenberg Blok Modellerinin Tam Kılavuzu (I)

Geçen hafta, Matt Mullenweg, her yıl olduğu gibi, WordPress'in mevcut durumu ve yeni özelliklerinin kısa bir özetini sunduğu Word'ün Durumu ( bu durumda sanal) sunumunu yaptı.

Matt, Gutenberg blok editörünün sağladığı deneyime bizi aşık etmeye her zamankinden daha fazla odaklandı. WordPress sürüm 5.5 ile gelen Matt'in vurguladığı yeni özelliklerden biri de blok desenler . Onlarla ilgili bu eksiksiz kılavuzu hazırlamanın ilginç olacağını düşündüm.

Kılavuz üç gönderiye bölünmüştür ve aşağıdaki konulara bakacağız:

1. Blok kalıplarına giriş
2. Sayfaya desen ekleme
3. Önceden tanımlanmış desenler ve dizinlerde bulunan diğerleri
4. Dizinlerde bulunan kalıpları sitenize ekleyin
5. Sıfırdan bir desen nasıl oluşturulur
6. Geliştirici değilseniz bir kalıp nasıl oluşturulur
7. Yeniden kullanılabilir blokları blok kalıplarına dönüştürme
8. Blok kalıpları kullanan konular
9. Resmi belgeler.

O halde, daha fazla gecikmeden başlayalım!

1. Blok Kalıplarına Giriş

Gutenberg geldiğinde, WordPress'te sahip olduğumuz klasik editörle ilgili büyük değişiklik, “blok” konseptinin tanıtılmasıydı. Her şeyin bir blok olması gerekiyordu: yazı başlığı, paragrafları, listeleri, resimleri… her biri yazı tipi boyutunu, başlığını, hizalamasını vb. ayarlamak için kendi özelleştirme özelliklerine sahip bir bloktu.

Bloklar hızla daha karmaşık hale geldi ve artık resim galerilerimiz, medya/metin bloklarımız ve hatta diğer blokları içeren bloklarımız var.

Eşzamanlı olarak, birçok geliştirici, sayfalarınızın tasarımını iyileştirebilmeniz için benzersiz özelliklere sahip geniş bir blok seti de sağlamıştır. Örneğin, Nelio'da iki görüntüyü basit bir kaydırıcıyla karşılaştırmak için Nelio Resimleri Karşılaştır'ı geliştirdik:

Eklentilerde ve temalarda bulunabilecek bir blok patlaması olmakla kalmadı, yetenekleri de WordPress'in farklı sürümleriyle gelişti. Böylece, şu anda yeniden kullanılabilir bloklar oluşturabilir ve bunlarla birlikte bir sayfa veya gönderi şablonu bile oluşturabilirsiniz.

Hızlı ve kolay bir şekilde yeniden kullanılabilen önceden tanımlanmış tasarımlara sahip olma fikrinden yola çıkarak, WordPress sürüm 5.5 ile blok kalıpları geldi. Blok kalıbı fikri çok basittir: bunlar, sayfaların ve gönderilerin oluşturulmasında kullanabileceğiniz bir grup bloktan oluşan önceden tanımlanmış bölümler veya parçalardır. Bu desenler, iki düğmeyi gösteren bir bölüm veya göz alıcı ve karmaşık tasarımlara sahip bir fiyat bölümü kadar basit bir şey olabilir.

2. Sayfaya Desen Ekleme

Temel bilgilerle başlayalım, bir sayfaya nasıl yeni bir desen eklersiniz? Çok kolay! Bloklarda olduğu gibi, bir desen eklemek için editörünüzün sol üst köşesindeki + düğmesine tıklamanız ve blok eklemek yerine Desenler sekmesini seçmeniz yeterlidir. Orada, seçebileceğiniz kalıp türlerinin, WordPress'in önceden tanımlanmış kalıplarının, yüklediğiniz temanın ve bir eklenti ile yüklediğiniz diğer kalıp türlerinin yer aldığı küçük bir açılır menü göreceksiniz.

En çok beğendiğiniz kalıbı seçin ve onu oluşturan blok setinin sayfanıza nasıl eklendiğini görün:

Deseni yerleştirdikten sonra, şimdiye kadar yaptığınız gibi blokların her birini değiştirebilirsiniz. Ayrıca o kalıbın blokları gruplandırılmışsa, grubun özelliklerini bir bütün olarak da değiştirebilirsiniz. Basit, değil mi?

3. Üçüncü Taraf Dizinlerinden Varsayılan Kalıplar ve Daha Fazla Kalıp

WordPress 5.5 sürümü, artık sayfalarınızı oluşturmak için kullanabileceğiniz bir dizi önceden tanımlanmış blok deseni ile birlikte gelir. Sitenizde mevcut olan kalıpları görmek için yukarıda bahsettiğim + butonuna tıklamanız yeterli.

Ayrıca aktif temanız kendi blok modellerini de tanımlayabilir. Örneğin, Twenty Onyedi veya Twenty Twenty-One WordPress teması bazı blok kalıpları içerir ve birkaç örnek vermek gerekirse GoDaddy's ve Genesis Blocks' da öyle.

WordPress 5.0'ın piyasaya sürülmesinden sonra bir blok patlaması yaşadık ve şimdi blok kalıpları durumunda aynı sonucu görüyoruz: daha sonra açıklayacağım gibi, blokları ve kalıpları web sitenize çok kolay bir şekilde indirebilir ve yükleyebilirsiniz. Burada, emrinizde olan iki blok ve kalıp ağına sahipsiniz, ancak eminim ki yakında daha fazlası olacak:

• Shareablock Patterns by Jeffrey Carandang – İndirip sitenize yüklemek için bir sürü blok, şablon ve desen paylaşabileceğiniz ve alabileceğiniz harika bir web sitesi.

• Munir Kamal'ın Gutenberg Hub'ı – burada bir sürü blok, şablon ve desen de bulacaksınız.

Sayfalarınıza eklemek için 1000'den fazla üçüncü taraf blok, şablon ve desen (yukarıdaki dizinlerde bulunanlar dahil) içeren bir kitaplık sunan Redux Framework eklentisi de vardır. Eklenti, 5 adede kadar ücretsiz desen indirmenize izin verir ve ardından ücretli sürüme yükseltebilirsiniz.

4. Dizinlerde Bulunan Kalıpları Sitenize Ekleyin

Daha önce de bahsettiğim gibi, Shareablock ve GutenbergHub'dan kolayca desen eklemek için Redux Framework eklentisini kullanabilirsiniz. Profesyonel bir WordPress web sitesi tasarımcısıysanız, her zaman istediğiniz kadar çok deseni çok hızlı bir şekilde bulmak kesinlikle iyi bir seçenektir. Ancak, premium bir eklenti gerektirmeden yeni blok kalıpları da kullanabilirsiniz. Nasıl olduğunu görelim.

Shareablock Kalıbı Ekle

Shareablock söz konusu olduğunda, bir kalıp (ve tabii ki bir blok veya şablon) yüklemek için web'den seçmeniz ve Şimdi İndir düğmesini tıklamanız yeterlidir.

İlk kez bir kullanıcı adı ve şifre alabilmeniz için bir e-posta adresi istenecektir.

E-postada web sitelerine giriş yapmak için bir bağlantı var; giriş yapın ve artık ilgilendiğiniz kalıbı indirebileceksiniz. Sadece onu seçin ve tekrar Şimdi İndir'e tıklayın, böylece blok kalıbı e-postanıza gelsin.

E-postada verilen bağlantıya tıkladıktan sonra, kalıbın .json dosyasını indirmek için web'e erişebilirsiniz. İndirdikten sonra, sadece WordPress blok düzenleyicisine sürükleyin ve kalıbı oluşturan tüm blokları otomatik olarak göreceksiniz.

Bu zahmetli bir süreçtir, ancak işi halleder. Ne yazık ki, blok deseninin kitaplığınızda görünmediğini fark edeceksiniz…

Bir Gutenberg Hub Kalıbı ekleyin

Gutenberg Hub'dan bir desen eklemek daha kolaydır. Daha önce olduğu gibi, önce kopyalamak istediğiniz deseni seçin.

Desenin sağında Kodu Kopyala düğmesini göreceksiniz. Panonuza kopyalamak için düğmeye tıklayın ve ardından Gutenberg düzenleyicinize yapıştırın. Bu, bloğu düzenleyicinize yapıştıracak, ancak kitaplığı atlayacaktır.

Fakat bekle! Çok hızlı değil. Ortaya çıkan blokları tamamen özelleştirmek istiyorsanız, Munir Kamal, editöre yeni bloklar ekleyen ve Gutenberg'i gelişmiş tasarım kontrolleri, yazı tipleri, simgeler, bölücüler, animasyonlar ve daha pek çok şeyle genişleten ücretsiz eklentileri EditorPlus'ı yüklemenizi önerir. özellikleri.

Bunu yaparsanız, düzenleyicinin sağ kenar çubuğunda kopyalanan desenin tasarımını değiştirmek için gelişmiş kontrollere sahip olduğunuzu göreceksiniz.

Artık blok kalıpların ne olduğunu, onları nerede bulacağınızı ve harika tasarımlar oluşturmak için bunları web sitenize nasıl ekleyeceğinizi biliyorsunuz. Kendi kalıplarınızı nasıl oluşturacağınızı öğreneceğiniz bir sonraki gönderiyi kaçırmayın!

Raul Cacho Oses tarafından Unsplash'ta öne çıkan görsel .