Gutenberg Blok Kalıpları İçin Tam Kılavuz (II)

Bu gönderi, aşağıdaki noktaları içeren Gutenberg Blok Kalıpları Üzerine Tam Kılavuzun ikinci kısmı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ı blok kalıplarına dönüştürme
8. Blok kalıpları kullanan konular
9. Resmi belgeler.

İlk bölümde, kılavuzda kapsanan 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ılarında mevcut olan kalıplar nerede bulunur ve nasıl kopyalanır? dizinler. Orada, düzenlemekte olduğumuz sayfaya bir desen yapıştırabileceğimizi gördük, ancak ileride kullanmak üzere desen kitaplığımızda saklanmayacak.

Gutenberg kalıp kitaplığımıza yeni bir kalıp eklemek istiyorsak, söz konusu kalıbı oluşturup kaydetmemiz gerekir. Bazı temel kodlama becerilerine ihtiyacınız olsa da oldukça basittir. Durumunuz bu değilse, endişelenmeyin, daha sonra aynı sonucu herhangi bir kodlama gerektirmeden nasıl elde edeceğinizi öğreneceğiz.

5. Yeni Bir Kalıp Oluşturun

Bir blok kalıbı oluşturmak için Blok Kalıbı API'sini kullanmanız gerekir. Özellikle, PHP işlevi register_block_pattern() . Basit bir örnekle izlememiz gereken farklı adımları kısaca görelim.

Ama başlamadan önce bir dip not ekleyeyim. WordPress'i kod parçacıkları kullanarak özelleştirirken, her zaman kendinize söz konusu parçacığı nereye yazmanız gerektiğini sormalısınız. Çoğu öğretici, işi halletmek için en kolay çözüm olduğu için aktif temanızın functions.php dosyasını önerir, ancak David bu gönderiyi tüm özelleştirmelerinizi takip etmek için bir eklentinin nasıl oluşturulacağı hakkında yazdı ve bunun daha iyi bir çözüm olduğunu savundu. .

Şimdi, blok desenleri ne olacak? Temanıza yeni bir blok kalıbının tanımını ekleyebilirsiniz (Twenty Twenty-One gibi bazı temalar zaten kendilerininkini içerir) veya bunu özel bir eklentiye ekleyebilirsiniz. Her iki çözümün de savunucularını ve kötüleyicilerini bulacağınızdan eminim, bu yüzden ihtiyaçlarınıza daha uygun olanı seçin.

#1 Deseninizi Oluşturacak Blokları Tasarlayın

Bir önceki gönderide bahsettiğim gibi, bir kalıp, istediğiniz gibi gruplandırılmış bir dizi bloktur. Bir ürünün temel özelliklerini açıklayan bir bölüm oluşturmak için kullanabileceğim bir blok kalıbı oluşturmak istediğimi varsayalım.

Bunu yapmak için, “Kalıp Oluşturma” başlıklı bir sayfada, “6 Özellik Bölümü” başlıklı bir başlık bloğu oluşturarak başlıyorum ve ardından 3 sütunlu bir blok ekliyorum.

İlk blokta bir resim ve altına özelliğin başlığını ve açıklamasını ekliyorum.

Resmi, başlığı ve açıklamayı sonraki iki blokta kopyalıyorum. Ve son olarak, altı özelliğin açıklamasını içerecek bir bölümüm olması için bu satırı çoğaltıyorum.

Tabii ki, bir blok deseni oluşturmak sadece bir kereden fazla kullanacağınızı düşünüyorsanız mantıklıdır.

#2 Blokların İçeriğini Kopyalayın

Blok setini tanımladıktan sonra, onları sadece fare ile seçmemiz ve araç çubuğunda Kopyala üzerine tıklamamız yeterlidir.

#3 Kopyalanan HTML içeriğinden kaçın

Sorunlardan kaçınmak için, satır sonları, sekme karakterleri vb. gibi özel karakterlerin bilgisayar tarafından anlaşılabilmesi için yeni kopyaladığımız metinden kaçmamız gerekir. Onlinestringtools.com veya JSON Escape/Unescape gibi çevrimiçi araçları kullanarak bir metinden kolayca kaçabilirsiniz: daha önce kopyaladığınız kodu yapıştırmanız yeterlidir ve doğru şekilde çıkış yapılmış bir metin elde edersiniz.

#4 Kalıbı Kaydet

Bu noktada geriye sadece register_block_pattern() fonksiyonunu kullanmak kalıyor. Bu işlev iki argüman alır: kalıbın adı ve bir dizi özellik. Bu yazının sonunda, bir modelde tanımlayabileceğiniz özellikler hakkında size daha fazla ayrıntı vereceğim, ancak önce bir tane oluşturmak için gerekli adımları görelim.

Bu bizim örneğimiz:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

Önceki snippet'te görebileceğiniz gibi, önce modelimizi tanımlamak için benzersiz bir ad belirliyoruz ( ruth-gutenberg-blocks-patterns/section-with-six-features ) ve ardından birkaç özelliğe sahip bir dizi belirliyoruz: title ("6 özellikli Bölüm"), kalıbın bir kullanıcısı ve content kendisini görecektir. content , önceki adımda kaçtığımız metindir.

#5 Kayıtlı Modelle Bir Eklenti Oluşturun

Düzenleyicimizde kalıbı kaydettirmek için bir eklenti oluşturabilir veya aktif temamıza koyabiliriz. Bir eklenti oluşturursanız, ihtiyacınız olan şey budur:

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

Ve işte! Şimdi düzenleyicimizi yenilersek (elbette eklentiyi etkinleştirdiğinizi varsayarsak), yeni kalıbı göreceksiniz:

ama ne yazık ki Uncathegorized altında listeleniyor. Bunun nedeni, bloğumuzun mevcut kategorilerden herhangi birine mi yoksa yeni bir kategoriye mi ait olduğunu belirtmemiş olmamızdır.

#6 Yeni Bir Model Kategorisi Ekleyin

Mevcut kategorilere yeni blok desenleri ekleyebilir veya register_block_pattern_category işlevini kullanarak tamamen yeni bir kategori oluşturabilirsiniz. Bu işlev ayrıca iki argüman alır: kategorinin adı ve bir dizi seçenek. Tanıdık geliyor?

İşte bir örnek:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

Yeni kategori hazır olduğunda, bu yeni kategori altında listelenmesi gerektiğini açıkça belirtmesi için blok modelinizi güncellemeyi unutmayın:

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

İşte buyur:

Artık yeni ürünümüzün lansmanı için yeni bir sayfada oluşturulan bölümde de görebileceğiniz gibi, oluşturduğumuz herhangi bir yeni sayfaya ekleyebilir ve ardından uygun gördüğümüz değişiklikleri yapabiliriz:

Blok Desen Özellikleri

Örneğimizde bir blok kalıbının title , content ve categories özelliklerini tanımladık, ancak daha fazlası var. register_block_pattern işlevini açıklayan belgelerde ayrıntıları bulacaksınız, ancak işte bir özet:

• title (gerekli): kalıbın başlığı.
• content (gerekli): kalıbın içeriği.
• description : Yerleştiricideki deseni açıklamak için kullanılan görsel olarak gizli bir metin. Açıklama isteğe bağlıdır, ancak başlık kalıbın ne yaptığını tam olarak açıklamadığında şiddetle tavsiye edilir.
• categories : blok kalıplarını gruplamak için kullanılan bir dizi kalıp kategorisi. Blok desenleri birden fazla kategoride görüntülenebilir.
• keywords : kullanıcıların arama yaparken kalıbı keşfetmelerine yardımcı olan bir dizi takma ad veya anahtar kelime.
• viewportWidth : Yerleştiricideki desenin genişliğini belirten bir tam sayı.

Kategori kaydı durumunda, daha fazla sahne olmadığı için yalnızca bir label özelliği tanımlamamız gerekir.

Bugün, web sitenizde her zaman hazır bulundurmanız için bir blok kalıbı oluşturmanın oldukça kolay olduğunu gördük. Bir sonraki gönderide kod hakkında hiçbir şey bilmeden nasıl kalıp oluşturabileceğimizi göreceğiz. Kaçırma!

John Cameron'ın Unsplash'ta öne çıkan resmi.