{"id":6036,"date":"2022-06-25T01:01:14","date_gmt":"2022-06-24T22:01:14","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=6036"},"modified":"2022-06-27T14:24:46","modified_gmt":"2022-06-27T11:24:46","slug":"wordpress-block-editoru-icin-olusturulan-block-dosyalarinin-anatomisi","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/wordpress-block-editoru-icin-olusturulan-block-dosyalarinin-anatomisi\/","title":{"rendered":"WordPress Block Edit\u00f6r\u00fc \u0130\u00e7in Olu\u015fturulan Block Dosyalar\u0131n\u0131n Anatomisi"},"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=\"#wordpresscreate-block_Paketi_ile_Olusturulan_Block_Eklentisinin_Dosya_Yapisi\"><span class=\"toc_number toc_depth_1\">1<\/span>  @wordpress\/create-block Paketi ile Olu\u015fturulan Block Eklentisinin Dosya Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Block_Dizinindeki_Klasor_ve_Dosyalar\"><span class=\"toc_number toc_depth_1\">2<\/span> Block Dizinindeki Klas\u00f6r ve Dosyalar<\/a><ul><li><a href=\"#8220build8221_Klasoru\"><span class=\"toc_number toc_depth_2\">2.1<\/span> &#8220;build&#8221; Klas\u00f6r\u00fc<\/a><\/li><li><a href=\"#8220node_modules8221_Klasoru\"><span class=\"toc_number toc_depth_2\">2.2<\/span> &#8220;node_modules&#8221; Klas\u00f6r\u00fc<\/a><\/li><li><a href=\"#8220src8221_Klasoru\"><span class=\"toc_number toc_depth_2\">2.3<\/span> &#8220;src&#8221; Klas\u00f6r\u00fc<\/a><ul><li><a href=\"#8220blockjson8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.1<\/span> &#8220;block.json&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220editjs8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.2<\/span> &#8220;edit.js&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220editorscss8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.3<\/span> &#8220;editor.scss&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220indexjs8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.4<\/span> &#8220;index.js&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220savejs8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.5<\/span> &#8220;save.js&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220stylescss8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.6<\/span> &#8220;style.scss&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220editorconfigscss8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.7<\/span> &#8220;.editorconfig.scss&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220gitignorescss8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.8<\/span> &#8220;.gitignore.scss&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220package-lockjson8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.9<\/span> &#8220;package-lock.json&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220packagejson8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.10<\/span> &#8220;package.json&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220packagejson8221_Dosyasi-2\"><span class=\"toc_number toc_depth_3\">2.3.11<\/span> &#8220;package.json&#8221; Dosyas\u0131<\/a><\/li><li><a href=\"#8220sc-cardsphp8221_Dosyasi\"><span class=\"toc_number toc_depth_3\">2.3.12<\/span> &#8220;sc-cards.php&#8221; Dosyas\u0131<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n\n<p>WordPress Block Edit\u00f6r\u00fc i\u00e7in bir block kodlamaya ba\u015flam\u0131\u015ft\u0131k. Bunun i\u00e7in bir \u00f6nceki dersimizde, WordPress taraf\u0131ndan geli\u015ftirilen <code>@wordpress\/create-block<\/code> ad\u0131ndaki <code>npm<\/code> paketi ile <code>sc-cards<\/code> ad\u0131nda bir block eklentisi olu\u015fturmu\u015ftuk. Bu dersi g\u00f6rmediyseniz ya da tekrar bir g\u00f6z atmak isterseniz a\u015fa\u011f\u0131daki ba\u011flant\u0131ya t\u0131klayabilirsiniz:<\/p>\n\n\n\n<ul class=\"has-background wp-block-list\" style=\"background-color:#fbffcf\"><li><a href=\"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/wordpress-block-editoru-icin-bir-block-olusturma-wordpress-create-block\/\">WordPress Block Edit\u00f6r\u00fc \u0130\u00e7in Bir Block Olu\u015fturma (@wordpress\/create-block ile)<\/a><\/li><\/ul>\n\n\n\n<p>Kulland\u0131\u011f\u0131m\u0131z <code>@wordpress\/create-block<\/code> ad\u0131ndaki <code>npm<\/code> paketi, hem eklentiyi hem de block dosya ve klas\u00f6rlerini bizim i\u00e7in olu\u015fturmu\u015ftu.<\/p>\n\n\n\n<p>Bu dersimizde, olu\u015fturulan bu dosya ve klas\u00f6rlerin ne anlama geldi\u011fini a\u00e7\u0131klamaya \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"wordpresscreate-block_Paketi_ile_Olusturulan_Block_Eklentisinin_Dosya_Yapisi\"> @wordpress\/create-block Paketi ile Olu\u015fturulan Block Eklentisinin Dosya Yap\u0131s\u0131<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><code>@wordpress\/create-block<\/code> paketi ile olu\u015fturulan bir block eklentisinin dosya dizini \u015f\u00f6yle olmu\u015ftu:<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"242\" height=\"379\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-dizini.jpg\" alt=\"WordPress-Block-Kodlama-Olu\u015fturma-Gutenberg-dizini\" class=\"wp-image-5900\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-dizini.jpg 242w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-dizini-192x300.jpg 192w\" sizes=\"auto, (max-width: 242px) 100vw, 242px\" \/><figcaption>@wordpress\/create-block ile olu\u015fan bir block dizini<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>Daha sonra yine bir <code>npm<\/code> paketi olan <code>@wordpress\/scripts<\/code> paketini y\u00fcklemi\u015f ve ard\u0131ndan <code>npm start<\/code> komutu ile dosya yap\u0131s\u0131n\u0131 son haline getirmi\u015ftik:<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"205\" height=\"553\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-eklenti-dizini.jpg\" alt=\"WordPress-Block-Kodlama-Olu\u015fturma-Gutenberg-wordpress-eklenti-dizini\" class=\"wp-image-5958\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-eklenti-dizini.jpg 205w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-eklenti-dizini-111x300.jpg 111w\" sizes=\"auto, (max-width: 205px) 100vw, 205px\" \/><figcaption>Eklenti dizininin son hali<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Block_Dizinindeki_Klasor_ve_Dosyalar\">Block Dizinindeki Klas\u00f6r ve Dosyalar<\/span><\/h2>\n\n\n\n<p>\u015eimdi gelin, s\u0131ras\u0131yla, <code>sc-cards<\/code> dizinindeki b\u00fct\u00fcn klas\u00f6r ve dosyalar\u0131n anlam\u0131n\u0131 ve ne i\u015fe yarad\u0131klar\u0131n\u0131 \u00f6\u011frenelim.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"8220build8221_Klasoru\">&#8220;build&#8221; Klas\u00f6r\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"color: initial;\">Burada hi\u00e7 bir dosyaya tek sat\u0131r bile kod yazmayaca\u011f\u0131z.<\/span><\/li><li><span style=\"color: initial;\">Bu klas\u00f6r ve alt\u0131ndaki dosyalar, <\/span><code>@wordpress\/scripts<\/code><span style=\"color: initial;\"> paketi taraf\u0131ndan bizim i\u00e7in itina ile olu\u015fturulur.<\/span><\/li><li>Asl\u0131nda olu\u015fturdu\u011fumuz block bu klas\u00f6rdedir. \u0130\u015fimiz bitti\u011finde, blo\u011fumuzu ba\u015fka bir WordPress kurulumuna y\u00fcklemek istersek;<ul><li><code>sc-cards<\/code> klas\u00f6r\u00fcn\u00fc sadece, i\u00e7indeki <code>build<\/code> klas\u00f6r\u00fc ve <code>sc-cards.php<\/code> dosyas\u0131 ile buradan al\u0131p o WordPress kurulumunun <code>plugins<\/code> dizinine y\u00fcklememiz yeterli olacakt\u0131r.<\/li><\/ul><\/li><li><code>build<\/code> klas\u00f6r\u00fcndeki dosya ve kodlar\u0131n\u0131n nereden geldi\u011fini <code>src<\/code> klas\u00f6r\u00fcn\u00fc okurken daha iyi anlayacaks\u0131n\u0131z.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"8220node_modules8221_Klasoru\">&#8220;node_modules&#8221; Klas\u00f6r\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu klas\u00f6r olduk\u00e7a hacimli bir klas\u00f6r\u00fcd\u00fcr ve bizim aktif olarak m\u00fcdahale etti\u011fimiz bir klas\u00f6r de\u011fildir.<\/li><li>Block kodlamak i\u00e7in ihtiya\u00e7 duydu\u011fumuz paket ya da k\u00fct\u00fcphaneler burada saklan\u0131r.<\/li><li><code>npm<\/code> komutu ile y\u00fckledi\u011fimiz scriptler buraya kaydedilir.<\/li><li>\u0130htiya\u00e7 duyulan scriptler buradan gerekli yerlerde <code>import<\/code> edilir ve kullan\u0131l\u0131r.<\/li><li>Blo\u011fumuzu kullanmak \u00fczere ta\u015f\u0131rken bu klas\u00f6r bizimle gelmeyecek, burada kalacakt\u0131r.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"8220src8221_Klasoru\">&#8220;src&#8221; Klas\u00f6r\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"color: initial;\">B\u00fct\u00fcn kodlama i\u015flerini bu klas\u00f6rde yapar\u0131z.<\/span><\/li><li><span style=\"color: initial;\">Buras\u0131 bizim mutfa\u011f\u0131m\u0131zd\u0131r, burada blo\u011fumuzu kodlar\u0131z.<\/span><ul><li>Kodlar\u0131m\u0131zda ESNext ve JSX gibi hen\u00fcz taray\u0131c\u0131lar\u0131n anlamad\u0131\u011f\u0131 diller de kullanabiliriz.<\/li><li>\u0130\u015fte <code>npm start<\/code> komutu tam da burada imdad\u0131m\u0131za yeti\u015fir.<\/li><\/ul><ul><li>Bu komut, bizim kodlar\u0131m\u0131z\u0131 al\u0131r, taray\u0131c\u0131lar\u0131n anlayaca\u011f\u0131 standartlara sokar ve <code>build<\/code> klas\u00f6r\u00fcndeki ilgili dosyalara da\u011f\u0131t\u0131r (bu olaya k\u0131saca WepPack diyoruz.).<\/li><\/ul><ul><li><code>npm start<\/code> komutuna, neler yapaca\u011f\u0131n\u0131, <code>@wordpress\/scripts<\/code> paketi s\u00f6yler.<\/li><\/ul><\/li><li>Kodlar\u0131m\u0131z\u0131 test etmek i\u00e7in, terminalin komut sat\u0131r\u0131 <code>sc-cards<\/code> dizininde iken, <code>npm start<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131r\u0131z.<ul><li><code>npm start<\/code> komutunun bir defa \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 yeterlidir. Bu komut bir defa \u00e7al\u0131\u015ft\u0131ktan sonra bizi dinlemeye devam eder ve dosyalar\u0131m\u0131zda yapt\u0131\u011f\u0131m\u0131z her kaydet (<code>ctrl + s<\/code>) i\u015fleminde otomatik olarak tekrar \u00e7al\u0131\u015f\u0131r.<\/li><li><code>npm start <\/code>komutunu durdurmak i\u00e7in &#8220;<code>ctrl + c<\/code>&#8221; tu\u015f kombinasyonuna basmam\u0131z ve ard\u0131ndan sorulan soruya; \u00f6nce &#8220;<code>y<\/code>&#8221; tu\u015funa sonra da <code>enter<\/code> tu\u015funa basarak cevap vermemiz gerekir.<\/li><\/ul><\/li><li>Blo\u011fumuz kullanmak \u00fczere ta\u015f\u0131rken, bu klas\u00f6r bizimle gelmeyecek burada kalacakt\u0131r.<\/li><li><code>src<\/code> klas\u00f6r\u00fcndeki dosyalar\u0131n yap\u0131s\u0131 ve g\u00f6revleri \u015f\u00f6yledir:<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220blockjson8221_Dosyasi\">&#8220;block.json&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"create-block\/sc-cards\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Sc Cards\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"smiley\",\n\t\"description\": \"Example block written with ESNext standard and JSX support \u2013 build step required.\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"sc-cards\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Olu\u015fturdu\u011fumuz block hakk\u0131ndaki temel bilgiler ve de\u011fi\u015fkenler bu dosyada saklan\u0131r.<\/li><li>Bu dosyada g\u00f6rd\u00fc\u011f\u00fcm\u00fcz ifadeler \u015fu anlama gelir:<ul><li><code>\"$schema\"<\/code>: Dosyan\u0131n \u015femas\u0131n\u0131 kontrol eden sat\u0131rd\u0131r. Oldu\u011fu gibi b\u0131rak\u0131r\u0131z.<\/li><\/ul><ul><li><code>\"apiVersion\":<\/code> Kulland\u0131\u011f\u0131m\u0131z API&#8217;nin versiyonudur. Bizimle ilgili bir sat\u0131r de\u011fildir, oldu\u011fu gibi b\u0131rak\u0131r\u0131z.<\/li><li> <code>\"name\":<\/code> Blo\u011fumuz ad\u0131d\u0131r. Bu ifadenin de\u011ferini, <code>\u00fcst-isim\/block-adi<\/code> \u015fablonuna sad\u0131k kalarak diledi\u011fimiz gibi de\u011fi\u015ftirebiliriz.<ul><li>Fakat, burada yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fikli\u011fi, ayn\u0131 dizindeki <code>index.js<\/code> dosyas\u0131na da ta\u015f\u0131mam\u0131z gerekir.<\/li><\/ul><\/li><li><code>\"version\":<\/code> Olu\u015fturdu\u011fumuz  blo\u011fun versiyonudur. De\u011feri tamamen bize ba\u011fl\u0131d\u0131r.<\/li><li><code>\"title\":<\/code> Blo\u011fun ad\u0131d\u0131r. Bu isim block edit\u00f6rde blo\u011fumuz ad\u0131 olarak g\u00f6r\u00fcn\u00fcr. Diledi\u011fimiz gibi de\u011fi\u015ftirebiliriz.<\/li><li><code>\"category\":<\/code> Blo\u011fumuzun di\u011fer bloklar aras\u0131ndaki yerle\u015fimini belirler.<ul><li>WordPress ile varsay\u0131lan olarak gelen <em>block kategorileri<\/em> \u015funlard\u0131r:<ol><li>text<\/li><li>media<\/li><li>design<\/li><li>widgets<\/li><li>theme<\/li><li>embed<\/li><\/ol><\/li><li>Kendinize ait bir kategori olu\u015fturup blo\u011funuzu o kategoride de yay\u0131nlayabilirsiniz.<ul><li>Bunun i\u00e7in, a\u015fa\u011f\u0131daki kodlar\u0131, <code>sc-cards.php<\/code> dosyas\u0131n\u0131n sonuna eklemeniz yeterlidir:<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p><code>sc-cards.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function sc_add_custom_block_category( $categories ) {\n\t\n\t$categories&#91;] = array(\n\t\t'slug'  =&gt; 'benim-blocklarim',\n\t\t'title' =&gt; 'Benimkiler'\n\t);\n\n\treturn $categories;\n}\n\nif ( version_compare( get_bloginfo( 'version' ), '5.8', '&gt;=' ) ) {\n\tadd_filter( 'block_categories_all', 'sc_add_custom_block_category' );\n} else {\n\tadd_filter( 'block_categories', 'sc_add_custom_block_category' );\n}<\/code><\/pre>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e8fff6\">Bu koddan sonra; <code>block.json<\/code> dosyas\u0131nda kategori k\u0131sm\u0131na \u015f\u00f6yle demeliyiz: <code>\"category\": \"benim-blocklarim\"<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>block.json<\/code> dosyas\u0131n\u0131 tan\u0131maya devam ediyoruz:<ul><li><code>\"icon\":<\/code> Olu\u015fturdu\u011fumuz block, edit\u00f6rde bu ikon ile temsil edilir.<ul><li>Burada, <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/#admin-post\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress dashiconlar\u0131ndan<\/a> herhangi birini de kullanabiliriz.<\/li><li>Mesela <code>\"dashicons-admin-post\"<\/code> ad\u0131ndaki dashiconu kullanmak i\u00e7in burada;<ul><li><code>\"icon\": \"admin-post\"<\/code> kodunu kullan\u0131r\u0131z.<\/li><\/ul><\/li><\/ul><\/li><li><code>\"description\":<\/code> Blok i\u00e7in block edit\u00f6rde g\u00f6sterilecek olan a\u00e7\u0131klamad\u0131r.<ul><li>Blo\u011fumuzu k\u0131sa ve etkili bir \u015fekilde tan\u0131tabilmemiz i\u00e7in harika bir yedir.<\/li><\/ul><ul><li>Bu sat\u0131r, block edit\u00f6rde \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"228\" class=\"wp-image-6111\" style=\"width: 550px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-aciklamasi.jpg\" alt=\"WordPress-Block-Kodlama-Olu\u015fturma-Kodlama-Gutenberg-block-a\u00e7\u0131klamas\u0131\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-aciklamasi.jpg 874w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-aciklamasi-300x124.jpg 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-aciklamasi-768x318.jpg 768w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li><\/ul><\/li><li><code>\"supports\": <\/code>Blo\u011fun hangi ayarlar\u0131 destekleyece\u011fine burada karar veriyoruz.<ul><li>Mesela burada \u015f\u00f6yle bir kod kullan\u0131rsak:<br><code>\"supports\": { \"html\": true }<\/code><br>blo\u011fumuza \u015f\u00f6yle bir \u00f6zellik eklenir:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"334\" class=\"wp-image-6114\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-destekleri.jpg\" alt=\"WordPress-Block-Kodlama-Olu\u015fturma-Kodlama-Gutenberg-block-destekleri\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-destekleri.jpg 446w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Kodlama-Gutenberg-block-destekleri-300x287.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li><\/ul><\/li><li><code>\"textdomain\":<\/code> Buras\u0131, blo\u011fumuzu terc\u00fcme etmek i\u00e7in gereklidir. De\u011ferini diledi\u011fimiz gibi de\u011fi\u015ftirebiliriz.<ul><li>Terc\u00fcmeye haz\u0131r textler olu\u015ftururken, buraya yazd\u0131\u011f\u0131m\u0131z de\u011feri kullan\u0131r\u0131z.<\/li><\/ul><\/li><li><code>\"editorScript\":<\/code> Sadece edit\u00f6r\u00fc ilgilendiren scriptlerin nereye derlenece\u011fini ifade eder. M\u00fcmk\u00fcn oldu\u011funca kurcalanmamal\u0131d\u0131r.<\/li><li><code>\"editorStyle\": <\/code>Sadece edit\u00f6r\u00fc ilgilendiren CSS&#8217;in nereye derlenece\u011fini ifade eder. M\u00fcmk\u00fcn oldu\u011funca kurcalanmamal\u0131d\u0131r.<\/li><li><code>\"style\":<\/code> Blo\u011fumuz ile ilgili CSS&#8217;in nereye derlenece\u011fini ifade eder. M\u00fcmk\u00fcn oldu\u011funca kurcalanmamal\u0131d\u0131r.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220editjs8221_Dosyasi\">&#8220;edit.js&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>edit.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\r\n * Retrieves the translation of text.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-i18n\/\r\n *\/\r\nimport { __ } from '@wordpress\/i18n';\r\n\r\n\/**\r\n * React hook that is used to mark the block wrapper element.\r\n * It provides all the necessary props like the class name.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-block-editor\/#useBlockProps\r\n *\/\r\nimport { useBlockProps } from '@wordpress\/block-editor';\r\n\r\n\/**\r\n * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.\r\n * Those files can contain any CSS code that gets applied to the editor.\r\n *\r\n * @see https:\/\/www.npmjs.com\/package\/@wordpress\/scripts#using-css\r\n *\/\r\nimport '.\/editor.scss';\r\n\r\n\/**\r\n * The edit function describes the structure of your block in the context of the\r\n * editor. This represents what the editor will render when the block is used.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-edit-save\/#edit\r\n *\r\n * @return {WPElement} Element to render.\r\n *\/\r\nexport default function Edit() {\r\n\treturn (\r\n\t\t&lt;p { ...useBlockProps() }>\r\n\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\r\n\t\t&lt;\/p>\r\n\t);\r\n}\r<\/code><\/pre>\n\n\n\n<p>Ben yorumlar\u0131 temizleyip kullan\u0131yorum:<\/p>\n\n\n\n<p><code>edit.js<\/code> (yorumsuz)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\r\nimport { useBlockProps } from '@wordpress\/block-editor';\r\nimport '.\/editor.scss';\r\n\r\nexport default function Edit() {\r\n\treturn (\r\n\t\t&lt;p { ...useBlockProps() }>\r\n\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\r\n\t\t&lt;\/p>\r\n\t);\r\n}\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fumuzun edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fcne ait kodlar\u0131 buraya yazar\u0131z.<\/li><li>Buradaki kodlar, y\u00f6netim paneli taraf\u0131nda \u00e7al\u0131\u015f\u0131r, blo\u011fun tema g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc etkilemez.<ul><li>Mesela yukar\u0131daki haliyle, blo\u011fumuz edit\u00f6rde \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"126\" class=\"wp-image-5939\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-5.jpg\" alt=\"WordPress-Block-Kodlama-Olu\u015fturma-Gutenberg-wordpress-5\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-5.jpg 404w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-5-300x84.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/li><\/ul><\/li><li>\u0130lerleyen derslerde, daha haval\u0131 hale getirece\u011fiz.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220editorscss8221_Dosyasi\">&#8220;editor.scss&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>editor.scss<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\r\n * The following styles get applied inside the editor only.\r\n *\r\n * Replace them with your own styles or remove the file completely.\r\n *\/\r\n\r\n.wp-block-create-block-sc-cards {\r\n\tborder: 1px dotted #f00;\r\n}\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Sadece edit\u00f6r taraf\u0131nda \u00e7al\u0131\u015facak SCSS kodlar\u0131n\u0131 buraya yazar\u0131z.<ul><li>SCSS, CSS kodu yazman\u0131n daha pratik bir yoldur. Bir ka\u00e7 basit kural\u0131 vard\u0131r. Bilmiyorsan\u0131z da normal CSS kodlar\u0131, bu dosyada \u00e7al\u0131\u015facakt\u0131r.<\/li><li>Yaz\u0131lan SCSS kodlar\u0131, <code>npm start<\/code> komutu ile sonras\u0131nda da <code>ctrl + s<\/code> tu\u015f kombinasyonu ile, otomatik olarak derlenir ve build klas\u00f6r\u00fcnde ilgili yerlere g\u00f6nderilir.<\/li><\/ul><\/li><li>Bu dosyaya girdi\u011fimiz SCSS kodlar\u0131, burada anlat\u0131lanlar\u0131n d\u0131\u015f\u0131nda bir yol izlemezsek tema g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc etkilemez, sadece edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc etkiler.<\/li><li>Dosya, yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u015fekilde gelir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220indexjs8221_Dosyasi\">&#8220;index.js&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>index.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\r\n * Registers a new block provided a unique name and an object defining its behavior.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\r\n *\/\r\nimport { registerBlockType } from '@wordpress\/blocks';\r\n\r\n\/**\r\n * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.\r\n * All files containing `style` keyword are bundled together. The code used\r\n * gets applied both to the front of your site and to the editor.\r\n *\r\n * @see https:\/\/www.npmjs.com\/package\/@wordpress\/scripts#using-css\r\n *\/\r\nimport '.\/style.scss';\r\n\r\n\/**\r\n * Internal dependencies\r\n *\/\r\nimport Edit from '.\/edit';\r\nimport save from '.\/save';\r\n\r\n\/**\r\n * Every block starts by registering a new block type definition.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\r\n *\/\r\nregisterBlockType( 'create-block\/sc-cards', {\r\n\t\/**\r\n\t * @see .\/edit.js\r\n\t *\/\r\n\tedit: Edit,\r\n\r\n\t\/**\r\n\t * @see .\/save.js\r\n\t *\/\r\n\tsave,\r\n} );\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fumuz i\u00e7in yazd\u0131\u011f\u0131m\u0131z b\u00fct\u00fcn kodlar burada toplan\u0131r.<\/li><li>Blo\u011fumuzun ana dosyas\u0131d\u0131r.<\/li><li>Bu dosyaya \u00e7a\u011f\u0131r\u0131lmayan kodlar ve dosyalar blo\u011fumuzda kullan\u0131lamaz.<\/li><li>Bu dosya ile genellikle i\u015fimiz olmayacak, bu haliyle kalacak.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220savejs8221_Dosyasi\">&#8220;save.js&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>save.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\r\n * Retrieves the translation of text.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-i18n\/\r\n *\/\r\nimport { __ } from '@wordpress\/i18n';\r\n\r\n\/**\r\n * React hook that is used to mark the block wrapper element.\r\n * It provides all the necessary props like the class name.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-block-editor\/#useBlockProps\r\n *\/\r\nimport { useBlockProps } from '@wordpress\/block-editor';\r\n\r\n\/**\r\n * The save function defines the way in which the different attributes should\r\n * be combined into the final markup, which is then serialized by the block\r\n * editor into `post_content`.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-edit-save\/#save\r\n *\r\n * @return {WPElement} Element to render.\r\n *\/\r\nexport default function save() {\r\n\treturn (\r\n\t\t&lt;p { ...useBlockProps.save() }>\r\n\t\t\t{ __(\r\n\t\t\t\t'Sc Cards \u2013 hello from the saved content!',\r\n\t\t\t\t'sc-cards'\r\n\t\t\t) }\r\n\t\t&lt;\/p>\r\n\t);\r\n}\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fumuzun tema g\u00f6r\u00fcn\u00fcm\u00fc belirleyen kodlamalar burada yap\u0131l\u0131r.<\/li><li>Yukar\u0131daki haliyle gelir fakat ben yorumlar\u0131 silip kullanmay\u0131 tercih ederim:<\/li><\/ul>\n\n\n\n<p><code>save.js<\/code> (yorumsuz)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\r\nimport { useBlockProps } from '@wordpress\/block-editor';\r\nexport default function save() {\r\n\treturn (\r\n\t\t&lt;p { ...useBlockProps.save() }>\r\n\t\t\t{ __(\r\n\t\t\t\t'Sc Cards \u2013 hello from the saved content!',\r\n\t\t\t\t'sc-cards'\r\n\t\t\t) }\r\n\t\t&lt;\/p>\r\n\t);\r\n}\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu hali ile, blo\u011fumuzun tema g\u00f6r\u00fcn\u00fcm\u00fc \u015f\u00f6yle olacakt\u0131r:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"48\" class=\"wp-image-5944\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-6.jpg\" alt=\"WordPress-Block-Kodlama-Olu\u015fturma-Gutenberg-wordpress-6\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-6.jpg 330w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Kodlama-Olusturma-Gutenberg-wordpress-6-300x41.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220stylescss8221_Dosyasi\">&#8220;style.scss&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>style.scss<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\r\n * The following styles get applied both on the front of your site\r\n * and in the editor.\r\n *\r\n * Replace them with your own styles or remove the file completely.\r\n *\/\r\n\r\n.wp-block-create-block-sc-cards {\r\n\tbackground-color: #21759b;\r\n\tcolor: #fff;\r\n\tpadding: 2px;\r\n}\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Hem edit\u00f6r hem de tema taraf\u0131nda \u00e7al\u0131\u015facak SCSS kodlar\u0131n\u0131 buraya yazar\u0131z.<ul><li>Yaz\u0131lan SCSS kodlar\u0131, <code>npm start<\/code> komutu ile sonras\u0131nda da <code>ctrl + s<\/code> tu\u015f kombinasyonu ile, otomatik olarak derlenir ve <code>build<\/code> klas\u00f6r\u00fcnde ilgili yerlere g\u00f6nderilir.<\/li><\/ul><\/li><li>Dosya, yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u015fekilde gelir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220editorconfigscss8221_Dosyasi\">&#8220;.editorconfig.scss&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>.editorconfig.scss<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># This file is for unifying the coding style for different editors and IDEs\r\n# editorconfig.org\r\n\r\n# WordPress Coding Standards\r\n# https:\/\/make.wordpress.org\/core\/handbook\/coding-standards\/\r\n\r\nroot = true\r\n\r\n&#91;*]\r\ncharset = utf-8\r\nend_of_line = lf\r\ninsert_final_newline = true\r\ntrim_trailing_whitespace = true\r\nindent_style = tab\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><code>.editorconfig<\/code>: Bu dosya, kod edit\u00f6r\u00fcm\u00fcze kod yap\u0131m\u0131z ile ilgili olarak baz\u0131 bilgiler verir.<ul><li>Hangi edit\u00f6rler ile konu\u015fabilir, ne kadar konu\u015fabilir a\u00e7\u0131k\u00e7as\u0131 ara\u015ft\u0131rmad\u0131m. Bilenler yorum olarak yazarsa m\u00fcte\u015fekkir olurum.<\/li><\/ul><\/li><li>Yukar\u0131daki haliyle gelir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220gitignorescss8221_Dosyasi\">&#8220;.gitignore.scss&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>.gitignore.scss<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Logs\r\nlogs\r\n*.log\r\nnpm-debug.log*\r\nyarn-debug.log*\r\nyarn-error.log*\r\n\r\n# Coverage directory used by tools like istanbul\r\ncoverage\r\n\r\n# Compiled binary addons (https:\/\/nodejs.org\/api\/addons.html)\r\nbuild\/Release\r\n\r\n# Dependency directories\r\nnode_modules\/\r\n\r\n# Optional npm cache directory\r\n.npm\r\n\r\n# Optional eslint cache\r\n.eslintcache\r\n\r\n# Output of `npm pack`\r\n*.tgz\r\n\r\n# Output of `wp-scripts plugin-zip`\r\n*.zip\r\n\r\n# dotenv environment variables file\r\n.env\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>G\u00f6z ard\u0131 edilmesi gereken, takip edilmesi gerekemeyen dosya ve klas\u00f6rleri belirtir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220package-lockjson8221_Dosyasi\">&#8220;package-lock.json&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Kodlar\u0131m\u0131z\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli olan b\u00fct\u00fcn paketlerin bir listesini tutar.<\/li><li><code>npm install<\/code> dedi\u011fimizde, gerekli paketlerin tastamam indirilmesini sa\u011flar.<\/li><li>Asl\u0131nda bizim manuel olarak herhangi bir i\u015flem yapmayaca\u011f\u0131m\u0131z bir dosyad\u0131r.<\/li><li>npm paketi gerekli olan her \u015feyi otomatik olarak halledecektir.<\/li><li>Olduk\u00e7a kalabal\u0131k bir dosyad\u0131r.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220packagejson8221_Dosyasi\">&#8220;package.json&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>package.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n\t\"name\": \"sc-cards\",\r\n\t\"version\": \"0.1.0\",\r\n\t\"description\": \"Example block written with ESNext standard and JSX support \u2013 build step required.\",\r\n\t\"author\": \"The WordPress Contributors\",\r\n\t\"license\": \"GPL-2.0-or-later\",\r\n\t\"main\": \"build\/index.js\",\r\n\t\"scripts\": {\r\n\t\t\"build\": \"wp-scripts build\",\r\n\t\t\"format\": \"wp-scripts format\",\r\n\t\t\"lint:css\": \"wp-scripts lint-style\",\r\n\t\t\"lint:js\": \"wp-scripts lint-js\",\r\n\t\t\"packages-update\": \"wp-scripts packages-update\",\r\n\t\t\"plugin-zip\": \"wp-scripts plugin-zip\",\r\n\t\t\"start\": \"wp-scripts start\"\r\n\t},\r\n\t\"devDependencies\": {\r\n\t\t\"@wordpress\/scripts\": \"^23.3.0\"\r\n\t}\r\n}\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Projemizin temel bilgilerini ve kulland\u0131\u011f\u0131m\u0131z <em>npm paketlerini<\/em>, scriptleri i\u00e7eren bir dosyad\u0131r.<\/li><li>Bu dosya da <em>npm paketi<\/em> taraf\u0131ndan otomatik olarak olu\u015fturulur.<\/li><li>Genelde <em>npm paketinin<\/em> otomatik olarak \u00e7ekip \u00e7evirdi\u011fi, bizim de kendi haline b\u0131rakt\u0131\u011f\u0131m\u0131z bir dosyad\u0131r.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220packagejson8221_Dosyasi-2\">&#8220;package.json&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code>readme.txt<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>=== Sc Cards ===\r\nContributors:      The WordPress Contributors\r\nTags:              block\r\nTested up to:      5.9\r\nStable tag:        0.1.0\r\nLicense:           GPL-2.0-or-later\r\nLicense URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\n\r\nExample block written with ESNext standard and JSX support \u2013 build step required.\r\n\r\n== Description ==\r\n\r\nThis is the long description. No limit, and you can use Markdown (as well as in the following sections).\r\n\r\nFor backwards compatibility, if this section is missing, the full length of the short description will be used, and\r\nMarkdown parsed.\r\n\r\n== Installation ==\r\n\r\nThis section describes how to install the plugin and get it working.\r\n\r\ne.g.\r\n\r\n1. Upload the plugin files to the `\/wp-content\/plugins\/sc-cards` directory, or install the plugin through the WordPress plugins screen directly.\r\n1. Activate the plugin through the 'Plugins' screen in WordPress\r\n\r\n\r\n== Frequently Asked Questions ==\r\n\r\n= A question that someone might have =\r\n\r\nAn answer to that question.\r\n\r\n= What about foo bar? =\r\n\r\nAnswer to foo bar dilemma.\r\n\r\n== Screenshots ==\r\n\r\n1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from\r\nthe \/assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the \/assets\r\ndirectory take precedence. For example, `\/assets\/screenshot-1.png` would win over `\/tags\/4.3\/screenshot-1.png`\r\n(or jpg, jpeg, gif).\r\n2. This is the second screen shot\r\n\r\n== Changelog ==\r\n\r\n= 0.1.0 =\r\n* Release\r\n\r\n== Arbitrary section ==\r\n\r\nYou may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated\r\nplugins where more information needs to be conveyed that doesn't fit into the categories of \"description\" or\r\n\"installation.\" Arbitrary sections will be shown below the built-in sections outlined above.\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir text dosyas\u0131d\u0131r ve blo\u011fumuzun \u00e7al\u0131\u015fmas\u0131nda aktif bir g\u00f6revi yoktur.<\/li><li>Blo\u011fumuzun geli\u015ftiricisi, versiyonlar\u0131, lisans durumu gibi konularda bilgiler verilir.<\/li><li>Blo\u011fumuz ile ilgili bilinmesi gereken \u00f6nemli veya kritik noktalar\u0131 burada diledi\u011fimiz gibi belirtiriz.<\/li><li>Eklentimiz i\u00e7in bir nevi &#8220;help&#8221; g\u00f6revi g\u00f6r\u00fcr.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8220sc-cardsphp8221_Dosyasi\">&#8220;sc-cards.php&#8221; Dosyas\u0131<\/span><\/h4>\n\n\n\n<p><code><code>sc-cards.php<\/code><\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\r\n\/**\r\n * Plugin Name:       Sc Cards\r\n * Description:       SiteCenneti.com taraf\u0131ndan geli\u015ftirilmi\u015f harika bir card blo\u011fudur.\r\n * Requires at least: 5.8\r\n * Requires PHP:      7.0\r\n * Version:           0.1.0\r\n * Author:            Muzaffer KAYA\r\n * Author URI: \t      https:\/\/sitecenneti.com\/iletisim\/\r\n * License:           GPL-2.0-or-later\r\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\n * Text Domain:       sc-cards\r\n *\r\n * @package           create-block\r\n *\/\r\n\r\n\/**\r\n * Registers the block using the metadata loaded from the `block.json` file.\r\n * Behind the scenes, it registers also all assets so they can be enqueued\r\n * through the block editor in the corresponding context.\r\n *\r\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\r\n *\/\r\nfunction create_block_sc_cards_block_init() {\r\n\tregister_block_type( __DIR__ . '\/build' );\r\n}\r\nadd_action( 'init', 'create_block_sc_cards_block_init' );\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Eklentimizi WordPress veritaban\u0131na tan\u0131tan dosyad\u0131r.<\/li><li>Bu dosyan\u0131n ba\u015f\u0131ndaki yorum k\u0131sm\u0131nda verilen bilgiler, y\u00f6netim panelinin &#8220;<em>Eklentiler<\/em>&#8221; sayfas\u0131nda, kar\u015f\u0131m\u0131za \u00e7\u0131kar.<\/li><li>Eklentimiz ile ilgili gerekli PHP kodlar\u0131 bu dosyaya girilir.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p> Bir npm paketi olan @wordpress\/create-block ile olu\u015fturulan block eklentisi dosya ve klas\u00f6rlerinin anlam\u0131 ve g\u00f6revleri<\/p>\n","protected":false},"author":1,"featured_media":5576,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254],"tags":[260],"class_list":["post-6036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-blok-gelistirme-kodlama","tag-wordpress-block-kodlama"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6036","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=6036"}],"version-history":[{"count":2,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6036\/revisions"}],"predecessor-version":[{"id":6181,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6036\/revisions\/6181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/5576"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=6036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=6036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=6036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}