{"id":5488,"date":"2021-06-25T13:58:11","date_gmt":"2021-06-25T10:58:11","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=5488"},"modified":"2022-06-24T01:34:40","modified_gmt":"2022-06-23T22:34:40","slug":"gutenberg-block-editor-icin-bir-block-tasarlama","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/gutenberg-block-editor-icin-bir-block-tasarlama\/","title":{"rendered":"Gutenberg (Block) Edit\u00f6r \u0130\u00e7in Bir Block (Blok) Kodlama"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#Blok_Block_Kodlamak_Icin_Ne_Gerekli\"><span class=\"toc_number toc_depth_1\">1<\/span> Blok (Block) Kodlamak \u0130\u00e7in Ne Gerekli?<\/a><\/li><li><a href=\"#Once_Bir_Eklenti_Olusturalim\"><span class=\"toc_number toc_depth_1\">2<\/span> \u00d6nce Bir Eklenti Olu\u015ftural\u0131m<\/a><\/li><li><a href=\"#Eklenti_Klasorunde_Block_Icin_Gerekli_Dosya_ve_Klasorleri_Olusturalim\"><span class=\"toc_number toc_depth_1\">3<\/span> Eklenti Klas\u00f6r\u00fcnde Block \u0130\u00e7in Gerekli Dosya ve Klas\u00f6rleri Olu\u015ftural\u0131m<\/a><\/li><li><a href=\"#npm_Isleri\"><span class=\"toc_number toc_depth_1\">4<\/span> npm \u0130\u015fleri<\/a><ul><li><a href=\"#npm_run_start_Komutu\"><span class=\"toc_number toc_depth_2\">4.1<\/span> npm run start Komutu<\/a><\/li><li><a href=\"#build_ve_src_Klasorleri_Nedir\"><span class=\"toc_number toc_depth_2\">4.2<\/span> build ve src Klas\u00f6rleri Nedir?<\/a><\/li><li><a href=\"#npm_8211_Block_Kodlamasi_Icin_Gerekli_Scriptleri_Yukleme\"><span class=\"toc_number toc_depth_2\">4.3<\/span> npm &#8211; Block Kodlamas\u0131 \u0130\u00e7in Gerekli Scriptleri Y\u00fckleme<\/a><\/li><\/ul><\/li><li><a href=\"#Birden_Cok_Blogu_Tek_Eklentide_Kodlama\"><span class=\"toc_number toc_depth_1\">5<\/span> Birden \u00c7ok Blo\u011fu Tek Eklentide Kodlama<\/a><\/li><li><a href=\"#Temel_Block_Kodlari\"><span class=\"toc_number toc_depth_1\">6<\/span> Temel Block Kodlar\u0131<\/a><ul><li><a href=\"#Ornek_Bir_Block_hero-img-block\"><span class=\"toc_number toc_depth_2\">6.1<\/span> \u00d6rnek Bir Block: hero-img-block<\/a><ul><li><a href=\"#Block_Sablonundaki_Kodlarin_Anlamlari\"><span class=\"toc_number toc_depth_3\">6.1.1<\/span> Block \u015eablonundaki Kodlar\u0131n Anlamlar\u0131:<\/a><\/li><\/ul><\/li><li><a href=\"#Hazirliklar_Bitti_Artik_Blogu_Kodlayalim\"><span class=\"toc_number toc_depth_2\">6.2<\/span> Haz\u0131rl\u0131klar Bitti, Art\u0131k Blo\u011fu Kodlayal\u0131m<\/a><\/li><\/ul><\/li><li><a href=\"#SC_Hero_Resmi_Blogu_Ile_Ornek_Tasarimlar\"><span class=\"toc_number toc_depth_1\">7<\/span> SC Hero Resmi Blo\u011fu \u0130le \u00d6rnek Tasar\u0131mlar<\/a><\/li><\/ul><\/div>\n\n<p><strong>Kodlayarak bir Gutenberg Block Edit\u00f6r\u00fc blo\u011fu olu\u015fturmay\u0131<\/strong> merak ediyorsan ho\u015f geldin. Bu derste, uygulamal\u0131 olarak bir block nas\u0131l kodlan\u0131r\u0131 anlat\u0131yorum. Keyifli okumalar.<\/p>\n\n\n\n<p>Sonu\u00e7 olarak elde edece\u011fimiz blo\u011fun tema g\u00f6r\u00fcn\u00fcm\u00fc \u015f\u00f6yle olacak:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"149\" class=\"wp-image-5741\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-1.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-\u00d6rnek-Tasar\u0131m-1\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-1.jpg 720w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-1-300x128.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p> <img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"150\" class=\"wp-image-5740\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-2.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-\u00d6rnek-Tasar\u0131m-2\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-2.jpg 724w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-2-300x128.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Olu\u015fturaca\u011f\u0131m\u0131z blo\u011fun; <strong><em>Resim Ayarlar\u0131<\/em><\/strong> ve <strong><em>Renkler<\/em><\/strong> olmak \u00fczere iki adet ayar paneli olacak olacak:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"> <img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"582\" class=\"wp-image-5797\" style=\"width: 250px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlari-.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlar\u0131-\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlari-.jpg 235w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlari--129x300.jpg 129w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"538\" class=\"wp-image-5731\" style=\"width: 250px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6.jpg 236w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6-139x300.jpg 139w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Blok_Block_Kodlamak_Icin_Ne_Gerekli\">Blok (Block) Kodlamak \u0130\u00e7in Ne Gerekli?<\/span><\/h2>\n\n\n\n<p><strong>Gutenberg (Block) Edit\u00f6r \u0130\u00e7in Bir Block Tasarlama<\/strong> i\u015fi ile ilgilendi\u011finize g\u00f6re, kodlama konusunda temel bilgilere sahipsinizdir diye d\u00fc\u015f\u00fcn\u00fcyorum. Bu y\u00fczden, burada, temel kavramlar \u00fczerinde durmadan, do\u011frudan i\u015fin teknik boyutlar\u0131n\u0131 a\u00e7\u0131klamay\u0131 d\u00fc\u015f\u00fcn\u00fcyorum.<\/p>\n\n\n\n<p>Ben bu derste, block geli\u015ftirmek i\u00e7in \u015fu gere\u00e7leri kullanaca\u011f\u0131m:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Xampp server ile localde kurulmu\u015f bir WordPress ile \u00e7al\u0131\u015faca\u011f\u0131z<\/li><li>Visiual Sutdio Code (Kod edit\u00f6r\u00fc olarak kullanaca\u011f\u0131z)<\/li><li>npm (y\u00fckl\u00fc olmal\u0131)<\/li><li>webpack<\/li><li>es6<\/li><li>jsx<\/li><\/ul>\n\n\n\n<p>Listeyi g\u00f6r\u00fcp, karamsarl\u0131\u011fa kap\u0131lan arkada\u015flar i\u00e7in \u015funu s\u00f6yleyebilirim: \u00c7ok da s\u0131k\u0131nt\u0131 yapmay\u0131n, s\u0131ray\u0131 bozmandan, burada verilenleri takip edin. Bazen, kervan\u0131 yolda d\u00fczmek de fena fikir de\u011fildir. Ama, tek bir yaz\u0131da b\u00fct\u00fcn bu teknolojileri a\u00e7\u0131klayabilece\u011fim gibi bir iyimserlik i\u00e7inde olman\u0131z\u0131 da istemem. Ben sizlere \u00f6rnek bir blok kodlayaca\u011f\u0131m, verdi\u011fim kodlar\u0131n incelenmesi ve anla\u015f\u0131lmas\u0131n\u0131 sizlere b\u0131rakaca\u011f\u0131m.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Once_Bir_Eklenti_Olusturalim\">\u00d6nce Bir Eklenti Olu\u015ftural\u0131m<\/span><\/h2>\n\n\n\n<p>Gutenberg Edit\u00f6r\u00fc&#8217;nde kullan\u0131lan &#8220;blocklar&#8221;, tema dosyalar\u0131 ile de\u011fil eklentiler ile eklenir. Bu y\u00fczden \u00f6ncelikle bir eklenti olu\u015fturmam\u0131z gerekiyor.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir eklenti olu\u015fturmak i\u00e7in \u00f6ncelikle;<ul><li><code>wp-content\/plugins<\/code> dizinine gideriz.<\/li><li>T\u00fcrk\u00e7e karakter ve bo\u015fluk kullanmadan, k\u00fc\u00e7\u00fck harfler ile bir klas\u00f6r ismi olu\u015ftururuz. (Klas\u00f6r\u00fcn ismi, genellikle, eklentiye verece\u011fimiz ismin nicename&#8217;i olur.) : <code>deneme-blocks<\/code><\/li><li>Bu klas\u00f6r\u00fcn i\u00e7ine, bir php dosyas\u0131 ekleriz: <code>plugin.php<\/code><\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Eklenti klas\u00f6r\u00fc ve dosyalar\u0131\n|- wp-content (klas\u00f6r)\n|-- plugins (klas\u00f6r)\n|--- deneme-blocks (klas\u00f6r)\n|---- plugin.php (dosya)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><code>plugin.php<\/code> dosyas\u0131nda, eklentimizi WordPress ile tan\u0131\u015ft\u0131r\u0131yoruz:<\/li><\/ul>\n\n\n\n<p><code>plugin.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/*\nPlugin Name: Deneme Blocks\nDescription: Bu bir deneme eklentisidir.\nText Domain: deneme_textd\n\nVersion: 1.0.0\n*\/\n\ndefined('ABSPATH') || exit(); \/\/ Do\u011frudan ula\u015f\u0131m kapal\u0131<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Eklenti_Klasorunde_Block_Icin_Gerekli_Dosya_ve_Klasorleri_Olusturalim\">Eklenti Klas\u00f6r\u00fcnde Block \u0130\u00e7in Gerekli Dosya ve Klas\u00f6rleri Olu\u015ftural\u0131m<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Eklentimizde, olu\u015fturaca\u011f\u0131m\u0131z bloklar\u0131n <code>css<\/code> ve <code>js<\/code> dosyalar\u0131 i\u00e7in, <code>assets<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturuyoruz:<ul><li><code>assets<\/code> klas\u00f6r\u00fcn\u00fcn i\u00e7inde, js ve css dosyalar\u0131 i\u00e7in iki klas\u00f6r daha a\u00e7al\u0131m ki kafam\u0131z kar\u0131\u015fmas\u0131n.<ul><li><code>assets\/js<\/code> klas\u00f6r\u00fcnde;<ul><li>Tema taraf\u0131 i\u00e7in: <code>scripts.js<\/code><\/li><li>Admin taraf\u0131 i\u00e7in: <code>editor.js<\/code> dosyalar\u0131 olsun.<\/li><\/ul><\/li><li><code>assets\/css<\/code> klas\u00f6r\u00fcnde;<ul><li>Tema taraf\u0131 i\u00e7in: <code>style.css<\/code><\/li><li>Admin taraf\u0131 i\u00e7in: <code>editor.css<\/code> dosyalar\u0131 olsun.<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li><code>src<\/code> klas\u00f6r\u00fc olu\u015fturuyoruz.<ul><li><code>src<\/code>: Kaynak klas\u00f6r\u00fc. Block i\u00e7in yazaca\u011f\u0131m\u0131z kodlar\u0131n merkezi buras\u0131 olacakt\u0131r.<\/li><li>Bu klas\u00f6r\u00fcn i\u00e7inde, <code>index.js<\/code> ad\u0131nda bir dosya olu\u015fturuyoruz.<ul><li><code>src\/index.js<\/code>: Block, bu dosyada tasarlanacak, <em>webpack<\/em> taraf\u0131ndan derlenecektir ve ilgili klas\u00f6rlere aktar\u0131lacak.<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu klas\u00f6r ve dosyalar olu\u015fturulduktan sonra, eklenti dizinimiz \u015fu hali alacakt\u0131r:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Eklenti klas\u00f6r\u00fc ve dosyalar\u0131\n|- wp-content (klas\u00f6r)\n|-- plugins (klas\u00f6r)\n|--- deneme-blocks (klas\u00f6r)\n|---- assets (klas\u00f6r)\n|----- js (klas\u00f6r)\n|------ sripts.js (dosya)\n|------ editor.js (dosya)\n|----- css (klas\u00f6r)\n|------ style.css (dosya)\n|------ editor.css (dosya)\n|---- src(klas\u00f6r)\n|----- index.js (dosya)\n|---- plugin.php (dosya)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Gutenberg bloklar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bu dosyalar\u0131 WordPress&#8217;e tan\u0131t\u0131yoruz:<\/li><\/ul>\n\n\n\n<p><code>plugin.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/*\nPlugin Name: Deneme Blocks\nDescription: Bu bir deneme eklentisidir.\nText Domain: deneme_textd\nVersion: 1.0.0\n*\/\n\ndefined('ABSPATH') || exit(); \/\/ Do\u011frudan ula\u015f\u0131m kapal\u0131\n\n\/**\n * HER EVE LAZIM\n *\/\ndefine( 'STCNNT_BLOCKS_PLUGIN_PATH', trailingslashit( plugin_dir_path( __FILE__ ) ) );\ndefine( 'STCNNT_BLOCKS_PLUGIN_URL', trailingslashit( plugins_url( '\/', __FILE__ ) ) );\n\n\/**\n * BLOCK \u0130\u00c7\u0130N GEREKL\u0130 JS VE CSS DOSYALARINI TANITILYORUZ\n *\/\nfunction stcnnt_deneme_blocks_scripts() {\n\n    \/\/ Bu klas\u00f6r ve dosya, otomatik olarak olu\u015fturulacak\n    $asset_file = include( STCNNT_BLOCKS_PLUGIN_PATH . 'build\/index.asset.php');\n    wp_register_script(\n        'stcnnt-deneme-blocks-editor-js',\n        STCNNT_BLOCKS_PLUGIN_URL . 'build\/index.js',\n        $asset_file&#91;'dependencies'],\n        $asset_file&#91;'version']\n    );\n \n    wp_register_style(\n        'stcnnt-deneme-blocks-editor-style',\n        STCNNT_BLOCKS_PLUGIN_URL . 'assets\/css\/editor.css',\n        array( 'wp-edit-blocks', ),\n        filemtime( plugin_dir_path( __FILE__ ) . '\/assets\/css\/editor.css' )\n    );\n \n    wp_register_style(\n        'stcnnt-deneme-blocks-style',\n        STCNNT_BLOCKS_PLUGIN_URL . 'assets\/css\/style.css',\n        array(),\n        filemtime( plugin_dir_path( __FILE__ ) . '\/assets\/css\/style.css' )\n    );\n \n    register_block_type( 'stcnnt-deneme-blocks\/hero-img-block', array(\n        'api_version' =&gt; 2,\n        'style' =&gt; 'stcnnt-deneme-blocks-style', \/\/ Hem tema hem de editor taraf\u0131nda\n        'editor_style' =&gt; 'stcnnt-deneme-blocks-editor-style', \/\/ Sadece editor taraf\u0131nda\n        'editor_script' =&gt; 'stcnnt-deneme-blocks-js', \/\/ Sadece editor taraf\u0131nda\n    ) );\n\n    register_block_type( 'stcnnt-deneme-blocks\/google-ads-block', array(\n        'api_version' =&gt; 2,\n        'style' =&gt; 'stcnnt-deneme-blocks-style', \/\/ Hem tema hem de editor taraf\u0131nda\n        'editor_style' =&gt; 'stcnnt-deneme-blocks-editor-style', \/\/ Sadece editor taraf\u0131nda\n        'editor_script' =&gt; 'stcnnt-deneme-blocks-editor-js',  \/\/ Sadece editor taraf\u0131nda\n    ) );\n}\nadd_action( 'init', 'stcnnt_deneme_blocks_scripts' );\n\n\/**\n * OLU\u015eTURACA\u011eIMIZ BLOCKLAR AYRI B\u0130R KATEGOR\u0130DE G\u00d6R\u00dcNS\u00dcN\n *\/\nfunction stcnnt_block_category( $categories, $post ) {\n    return array_merge(\n        $categories,\n        array(\n            array(\n                'slug' =&gt; 'stcnnt-deneme-blocks-category',\n                'title' =&gt; __( 'Stcnnt Deneme Blocklar\u0131', 'deneme_textd' ),\n            ),\n        )\n    );\n}\nadd_filter( 'block_categories', 'stcnnt_block_category', 10, 2);\n\n\n\/**\n * Bloklar i\u00e7in ba\u011f\u0131ms\u0131z iki adet js dosayas\u0131 da kenarda dursun\n *\/\n\/\/sadece tema taraf\u0131nda \u00e7al\u0131\u015f\u0131r.\nfunction stcnnt_enqueue_theme_scripts(){\n    wp_enqueue_script(\n        'stcnnt-only-theme-js',\n        STCNNT_BLOCKS_PLUGIN_URL . 'assets\/js\/scripts.js',\n        array('jquery'),\n        true\n    );\n}\nadd_action( 'init', 'stcnnt_enqueue_theme_scripts' );\n\n\/\/ Sadece edit\u00f6r taraf\u0131nda \u00e7al\u0131\u015f\u0131r\nfunction stcnnt_enqueue_admin_scripts(){\n    wp_enqueue_script(\n        'stcnnt-only-admin-js',\n        STCNNT_BLOCKS_PLUGIN_URL . 'assets\/js\/editor.js',\n        array('jquery'),\n        true\n    );\n}\nadd_action( 'admin_enqueue_scripts', 'stcnnt_enqueue_admin_scripts' );<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Art\u0131k eklentimiz kullan\u0131ma haz\u0131rd\u0131r ve y\u00f6netim panelinde, &#8220;<em>Eklentiler<\/em>&#8221; men\u00fcs\u00fcnde yer almaktad\u0131r:<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"338\" class=\"wp-image-5555\" style=\"width: 550px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme.jpg 585w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-300x184.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><br>Hen\u00fcz, eklentiyi &#8220;<em>Etkinle\u015ftir<\/em>&#8220;mek i\u00e7in erken. Bu a\u015famada \u00e7al\u0131\u015ft\u0131r\u0131rsak, uyar\u0131 mesajlar\u0131 alabiliriz.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"npm_Isleri\"><em>npm<\/em> \u0130\u015fleri<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Visiual Studio Code edit\u00f6r\u00fcnde, m\u00fcmk\u00fcnse y\u00f6netici olarak, eklenti klas\u00f6r\u00fcn\u00fc a\u00e7\u0131yoruz.<\/li><li>Bu klas\u00f6rde iken, &#8220;Terminali&#8221; a\u00e7\u0131yoruz ve komut sat\u0131r\u0131 eklenti dizininde olmal\u0131d\u0131r:<br><code>PS C:\\xampp\\htdocs\\benimsitem\\wp-content\\plugins\\deneme-blocks&gt;<\/code><\/li><li>Bu dizinde iken \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131yoruz ve fare imleci tekrar eklenti dizininin sonunda belirene kadar bekliyoruz:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm init --yes<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu koddan sonra, eklenti dizinimize<code> package.json<\/code> ad\u0131na bir dosya daha eklenmi\u015f olacak ve dizinin son hali \u015f\u00f6yle olacakt\u0131r:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Eklenti klas\u00f6r\u00fc ve dosyalar\u0131\n|- wp-content (klas\u00f6r)\n|-- plugins (klas\u00f6r)\n|--- deneme-blocks (klas\u00f6r)\n|---- assets (klas\u00f6r)\n|----- js (klas\u00f6r)\n|------ sripts.js (dosya)\n|------ editor.js (dosya)\n|----- css (klas\u00f6r)\n|------ style.css (dosya)\n|------ editor.css (dosya)\n|---- src(klas\u00f6r)\n|----- index.js (dosya)\n|---- plugin.php (dosya)\n|---- <strong><em>package.json (dosya)<\/em><\/strong><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Eklenen <code>package.json<\/code> dosyas\u0131n\u0131n i\u00e7eri\u011fi \u015f\u00f6yledir:<\/li><\/ul>\n\n\n\n<p><code>package.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"deneme-blocks\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\n  },\n  \"keywords\": &#91;],\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yine ayn\u0131 dizinde \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131yoruz ve uzunca bir s\u00fcre bekliyoruz:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i --save-dev @wordpress\/scripts<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yukar\u0131daki komuttan sonra, dizinimize &#8220;<em>node_modules<\/em>&#8221; ad\u0131nda kocaman bir klas\u00f6r y\u00fcklenir ve eklenti dizinimiz \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Eklenti klas\u00f6r\u00fc ve dosyalar\u0131\n|- wp-content (klas\u00f6r)\n|-- plugins (klas\u00f6r)\n|--- deneme-blocks (klas\u00f6r)\n|---- assets (klas\u00f6r)\n|----- js (klas\u00f6r)\n|------ sripts.js (dosya)\n|------ editor.js (dosya)\n|----- css (klas\u00f6r)\n|------ style.css (dosya)\n|------ editor.css (dosya)\n|---- <strong><em>node_modules (klas\u00f6r)<\/em><\/strong>\n|---- src(klas\u00f6r)\n|----- index.js (dosya)\n|---- plugin.php (dosya)\n|---- package.json (dosya)<\/code><\/pre>\n\n\n\n<p>Art\u0131k, bir block geli\u015ftirmek i\u00e7in, WordPress&#8217;in b\u00fct\u00fcn yard\u0131mc\u0131 elemanlar\u0131 elimizin alt\u0131nda.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu kodu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra <em>package.json<\/em> dosyas\u0131 \u015f\u00f6yle g\u00f6r\u00fcnmelidir:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"deneme-blocks\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\n  },\n  \"keywords\": &#91;],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@wordpress\/scripts\": \"^16.1.3\"\n  }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><code>package.json<\/code> dosyas\u0131n\u0131 a\u015fa\u011f\u0131daki \u015fekilde d\u00fczenlememiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>package.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"deneme-blocks\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    <span class=\"has-inline-color has-pale-cyan-blue-color\">\"start\": \"wp-scripts start\",\n    \"build\": \"wp-scripts build\"<\/span>\n  },\n  \"keywords\": &#91;],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@wordpress\/scripts\": \"^16.1.3\"\n  }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu a\u015famada terminalde a\u015fa\u011f\u0131daki komutu yaz\u0131p, enter tu\u015funa basmal\u0131 ve biraz beklemeliyiz:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run start<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Her \u015fey yolunda giderse, terminal bize, a\u015fa\u011f\u0131daki gibi bir cevap vermelidir:<br><img loading=\"lazy\" decoding=\"async\" width=\"520\" height=\"228\" class=\"wp-image-5579\" style=\"width: 520px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-2.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-2\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-2.jpg 519w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-2-300x132.jpg 300w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/li><li>Bu cevap bize diyor ki:<ul><li><code>build<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturduk.<\/li><li>Bu klas\u00f6r\u00fcn i\u00e7inde, <code>index.asset.php<\/code> ad\u0131na bir dosya olu\u015fturduk.<\/li><li>Bu klas\u00f6r\u00fcn i\u00e7inde, <code>index.js<\/code> ad\u0131nda bir dosya daha olu\u015fturduk.<\/li><li>Bu klas\u00f6r\u00fcn i\u00e7inde, <code>index.js.map<\/code> ad\u0131nda bir dosya daha olu\u015fturduk.<ul><li>\u0130\u015fte b\u00fct\u00fcn bu i\u015fleri yapan,<em> webpack<\/em> ad\u0131ndaki paketleyicidir.<\/li><li>Biraz \u00f6nce y\u00fckledi\u011fimiz <code>@wordpress\/scripts<\/code> paketi, bizim i\u00e7in, gerekli <em>webpack<\/em> ayarlar\u0131n\u0131 yapm\u0131\u015ft\u0131r.<\/li><\/ul><\/li><\/ul><\/li><li><code>build<\/code> klas\u00f6r\u00fc, bizim eklentimizin olu\u015ftu\u011fu klas\u00f6rd\u00fcr.<ul><li>Yani i\u015fimiz bitince, eklenti klas\u00f6r\u00fc i\u00e7inde, bize laz\u0131m olacak dosya ve klas\u00f6rler sadece \u015fu 3 tanesidir.<ul><li><code>plugin.php<\/code> dosyas\u0131<\/li><li><code>build<\/code> klas\u00f6r\u00fc<\/li><li>assets klas\u00f6r\u00fc<\/li><\/ul><\/li><li>Bu \u00fc\u00e7\u00fcn\u00fcn d\u0131\u015f\u0131ndaki b\u00fct\u00fcn dosya ve klas\u00f6rler, block yazmak i\u00e7in bize yad\u0131m ederler.<\/li><\/ul><ul><li>Kodlad\u0131\u011f\u0131m\u0131z eklentiyi al\u0131p giderken, eklenti klas\u00f6r\u00fcn\u00fcn i\u00e7indeki di\u011fer dosyalara ihtiyac\u0131m\u0131z olmayacakt\u0131r.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"npm_run_start_Komutu\"><code>npm run start<\/code> Komutu<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu komut; edit\u00f6r\u00fcn bizi devaml\u0131 dinlemesini sa\u011flar.<\/li><li>Bu komut \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, terminal dinleme moduna ge\u00e7er.<\/li><li>Terminal <em>dinleme modunda iken<\/em>;<ul><li>komut kabul etmez<\/li><li>yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklerden sonra, bir <em>dosyay\u0131 kaydetti\u011fimizde<\/em>;<ul><li><code>build<\/code> klas\u00f6r\u00fc yoksa tekrar olu\u015fturulur, varsa \u00fczerine yaz\u0131l\u0131r.<\/li><\/ul><ul><li>kodlar\u0131m\u0131z\u0131n otomatik olarak derlenir ve <code>build<\/code> klas\u00f6r\u00fcne ta\u015f\u0131n\u0131r.<\/li><li>derleme i\u015flemi <code>webpack<\/code> marifetiyle yap\u0131l\u0131r.<\/li><\/ul><\/li><\/ul><\/li><li>Dinleme modundan tekrar komut sat\u0131r\u0131na ge\u00e7mek i\u00e7in <code>Ctrl + C<\/code> tu\u015f \u00e7iftine birlikte basmam\u0131z yeterlidir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"build_ve_src_Klasorleri_Nedir\"><code>build<\/code> ve <code>src<\/code> Klas\u00f6rleri Nedir?<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><code>src<\/code> klas\u00f6r\u00fc bizim mutfa\u011f\u0131m\u0131zd\u0131r, block ile ilgili b\u00fct\u00fcn kodlar\u0131 burada yazar\u0131z.<\/li><li>Block yazarken, web taray\u0131c\u0131lar\u0131n hen\u00fcz desteklemedi\u011fi; <code>babel, jsx, esnext<\/code> gibi js uygulamalar\u0131n\u0131\/k\u00fct\u00fcphanelerini de kullan\u0131r\u0131z.<\/li><li><code>webpack<\/code> paketi; <code>src<\/code> klas\u00f6r\u00fcnde yaz\u0131lan kodlar\u0131, taray\u0131c\u0131lar\u0131n anlayabildi\u011fi \u015fekle getirir ve <code>build<\/code> klas\u00f6r\u00fcnde paketler.<ul><li>Bu i\u015flem;<ul><li><code>npm run start<\/code> komutu ilk defa \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda<\/li><li><code>npm run start<\/code> komutu \u00e7al\u0131yor iken, dosyalar\u0131n her kaydedili\u015finde (<code>Ctrl + s<\/code>) ger\u00e7ekle\u015fir.<\/li><\/ul><\/li><\/ul><\/li><li><code>build<\/code> klas\u00f6r\u00fcn\u00fc silip, tekrar <code>npm run start<\/code> dersek veya bu komut \u00e7al\u0131\u015ft\u0131ktan sonra bir dosyay\u0131 kaydedersek, <code>build<\/code> klas\u00f6r\u00fc ve i\u00e7indeki dosyalar, tekrar en g\u00fcncel haliyle olu\u015ftur.<ul><li><code>src<\/code> klas\u00f6r\u00fcn\u00fcn ba\u015f\u0131na bir i\u015f gelmedi\u011fi m\u00fcddet\u00e7e, <code>build<\/code> klas\u00f6r\u00fcn\u00fc en g\u00fcncel haliyle olu\u015fturmak tek bir komut kadar kolayd\u0131r.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu a\u015famada, eklenti dizinimiz \u015f\u00f6yle g\u00f6r\u00fcnmelidir:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Eklenti klas\u00f6r\u00fc ve dosyalar\u0131\n|- wp-content (klas\u00f6r)\n|-- plugins (klas\u00f6r)\n|--- deneme-blocks (klas\u00f6r)\n|---- assets (klas\u00f6r)\n|----- js (klas\u00f6r)\n|------ sripts.js (dosya)\n|------ editor.js (dosya)\n|----- css (klas\u00f6r)\n|------ style.css (dosya)\n|------ editor.css (dosya)\n|---- <span class=\"has-inline-color has-pale-cyan-blue-color\">build<\/span> (klas\u00f6r)\n|----- <span class=\"has-inline-color has-pale-cyan-blue-color\">index.asset.php<\/span> (dosya)\n|----- <span class=\"has-inline-color has-pale-cyan-blue-color\">index.js<\/span> (dosya)\n|----- <span class=\"has-inline-color has-pale-cyan-blue-color\">index.js.map<\/span> (dosya)\n|---- node_modules (klas\u00f6r)\n|---- src(klas\u00f6r)\n|----- index.js (dosya)\n|---- plugin.php (dosya)\n|---- package.json (dosya)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Art\u0131k eklentimizi etkinle\u015ftirebiliriz. (Y\u00f6netim paneli: <em>Eklentiler -&gt; Deneme Blocks -&gt; Etkinle\u015ftir<\/em>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"npm_8211_Block_Kodlamasi_Icin_Gerekli_Scriptleri_Yukleme\"><code>npm<\/code> &#8211; Block Kodlamas\u0131 \u0130\u00e7in Gerekli Scriptleri Y\u00fckleme<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><code>npm run start<\/code> komutundan sonra, terminal bizi dinleme moduna ge\u00e7mi\u015ftir.<\/li><li>Terminal dinleme modunda iken, bir dosyada bir de\u011fi\u015fiklik yaparsak bunu alg\u0131lar ve dosyan\u0131n en g\u00fcncel haliyle tekrar derlenmesini sa\u011flar.<ul><li>Terminali, dinleme modundan \u00e7\u0131kar\u0131p tekrar bir komut girebilmek i\u00e7in, \u00f6ncelikte, fare terminalde iken:<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Ctrl + C<\/code><\/pre>\n\n\n\n<p>ikilisine basmam\u0131z gerekiyor.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu tu\u015flardan sonra kar\u015f\u0131m\u0131za \u015f\u00f6yle bir soru \u00e7\u0131kacakt\u0131r:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Terminate batch job (Y\/N)?<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu soruyu, &#8220;<strong>Y&#8221;<\/strong> ve enter tu\u015flar\u0131na basarak cevapl\u0131yoruz.<\/li><li>Bu i\u015flemlerden sonra, terminal, dinleme modundan \u00e7\u0131kacak ve komut sat\u0131r\u0131 tekrar aktif olacakt\u0131r.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Komut sat\u0131r\u0131 eklentinin k\u00f6k dizininde iken, a\u015fa\u011f\u0131daki komutu girerek, scriptin y\u00fcklenmesini bekleyelim (\u0130\u015flem biraz uzun s\u00fcrebilir.):<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @wordpress\/blocks --save<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Block kodlamaya ge\u00e7emeden \u00f6nce, kodlama esnas\u0131nda ihtiyac\u0131m\u0131z olacak baz\u0131 paketleri y\u00fckleyelim.<\/li><li>Bunun i\u00e7in, eklentinin k\u00f6k dizininde iken, a\u015fa\u011f\u0131daki i\u015flemleri yapal\u0131m:<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\"><li>A\u015fa\u011f\u0131daki komutu girerek, scriptin y\u00fcklenmesini bekleyelim:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @wordpress\/i18n --save<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>A\u015fa\u011f\u0131daki komutu girerek, scriptin y\u00fcklenmesini bekleyelim:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @wordpress\/element --save<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>A\u015fa\u011f\u0131daki komutu girerek, scriptin y\u00fcklenmesini bekleyelim:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @wordpress\/block-editor --save<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>A\u015fa\u011f\u0131daki komutu girerek, scriptin y\u00fcklenmesini bekleyelim:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @wordpress\/components --save<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Birden_Cok_Blogu_Tek_Eklentide_Kodlama\">Birden \u00c7ok Blo\u011fu Tek Eklentide Kodlama<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Amac\u0131m\u0131z bir tane block kodlamak ise;<ul><li><code>src\/index.js<\/code> dosyas\u0131 yeterlidir.<\/li><\/ul><\/li><li>Birden fazla block kodlamak istiyorsak:<ul><li><code>src\/block-1\/index.js<\/code><\/li><li><code>src\/block-2\/index.js<\/code><\/li><li>&#8230;<br>\u015feklinde, alt klas\u00f6rler ile diledi\u011fimiz kadar block olu\u015fturabiliriz.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Biz, iki tane block kodlayaca\u011f\u0131z. Bu blocklar\u0131n isimleri \u015f\u00f6yle olacak:<ol><li>hero-img-block:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"150\" class=\"wp-image-5624\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3.jpg 550w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3-300x129.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li><li>google-ads-block<\/li><\/ol><\/li><li>Bu iki blo\u011fu kodlamak i\u00e7in, eklenti dizininde, <code>src<\/code> klas\u00f6r\u00fcne \u015fu iki klas\u00f6r ve dosyay\u0131 ekliyoruz:<ul><li><code>hero-img-block<\/code> (klas\u00f6r)<ul><li><code>block.js<\/code> (dosya)<\/li><\/ul><\/li><li><code>google-ads-block<\/code> (klas\u00f6r)<ul><li><code>block.js<\/code> (dosya)<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu a\u015famadan sonra, eklenti dizinimiz \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Eklenti klas\u00f6r\u00fc ve dosyalar\u0131\n|- wp-content (klas\u00f6r)\n|-- plugins (klas\u00f6r)\n|--- deneme-blocks (klas\u00f6r)\n|---- assets (klas\u00f6r)\n|----- js (klas\u00f6r)\n|------ sripts.js (dosya)\n|------ editor.js (dosya)\n|----- css (klas\u00f6r)\n|------ style.css (dosya)\n|------ editor.css (dosya)\n|---- build (klas\u00f6r)\n|----- index.asset.php (dosya)\n|----- index.js (dosya)\n|----- index.js.map (dosya)\n|---- node_modules (klas\u00f6r)\n|---- src(klas\u00f6r)\n|----- <span class=\"has-inline-color has-pale-cyan-blue-color\">hero-img-block<\/span> (klas\u00f6r)\n|------ <span class=\"has-inline-color has-pale-cyan-blue-color\">block.js<\/span> (dosya)\n|----- <span class=\"has-inline-color has-pale-cyan-blue-color\">google-ads-block<\/span> (klas\u00f6r)\n|------ <span class=\"has-inline-color has-pale-cyan-blue-color\">block.js<\/span> (dosya)\n|----- index.js (dosya)\n|---- plugin.php (dosya)\n|---- package.json (dosya)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Ekledi\u011fimiz blocklar\u0131, <code>src\/index.js<\/code> dosyas\u0131na tan\u0131tal\u0131m:<\/li><\/ul>\n\n\n\n<p><code>src\/index.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import '.\/hero-img-block\/block.js';\nimport '.\/google-ads-block\/block.js';<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Temel_Block_Kodlari\">Temel Block Kodlar\u0131<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0130ki tane block kodlayaca\u011f\u0131m\u0131z\u0131 belirtmi\u015ftik.<ul><li>\u00d6nce <strong><em>hero-img-block<\/em><\/strong> ad\u0131n\u0131 verdi\u011fimiz block \u00fczerinden, bir block nas\u0131l kodlan\u0131r g\u00f6relim:<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek_Bir_Block_hero-img-block\">\u00d6rnek Bir Block: hero-img-block<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bizim haz\u0131rlad\u0131\u011f\u0131m\u0131z eklenti dizininde <code>hero-img-block<\/code> blo\u011funun temel dosyas\u0131 <code>hero-img-block\/block.js<\/code> dosyas\u0131d\u0131r.<\/li><li>Bir <em>WordPress Gutenberg Edit\u00f6r\u00fc<\/em> blo\u011fu, ana hatlar\u0131 ile \u015fu \u015fablona g\u00f6re kodlan\u0131r:<\/li><\/ul>\n\n\n\n<p><code>hero-img-block\/block.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { registerBlockType } from '@wordpress\/blocks';\n\nregisterBlockType( 'stcnnt-deneme-blocks\/hero-img-block', {\n    apiVersion: 2,\n    title: '',\n    icon: '',\n    category: '',\n    attributes: {},\n    example: {},\n    edit: ( props ) =&gt; {\n        return (\n            &lt;p&gt;Buras\u0131 sadece edit\u00f6r sayfas\u0131nda g\u00f6r\u00fcn\u00fcr.&lt;\/p&gt;\n        );\n    },\n    save: ( props ) =&gt; {\n        return (\n            &lt;p&gt;Buras\u0131 sadece temada g\u00f6r\u00fcn\u00fcr.&lt;\/p&gt;\n        );\n    },\n} );<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Block_Sablonundaki_Kodlarin_Anlamlari\">Block \u015eablonundaki Kodlar\u0131n Anlamlar\u0131:<\/span><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import { registerBlockType } from '@wordpress\/blocks';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yukar\u0131daki kod, bir block kaydetmek i\u00e7in gerekli olan <code>registerBlockType<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r.<\/li><li>Block ile ilgili b\u00fct\u00fcn kodlar bu fonksiyonun parametreleridir.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>registerBlockType( 'blok-kimli\u011fi', {block arg\u00fcmanlar\u0131})<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yukar\u0131daki fonksiyon, bir blo\u011fun b\u00fct\u00fcn kodlar\u0131n\u0131n bar\u0131nd\u0131\u011f\u0131 fonksiyondur.<\/li><li>Fonksiyonun 2 parametresi vard\u0131r:<ol><li>Parametre: <strong>Block Kimli\u011fi<\/strong><ul><li>Blo\u011fun veritaban\u0131na kaydedilecek ismidir.<\/li><li>Bu isim,<code> plugin.php<\/code> dosays\u0131nda, <code>register_block_type()<\/code> fonksiyonunun birinci parametresi ile ayn\u0131 olmal\u0131d\u0131r.<ul><li>\u00d6rnek-1:<br><code>'benim-super-blocklarim\/super-bir-block'<\/code><\/li><li>\u00d6rnek-2:<br><code>'benim-super-blocklarim\/super-ba\u015fka-bir-block'<\/code><\/li><\/ul><\/li><\/ul><\/li><\/ol><ol><li>Parametre: <strong>Block Arg\u00fcmanlar\u0131<\/strong><ul><li>Bir javascript nesnesidir.<\/li><li>Blo\u011fun ad\u0131, kategorisi, ikonu, \u00f6rnek g\u00f6r\u00fcn\u00fcm\u00fc, edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fc, tema g\u00f6r\u00fcn\u00fcm\u00fc&#8230;. gibi b\u00fct\u00fcn \u00f6zellikleri bu parametrede belirlenir.<\/li><li>Block arg\u00fcmanlar\u0131 \u015funlard\u0131r:<ul><li><code>title<\/code>: (string) Blo\u011fun ad\u0131d\u0131r. Block, edit\u00f6rde bu ad ile kar\u015f\u0131m\u0131za \u00e7\u0131kar.<ul><li>\u00d6rnek:<br><code>title: __( 'Book' )<\/code><\/li><\/ul><\/li><li><code>description<\/code>: (string) Blo\u011fun tan\u0131m\u0131d\u0131r. Zorunlu de\u011fildir.<ul><li>\u00d6rnek:<br><code>description: __( 'Block showing a Book card.' );<\/code><\/li><\/ul><\/li><li><code>category<\/code>: (string) Blo\u011fun, di\u011fer blocklar i\u00e7in kullan\u0131lan kategorilerden hangisinde g\u00f6sterilece\u011fini belirtir.<ul><li>\u00d6rnek:<br><code>category: 'widgets',<\/code><\/li><li>WordPress&#8217;in block kategorileri:<ul><li><code>text<\/code><\/li><li><code>common<\/code><\/li><li><code>formatting&nbsp;<\/code><\/li><li><code>layout<\/code><\/li><li><code>media<\/code><\/li><li><code>design<\/code><\/li><li><code>widgets<\/code><\/li><li><code>theme<\/code><\/li><li><code>embed<\/code><\/li><\/ul><\/li><\/ul><\/li><li><code>icon<\/code>: (string|object) Blo\u011fun ikonudur. Zorunlu de\u011fildir.<ul><li>\u00d6rnek-1:<br><code>icon: 'book-alt',<\/code><\/li><li>\u00d6rnek-2:<br><code>icon: &lt;svg <code>viewBox=\"0 0 24 24\"<\/code> <code>xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\">http:\/\/www.w3.org\/2000\/svg<\/a>\"<\/code>&gt;<code>&lt;path fill=\"none\"<\/code> <code>d=\"M0 0h24v24H0V0z\"<\/code> <code>\/&gt;&lt;path d=\"M19 13H5v-2h14v2z\"<\/code> <code>\/&gt;<\/code>&lt;\/svg&gt;<\/code><\/li><li>\u00d6rnek-3:<br><code>icon: {<\/code><br><code>background: '#7e70af',<\/code><br><code>foreground: '#fff',<\/code><br><code>src: &lt;svg viewBox=\"0 0 24 24\"xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\">http:\/\/www.w3.org\/2000\/svg<\/a>\"&gt;&lt;path fill=\"none\"d=\"M0 0h24v24H0V0z\"\/&gt;&lt;path d=\"M19 13H5v-2h14v2z\"\/&gt;&lt;\/svg&gt;,} ,<\/code><\/li><li>Kullanabilece\u011finiz b\u00fct\u00fcn <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/#tagcloud\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress&#8217;in dashiconlar\u0131<\/a> (se\u00e7ti\u011finiz ikonun isminin \u00f6n\u00fcndeki <code>dashicon-<\/code> ifadesini kullanmay\u0131n.)<\/li><\/ul><\/li><li><code>attributes<\/code>: (object) Block i\u00e7in yapaca\u011f\u0131m\u0131z ayarlarda kullanaca\u011f\u0131m\u0131z de\u011fi\u015fkenlerdir.<ul><li>\u00d6rnek:<br><code>attributes: {<\/code><br><code>cover: {type: 'string', source: 'attribute', selector: 'img', attribute: 'src',},<\/code><br><code>author: {type: 'string',source: 'html',selector: '.book-author',},<\/code><br><code>pages: {type: 'number',},<\/code><br><code>},<\/code><\/li><\/ul><\/li><li><code>example<\/code>: (object) Block i\u00e7in varsay\u0131lan bir g\u00f6r\u00fcn\u00fcm olu\u015fturmak i\u00e7in, kullan\u0131l\u0131r. Edit\u00f6rde, blo\u011fu se\u00e7meden \u00f6nce, fareyi \u00fczerinde bekletirsek, burada verdi\u011fimiz de\u011ferlere g\u00f6re bir \u00f6rnek g\u00f6r\u00fcn\u00fcm olu\u015fur.<ul><li>\u00d6rnek:<br><code>example: {<\/code><br> <code>attributes: {<\/code><br> <code>cover: '<a href=\"https:\/\/example.com\/image.jpg\">https:\/\/example.com\/image.jpg<\/a>',<\/code><br> <code>author: 'William Shakespeare',<\/code><br> <code>pages: 500<\/code><br> <code>},<\/code><br><code>},<\/code><\/li><\/ul><\/li><li><code>edit<\/code>: Blo\u011fun, edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fcne ait html yap\u0131s\u0131n\u0131 d\u00f6nd\u00fcren bir fonksiyondur. Block i\u00e7in kullanaca\u011f\u0131m\u0131z b\u00fct\u00fcn ayarlar, form elemanlar\u0131 bu fonksiyonun i\u00e7inde d\u00f6nd\u00fcr\u00fcl\u00fcr.<ul><li>Fonksiyonun bir tane parametresi vard\u0131r ve genellikle <code>props<\/code> ad\u0131yla \u00e7a\u011f\u0131r\u0131l\u0131r.<\/li><li>Bu parametre, <code>attributes<\/code> nesnesinde tan\u0131mlad\u0131\u011f\u0131m\u0131z de\u011fi\u015fkenler de dahil bir \u00e7ok gerekli elemana sahiptir.<\/li><\/ul><\/li><li><code>save<\/code>: Blo\u011fun, tema g\u00f6r\u00fcn\u00fcm\u00fcne ait html yap\u0131s\u0131n\u0131 d\u00f6nd\u00fcren bir fonksiyondur.<ul><li>Fonksiyonun bir tane parametresi vard\u0131r ve genellikle <code>props<\/code> ad\u0131yla \u00e7a\u011f\u0131r\u0131l\u0131r.<\/li><li>Bu parametre, <code>attributes<\/code> nesnesinde tan\u0131mlad\u0131\u011f\u0131m\u0131z de\u011fi\u015fkenler de dahil bir \u00e7ok gerekli elemana sahiptir.<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ol><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Hazirliklar_Bitti_Artik_Blogu_Kodlayalim\">Haz\u0131rl\u0131klar Bitti, Art\u0131k Blo\u011fu Kodlayal\u0131m<\/span><\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"236\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3\" class=\"wp-image-5624\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3.jpg 550w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-3-300x129.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><figcaption>&#8220;SC Hero Resmi&#8221; Blo\u011fu &#8211; Tema G\u00f6r\u00fcn\u00fcm\u00fc<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li><code>registerBlockType<\/code> fonksiyonuna gerekli bilgileri girerek, yukar\u0131daki gibi g\u00f6r\u00fcnecek olan, ilk blo\u011fumuzu olu\u015ftural\u0131m:<\/li><\/ul>\n\n\n\n<p><code>hero-img-block\/block.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nimport { registerBlockType } from '@wordpress\/blocks';\nimport { __ } from '@wordpress\/i18n';\nimport {\n    useBlockProps,\n    RichText,\n    AlignmentToolbar,\n    BlockControls,\n    InspectorControls,\n    ColorPalette,\n    MediaUpload,\n} from '@wordpress\/block-editor';\n\nimport { Panel, PanelBody, PanelRow, Button, ToggleControl, SelectControl } from '@wordpress\/components';\nimport { __experimentalNumberControl as NumberControl } from '@wordpress\/components';\nimport { image } from '@wordpress\/icons';\n\nregisterBlockType( 'stcnnt-deneme-blocks\/hero-img-block', {\n    apiVersion: 2,\n    title: 'SC Hero Resmi',\n    icon: 'format-image', \/\/dashicons-format-image\n    category: 'stcnnt-deneme-blocks-category',\n    attributes: {\n        useContent: {\n            type: 'boolean',\n            default: true,\n        },\n        content: {\n            type: 'array',\n            source: 'children',\n            selector: 'p',\n        },\n        alignment: {\n            type: 'string',\n            default: 'none',\n        },\n        useOverlay: {\n            type: 'boolean',\n            default: true,\n        },\n        overlayColor: {\n            type: 'string',\n            default: null \/\/ varsay\u0131lan bir renk yok\n        },\n        overlayColorAlpha: {\n            type: 'string',\n            default: '40'\n        },\n        fontColor: {\n            type: 'string',\n            default: '#ffffff'\n        },\n        fontTag: {\n            type: 'string',\n            default: 'p'\n        },\n        useFontBg: {\n            type: 'boolean',\n            default: true,\n        },\n        backgroundImage: {\n            type: 'string',\n            default: null, \/\/ isterseniz varsay\u0131lan bir resim atayabilirsiniz\n        }\n    },\n    example: {\n        attributes: {\n            content: __('Herkese Merhaba :)', 'deneme_textd'),\n            alignment: 'right',\n        },\n    },\n    edit: ( { attributes, setAttributes } ) =&gt; {\n        \n        const onChangeContent = ( newContent ) =&gt; {\n            setAttributes( { content: newContent } );\n        };\n \n        const onChangeAlignment = ( newAlignment ) =&gt; {\n            setAttributes( {\n                alignment: newAlignment === undefined ? 'none' : newAlignment,\n            } );\n        };\n\n        const onImageSelect = ( imageObject ) =&gt; {\n            setAttributes( {\n                backgroundImage: imageObject.sizes.full.url\n            } );\n        };\n\n        const onOverlayColorChange = ( changes ) =&gt; {\n            setAttributes( {\n                overlayColor: changes\n            } );\n        };\n\n        const onTextColorChange = ( changes ) =&gt; {\n            setAttributes( {\n                fontColor: changes\n            } );\n        };\n\n        const resmiKaldir = () =&gt; {\n            setAttributes( {\n                backgroundImage: null\n            } );\n        }\n\n        const useOverlaySelection = (val) =&gt; {\n            setAttributes( {useOverlay: val} );\n        }\n\n        const useContentSelection = (val) =&gt; {\n            setAttributes( {useContent: val} );\n        }\n        \n        const useFontBgSelection = (val) =&gt; {\n            setAttributes( {useFontBg: val} );\n        }\n        \n        const overlayColorAlphaChange = (val) =&gt; {\n            setAttributes( {overlayColorAlpha: val} );\n        }\n\n        const scSettingsSection = (attributes) =&gt; (\n            &lt;Panel header=\"\"&gt;\n                &lt;PanelBody title=\"Resim Ayarlar\u0131\" className=\"wp-block-stcnnt-deneme-blocks-hero-setting\" initialOpen={ true }&gt;\n                    &lt;PanelRow className=\"wp-block-stcnnt-deneme-blocks-hero-img-container\"&gt;\n                        {attributes.backgroundImage != null ?\n                        &lt;img className=\"sc-hero-img\" src={attributes.backgroundImage} \/&gt;\n                        :\n                        &lt;p className=\"sc-hero-img-placeholder\"&gt;{__('Resim y\u00fcklenmedi.', 'deneme_textd')}&lt;\/p&gt;\n                        }\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;div&gt;\n                            &lt;MediaUpload\n                                onSelect={ onImageSelect }\n                                type=\"image\"\n                                value={attributes.backgroundImage} \/\/ make sure you destructured backgroundImage from props.attributes!\n                                render={({ open }) =&gt; (\n                                    &lt;Button\n                                        variant=\"primary\"\n                                        icon= {image}\n                                        onClick={open}&gt;\n                                        {attributes.backgroundImage != null ? __('De\u011fi\u015ftir', 'deneme_textd') : __('Resim y\u00fckle', 'deneme_textd')}\n                                    &lt;\/Button&gt;\n                                )}\n                            \/&gt;\n                            {attributes.backgroundImage != null ? \n                                &lt;Button\n                                variant=\"primary\"\n                                icon= {image}\n                                onClick={resmiKaldir}\n                                className=\"sc-resmi-kaldir\"\n                                &gt;{__('Kald\u0131r', 'deneme_textd')}&lt;\/Button&gt;\n                                : null\n                            }\n                        &lt;\/div&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;hr \/&gt;\n                    &lt;PanelRow&gt;\n                        &lt;ToggleControl\n                            label= {__('Overlay kullan', 'deneme_textd')}\n                            help= {__('Resmin \u00fczerinde yar\u0131 \u015feffaf bir tabaka olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.', 'deneme_textd')}\n                            checked={ attributes.useOverlay }\n                            onChange={ useOverlaySelection }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;ToggleControl\n                            label= {__('Metin kullan', 'deneme_textd')}\n                            help= {__('Resmin \u00fczerine k\u0131sa bir a\u00e7\u0131klama yazmak i\u00e7in kullan\u0131l\u0131r.', 'deneme_textd')}\n                            checked={ attributes.useContent }\n                            onChange={ useContentSelection }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;SelectControl\n                            label=\"Metnin HTML etiketi:\"\n                            value={ attributes.fontTag }\n                            options={ &#91;\n                                { label: 'p', value: 'p' },\n                                { label: 'h1', value: 'h1' },\n                                { label: 'h2', value: 'h2' },\n                                { label: 'h3', value: 'h3' },\n                                { label: 'h4', value: 'h4' },\n                                { label: 'h5', value: 'h5' },\n                                { label: 'h6', value: 'h6' },\n                                { label: 'div', value: 'div' },\n                                { label: 'span', value: 'span' },\n                            ] }\n                            onChange={ ( val ) =&gt; {\n                                setAttributes( { fontTag: val } );\n                            } }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;ToggleControl\n                            label= {__('Metin i\u00e7in arkplan kullan:', 'deneme_textd')}\n                            help= {__('Resmin metni i\u00e7in arkplan olu\u015fturur.', 'deneme_textd')}\n                            checked={ attributes.useFontBg }\n                            onChange={ useFontBgSelection }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n                &lt;PanelBody title={__('Renkler', 'deneme_textd')} initialOpen={ false }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;div&gt;\n                            &lt;label className=\"sc-setting-section-label\"&gt;{__('Overlay rengi:', 'deneme_textd')}&lt;\/label&gt;\n                            &lt;ColorPalette\n                                value={attributes.overlayColor}\n                                onChange={onOverlayColorChange}\n                            \/&gt;\n                        &lt;\/div&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;label&gt;{__('\u015eeffafl\u0131k de\u011feri:', 'deneme_textd')}&lt;\/label&gt;\n                        &lt;NumberControl\n                            onChange={ overlayColorAlphaChange }\n                            value={ attributes.overlayColorAlpha }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;hr \/&gt;\n                    &lt;PanelRow&gt;\n                        &lt;div&gt;\n                            &lt;label className=\"sc-setting-section-label\"&gt;{__('Metin rengi:', 'deneme_textd')}&lt;\/label&gt;\n                            &lt;ColorPalette\n                                value={attributes.fontColor}\n                                onChange={onTextColorChange}\n                            \/&gt;\n                        &lt;\/div&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        );\n \n        const textBg = attributes.useFontBg ? ' sc-text-bg' : '';\n\n        return (\n            &#91;   \n                &lt;InspectorControls&gt;\n                    {scSettingsSection(attributes)}\n                &lt;\/InspectorControls&gt;,\n                &lt;div\n                { ...useBlockProps() }\n                style={{\n                    backgroundImage: `url(${attributes.backgroundImage})`,\n                    backgroundSize: 'cover',\n                    backgroundPosition: 'center',\n                    height: '300px',\n                }}&gt;\n                    {\n                        &lt;BlockControls&gt;\n                            &lt;AlignmentToolbar\n                                value={ attributes.alignment }\n                                onChange={ onChangeAlignment }\n                            \/&gt;\n                        &lt;\/BlockControls&gt;\n                    }\n                    {attributes.useContent ?\n                    &lt;div className={`sc-hero-text-container ${textBg}`}\n                    style={{\n                        color: attributes.fontColor,\n                        textAlign: attributes.alignment,\n                    }}\n                    &gt;\n                        &lt;RichText\n                            className={ attributes.className }\n                            tagName= {attributes.fontTag}\n                            onChange={ onChangeContent }\n                            value={ attributes.content  }\n                            placeholder={__('Resim metni...', 'deneme_textd')}\n                        \/&gt;\n                    &lt;\/div&gt;\n                    : null\n                    }\n                    {attributes.useOverlay ?\n                        &lt;div\n                        className=\"sc-hero-img-overlay\"\n                        style={{\n                            backgroundColor: attributes.overlayColor,\n                            opacity: attributes.overlayColorAlpha\/100,\n                        }}\n                        &gt;&lt;\/div&gt;\n                        : null\n                    }\n                &lt;\/div&gt;\n            ]\n        );\n    },\n    save: ( { attributes } ) =&gt; {\n        const blockProps = useBlockProps.save();\n        const textBg = attributes.useFontBg ? ' sc-text-bg' : '';\n\n        return (\n            &lt;div { ...blockProps }\n            style={{\n                backgroundImage: `url(${attributes.backgroundImage})`,\n                backgroundSize: 'cover',\n                backgroundPosition: 'center',\n                height: '300px',\n            }}\n            &gt;\n                {(attributes.content.length != 0 &amp;&amp; attributes.useContent) ?\n                    &lt;div\n                    className={ `sc-hero-text-container align-${ attributes.alignment } ${textBg}` }\n                    style={{\n                        color: `${attributes.fontColor} !important`,\n                    }}\n                    &gt;\n                        &lt;RichText.Content\n                            tagName={attributes.fontTag}\n                            value={ attributes.content }\n                            className='sc-hero-text'\n                        \/&gt;\n                    &lt;\/div&gt;\n                    : null    \n                }\n                {attributes.useOverlay ?\n                    &lt;div\n                    className=\"sc-hero-img-overlay\"\n                    style={{\n                        backgroundColor: attributes.overlayColor,\n                        opacity: attributes.overlayColorAlpha\/100,\n                    }}\n                    &gt;&lt;\/div&gt;\n                    : null\n                }\n            &lt;\/div&gt;\n        );\n    },\n} );<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yukar\u0131daki kodlar\u0131 kaydettikten sonra, dinleme modunda de\u011filse, terminalde \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131yoruz:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run start<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Art\u0131k, kendimize ait bir blo\u011fumuz var.<\/li><li>Y\u00f6netim panelinden, block edit\u00f6r\u00fc a\u00e7\u0131p, bloklar i\u00e7inde <em>&#8216;SC Hero Resmi<\/em>&#8216; aramas\u0131 yaparsak, olu\u015fturdu\u011fumuz block kar\u015f\u0131m\u0131za \u00e7\u0131kacakt\u0131r.<br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"231\" class=\"wp-image-5717\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-4.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-4\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-4.jpg 688w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-4-300x154.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><code>block.js<\/code> deki kodlar\u0131n bir k\u0131sm\u0131 da, block ayarlar\u0131na aittir. Bu kodlar ile \u015fu ayarlar olu\u015fturulmu\u015ftur:<\/li><\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"235\" height=\"547\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlari-.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlar\u0131-\" class=\"wp-image-5797\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlari-.jpg 235w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlari--129x300.jpg 129w\" sizes=\"auto, (max-width: 235px) 100vw, 235px\" \/><figcaption>SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Block-Ayarlar\u0131-<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"236\" height=\"508\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6\" class=\"wp-image-5731\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6.jpg 236w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-6-139x300.jpg 139w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><figcaption>Block Ayarlar\u0131<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fun edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in biraz CSS yapt\u0131k:<\/li><\/ul>\n\n\n\n<p><code>assets\/css\/editor.css<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.interface-complementary-area {\n    width: auto !important;\n    max-width: 280px !important;\n    overflow-x: hidden !important;\n}\n\n.wp-block-stcnnt-deneme-blocks-hero-img-block .sc-hero-text-container\n{\n    z-index: 2;\n    height: 35px;\n    min-width: 100px;\n    display: table;\n    margin:0 auto;\n}\n\n.wp-block-stcnnt-deneme-blocks-hero-img-block .sc-hero-text-container p\n{\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n}\n\nlabel.sc-setting-section-label\n{\n    padding-bottom: 15px;\n}\n\n.sc-hero-img-placeholder\n{\n    width: 80%;\n    position: relative;\n    margin: 10px auto;\n    background-color: rgb(226, 226, 226);\n    height: 90px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.css-1wgusda-Text-BaseLabel.css-1wgusda-Text-BaseLabel.css-1wgusda-Text-BaseLabel\n{\n    text-overflow: inherit !important;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Tema taraf\u0131 i\u00e7in de biraz CSS yapal\u0131m:<\/li><\/ul>\n\n\n\n<p><code>assets\/css\/style.css<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wp-block-stcnnt-deneme-blocks-hero-img-block\n{\n    position: relative;\n    border: 9px solid rgba(0, 0, 0, .5);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 20px;\n}\n.wp-block-stcnnt-deneme-blocks-hero-img-block .sc-hero-img-overlay\n{\n    position:absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n}\n.wp-block-stcnnt-deneme-blocks-hero-img-block .sc-hero-text-container\n{\n    font-size: 4.5rem;\n    padding: 15px;\n    border-radius: 20px;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.sc-text-bg {\n    border: 3px solid rgba(156, 150, 150, 0.5);\n    background-color: rgba(0, 0, 0, .5);\n}\n\n.sc-hero-text\n{\n    color: inherit !important;\n    font-size: inherit !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n.align-left\n{\n    text-align: left;\n}\n.align-right\n{\n    text-align: right;\n}\n.align-center\n{\n    text-align: center;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"SC_Hero_Resmi_Blogu_Ile_Ornek_Tasarimlar\">SC Hero Resmi Blo\u011fu \u0130le \u00d6rnek Tasar\u0131mlar<\/span><\/h2>\n\n\n\n<p>Yeteneklerini g\u00f6rmek i\u00e7in, olu\u015fturdu\u011fumuz blockla neler yapabiliriz bir bakal\u0131m:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Overlay kullanmadan bir resim ve metin \u00f6rne\u011fi:<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"191\" class=\"wp-image-5741\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-1.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-\u00d6rnek-Tasar\u0131m-1\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-1.jpg 720w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-1-300x128.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Resmin \u00fczerine overlay efekti verdik:<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"193\" class=\"wp-image-5740\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-2.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-\u00d6rnek-Tasar\u0131m-2\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-2.jpg 724w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-2-300x128.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Resimsiz olarak, 100 \u015feffafl\u0131kta bir overlay kullanarak, metin backgroundu olmayan tasar\u0131mlar da m\u00fcmk\u00fcn:<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"195\" class=\"wp-image-5739\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-3.jpg\" alt=\"SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-\u00d6rnek-Tasar\u0131m-3\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-3.jpg 724w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2021\/06\/SiteCenneti-Gutenberg-Block-Tasarlama-Eklenti-Ekleme-Kodlama-Ornek-Tasarim-3-300x130.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress i\u00e7in bir Gutenberg blo\u011fu nas\u0131l kodlan\u0131r? T\u00fcrk\u00e7e dilinde daha iyisi yok&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5731,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254],"tags":[255,256],"class_list":["post-5488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-blok-gelistirme-kodlama","tag-block-kodlama","tag-gutenberg-block-gelistirme"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5488"}],"version-history":[{"count":1,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5488\/revisions"}],"predecessor-version":[{"id":5865,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5488\/revisions\/5865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/5731"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}