WordPress Block Editor Pt 2 ile Tasarım Sistemini Kullanma: Blok Tipleri ve Stilleri

İki bölümden oluşan blog dizimizin 1. Bölümünde, theme.json'da tasarım sistemlerini nasıl yapılandıracağımızı ele aldık. Buna dayanarak, artık istenmeyen varsayılan blokları ve stilleri kaldırmak için kod aracılığıyla ek kontroller kullanabiliriz.

Örneğin, bir tasarım sistemi kullanan bir WordPress sitesinin geliştiricileri, gereksiz tasarım çalışmalarından kaçınırken tutarlılığı sağlamak için kullanılmayacaklarsa, ses bloğunu veya etiket bulutu bloğunu editörden kaldırmak isteyebilirler. Düzenleyicide tutarlı bir tasarım seçenekleri kümesi oluşturmak için kullanılmayan diğer yerleşik blok stilleri de ayarlanabilir veya ortadan kaldırılabilir. Blokları ve stilleri sınırlandırmak, daha küçük bir tasarım seçeneği kümesi sağlayarak blok düzenleyicide yeni gönderiler oluşturmak için gereken yükü de azaltabilir.

Bu gönderide, bir tasarım sistemini blok düzenleyiciyle entegre etmek için eklenti ve tema kodu tarafından kullanılabilecek stratejileri ele alacağız.

Blok türlerini kaldırma

WordPress blok düzenleyici, çok sayıda yerleşik blok içerir. Tasarım işini azaltmak ve içerik oluşturmayı basitleştirmek için bazı varsayılan blokları kaldırmak yararlı olabilir. Bu, istemcide JavaScript ile veya sunucu tarafı PHP kullanılarak gerçekleştirilebilir.

1. Başlamak için, düzenleyiciden kaldırılacak bloğu veya blokları tanımlayın. Bu örnekte, "Son Yorumlar" bloğunun kaydı silinecektir:

2. Ardından, Gutenberg çekirdek blokları başvuru kılavuzunda karşılık gelen blok adını bulun. "Son Yorumlar" bloğu için bu, temel/en son yorumlardır:

3. Çekirdek/en son yorumlar adını kullanarak onu editörden kaldırabiliriz.

JavaScript'te wp.blocks.unregisterBlockType kullanın:

 wp.domReady( function() { wp.blocks.unregisterBlockType( 'core/latest-comments' ); } );

Blok düzenleyici için JavaScript, PHP'de enqueue_block_editor_assets kancası kullanılarak kuyruğa alınmalıdır:

 function wpvip_enqueue_block_js() { wp_enqueue_script( 'wpvip-block-js', plugin_dir_url( __FILE__ ) . 'js/block.js', array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ), '0.0.1', ); } add_action( 'enqueue_block_editor_assets', 'wpvip_enqueue_block_js' );

@wordpress/scripts paketi ile blok bağımlılıklarını otomatik olarak oluşturmak ve yönetmek için daha karmaşık bir kurulum kullanılabilir.

Not: Bu gönderi, öncelikle JavaScript API aracılığıyla bloklarla etkileşime odaklansa da, bloklar için sunucu tarafı PHP ve istemci JavaScript'i kullanmaya yönelik en iyi uygulamalar, kullanımınıza bağlı olarak değişir:

• Yerleşik bir bloğu değiştirirken JavaScript API'lerini kullanın.
• Bir üçüncü taraf bloğunu değiştirirken JavaScript API'lerini kullanın.
• Özel bir blok oluştururken, PHP'de register_block_type ile block.json'u kullanın. Bu, hem sunucu tarafı hem de istemci kodunun bloğunuzla etkileşime girmesine izin verecektir.

Bloklarla etkileşime geçmek için JavaScript kullanmanızı öneririz, çünkü bu hem istemci tarafında hem de sunucu tarafında kayıtlı blokların değiştirilmesine izin verir. Ek olarak, bazı blok API'leri yalnızca JavaScript'te mevcuttur.

PHP'de allow_block_types_all filtresi kullanılarak çekirdek blokların kaydının silinmesi de mümkündür:

 add_filter( 'allowed_block_types_all', 'wpvip_unregister_blocks' ); function wpvip_unregister_blocks( $allowed_block_types ) { return array_filter( $allowed_block_types, function( $block_type ) { // Remove 'core/latest-comments' from allowed blocks return $block_type !== 'core/latest-comments'; } ); }

PHP'deki allow_block_types_all filtresinin, diğerlerinin düzenleyicide kullanılmasını engelleyerek açık bir izin verilen blok listesi sağlamak için de kullanılabileceğini unutmayın:

 add_filter( 'allowed_block_types_all', 'wpvip_unregister_blocks' ); function wpvip_unregister_blocks( $allowed_block_types ) { return [ 'core/paragraph', 'core/heading', 'core/group', /* ... other blocks to allow */ ]; }

Not: Bu listenin korunması ve istenen çekirdek veya özel bloklarla güncellenmesi gerekeceğinden, bu yaklaşıma dikkat edin. Yukarıda bahsedildiği gibi, bu yaklaşım yalnızca sunucu tarafında kayıtlı olan blokları sınırlamak için kullanılabilir (örn., block.json kullanarak). İstemci tarafı olan özel blokların yalnızca wp.blocks.unregisterBlockType kullanılarak JavaScript'te yönetilmesi gerekir.

Yerleşik blok stillerini değiştirme

WordPress'teki birkaç temel blok, bağlamsal araç çubuğunda bulunan önceden ayarlanmış blok stillerini ve düzenleyicinin sağ tarafındaki denetçi kontrollerini içerir:

JavaScript'te, varsayılan stilleri değiştirmek için wp.blocks.unregisterBlockStyle ile wp.blocks.registerBlockStyle kullanın:

 wp.domReady( function() { wp.blocks.unregisterBlockStyle( 'core/button', 'fill' ); wp.blocks.unregisterBlockStyle( 'core/button', 'outline' ); wp.blocks.registerBlockStyle( 'core/button', { name: 'primary', label: 'Primary', isDefault: true, } ); wp.blocks.registerBlockStyle( 'core/button', { name: 'secondary', label: 'Secondary', } ); } );

Yukarıdaki kod, yerleşik "Doldur" ve "Anahat" düğme stillerini kaldıracak ve yeni bir "Birincil" stil (varsayılan) ve "İkincil" stil ekleyecektir:

Yeni düğmelere otomatik olarak "Birincil" stil atanacaktır. "Birincil" stil, ".is-style-primary" sınıfını düğme kapsayıcısına ve "İkincil", ".is-style-ikincil" sınıfını uygular. Bu stiller daha sonra CSS'de uygulanabilir. Bu WordPress makalesi, blok stilleri oluşturma hakkında daha fazla bilgi içerir.

unregister_block_style içindeki blok stillerinin kaydını silmek için kullanılabilen bir PHP işlevi vardır, ancak bunu önermiyoruz. Çekirdek bloklar da dahil olmak üzere birçok blok stili, istemci tarafı JavaScript'te kayıtlıdır, dolayısıyla bu stilleri PHP kullanarak kaldırmak mümkün değildir. Yukarıda "Blok türlerini kaldırma" bölümünde belirtildiği gibi, tutarlılık için mevcut blokları yönetmek üzere istemci tarafı JavaScript'i tercih ediyoruz.

Blok varyasyonlarını kaldırma

Varyasyonlar, bir bloğu hızlı bir şekilde yapılandırmak için paketlenebilen blok ayarları ön ayarlarıdır. Bunlar nadirdir, ancak bazı temel bloklar istenmeyen varyasyonlar içerir. Örneğin, yerleşik sütun bloğu birkaç düzen seçeneği içerir:

Varyasyon ön ayarlarının kaldırılması istenebilir. Bu örnek için “25 / 50 / 25” varyasyonunu kaldıracağız. JavaScript'te varyasyonlar wp.blocks.unregisterBlockVariation aracılığıyla kaldırılabilir:

 wp.domReady( function() { wp.blocks.unregisterBlockVariation( 'core/columns', 'three-columns-wider-center' ); } );

“Üç sütun-geniş merkez”, “25 / 50 / 25” düzenine karşılık gelen varyasyon adıdır. Bu, istenmeyen varyasyona karşılık gelen ana bloğun varyasyon.js dosyasına ve "ad" özelliğine bakılarak bulunabilir. Bu, mevcut blok varyasyonlarının sınırlandırılmasına neden olacaktır:

Sonuç olarak

theme.json özelleştirmesi ve bu gönderide sağlanan API'ler arasında, WordPress blok düzenleyicisinin geniş ekosistemini bir tasarım sistemiyle birleştirmek ve onu yönetilebilir bir boyuta indirmek mümkündür.

WordPress VIP'de tasarım sistemlerini nasıl yönettiğimizle ilgili ilgili gönderilerimize göz atın:

• Bölüm 1: Gutenberg ile Tasarım Sistemi Düzenleme – theme.json
• Tasarım Sistemi Belirteçlerini Figma'dan WordPress'e Aktarma

Yazarlar

Alec Geatches, Automattic Kıdemli Yazılım Geliştiricisi

Taipei, Tayvan'da yaşayan Kurumsal WordPress geliştiricisi ve tasarım sistemleri meraklısı.

Gopal Krishnan, Automattic Kıdemli Yazılım Geliştiricisi

Gopal, tasarım sistemleri ve Gutenberg'e ilgi duyarak WordPress VIP'nin ayrıştırılmış WordPress teklifi üzerinde çalışıyor. Sidney, Avustralya'da yaşıyor ve yakın zamanda Kanada'dan taşındı.