WordPress Block Editörü için “sc-cards” adında bir block kodladığımız yazı dizisine devam ediyoruz. Bu yazımızda, Block Editörü blockları için kontroller ekleyebileceğimiz bir panel oluşturmayı öğreneceğiz.

Bu yazı, WordPress Block Editörü kodlama konusunda, bundan önce yazdığımız 2 yazının devamı niteliğindedir. Dolayısıyla, bu yazıları görmediyseniz veya tekrar gözden geçirmek isterseniz aşağıdaki bağlantılara tıklayabilirsiniz.

1. WordPress Block Editörü İçin Bir Block Oluşturma (@wordpress/create-block ile)
2. WordPress Block Editörü İçin Oluşturulan Block Dosyalarının Anatomisi

Block Dizinine “inc/block-settings.js” Dizini Ekleyelim

• Mecburi bir hamle değil ama daha düzenli gitmek için, eklentimizin “src” klasörüne;
  • “inc” adında bir alt dizin (klasör)
  • bu dizine de “block-settings.js” adına bir dosya ekleyelim.
• Bu işlemden sonra, eklenti dizinimiz şöyle görünmelidir:
  
• Artık bloğumuza bir takım kontroller eklemeye hazırız.
  • Bu işleme dilerseniz önce ayarlarımıza bir yer hazırlayarak başlayalım:

“Block” Menüsünde Ayar Bölümü Oluşturma

• Bloklara özgü ayarlar, Block Editörünün sağ kenarında görünen ayarlar menüsünde yer alır.
• Bu ayarları açmak için, yandaki/aşağıdaki resimde görüldüğü gibi, önce, editör sayfasının sağ üst köşesinde bulunan dişli ikonu (1) sonra block sekmesi (2) tıklanmalıdır.
  • Yandaki resimde verilen ayarlar, bir “Başlık” bloğunun ayarlarıdır.
• Biz de “Block” sekmesinde, bloğumuzun ayarları için bölümler oluşturacağız.

• Bloğumuza bir ayar bölümü oluşturmak için aşağıda verilen adımları takip ediyoruz:

1. Biraz önce oluşturduğumuz “block-settings.js” dosyasına şu kodları yapıştırıyoruz:

block-settings.js

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

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {
    
    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        Burada ayarlar olacak!
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Ayarlarımızın ortak adını “Genel Ayarlar” yaptık. Bu isim tamamen bizim tercihimizdir, dilediğimiz gibi değiştirebiliriz.

2. Sonrasında, src dizinindeki edit.js dosyasına giderek şu hale getirelim:

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

import { block_settings } from './inc/block-settings';

export default function Edit({ attributes, setAttributes }) {
	return (
		<>
			{block_settings(attributes, setAttributes)}
			<p { ...useBlockProps() }>
				{ __( 'Sc Cards – hello from the editor!', 'sc-cards' ) }
			</p>
		</>
	);
}

3. Block editöre gidip, sayfayı tazeleyelim tekrar bloğumuzu çağıralım.
   • Bu aşamada bloğumuz hata verebilir, endişeye gerek yok.
     • Bloğu kaldırıp tekrar açtığımızda güncel haliyle tekrar gelecektir.
   • Bloğumuzu açıp ayarlarına baktığımızda şöyle bir görüntü olmalıdır:

Oluşturduğumuz panel, çeşitli kontroller ekleyerek, bloğunuzu daha dinamik hale getirmek isterseniz, bir sonraki yazımızı mutlaka göremilisiniz.