Gutenberg Blok Modellerinin Tam Kılavuzu (III)

Bu, aşağıdaki konuları içeren blok kalıpları hakkındaki eksiksiz kılavuzun üçüncü ve son bölümüdür:

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 nasıl blok kalıplarına dönüştürülür?
8. Blok desenleri kullanan temalar
9. Resmi belgeler.

İlk bölümde, kılavuzda yer alan tüm konuların ilk 4 noktasını gördük: blok kalıp nedir, sayfalarınıza önceden tanımlanmış kalıplar nasıl eklenir ve bazı dizinlerde bulunan kalıplar nerede bulunur ve nasıl kopyalanır . İkinci bölümde 5. maddeyi ayrıntılı olarak gördük: kodu kullanarak sıfırdan nasıl bir desen oluşturabiliriz. Ve bu son gönderide, son 4 noktaya bakacağız: geliştirici olmadan nasıl bir kalıp oluşturabiliriz, yeniden kullanılabilir blokları nasıl blok kalıplarına dönüştürebiliriz, hangi temaların blok kalıplarını kullandığını ve son olarak nerede bulabileceğinizi desenler hakkında resmi belgeler.

6. Geliştirici Değilseniz Bir Model Nasıl Oluşturulur

Kodlu bir kalıp oluşturmak için izlemeniz gereken adımları bir önceki gönderide görmüş olsak da, bu noktada geliştirici olmadan kalıp oluşturabileceğinizi göreceğiz. Ve evet, bunu bir eklenti ile yapacağız. Aslında, kalıp oluşturmak için birden fazla eklenti var:

• Justin Tadlock'tan Blok Patter Oluşturucu,
• BlockMeister – BlockMeister tarafından Blok Patter Oluşturucu,
• Sayfa Oluşturucu Gutenberg Blokları – GoDaddy'den CoBlock'lar

Üçü de bazı küçük farklılıklarla benzer şekilde çalışır. Bunlardan herhangi birini yükledikten sonra, yeni bir kalıp oluşturabilmeniz ve oluşturulan kalıpların listesini yönetebilmeniz için WordPress yönetim menüsünde yeni seçenekler görünür.

• 

• 

• 

Block Patterns Builder eklentisi durumunda (yani soldaki resim), Block Patterns menüsünün iki seçeneği vardır: biri yeni bir model oluşturmak için, diğeri ise mevcut kalıpları listelemek ve düzenlemek için. BlockMeister eklentisi durumunda (ortadaki resimde gösterilmiştir), model kategorilerini yönetmek için üçüncü bir seçenek de ekler. Ve CoBlock durumunda (son resimde gösterilmiştir), menüsü Görünüm altında görünür.

Her üç eklentide de yeni bir kalıp oluşturmak, herhangi bir sayfayı veya gönderiyi düzenlemek için kullandığınız düzenleyicinin aynısını açar. Sadece kalıba bir isim verin ve olmasını istediğiniz blokları tanımlayın. Deseniniz hazır olduğunda, kaydedin.

Önceki ekran görüntüsü, BlockMeister eklentisi tarafından sağlanan blok desen düzenleyicisini gösterir. Gördüğünüz gibi, sağ kenar çubuğunda bir dizi ek özellik sunuyor: isim, bilgi, açıklama, desenin genişliği ve kategoriler. Justin Tadlock eklentisi ise kategori eklemenize izin vermiyor. Ayrıca CoBlocks, kalıpların ek özelliklerini eklemenize de olanak tanır.

Üç eklentiden herhangi birinde, kalıbınızı kaydettikten sonra, ihtiyaç duyduğunuzda ekleyebilmeniz için yazı ve sayfa düzenleyicideki + düğmesine tıklayarak kullanılabilir hale gelecektir.

Gördüğünüz gibi, doğru eklentiyi kullanıyorsanız, sayfa tasarımlarınızda olmasını istediğiniz kalıpları oluşturmak çok kolaydır.

7. Yeniden Kullanılabilir Blokları Blok Modellerine Nasıl Çevirirsiniz?

Gutenberg'i bir süredir kullanıyorsanız ve onunla sayfalar tasarlıyorsanız, bahse girerim belirli bir tasarımı birden çok sayfada çoğaltmak için yeniden kullanılabilir bloklar da oluşturmuşsunuzdur. En azından yaptım! Kalıpları ilk duyduğumda, yeniden kullanılabilir bloklarla hemen hemen aynı olduklarını düşünmüştüm… ama değiller: iki kavram arasında bazı önemli farklılıklar var.

Yeniden kullanılabilir blok, içeriği hepsinde aynı olan farklı sayfalara eklenebilen bir bloktur (veya bloklar grubudur). Yani, daha sonra değiştirirseniz, tüm örneklerinin güncellenmesi gerekir. Bu nedenle, yeniden kullanılabilir bir bloğun diğerlerinden farklı olmasını istiyorsanız, önce onu normal bir bloğa dönüştürmeniz gerekir.

Öte yandan bir blok deseni özelleştirilmek üzere tasarlanmıştır – yerleştirdikten sonra ince ayar yapmanız gereken temel bir tasarım görevi görür. Seçenekler elbette sınırsız. Modelin fikri, blokları çekici görünmeleri için nasıl birleştirebileceğiniz konusunda bir başlangıç ​​noktası sağlamaktır.

Onları normal bloklara dönüştürmek ve daha sonra bunları uygun şekilde özelleştirmek düşüncesiyle yeniden kullanılabilir bloklar oluşturmuş olsaydınız, bu blokları blok desenlerine dönüştürmek daha mantıklı olur. Bunu nasıl yapabiliriz?

JB Audras'ın Yeniden Kullanılabilir Blok Genişletilmiş eklentisi bize bu işlevselliği sağlar. Nasıl yapacağımıza bir bakalım.

Eklentiyi kurduktan sonra, yeniden kullanılabilir blokları yönetmek için bir menü seçeneği görünecektir. Tüm Yeniden Kullanılabilir Bloklar'a tıklarsanız, tanımladığınız blokların listesini görürsünüz.

Yukarıdaki resimde görebileceğiniz gibi, yeniden kullanılabilir blokların listesi iki blok gösterir ve her biri için bunların nerede kullanıldığını, bunları kullanabilmeniz için kısa kodu ve PHP işlevini ve bir düğmeyi gösterir. bir blok desene dönüştürebilirsiniz.

Blok kalıbına dönüştür düğmesine tıkladıktan sonra, kalıp sizin için oluşturulmuş olacak ve düzenleyicinizde Yeniden kullanılabilir bloklardan dönüştürülmüş kategorisinde mevcut olacaktır.

8. Blok Kalıpları Kullanan Temalar

Bu yazının yazıldığı sırada, WordPress.org tema dizininde özel blok desenlerine sahip 14 tema zaten var ve liste hızla büyüyor.

• WordPress.org'dan Yirmi Yirmi Bir Sürüm 1.0
• Covertnine tarafından C9 Başlangıç ​​Sürümü 2.4.4
• Covertnine tarafından C9 Çalışma Sürümü 2.3.1
• Automattic tarafından Seedlet Sürüm 1.1.2
• Exstheme tarafından ExS Sürüm 0.9.0
• uxl tarafından Cordero Sürüm 1.2.2
• Dinev Dmitry tarafından Bigwigs Sürüm 0.7.1
• emülsiyon Sürüm 1.6.9, nobita
• WordPress.org'dan Twenty Twenty Versiyon 1.6
• VW THEMES tarafından VW Sağlık Koçluğu Sürüm 0.6.5
• WordPress.org tarafından hazırlanan Yirmi Ondokuz Sürüm 4.9.6
• Dinev Dmitry tarafından yazılanlar Sürüm 1.3.0
• WordPress.org'dan Yirmi Onyedi Sürüm 2.5
• WordPress.org'dan Yirmi On Altı Sürüm 2.3

Bir tema geliştiricisiyseniz ve WordPress 5.5'te gelen önceden tanımlanmış blokları (çekirdek blok kalıpları) ortadan kaldırmak istiyorsanız, bunu aşağıdaki kodla yapabileceğinizi belirtmek isterim:

 remove_theme_support( 'core-block-patterns' );

9. Resmi Belgeler

Son olarak, burada blok kalıpları hakkında bazı faydalı bağlantılarınız var:

• Son Kullanıcı için – Kalıpların ne olduğunu, bunlara nasıl erişileceğini, bunları yazılara ve sayfalara nasıl ekleyeceğinizi ve bunları içeriğiniz için nasıl özelleştireceğinizi anlamak için kalıpları engellemeye yönelik tanıtım videosu. Bu video, WordPress Eğitim Ekibi tarafından yayınlanan bir atölye çalışmasıdır.
• Son Kullanıcı için – Dokümantasyon Ekibi tarafından oluşturulan Blok Model Dokümantasyonu.
• Geliştiriciler için – Gutenberg Ekibi tarafından yayınlanan ve bir önceki gönderide size anlattığım Block API belgelerindeki Blok Kalıpları sayfası.

Ve bu kadar! Umarım bu kılavuzu faydalı bulmuşsunuzdur. Herhangi bir bilginin eksik olduğunu düşünüyorsanız, aşağıdaki yorumlar bölümünde bana bildirmekten çekinmeyin.

Unsplash'ta Patrick Hendry'nin öne çıkan görseli .