Temel Blokların Ötesinde: Gelişmiş WordPress İşlevselliği İçin Özel Gutenberg Blokları Oluşturma

Özet

WordPress Blok Düzenleyicisi, Gutenberg, modüler blok sistemiyle içerik oluşturmayı devrim niteliğinde değiştirdi. Çekirdek bloklar çok yönlülük sunarken, özel bloklar benzersiz işlevler ve markalaşma için esastır. Bu makale, blok kaydı, öznitelikler ve oluşturma gibi temel kavramları kapsayarak kendi Gutenberg bloklarınızı geliştirme sürecinde size rehberlik eder. Pratik örnekleri inceleyecek, kod organizasyonu ve güvenliği için en iyi uygulamaları tartışacak ve özel blokların WordPress'in mimarisi ve kancalarıyla nasıl entegre olduğunu vurgulayacağız. Özel blok geliştirme konusunda ustalaşarak, WordPress sitenizin yeteneklerini ve kullanıcı deneyimini önemli ölçüde geliştirebilirsiniz.

Temel Blokların Ötesinde: Gelişmiş WordPress İşlevselliği İçin Özel Gutenberg Blokları Oluşturma

WordPress 5.0'da Gutenberg blok düzenleyicisinin ortaya çıkışı, içerik oluşturma ve yönetme biçiminde önemli bir değişime işaret etti. Klasik düzenleyicinin doğrusal yaklaşımından uzaklaşan Gutenberg, içeriğin ayrık "bloklar" kullanılarak oluşturulduğu modüler bir sistem tanıttı. Varsayılan blok seti geniş bir yaygın ihtiyacı kapsasa da, birçok web sitesi, hazırda bulunandan daha fazlasını gerektiren benzersiz işlevler, özel tasarım öğeleri veya entegrasyonlar gerektirir. İşte özel Gutenberg blok geliştirmenin devreye girdiği yer burasıdır ve WordPress'in yeteneklerini genişletmek ve onu tam olarak projenizin taleplerine göre uyarlamak için güçlü bir yol sunar.

Özel bloklar geliştirmek, düzenleyiciler için içerik oluşturmayı kolaylaştıran, marka tutarlılığını sağlayan ve karmaşık özellikleri doğrudan düzenleyici arayüzüne uygulayan yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Bu kılavuz, temel kavramları anlamaktan sağlam ve sürdürülebilir özel bloklar için en iyi uygulamaları uygulamaya kadar tüm süreç boyunca size rehberlik edecektir.

Blok Düzenleyicisinin Mimarisi

Gutenberg ve bloklarının WordPress ekosistemi içinde nasıl çalıştığını anlamadan önce, geliştirme işlemine dalmak önemlidir. WordPress'in kendisi modüler bir PHP ve MySQL mimarisi üzerine kurulmuştur. Temalar sunumu kontrol eder ve eklentiler işlevsellik ekler. Bir çekirdek WordPress özelliği olarak Gutenberg, bu yapıya sorunsuz bir şekilde entegre olur. Dinamik, tarayıcı içi düzenleme deneyimi için JavaScript'i (ağırlıklı olarak React) kullanırken, PHP sunucu tarafı kaydı ve oluşturmayı yönetir.

Özel bloklar aslında WordPress'e kaydedilen JavaScript bileşenleridir. Bir kullanıcı bir gönderiye veya sayfaya özel bir blok eklediğinde, Gutenberg yapılandırmasını (öznitelikler) veritabanında saklar. Gönderiyi ön uçta oluştururken, WordPress bu yapılandırmayı yorumlamak ve uygun HTML'yi çıktılamak için PHP'yi kullanır, genellikle aynı JavaScript bileşenini veya ayrı bir PHP şablonunu kullanır.

Özel Bir Bloğun Temel Bileşenleri

Her özel Gutenberg bloğu, özünde birkaç temel parçadan oluşur:

1. Kayıt: Bu, WordPress'e yeni bloğunuz hakkında bilgi verme işlemidir. Adını, başlığını, simgesini ve diğer meta verilerini tanımlamayı içerir. Bu öncelikle JavaScript'in registerBlockType işlevi kullanılarak yapılır.
2. Öznitelikler: Bunlar, bloğunuzla ilişkili veri alanlarıdır. Bunları, bir kullanıcının bloğun belirli bir örneği için değiştirebileceği ayarlar veya özellikler olarak düşünün (örneğin, metin içeriği, resim URL'si, renk seçimi). Öznitelikler, bloğun JavaScript kaydında tanımlanır.
3. Düzenleme İşlevi: Bu JavaScript işlevi, bloğun Gutenberg düzenleyicisinde nasıl göründüğünü ve davrandığını tanımlar. İçerik oluşturucuların bloğu yapılandırmak için kullanacağı etkileşimli kullanıcı arayüzünü oluşturduğunuz yer burasıdır.
4. Kaydetme İşlevi: Bu JavaScript işlevi, veritabanına kaydedilecek ve web sitenizin ön yüzünde oluşturulacak statik HTML işaretlemesini tanımlar. Bloğun özniteliklerinin mevcut durumunu yansıtmalıdır.

Adım Adım: İlk Özel Bloğunuzu Oluşturma

Bir "Eylem Çağrısı" (CTA) başlığı ve düğmesi içeren basit bir özel blok oluşturalım. Bu örnek, temel bir WordPress geliştirme ortamının kurulu olduğunu varsayarak, blok kaydı ve düzenleme için temel JavaScript yönlerine odaklanacaktır.

Önkoşullar:

• Yerel bir WordPress geliştirme ortamı.
• JavaScript, React ve PHP hakkında temel anlayış.
• Varlık derlemesi için Node.js ve npm (veya yarn) kurulu.

1. Proje Kurulumu:

Özel bloklar tipik olarak bir eklentinin parçası olarak geliştirilir. Yeni bir eklenti dosyası (örneğin, my-custom-blocks/my-custom-blocks.php) ve bloğunuz için bir JavaScript dosyası (örneğin, src/index.js) oluşturun. Ayrıca JavaScript'inizi derlemek için bir derleme işlemine ihtiyacınız olacaktır. Yaygın bir yaklaşım, derlemeyi yönetmek için uygun bir yol sağlayan @wordpress/scripts kullanmaktır.

Eklentinizin kök dizininde bir package.json dosyası oluşturun:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "Özel Gutenberg blokları için bir eklenti.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Adınız",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Bağımlılıkları yükleyin: npm install.

2. Bloğu Kaydetme (JavaScript):

src/index.js dosyanızda, @wordpress/blocks paketinden registerBlockType kullanacaksınız.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Düzenleyici için bileşenleri içe aktarın
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Eylem Çağrısı', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Daha Fazla Bilgi',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Düzenleyici Arayüzünü Tanımlama (src/edit.js):

Bu bileşen, bloğun düzenleyicide nasıl göründüğünü ve çalıştığını yönetir.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Düğme Ayarları', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Düğme Metni', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Düğme URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Başlığınızı buraya girin...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. Kaydetme İşlevini Tanımlama (src/save.js):

Bu işlev, ön yüz için HTML çıktısını belirler.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. Blok Betiğini Yükleme (PHP):

Ana eklenti dosyanızda (my-custom-blocks.php), derlenmiş JavaScript dosyanızı kaydetmeniz ve yüklemeniz gerekir.

<?php
/**
 * Eklenti Adı: Özel Bloklarım
 * Açıklama: Özel Gutenberg blokları ekler.
 * Sürüm: 1.0
 * Yazar: Adınız
 */

function my_custom_blocks_register_block() {
    // block.json dosyasını otomatik olarak yükler ve betiği kuyruğa alır.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Varlıkları Derleme:

Eklentinizin dizininde npm run build komutunu çalıştırın. Bu, JavaScript'inizi build klasörüne derleyecektir.

Şimdi eklentiyi WordPress'te etkinleştirin. "Eylem Çağrısı" bloğunuzun düzenleyicide kullanılabilir olduğunu görmelisiniz!

Özel Blok Geliştirme İçin En İyi Uygulamalar

Özel bloklar geliştirmek, onları işlevsel hale getirmekten daha fazlasını içerir. En iyi uygulamalara uymak, bloklarınızın güvenli, performanslı, erişilebilir ve sürdürülebilir olmasını sağlar.

• Ad Alanı Belirleme: Bloklarınız için her zaman benzersiz bir ad alanı kullanın (örneğin, my-custom-blocks/cta). Bu, diğer bloklarla çakışmaları önler. registerBlockType işlevi bunu yönetir.
• Kod Organizasyonu: JavaScript ve PHP kodunuzu temiz ve iyi organize edilmiş tutun. Karmaşık bloklar için, JavaScript'inizi daha küçük, yeniden kullanılabilir bileşenlere ayırmayı düşünün.
• Güvenlik:
  • Temizleme: Veritabanına veri kaydederken (özellikle kullanıcı tarafından oluşturulan içerik), her zaman temizleyin. WordPress, sanitize_text_field, esc_url vb. gibi işlevler sağlar.
  • Kaçış: Tarayıcıya veri çıkarırken, Siteler Arası Komut Dosyası (XSS) saldırılarını önlemek için her zaman kaçış yapın. esc_html, esc_attr, esc_url gibi işlevleri kullanın.
  • Nonces: Bloğunuzla ilgili herhangi bir AJAX isteği veya form gönderimi için, isteğin meşru bir WordPress kaynağından geldiğini doğrulamak için nonces kullanın.
• Uluslararasılaştırma (i18n): JavaScript'inizdeki tüm kullanıcıya yönelik dizeler için __() ve _x() işlevlerini (@wordpress/i18n'den) kullanın. Bu, bloğunuzun çevrilebilir olmasını sağlar.
• Erişilebilirlik: Bloğunuzun herkes tarafından kullanılabilir olduğundan emin olun. Semantik HTML kullanın, gerektiğinde ARIA öznitelikleri sağlayın ve ekran okuyucularla test edin.
• Performans:
  • Gecikmeli Yükleme: Ağır varlıkları veya karmaşık verileri yükleyen bloklar için gecikmeli yükleme tekniklerini uygulamayı düşünün.
  • Verimli Oluşturma: save işlevini ve herhangi bir sunucu tarafı oluşturmayı olabildiğince verimli hale getirin.
  • Varlık Kuyruğa Alma: Bloğunuz için yalnızca gerekli betikleri ve stilleri kuyruğa alın. Blokla ilgili varlıklar için enqueue_block_style ve enqueue_block_script_handle kullanın.
• Modülerlik ve Genişletilebilirlik: Diğer eklentilerin veya temaların bloğunuzun davranışını veya çıktısını değiştirmesine izin vermek için PHP'nizdeki WordPress kancalarını (eylemler ve filtreler) kullanın.
• block.json: Daha karmaşık bloklar için, blok meta verilerini, bağımlılıkları, stilleri ve betik tanıtıcılarını bildirmek için bir block.json dosyası kullanın. Bu, blok geliştirmenin modern standardıdır ve varlık yönetimini basitleştirir.

WordPress Mimarisi ile Entegrasyon

Özel bloklar izole varlıklar değildir. WordPress'in çekirdek mimarisiyle derinlemesine entegre olurlar:

• Kancalar: Blok kaydını değiştirmek, koşullu olarak özel stiller veya betikler eklemek veya çekirdek blokların oluşturulan çıktısını değiştirmek için eklentinizde PHP eylemleri ve filtreleri kullanabilirsiniz. Örneğin, kaydedilmiş bir bloğun ayarlarını değiştirmek için block_type_metadata_settings filtresini kullanabilirsiniz.
• Tema Entegrasyonu: Blok tabanlı temalar ve Tam Site Düzenleme (FSE), bloklara büyük ölçüde güvenir. Özel bloklar, FSE şablonlarına sorunsuz bir şekilde uyacak şekilde tasarlanabilir ve kullanıcılara tutarlı bir blok tabanlı iş akışı kullanarak tüm siteleri oluşturmalarına olanak tanır.
• Eklenti Birlikte Çalışabilirliği: Özel bloklarınız diğer eklentilerle etkileşim kurabilir. Örneğin, özel bir ürün bloğu bir e-ticaret eklentisinden veri çekebilir veya özel bir galeri bloğu belirli bir medya kitaplığı eklentisiyle entegre olabilir.

Gelişmiş Kavramlar ve Hususlar

• Sunucu Tarafı Oluşturma (SSR): Dinamik veri veya sunucuda en iyi şekilde işlenen karmaşık mantık gerektiren bloklar için sunucu tarafı oluşturma uygulayabilirsiniz. Bu, bloğu kaydederken PHP'nizde bir render_callback işlevi tanımlamayı içerir.
• Dinamik Bloklar: SSR kullanan bloklar genellikle dinamik bloklar olarak adlandırılır. Veritabanına statik HTML kaydetmezler; bunun yerine yalnızca özniteliklerini kaydederler ve render_callback her sayfa yüklemesinde HTML'yi oluşturur.
• Blok Stilleri: Kullanıcıların düzenleyici içinden seçebileceği bloklarınız için özel stiller tanımlayabilirsiniz.
• Blok Varyasyonları: Farklı varsayılan ayarlara veya görünümlere sahip önceden yapılandırılmış sürümler sunmak için bir temel bloğun varyasyonlarını oluşturun.
• Düzenleyici ve Ön Yüz Farklılıkları: edit ve save işlevlerinin farklı senaryoları işlemesi gerekebileceğine dikkat edin. edit işlevi etkileşimli düzenleyici deneyimi içindir, save işlevi ise statik HTML çıktısı içindir. Bazen dinamik ön yüz oluşturma için ayrı bir render_callback gerekebilir.

Sonuç

Özel Gutenberg blok geliştirme, WordPress web siteleri için yeni bir özelleştirme ve işlevsellik düzeyi açan güçlü bir beceridir. Temel bileşenleri—kayıt, öznitelikler, düzenleme ve kaydetme işlevleri—anlayarak ve güvenlik, performans ve erişilebilirlik için en iyi uygulamalara uyarak sağlam, yeniden kullanılabilir ve kullanıcı dostu bloklar oluşturabilirsiniz. Bir müşteri için özel bir eklenti oluşturuyor veya kendi sitenizi geliştiriyor olun, özel bloklarda ustalaşmak, WordPress geliştirme yeteneklerinizi önemli ölçüde artıracak ve standart tekliflerin ötesine geçmenize ve gerçekten benzersiz dijital deneyimler oluşturmanıza olanak tanıyacaktır.