WordPress yeni editörü(Gutenberg) blok oluşturma

Yeni WordPress editörü (Gutenberg) 5.0 sürümünde yayınlanmıştır. Şimdi WordPress çekirdeğine inmeden önce onunla başa çıkmanın tam zamanı. Bu seride, size Blok API ile nasıl çalışacağınızı ve yazılarınızı ve sayfalarınızı oluşturmak için kullanabileceğiniz kendi içerik bloklarınızı nasıl yaratacağınızı göstereceğim.

Öncelikle, çalışmamız create-guten-block için hazır bir örnek blok içeren bir eklenti oluşturmak için araç setini kurmanız gerekmekte . Bunu gerektiği şekilde kolayca genişletebiliriz, ancak Gutenberg blok gelişiminin tüm yönlerini tam olarak anlamak için sıfırdan bir blok oluşturmayı bilmek iyi bir fikirdir.

 Hızlı kurulum

Bilgisayarınızda node.js kurulmuş olmalı. Daha sonra wordpress’in çalıştığını dizine(plugin dizinine) terminalden giriş yapınız . örnek: /wp.local/wp-content/plugins/

npx create-guten-block my-block
cd my-block
npm start

Bu yayında , PlaceIMG web hizmetinden rastgele bir görüntü görüntülemek için benim özel blok eklentimde ikinci bir blok oluşturacağız . Ayrıca, aşağı açılır seçim kontrolünden resim kategorisini seçerek bloğu özelleştirebileceksiniz.

Fakat önce registerBlockType() , Gutenberg’de bloklar oluşturmak için temel olan tüm önemli fonksiyona geçmeden önce blok komut dosyalarının ve stillerin nasıl oluşturulduğunu öğreneceğiz .

Blok Komut Dosyalarını ve Stillerini Eklemek

Bloklarımızın gerektirdiği JavaScript ve CSS’yi eklemek için Gutenberg tarafından sağlanan iki yeni WordPress kancası kullanabiliriz:

• enqueue_block_editor_assets
• enqueue_block_assets

Bunlar yalnızca Gutenberg eklentisi etkinse kullanılabilir ve komut dosyalarını kodlamak için standart WordPress kancalarına benzer şekilde çalışırlar. Bununla birlikte, Gutenberg bloklarıyla çalışmak için özel olarak tasarlanmıştır.

enqueue_block_editor_assets Kanca yönetici editörü sadece komut dosyaları ve stilleri ekler. Bu, blokları ve CSS’yi kayıt altına almak için JavaScript’i, blok ayarları için kullanıcı arayüzü öğelerine stil vermek için ideal kılar.

Yine de blok çıktısı için bloklarınızın çoğu zaman editörde aynı şekilde ön uçta görünmesini istersiniz.Kullanılması enqueue_block_assets stilleri otomatik editör ve kullanıcı arabirimine hem eklendikçe kılan bu kolay. Gerekirse JavaScript’i yüklemek için de bu kancayı kullanabilirsiniz.

Ama senaryo ve stillerini enqueue nasıl merak olabilir ancak  ön uçta. Bunu doğrudan yapmanıza izin veren bir WordPress kancası yoktur, ancak enqueue_block_assets kanca geri çağırma işlevinin içine koşullu bir ifade ekleyerek bunu çözebilirsiniz .

add_action( 'enqueue_block_assets', 'load_front_end scripts' );
function load_front_end scripts() {
if( !is_admin() {
// enqueue front end only scripts and styles here
}
}

Bu iki yeni kancayı kullanarak komut dosyalarını ve stilleri gerçekten zorlamak için, standart wp_enqueue_style()  ve wp_enqueue_scripts() işlevleri normalde kullanacağınız gibi kullanabilirsiniz.

Ancak, doğru komut dosyası bağımlılıklarını kullandığınızdan emin olmanız gerekir. Editördeki komut dosyalarını kodlamak için aşağıdaki bağımlılıkları kullanabilirsiniz:

• senaryo: array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components' )
• stilleri: array( 'wp-edit-blocks' )

Hem editör hem de ön uç için stilleri sıralarken, şu bağımlılığı kullanabilirsiniz:

• array( 'wp-blocks' )

Burada bahsetmeye değer bir şey my-block blok  eklentimiz tarafından talep edilen gerçek dosyaların JavaScript ve CSS’nin derlenmiş versiyonları olduğu ve JSX ve Sass kaynak kodunu içeren dosyalar olmasıdır.

Bu dosyaları derlemeden kullanamazsınız. React, ES6 + veya Sass içeren ham kaynak kodunu çalıştırmaya çalışırsanız, çok sayıda hatayla karşılaşırsınız.

Bu nedenle create-guten-block , sizin için komut dosyalarını otomatik olarak işlediği ve istediği gibi bir araç takımı kullanmanın faydası var!

Gutenberg Bloklarını Kaydetme

Yeni bir blok oluşturmak için registerBlockType() , blok adını ve bir yapılandırma nesnesini arayarak ve ileterek Gutenberg’e kaydetmemiz gerekir . Bu nesne, uygun açıklama gerektiren epeyce özelliklere sahiptir.

İlk olarak, yine de, blok adına bir göz atalım. Bu, ilk parametredir ve iki bölümden oluşan bir dizedir, bir ad alanı ve blok adı, bir eğik çizgi karakteriyle ayrılır.

Örneğin:

registerBlockType('block-namespace/block-name',{
// configuration object
}
);

Bir eklentiye birkaç blok kaydediyorsanız, tüm bloklarınızı düzenlemek için aynı ad alanını kullanabilirsiniz. Ad alanı, eklenti için benzersiz olmalıdır, bu da adlandırma çakışmalarını önlemeye yardımcı olur. Bu, aynı ada sahip bir blok zaten başka bir eklentiyle kaydedilmişse olabilir.

İkinci registerBlockType() parametre bir ayarlar nesnesidir ve belirtilmesi gereken birkaç özellik gerekir:

• title (string): editörde görünen adıdır.
• description (isteğe bağlı dize): bir bloğun amacını açıklar
• icon (isteğe bağlı Dashicon veya JSX öğesi): bir blokla ilişkilendirilmiş simge
• category (string): bloğun Blok ekle  iletişim kutusunda göründüğü yer
• keywords (isteğe bağlı dizi): blok aramalarında en fazla üç anahtar kelime kullanılır
• attributes (isteğe bağlı nesne): dinamik blok verisini işler
• edit (function): editörde gösterilmek üzere işaretleme döndüren bir işlev
• save (function): ön uçta gösterilmek üzere işaretleme döndüren bir işlev
• useOnce (isteğe bağlı boolean): bir kereden fazla eklenmesini engelleme
• supports (isteğe bağlı nesne): blok destekli özellikleri tanımlar

Blok geliştirme için JSX kullandığımızı varsayarsak, örnek bir registerBlockType() çağrının çok basit bir blok için nasıl göründüğünü varsayalım :

registerBlockType(
    'my-unique-namespace/ultimate-block',
    {
        title: __( 'The Best Block Ever', 'domain' ),
        icon: 'wordpress',
        category: 'common',
        keywords: [ __( 'sample', 'domain' ), __( 'Gutenberg', 'domain' ), __( 'block', 'domain' ) ],
        edit: () => <h2>Welcome to the Gutenberg Editor!</h2>,
        save: () => <h2>How am I looking on the front end?</h2>
    }
);

Biz bir girdi içermiyordu nasıl belirttiğine dikkat edin  description, attributes, useOnce, ve supportsözellikleri? İsteğe bağlı (ve bloğunuzla ilgili olmayan) herhangi bir alan güvenli bir şekilde atlanabilir. Örneğin, bu blok herhangi bir dinamik veri içermediğinden, herhangi bir özellik belirlemek için endişelenmemize gerek yok.

Şimdi registerBlockType() yapılandırma nesnesi özelliklerini tek tek daha ayrıntılı olarak ele alalım .

Başlık ve Açıklama

Editöre bir blok eklerken veya ararken, başlık mevcut bloklar listesinde gösterilecektir.

Ayrıca, blok denetçisinin penceresinde, tanımlanmışsa blok açıklamasıyla birlikte görüntülenir. Blok denetçisi şu anda görünmüyorsa, görünürlüğü değiştirmek için Gutenberg editörünün sağ üst köşesindeki dişli simgesini kullanabilirsiniz.

Hem başlık hem de açıklama alanları, diğer dillere çeviriye izin vermek için ideal olarak i18n işlevlerine sarılmalıdır.

Kategori

Şu anda mevcut beş blok kategorisi var:

• common
• formatting
• layout
• widgets
• embed

Bunlar, bloğunuzun Blok ekle  penceresinin içinde listelendiği kategori bölümünü belirler .

Bloklar  sekmesi içeren Ortak Blokları , Biçimlendirme , Düzen Öğeleri ve Widget’lar  ise kategoriler gömer kategori kendi sekmesi vardır.

Kategoriler şu anda Gutenberg’de sabittir, ancak bu gelecekte değişebilir. Bu, örneğin, tek bir eklentide birden fazla blok geliştiriyorsanız ve hepsinin ortak bir kategori altında listelenmesini ve böylece kullanıcıların onları daha kolay bulabilmesini istiyorsanız faydalı olacaktır.

Icon

Varsayılan olarak, bloğunuza kalkan Dashicon atanır , ancak iconalanda özel bir Dashicon belirterek bunu geçersiz kılabilirsiniz .

Her Dashicon’a dashicons- ardından benzersiz bir dize eklenmiştir . Örneğin, dişli simgesinin adı vardır dashicons-admin-generic. Bunu bir blok simgesi olarak kullanmak dashicons- için, tanınması için ön eki kaldırmanız  yeterlidir, örn  icon: 'admin-generic'.

Ancak, simge özelliği olarak Dashicons’u kullanmakla sınırlı değilsiniz. İşlev ayrıca bir JSX öğesini de kabul eder, bu da herhangi bir görüntüyü veya SVG öğesini blok simgesi olarak kullanabileceğiniz anlamına gelir. 

Simge boyutunu, varsayılan olarak 20 x 20 piksel olan diğer blok simgelerle tutarlı tutmaya dikkat edin.

Anahtar kelimeler

Kullanıcılar bir blok ararken, blokunuzun öne çıkmasını sağlamak için en fazla üç çevrilebilir anahtar kelime seçin. En iyi sonuçlar için blokunuzun işlevselliği ile yakından ilgili anahtar kelimeler seçmek en iyisidir.

keywords: [
    __( 'search', 'domain' ),
    __( 'for', 'domain' ),
    __( 'me', 'domain' ),
]

Birden fazla blokunuz varsa, kullanıcılar şirket adınızı yazmaya başlayabilir ve tüm bloklarınız arama sonuçlarında görünecek şekilde, şirketinizi ve / veya eklenti adınızı anahtar kelime olarak bile belirtebilirsiniz.

Anahtar kelimeler eklemek tamamen isteğe bağlı olsa da, kullanıcıların bloklarınızı bulmasını kolaylaştırmak için harika bir yoldur.

Öznitellikler

Nitelikler, bir bloğun içindeki dinamik verileri yönetmede yardımcı olur. Statik içerik üreten çok basit bloklar için ihtiyacınız olmadığından bu özellik isteğe bağlıdır.

Ancak, blokunuz değiştirilebilecek verilerle (düzenlenebilir bir metin alanının içeriği gibi) ilgileniyorsa veya blok ayarlarını kaydetmeniz gerekiyorsa, o zaman öznitelikleri kullanmak yoludur. 

Öznitelikler, dinamik blok verilerini veritabanına kaydedilen posta içeriğinde veya meta postada depolayarak çalışır. Bu eğiticide, yalnızca gönderi içeriği ile birlikte veri depolayan öznitelikleri kullanacağız.

Gönderi içeriğinde saklanan özellik verilerini almak için, işaretlemede nerede olduğunu belirtmemiz gerekir. Bunu, özellik verisine işaret eden bir CSS seçicisi belirleyerek yapabiliriz.

Örneğin, bloğumuz bir bağlantı  etiketi içeriyorsa , title alanını aşağıdaki gibi özelliğini kullanabiliriz :

attributes: {
    linktitle: {
        source: 'attribute',
        selector: 'a',
        attribute: 'title'
    }
}

Burada, nitelik adı, linktitlerastgele bir dizedir ve istediğiniz herhangi bir şey olabilir.

Örneğin, bu özelliği <a title="some title"> bir metin kutusu üzerinden girilen bağlantı başlığını blok ayarlarında saklamak için kullanabiliriz  . Bunu yapmak, aniden başlık alanını dinamikleştirir ve editördeki değerini değiştirmenize olanak sağlar.

Gönderi kaydedildiğinde, öznitelik değeri bağlantılar title alanına eklenir  . Benzer şekilde, editör yüklendiğinde, titleetiketin değeri içerikten alınır ve linktitle niteliğe eklenir .

source Blok içeriğinin nasıl saklandığını veya nitelikler aracılığıyla alındığını belirlemek için kullanabileceğiniz daha fazla yol vardır . Örneğin 'text', iç metni bir paragraf öğesinden çıkarmak için kaynağı kullanabilirsiniz .

attributes: {
    paragraph: {
    source: 'text',
    selector: 'p'
    }
}

Ayrıca kullanabilirsiniz children bir diziye bir öğenin tüm alt düğümlerini ayıklamak ve bir ayrıntıda saklamak kaynağı.

attributes: {
    editablecontent: {
        source: 'children',
        selector: '.parent'
    }
}

Bu, sınıfı olan öğeyi seçer .parent ve tüm alt düğümleri editablecontent özellikte saklar .

Bir kaynak belirtmezseniz, öznitelik değeri, veritabanına kaydedildiğinde yazı işaretlemesinin bir parçası olarak HTML yorumlarına kaydedilir. Bu yorumlar, yazı ön ucunda gösterilmeden önce çıkarılır.

Rasgele görüntü bloğumuzu bu derste daha sonra uygulamaya koyduğumuzda, bu tür bir öznitelik örneği göreceğiz.

Nitelikler alışmak biraz zaman alabilir, bu yüzden onları ilk kez tam olarak anlamadıysanız endişelenmeyin. Daha  fazla detay ve örnekler için Gutenberg el kitabının nitelikler bölümüne bir göz atmanızı tavsiye ederim .

Düzenle

editİşlevi blok editörü arayüzü içinde nasıl göründüğünü kontrol eder. Dinamik veriler, propstanımlanmış özel nitelikler de dahil olmak üzere her bloğa iletilir .

className={ props.className } Bloğunuza özel bir CSS sınıfı çıktısı almak için ana blok elemanına ekleme yapmak yaygın bir uygulamadır  . WordPress bunu sizin için editörün içine eklememektedir, bu nedenle eklemek isterseniz her blok için manuel olarak eklenmelidir.

Kullanımı  props.classNamestandart bir uygulamadır ve her bir blok için CSS stillerini uyarlamak için bir yol sağlar. Oluşturulan CSS sınıfının formatı .wp-block-{namespace}-{name}. Gördüğünüz gibi, bu blok ad alanına / adına dayanıyor ve benzersiz bir blok tanımlayıcısı olarak kullanılmasını ideal hale getiriyor.

Düzenleme işlevi render(), daha sonra bloğunuzu editör içinde işlemek için kullanılan yöntem aracılığıyla geçerli bir işaretleme döndürmenizi gerektirir .

Kayıt etmek

Benzer edit işlevi,  save senin bloğun ama ön ucunda bir görsel temsilini görüntüler. Aynı zamanda propsiyonlar aracılığıyla (tanımlanmışsa) dinamik blok verileri alır.

Temel farklardan biri props.className içeride bulunmamasıdır save, ancak bu bir sorun değildir çünkü Gutenberg tarafından otomatik olarak eklenir.

Destekler

supports Özelliği Blok bazı temel özellikleri desteği olup olmadığını belirlemek için mantıksal değerlerin bir nesne kabul eder.

Ayarlayabileceğiniz kullanılabilir nesne özellikleri aşağıdaki gibidir.

• anchor (varsayılan yanlış): doğrudan belirli bir bloğa bağlanmanıza olanak verir
• customClassName (doğru): Özel bir tanımlamak için blok denetçisindeki bir alanı ekler className blok için 
• className (true): className blok adına göre a blok kök öğesine ekler
• html (true): blok işaretlemesinin doğrudan düzenlenmesine izin verir

useOnceMülkiyet

Bu, bir bloğun bir defada bir sayfaya eklenmesini kısıtlamanıza izin veren kullanışlı bir özelliktir. Buna bir örnek,  zaten varsa bir sayfaya eklenemeyen çekirdek Daha fazla bloktur.

Görebileceğiniz gibi, Diğer blok eklendikten sonra, blok simgesi grileşir ve seçilemez. useOnce Özelliği ayarlandığında false varsayılan olarak.

Yaratıcı olalım!

Şimdiye kadar edinmiş olduğumuz bilgiyi, artık statik içeriğin çıktısından daha ilginç bir şey yapan katı bir blok örneği uygulamak için kullanma zamanı.

Harici bir istek yoluyla elde edilen rastgele bir resmi  , rastgele bir görüntü döndüren PlaceIMG web sitesine çıkarmak için bir blok oluşturacağız. Ayrıca, seçilen bir açılır kontrolle döndürülen görüntü kategorisini seçebileceksiniz.

Kolaylık sağlamak için,  yeni bloğumuzu yepyeni bir eklenti oluşturmak yerine , aynı benim özel bloğumeklentisine ekleyeceğiz  . Varsayılan bloğun kodu / src / block  klasörünün içinde bulunur, bu nedenle / srciçine random-image  adı verilen başka bir klasör  ekleyin ve üç yeni dosya ekleyin:

• index.js : yeni bloğumuzu kaydeder
• editor.scss : editör stilleri için
• style.scss : editör ve ön uç için stiller

Alternatif olarak, / src / block  klasörünü kopyalayabilir ve her şeyi elle yazmak istemiyorsanız yeniden adlandırabilirsiniz. Olsa da, emin adlandırmak olun block.js  için index.js  yeni blok klasörünün içindeki.

 Ana blok dosya adı için index.js kullanıyoruz , çünkü bu, blocks.js içindeki import ifadesini basitleştirmemize olanak tanır . Bloğun yolunu ve tam adını eklemek zorunda kalmak yerine, sadece blok klasörüne giden yolu belirleyebiliriz ve import otomatik olarak bir index.js  dosyasını ararız .

/Src/blocks.js dosyasını açın ve dosyanın  başında yer alan yeni bloğumuza doğrudan mevcut import ifadesinin altına bir referans ekleyin.

import './random-image';

/Src/random-image/index.js içinde yeni bloğumuzu başlatmak için aşağıdaki kodu ekleyin.

//  Import CSS.
import './style.scss';
import './editor.scss';
 
const { __ } = wp.i18n;
const { registerBlockType, query } = wp.blocks;
 
registerBlockType( 'cgb/block-random-image', {
    title: __( 'Random Image' ),
    icon: 'format-image',
    category: 'common',
    keywords: [
        __( 'random' ),
        __( 'image' )
    ],
    edit: function( props ) {
        return (
            <div className={ props.className }>
                <h3>Random image block (editor)</h3>
            </div>
        );
    },
    save: function( props ) {
        return (
            <div>
                <h3>Random image block (front end)</h3>
            </div>
        );
    }
} );

Bu, bloğumuzun çerçevesini oluşturur ve create-guten-block araç seti tarafından oluşturulan boyler bloğu koduna oldukça benzer .

Biz editörü ve ön uç stil sayfaları ithal ederek başlatın ve sonra biz bazı sık kullanılan fonksiyonları ayıklamak olacak wp.i18n ve wp.blocks yerel değişkenlere.

İçeride registerBlockType(), değerler için girildikten title, icon, category, ve keywords, özellikleri ise edit ve save işlevleri şu anda sadece çıkış statik içerik.

Şimdiye kadar üretilen çıktıyı görmek için rastgele resim bloğunu yeni bir sayfaya ekleyin.

Herhangi bir blok kaynak kodunun (JSX, ES6 +, Sass, vb.) Geçerli JavaScript ve CSS’ye aktarılması için hala değişiklikleri izlediğinizden emin olun. Şu anda değişiklikleri izlemek için dosya izlemiyorsanız, özel blok eklentim kök klasörünün içinde bir komut satırı penceresi açın ve girin npm start.

Ek blok komut dosyalarını kodlamak için neden PHP kodu eklemek zorunda olmadığımızı merak ediyor olabilirsiniz. Bloğun blok komutları my-custom-block üzerinden yazılır init.php, ancak bizim için özel olarak ele alındığı için özellikle yeni bloğumuz için komut dosyalarını sıkmamız gerekmez create-guten-block.

Ana blok dosyamızı src / blocks.js dosyasına aktardığımız sürece  (yukarıda yaptığımız gibi) herhangi bir ek iş yapmamız gerekmez. Tüm JSX, ES6 + ve Sass kodu otomatik olarak aşağıdaki dosyalara derlenir:

• dist / blocks.style.build.css : editör ve ön uç stilleri
• dist / blocks.build.js : Yalnızca düzenleyici için JavaScript
• dist / blocks.editor.build.css : sadece editör için stiller

Bu dosyalar tüm bloklar için JavaScript ve CSS içerdiğinden, oluşturulan blok sayısına bakılmaksızın yalnızca bir dosya grubunun oluşturulması gerekir!

Artık bloğumuza biraz etkileşim eklemeye hazırız ve bunu önce resim kategorisini saklamak için bir özellik ekleyerek yapabiliriz.

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    }
}

Bu, categoryvarsayılan değeri olan bir dize depolayan denilen bir öznitelik oluşturur 'nature'. Öznitelik değerini depolamak ve almak için işaretlemede bir konum belirtmedik, bu nedenle özel HTML yorumları kullanılacak. Bir öznitelik kaynağı çıkarırsanız, varsayılan davranış budur.

Seçmeli bir açılır kontrolle yapabileceğimiz resim kategorisini değiştirmenin bir yoluna ihtiyacımız var. editFonksiyonu aşağıdaki gibi güncelleyin :

edit: function( props ) {
    const { attributes: { category }, setAttributes } = props;
    function setCategory( event ) {
        const selected = event.target.querySelector( 'option:checked' );
        setAttributes( { category: selected.value } );
        event.preventDefault();
    }
    return (
        <div className={ props.className }>
            Current category is: {category}
            <form onSubmit={ setCategory }>
                <select value={ category } onChange={ setCategory }>
                    <option value="animals">Animals</option>
                    <option value="arch">Architecture</option>
                    <option value="nature">Nature</option>
                    <option value="people">People</option>
                    <option value="tech">Tech</option>
                </select>
            </form>
        </div>
    );
}

İşte nasıl görüneceği:

Bu, önceki statik edit işlevden oldukça farklıdır , bu yüzden değişiklikleri gözden geçirelim.

Öncelikle, PlaceIMG  sitesinde mevcut olan resim kategorileriyle eşleşen çeşitli seçeneklere sahip bir seçim açılan kontrolü ekledik .

Aşağı açılan değer değiştiğinde, setCategory işlev seçili olan kategoriyi bulan ve ardından setAttributes işlevi çağırır  . Bu bir çekirdek Gutenberg işlevidir ve özellik değerini doğru şekilde günceller. Bu işlevi kullanarak yalnızca bir özelliği güncellemeniz önerilir.

Şimdi, her yeni bir kategori seçildiğinde, özellik değeri güncellenir ve edit çıktı mesajını güncelleyen işleve geri gönderilir.

Rasgele görüntünün gösterilmesi için son bir adımı atmamız gerekiyor. Mevcut kategoride yer alacak <img>ve PlaceIMG sitesinden elde edilen rastgele görüntüye sahip bir etiket çıkaran basit bir bileşen yaratmamız gerekiyor .

PlaceIMG’e yapmamız gereken istek şu şekildedir:  https://placeimg.com/

Şimdilik genişlik ve yüksekliği sabit tutacağız, bu nedenle yalnızca geçerli kategoriyi istek URL’sinin sonuna eklemeliyiz. Örneğin, kategori 'nature'öyleyse, tam istek URL’si şöyle olacaktır: https://placeimg.com/320/220/nature .

RandomImage Yukarıdan bir bileşen ekleyin registerBlockType():

function RandomImage( { category } ) {
    const src = 'https://placeimg.com/320/220/' + category;
    return <img src={ src } alt={ category } />;
}

Kullanmak için, onu düzenleme fonksiyonunun içine ekleyin ve statik çıktı mesajını kaldırın. Biz onun içindeyken, kaydetme işlevi için aynısını yapın.

Tam index.js  dosyası artık bu gibi görünmelidir:

//  Import CSS.
import './style.scss';
import './editor.scss';
 
const { __ } = wp.i18n;
const { registerBlockType, query } = wp.blocks;
 
function RandomImage( { category } ) {
    const src = 'https://placeimg.com/320/220/' + category;
    return <img src={ src } alt={ category } />;
}
 
registerBlockType( 'cgb/block-random-image', {
    title: __( 'Random Image' ),
    icon: 'format-image',
    category: 'common',
    keywords: [
        __( 'random' ),
        __( 'image' )
    ],
    attributes: {
        category: {
            type: 'string',
            default: 'nature'
        }
    },
    edit: function( props ) {
        const { attributes: { category }, setAttributes } = props;
        function setCategory( event ) {
            const selected = event.target.querySelector( 'option:checked' );
            setAttributes( { category: selected.value } );
            event.preventDefault();
        }
 
        return (
            <div className={ props.className }>
                <RandomImage category={ category } />
                <form onSubmit={ setCategory }>
                    <select value={ category } onChange={ setCategory }>
                        <option value="animals">Animals</option>
                        <option value="arch">Architecture</option>
                        <option value="nature">Nature</option>
                        <option value="people">People</option>
                        <option value="tech">Tech</option>
                    </select>
                </form>
            </div>
        );
    },
    save: function( props ) {
        const { attributes: { category } } = props;
        return (
            <div>
                <RandomImage category={ category } />
            </div>
        );
    }
} );

Son olarak (şimdilik), resmin etrafına renkli kenarlık eklemek için editor.scss dosyasına şu stilleri ekleyin.

.wp-block-cgb-block-random-image  {
    select {
        padding: 2px;
        margin: 7px 0 5px 2px;
        border-radius: 3px;
    }
}

Ayrıca style.css’de bazı stillere ihtiyacınız olacaktır  .

.wp-block-cgb-block-random-image  {
    background: #f3e88e;
    color: #fff;
    border: 2px solid #ead9a6;
    border-radius: 10px;
    padding: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
 
    img {
        border-radius: inherit;
        border: 1px dotted #caac69;
        display: grid;
    }
}

Sayfa düzenleyicide veya ön uçta yenilendiğinde, yeni bir rasgele resim gösterilecektir. 

Aynı görüntüyü tekrar tekrar görüntülüyorsanız  , görüntünün tarayıcı önbellekten sunulmasını önlemek için sert bir yenileme yapabilirsiniz .

Sonuç

Bu eğitici yazıda epeyce bir yer tuttuk. Tüm yol boyunca yaptıysanız, kendinize iyi bir hak kazandıracaksınız! Gutenberg bloğu gelişimi çok eğlenceli olabilir, ancak ilk bakışta her konsepti kavramak kesinlikle zor.

Yol boyunca, blok komut dosyalarını ve stilleri nasıl sıkıştıracağımızı öğrendik ve registerBlockType()fonksiyonu derinlemesine ele aldık .

Bunu teoriyi uygulamaya koyup, PlaceIMG web servisini kullanarak belirli bir kategorideki rastgele bir görüntüyü göstermek için sıfırdan özel bir blok oluşturarak takip ettik.

Bu eğitici serinin bir sonraki ve son bölümünde, rastgele görüntü bloğumuza blok denetçisindeki ayarlar paneli aracılığıyla daha fazla özellik ekleyeceğiz.

Bu öğreticiyi takip ediyorsanız ve yalnızca kod girmeden her şeyi yazmadan denemek istiyorsanız  , bir sonraki öğreticideki son my-custom-block eklentisini indirebilirsiniz .

kaynak : https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-creating-custom-blocks–cms-31168