WordPress Gutenberg Blok Düzenleyicisi’nin tam geliştirme kılavuzunu ve pratik ilerleme adımlarını öğrenin.

WordPress’in Gutenberg Blok Editörü, içerik oluşturma şeklini tamamen değiştirdi ve sayfa oluşturma esnekliğini ve kontrolünü doğrudan editörlere verdi. Geliştiriciler için bu, React ve modern JavaScript temelli yepyeni bir geliştirme yaklaşımı anlamına geliyor. Bu makalede, sıfırdan özel bloklar oluşturmayı öğrenecek ve daha ileri giderek dinamik bloklar geliştirmek, blok varyasyonları uygulamak gibi ileri seviye konulara değineceğiz. Amacımız, size kapsamlı ve pratik bir geliştirme rehberi sunmaktır.

Blok düzenleyicisinin temel mimarisini anlamak

Gutenberg Editörü, tek bir bütünleşik uygulama değil; birçok bağımsız paketten (Packages) oluşan bir ekosistemdir. Bu ekosistemin yapısını anlamak, etkili bir şekilde geliştirme yapmanın temelidir.

Editör ile veri katmanının ayrılması

Editör arayüzü kendisi, WordPress’in veri katmanından ayrıdır. Çekirdek (core) kısım… @wordpress/editor Paket, editörün kullanıcı arayüzü (UI) bileşenlerini sağlar. @wordpress/data Bu paket, Redux’a benzer bir durum yönetimi sağlar. Bu ayrım sayesinde geliştiriciler, blokların görünümü ve etkileşim mantığına odaklanabilirler; veri kalıcılığı ise WordPress’in çekirdek mekanizmaları tarafından otomatik olarak işlenir.

Tavsiye edilen okuma WordPress Özel Makale Türlerini Kavrama: Oluşturmadan Yayınlamaya Kadar Tam Bir Pratik Rehber。

Blokların Kaydı ve Yaşam Döngüsü

Her blokun geçmesi gerekiyor. registerBlockType Bu fonksiyon, iki parametre alır: Bloğun benzersiz adı (örneğin…) my-plugin/my-custom-blockBir bloğun tüm yapılandırma bilgilerini içeren bir nesneyle birlikte.
Kayıt olduktan sonra, bloklar başlatma, renderleme, düzenleme, kaydetme gibi bir yaşam döngüsünden geçer. Geliştiriciler esas olarak bu süreçleri tanımlayarak blokları yönetirler. edit 和 save Düzenleyicide ve ön tarafta blokların görünümünü kontrol etmek için iki anahtar fonksiyon bulunmaktadır.

UltaHost WordPress Sunucusu

30 gün iade garantisi, sınırsız bant genişliği ve veritabanı kullanımı, ücretsiz DDoS koruması; 3 yıllık abonelikte indirim (50%).

Sayfaya erişin.

Sıfırdan başlayarak ilk özel bloğunuzu oluşturun.

Basit bir “vurgulamalı ipucu” bloğu oluşturacağız; bu blok, kullanıcıların arka plan rengi ve başlık içeren bir ipucu kutusu eklemelerine olanak tanır.

Geliştirme ortamını ve temel dosyaları ayarlayın.

Öncelikle, geliştirme ortamınızın hazır olduğundan emin olun. Node.js ve npm ortamlarına ihtiyacınız var. Eklentilerin bulunduğu klasörün içinde, örneğin, yeni bir eklenti klasörü oluşturun. my-custom-blocksBu klasörde aşağıdaki temel dosyaları oluşturun:
- my-custom-blocks.php (Eklentinin ana dosyası)
- package.json (Yazılım geliştirme süreçlerinde Node.js uygulamalarının bağımlılıklarını ve derleme işlemlerini yönetmek için kullanılır.)
- src/ Katalog (Kaynak kodun saklanması için kullanılır)
- build/ İçindekiler (Yapılandırma araçları tarafından oluşturulan ve WordPress tarafından okunan klasör)

在 package.json Burada, derleme betiğini yapılandırın ve içe aktarın. @wordpress/scripts Bu paket, Webpack, Babel gibi araçların yapılandırılmasını büyük ölçüde basitleştirebilir.

{
  "name": "my-custom-blocks",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

Pluginin ana dosyasında my-custom-blocks.php Bunun için, kullanmanız gerekir. register_block_type Bu fonksiyon, WordPress’e hangi kaynaktan veri alması gerektiğini bildirir. build Katalog yükleme bloğundaki varlıklar.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Yüksek Performanslı Özel Temalar Oluşturmak。

<?php
/**
 * Plugin Name: My Custom Blocks
 */
function my_custom_blocks_register_block() {
    register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );

Blok oluşturmak için JavaScript kaynak kodu:

在 src Katalog altında bir dosya oluşturun. highlight-box/index.js Bu, bloğun ana giriş dosyasıdır.

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';

registerBlockType('my-custom-blocks/highlight-box', {
    title: '高亮提示框',
    icon: 'warning', // 从 Dashicons 中选择
    category: 'design',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.highlight-title',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: '.highlight-content',
        },
        backgroundColor: {
            type: 'string',
            default: '#fff3cd',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const blockProps = useBlockProps();
        const { title, content, backgroundColor } = attributes;

const onChangeTitle = (newTitle) => {
            setAttributes({ title: newTitle });
        };
        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };
        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

return (
            <>
                <inspectorcontrols>
                    <panelbody title="Renk Ayarları">
                        <panelrow>
                            <colorpalette
                                value="{backgroundColor}"
                                onchange="{onChangeBackgroundColor}"
                            />
                        </panelrow>
                    </panelbody>
                </inspectorcontrols>
                <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                    <richtext
                        tagname="h3"
                        classname="highlight-title"
                        onchange="{onChangeTitle}"
                        value="{title}"
                        placeholder="输入标题..."
                    />
                    <richtext
                        tagname="p"
                        classname="highlight-content"
                        onchange="{onChangeContent}"
                        value="{content}"
                        placeholder="输入提示内容..."
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) =&gt; {
        const blockProps = useBlockProps.save();
        const { title, content, backgroundColor } = attributes;
        return (
            <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                <RichText.Content tagName="h3" className="highlight-title" value={title} />
                <RichText.Content tagName="p" className="highlight-content" value={content} />
            </div>
        );
    },
});

Çalıştır. npm start Geliştirme moduna başlayın (dosya değişikliklerini izleyin) veya npm run build Üretim sürecini başlatın. Daha sonra WordPress editöründe, “Tasarım” kategorisi altında bu “Vurgulama İpucu Kutusu” bloğunu bulup kullanabilirsiniz.

İleri Seviye Geliştirme: Dinamik Bloklar ve Sunucu Tarafı Renderlama

Statik blokların içeriği doğrudan makale içeriğinde saklanır. Ancak gerçek zamanlı verilere ihtiyaç duyan bloklar (örneğin en yeni makale listesi, kullanıcı bilgileri) için dinamik bloklar oluşturmamız gerekmektedir. Dinamik bloklar kaydedilirken yalnızca bazı özellikler (örneğin makale sayısı) saklanır ve ön uçta PHP şablonları aracılığıyla içerik dinamik olarak oluşturulur.

hosting.com Paylaşımlı Barındırma

AMD EPYC CPU'lar, NVMe SSD depolama ve LiteSpeed ile yüksek performans, 7/24, 7x7 uzman şirket içi destek, SSL, kaba kuvvet, kötü amaçlı yazılım ve DDoS koruması dahil gelişmiş güvenlik önlemleri, 73%'ye kadar tasarruf

Sayfaya erişin.

Statik blokları dinamik bloklara dönüştürün.

Öncelikle, bloğun kayıt ayarlarını değiştirin ve şunları yapın: save Fonksiyon, bir değer döndürmek üzere değiştirildi. nullVe bir tane daha ekleyin. render_callback Özellikler.

// 在 registerBlockType 的配置对象中
save: () => {
    return null; // 动态区块不在内容中保存 HTML
},

Daha sonra, PHP tarafında kayıt kodunu güncelleyin ve renderlama işlemini gerçekleştirecek olan geri çağırma fonksiyonunu belirtin.

function my_custom_blocks_register_dynamic_block() {
    register_block_type( __DIR__ . '/build/latest-posts', [
        'render_callback' => 'my_custom_blocks_render_latest_posts'
    ] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );

function my_custom_blocks_render_latest_posts( $attributes ) {
    $posts = get_posts( [
        'posts_per_page' => $attributes['numberOfPosts'] ?? 5,
    ] );

if ( empty( $posts ) ) {
        return '<p>Henüz herhangi bir makale yok.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/tr/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
}
$output .= '';'</ul>';

return $output;
}

Blok şablon dosyalarını kullanarak renderleme yapılır.

Daha karmaşık dinamik bloklar için şablon dosyalarının kullanılması önerilir. Bunu, eklenti dizininde bir dosya oluşturarak gerçekleştirebilirsiniz. templates/latest-posts.phpYukarıdaki işlemleri ilgili dosyaya taşıyın. Daha sonra… render_callback Çince'de kullanılır. ob_get_clean 和 include Şablonların yüklenmesi, PHP ve HTML mantığını daha net ve bakımı daha kolay hale getirir.

Tavsiye edilen okuma WooCommerce Eklentisi Kullanım Kılavuzu: Kurulum, Ayarlama ve Mağaza İşletmeciliğine Kadar Tam Rehber。

İleri Düzey Konular ve En İyi Uygulamalar

Temel ve dinamik blokları öğrendikten sonra, aşağıdaki konular sayesinde daha güçlü ve daha profesyonel bloklar geliştirebilirsiniz.

Blokların çeşitli varyasyonlarını gerçekleştirme özelliği.

“Blok Çeşitlilikleri” (Block Variations), temel bir bloğa dayanarak birden fazla önceden ayarlanmış stil veya yapı oluşturmanıza olanak tanır. Örneğin, “vurgulamalı uyarı kutusu” için “Başarılı”, “Uyarı”, “Hata” gibi çeşitlilikler oluşturabilirsiniz.

InterServer Paylaşımlı Barındırma

Paylaşımlı hosting aylık $2.50 USD, ilk ay $0.1 USD promosyon kodu tryinterserver, 461 bulut uygulaması komut dosyası, tek tıklamayla yükleme.

Sayfaya erişin.

import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation('my-custom-blocks/highlight-box', [
    {
        name: 'success',
        title: '成功提示',
        icon: 'yes-alt',
        attributes: {
            title: '操作成功',
            backgroundColor: '#d4edda',
        },
        isDefault: false,
    },
    {
        name: 'error',
        title: '错误警告',
        icon: 'dismiss',
        attributes: {
            title: '发生错误',
            backgroundColor: '#f8d7da',
        },
    },
]);

Blok stillerini ve editör stillerini kullanmak

Kullanın. registerBlockStyle Fonksiyonlar, bloklara farklı görsel stiller ekleyebilir ve kullanıcılar bunları yan menüden değiştirebilirler. Aynı zamanda, add_editor_style Düzenleyicideki önizlemenin ön uç stilleriyle tutarlı olmasını sağlayabilir ve “gördüğünüz gibi alırsınız” (what you see is what you get) deneyimini sunabiliriz.

Performans Optimizasyonu ve Kod Bölümleme

Blok sayısı arttıkça, tüm JavaScript kodlarını tek bir dosyada paketlemek yükleme performansını olumsuz etkiler. Bu durumda, kodları daha küçük parçalara bölerek farklı dosyalarda saklamak daha iyi bir çözümdür. @wordpress/dependency-extraction-webpack-plugin(Zaten içerisinde.) @wordpress/scripts (Orta) WordPress paketlerine olan dış bağımlılıkların doğru bir şekilde beyan edildiğinden emin olun. Büyük eklentiler için, ihtiyaç duyulduğunda yükleme veya kod bölme tekniklerini düşünebilirsiniz.

Özetle.

Gutenberg blok düzenleyicisinin geliştirilmesi, modern ön uç teknolojileri (React, JSX, Webpack) ile geleneksel WordPress PHP bilgisinin birleştirilmesiyle gerçekleştirilmiştir. İlk adımda arayüzün yapısını anlamakla başlanır; ardından statik bloklar oluşturarak temel API’leri öğrenilir. Daha sonra dinamik verilerin işlenmesi konusunda ilerleme kaydedilir ve blok varyantları, stiller gibi gelişmiş özelliklerle kullanıcı deneyimi ve geliştirme verimliliği artırılır. Açık kod yapısı, performans optimizasyonu ve kapsamlı uluslararasılaştırma hazırlığı gibi en iyi uygulamalara uyulduğunda, Gutenberg düzenleyicisinin potansiyelini tam anlamıyla ortaya çıkarabilecek, güçlü, bakımı kolay ve kullanıcı dostu özel bloklar oluşturulabilir.

Sıkça Sorulan Sorular.

Gutenberg bloklarını geliştirmek için mutlaka React kullanmak zorunda mıyız?

Evet, şu anki Gutenberg editörünün resmi geliştirme yöntemi tamamen React’e dayanıyor. Teorik olarak diğer framework’ler de kullanılabilir; ancak WordPress çekirdeği tarafından sağlanan tüm bileşenler, hook’lar ve araçlar React ekosistemi etrafında oluşturulmuştur. Diğer framework’lerin kullanılması büyük ölçüde karmaşıklık ve uyumluluk sorunlarına neden olur.

Blokuma özel bir kenar çubuğu kontrolü nasıl eklerim?

Kullanabilirsiniz. <code>InspectorControls</code> Bileşenler. Blok içinde. edit Fonksiyonda, bunu ana önizleme içeriğiyle birlikte geri döndürün. <code>InspectorControls</code> İçeride, bunu kullanabilirsiniz. <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 `@wordpress/components` paketindeki bileşenler, zengin bir ayar arayüzü oluşturmak için kullanılır.

Dinamik bloklar ve statik bloklar arasında performans açısından ne gibi farklılıklar vardır?

Statik blokların HTML içeriği doğrudan veritabanındaki gönderi içeriklerinde saklandığı için ön uç yükleme hızı çok hızlıdır; ancak dinamik veriler içeremezler. Dinamik blokların renderlanması sırasında PHP kodu çalıştırılarak veritabanından sorgular yapılır, bu da bir miktar performans kaybına neden olur; ancak gerçek zamanlı veriler sağlar. Sık sık değişmeyen içerikler için statik blokların düzenli olarak önbelleğe alınması düşünülebilir; yüksek gerçek zamanlılık gerektiren içerikler için ise dinamik bloklar kullanılmalıdır.

Geleneksel araç çubuğu bölgesinde veya makale meta kutusunda blokları kullanabilir miyim?

Tabii ki, bunlara “blok eklentileri” (block widgets) ve “blok meta kutuları” (block meta boxes) denir. WordPress 5.8’den itibaren, eklentiler bölgesi tamamen Gutenberg blok düzenleyicisi tarafından yönetilmektedir. Ayrıca bunları kullanmak da mümkündür. register_block_type 的 widget_types Blokların araç çubuğu düzenleyicisinde kullanılabilmesi için gerekli parametreler (veya ilgili API’ler) mevcuttur. Makale meta kutuları için `` kullanılabilir.register_post_meta API’yi bloklarla birleştirerek daha kullanıcı dostu bir meta veri düzenleme arayüzü oluşturulur.