{"id":6275,"date":"2022-06-27T14:23:43","date_gmt":"2022-06-27T11:23:43","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=6275"},"modified":"2022-07-01T04:11:16","modified_gmt":"2022-07-01T01:11:16","slug":"block-icin-kontrol-componentleri-bilesenleri-olusturma","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/block-icin-kontrol-componentleri-bilesenleri-olusturma\/","title":{"rendered":"Block \u0130\u00e7in Kontrol Componentleri (Bile\u015fenleri) Olu\u015fturma"},"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=\"#8220Blok_beklenmedik_ya_da_gecersiz_icerik_iceriyor8221_Hatasi\"><span class=\"toc_number toc_depth_1\">1<\/span> &#8220;Blok beklenmedik ya da ge\u00e7ersiz i\u00e7erik i\u00e7eriyor.&#8221; Hatas\u0131<\/a><\/li><li><a href=\"#AlignmentMatrixControl_Matrix_Hizalama_Kontrolu\"><span class=\"toc_number toc_depth_1\">2<\/span> AlignmentMatrixControl : Matrix Hizalama Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi\"><span class=\"toc_number toc_depth_2\">2.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu\"><span class=\"toc_number toc_depth_2\">2.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#AlignmentMatrixControl_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">3<\/span> AlignmentMatrixControl Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#AnglePickerControlnbsp_Aci_Secici_Kontrolu\"><span class=\"toc_number toc_depth_1\">4<\/span> AnglePickerControl&nbsp;: A\u00e7\u0131 Se\u00e7ici Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-2\"><span class=\"toc_number toc_depth_2\">4.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-2\"><span class=\"toc_number toc_depth_2\">4.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-2\"><span class=\"toc_number toc_depth_2\">4.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-2\"><span class=\"toc_number toc_depth_2\">4.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#AnglePickerControl_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">5<\/span> AnglePickerControl Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#BaseControlnbsp_Temel_Kontrol\"><span class=\"toc_number toc_depth_1\">6<\/span> BaseControl&nbsp;: Temel Kontrol<\/a><ul><li><a href=\"#Gorevi-3\"><span class=\"toc_number toc_depth_2\">6.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-3\"><span class=\"toc_number toc_depth_2\">6.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-3\"><span class=\"toc_number toc_depth_2\">6.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-3\"><span class=\"toc_number toc_depth_2\">6.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#BaseControl_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">7<\/span> BaseControl Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#BorderBoxControlnbsp_Kutu_Kenari_Kontrolu\"><span class=\"toc_number toc_depth_1\">8<\/span> BorderBoxControl&nbsp;: Kutu Kenar\u0131 Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-4\"><span class=\"toc_number toc_depth_2\">8.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-4\"><span class=\"toc_number toc_depth_2\">8.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-4\"><span class=\"toc_number toc_depth_2\">8.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-4\"><span class=\"toc_number toc_depth_2\">8.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#BaseControl_Bileseninin_Kullanimi-2\"><span class=\"toc_number toc_depth_1\">9<\/span> BaseControl Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#BorderControl_Kenar_Kontrolu\"><span class=\"toc_number toc_depth_1\">10<\/span> BorderControl : Kenar Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-5\"><span class=\"toc_number toc_depth_2\">10.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-5\"><span class=\"toc_number toc_depth_2\">10.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-5\"><span class=\"toc_number toc_depth_2\">10.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-5\"><span class=\"toc_number toc_depth_2\">10.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#BoxControlnbsp_Kenar_Kontrolu\"><span class=\"toc_number toc_depth_1\">11<\/span> BoxControl&nbsp;: Kenar Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-6\"><span class=\"toc_number toc_depth_2\">11.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-6\"><span class=\"toc_number toc_depth_2\">11.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-6\"><span class=\"toc_number toc_depth_2\">11.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-6\"><span class=\"toc_number toc_depth_2\">11.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#BoxControl_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">12<\/span> BoxControl Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#Button_Buton_Kontrolu\"><span class=\"toc_number toc_depth_1\">13<\/span> Button : Buton Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-7\"><span class=\"toc_number toc_depth_2\">13.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-7\"><span class=\"toc_number toc_depth_2\">13.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-7\"><span class=\"toc_number toc_depth_2\">13.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-7\"><span class=\"toc_number toc_depth_2\">13.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#Button_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">14<\/span> Button Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#ButtonGroup_Buton_Grubu_Kontrolu\"><span class=\"toc_number toc_depth_1\">15<\/span> ButtonGroup : Buton Grubu Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-8\"><span class=\"toc_number toc_depth_2\">15.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-8\"><span class=\"toc_number toc_depth_2\">15.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-8\"><span class=\"toc_number toc_depth_2\">15.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-8\"><span class=\"toc_number toc_depth_2\">15.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#ButtonGroup_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">16<\/span> ButtonGroup Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#Card_Kart_Kontrolu\"><span class=\"toc_number toc_depth_1\">17<\/span> Card : Kart Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-9\"><span class=\"toc_number toc_depth_2\">17.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-9\"><span class=\"toc_number toc_depth_2\">17.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-9\"><span class=\"toc_number toc_depth_2\">17.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-9\"><span class=\"toc_number toc_depth_2\">17.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#Card_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">18<\/span> Card Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#CheckboxControl_Secim_Kutusu_Kontrolu\"><span class=\"toc_number toc_depth_1\">19<\/span> CheckboxControl : Se\u00e7im Kutusu Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-10\"><span class=\"toc_number toc_depth_2\">19.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-10\"><span class=\"toc_number toc_depth_2\">19.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-10\"><span class=\"toc_number toc_depth_2\">19.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-10\"><span class=\"toc_number toc_depth_2\">19.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#CheckboxControl_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">20<\/span> CheckboxControl Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#ColorIndicator_Renk_Gostergesi_Kontrolu\"><span class=\"toc_number toc_depth_1\">21<\/span> ColorIndicator : Renk G\u00f6stergesi Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-11\"><span class=\"toc_number toc_depth_2\">21.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-11\"><span class=\"toc_number toc_depth_2\">21.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-11\"><span class=\"toc_number toc_depth_2\">21.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-11\"><span class=\"toc_number toc_depth_2\">21.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#ColorIndicator_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">22<\/span> ColorIndicator Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#ColorPalette_Renk_Paleti_Kontrolu\"><span class=\"toc_number toc_depth_1\">23<\/span> ColorPalette : Renk Paleti Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-12\"><span class=\"toc_number toc_depth_2\">23.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-12\"><span class=\"toc_number toc_depth_2\">23.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-12\"><span class=\"toc_number toc_depth_2\">23.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-12\"><span class=\"toc_number toc_depth_2\">23.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#ColorPalette_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">24<\/span> ColorPalette Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#ColorPicker_Renk_Secici_Kontrolu\"><span class=\"toc_number toc_depth_1\">25<\/span> ColorPicker : Renk Se\u00e7ici Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-13\"><span class=\"toc_number toc_depth_2\">25.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-13\"><span class=\"toc_number toc_depth_2\">25.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-13\"><span class=\"toc_number toc_depth_2\">25.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-13\"><span class=\"toc_number toc_depth_2\">25.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#ColorPicker_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">26<\/span> ColorPicker Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#ComboboxControlnbsp_Suzmeli_Secim_Kontrolu\"><span class=\"toc_number toc_depth_1\">27<\/span> ComboboxControl&nbsp;: S\u00fczmeli Se\u00e7im Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-14\"><span class=\"toc_number toc_depth_2\">27.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-14\"><span class=\"toc_number toc_depth_2\">27.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-14\"><span class=\"toc_number toc_depth_2\">27.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-14\"><span class=\"toc_number toc_depth_2\">27.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#ColorPalette_Bileseninin_Kullanimi-2\"><span class=\"toc_number toc_depth_1\">28<\/span> ColorPalette Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#Dashicon_Dashicon_Kontrolu\"><span class=\"toc_number toc_depth_1\">29<\/span> Dashicon : Dashicon Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-15\"><span class=\"toc_number toc_depth_2\">29.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-15\"><span class=\"toc_number toc_depth_2\">29.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-15\"><span class=\"toc_number toc_depth_2\">29.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-15\"><span class=\"toc_number toc_depth_2\">29.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#Dashicon_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">30<\/span> Dashicon Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#DateTimePicker_Tarih_ve_Saat_Secme_Kontrolu\"><span class=\"toc_number toc_depth_1\">31<\/span> DateTimePicker : Tarih ve Saat Se\u00e7me Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-16\"><span class=\"toc_number toc_depth_2\">31.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-16\"><span class=\"toc_number toc_depth_2\">31.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-16\"><span class=\"toc_number toc_depth_2\">31.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-16\"><span class=\"toc_number toc_depth_2\">31.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#DateTimePicker_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">32<\/span> DateTimePicker Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#Disabled_Devre_Disi_Birakma_Kontrolu\"><span class=\"toc_number toc_depth_1\">33<\/span> Disabled : Devre D\u0131\u015f\u0131 B\u0131rakma Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-17\"><span class=\"toc_number toc_depth_2\">33.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-17\"><span class=\"toc_number toc_depth_2\">33.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-17\"><span class=\"toc_number toc_depth_2\">33.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-17\"><span class=\"toc_number toc_depth_2\">33.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#Disabled_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">34<\/span> Disabled Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#MediaUpload_Resim_Yukleme_Kontrolu\"><span class=\"toc_number toc_depth_1\">35<\/span> MediaUpload : Resim Y\u00fckleme Kontrol\u00fc<\/a><ul><li><a href=\"#Gorevi-18\"><span class=\"toc_number toc_depth_2\">35.1<\/span> G\u00f6revi<\/a><\/li><li><a href=\"#Gorunumu-18\"><span class=\"toc_number toc_depth_2\">35.2<\/span> G\u00f6r\u00fcn\u00fcm\u00fc<\/a><\/li><li><a href=\"#Kod_Yapisi-18\"><span class=\"toc_number toc_depth_2\">35.3<\/span> Kod Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Kodun_Kullanimi-18\"><span class=\"toc_number toc_depth_2\">35.4<\/span> Kodun Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#MediaUpload_Bileseninin_Kullanimi\"><span class=\"toc_number toc_depth_1\">36<\/span> MediaUpload Bile\u015feninin Kullan\u0131m\u0131<\/a><\/li><\/ul><\/div>\n\n<p>WordPress Block Edit\u00f6r\u00fc i\u00e7in &#8220;sc-cards&#8221; ad\u0131nda bir block kodlad\u0131\u011f\u0131m\u0131z yaz\u0131 dizisine devam ediyoruz. Bu yaz\u0131m\u0131zda, Block Edit\u00f6r\u00fc blocklar\u0131 i\u00e7in kontroller eklemeyi ve blocklar\u0131 dinamik hale getirmeyi \u00f6\u011frenece\u011fiz.<\/p>\n\n\n\n<p>Bu yaz\u0131, WordPress Block Edit\u00f6r\u00fc kodlama konusunda, bundan \u00f6nce yazd\u0131\u011f\u0131m\u0131z 3 yaz\u0131n\u0131n devam\u0131 niteli\u011findedir. Dolay\u0131s\u0131yla, bu yaz\u0131lar\u0131 g\u00f6rmediyseniz veya tekrar g\u00f6zden ge\u00e7irmek isterseniz a\u015fa\u011f\u0131daki ba\u011flant\u0131lara t\u0131klayabilirsiniz.<\/p>\n\n\n\n<ol 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><li><a href=\"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/wordpress-block-editoru-icin-olusturulan-block-dosyalarinin-anatomisi\/\">WordPress Block Edit\u00f6r\u00fc \u0130\u00e7in Olu\u015fturulan Block Dosyalar\u0131n\u0131n Anatomisi<\/a><\/li><li><a href=\"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/wordpress-block-editor-icin-block-ayari-paneli-olusturma\/\">WordPress Block Edit\u00f6r \u0130\u00e7in Block Ayarlar\u0131 Paneli Olu\u015fturma<\/a><\/li><\/ol>\n\n\n\n<p>WordPress, Block Edit\u00f6r\u00fc i\u00e7in, bir \u00e7ok kontrol bile\u015feni geli\u015ftirmi\u015f ve web developerlar i\u00e7in kullan\u0131ma sunmu\u015ftur. \u015eimdi gelin bu bile\u015fenleri ve nas\u0131l kullan\u0131ld\u0131klar\u0131n\u0131 g\u00f6relim.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"8220Blok_beklenmedik_ya_da_gecersiz_icerik_iceriyor8221_Hatasi\">&#8220;Blok beklenmedik ya da ge\u00e7ersiz i\u00e7erik i\u00e7eriyor.&#8221; Hatas\u0131<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\" start=\"3\"><li>Block kodlarken, \u015fu ortamlar aras\u0131nda devaml\u0131 gidip gelece\u011fiz:<ul><li><strong><em>Visual Studio Code edit\u00f6r\u00fc<\/em><\/strong>: Buraya blo\u011fumuzun kod yap\u0131s\u0131 i\u00e7in gelece\u011fiz.<\/li><li><em><strong>WordPress admin panelde a\u00e7\u0131lm\u0131\u015f bir yaz\u0131 ya da sayfa<\/strong><\/em>: Buraya blo\u011fumuzu edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in gelece\u011fiz.<\/li><li><strong><em>WordPress sitemizin tema g\u00f6r\u00fcn\u00fcm\u00fc (\u00f6n y\u00fcz):<\/em><\/strong> Buraya da blo\u011fumuzun tema g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in gelece\u011fiz.<\/li><\/ul><\/li><li>Bir kontrol eklerken veya ba\u015fka sebeplerle, blo\u011fun kod yap\u0131s\u0131ndaki HTML yap\u0131s\u0131n\u0131 de\u011fi\u015ftirmek zorunda kalaca\u011f\u0131z.<\/li><li>Blo\u011fun HTML \u00e7\u0131kt\u0131s\u0131nda meydana gelen de\u011fi\u015fiklikler, hata almam\u0131za sebep olacakt\u0131r:<ul><li>Yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fikliklerin blo\u011fumuza olan etkisini veya nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmek i\u00e7in y\u00f6netim panelinde kulland\u0131\u011f\u0131m\u0131z edit\u00f6r sayfas\u0131n\u0131 yenilememiz gerekecek.<\/li><li>Yenileme i\u015fleminden sonra, yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklikler blo\u011fun edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fcnde a\u015fa\u011f\u0131daki hataya sebep olur:<br><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"188\" class=\"wp-image-6271\" style=\"width: 650px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Hata-mesaji.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-Hata-mesaj\u0131\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Hata-mesaji.jpg 597w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Hata-mesaji-300x87.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/li><\/ul><\/li><li>Bu hatadan kurtulmak ve blo\u011fun son halini g\u00f6rmek i\u00e7in, blo\u011funuzu edit\u00f6rden kald\u0131r\u0131n, ve tekrar ekleyin.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#defff1\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"AlignmentMatrixControl_Matrix_Hizalama_Kontrolu\">AlignmentMatrixControl : Matrix Hizalama Kontrol\u00fc<\/span><\/h2>\n\n\n\n<p class=\"has-white-color has-vivid-red-background-color has-text-color has-background\" style=\"font-size:15px\">! Bu bile\u015fen hen\u00fcz deneme a\u015famas\u0131ndad\u0131r (experimental). \u0130lerleyen d\u00f6nemlerde, bile\u015fenin yap\u0131s\u0131nda, blo\u011funuzun hata vermesine sebep olabilecek de\u011fi\u015fiklikler olabilir.<\/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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Yatay ve dikey hizalama ayar\u0131 i\u00e7in kullan\u0131l\u0131r.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"104\" class=\"wp-image-6323\" style=\"width: 100px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-AlignmentMatrixControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-AlignmentMatrixControl-Bile\u015feni-\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;AlignmentMatrixControl\n    id=\"diledigimiz-bir-id-degeri\"\n    label={ __( 'Yatay\/Dikey hizalama', 'sc-cards' ) }\n    value={ attributes.alignment }\n    onChange={ ( value ) =&gt; setAttributes({ alignment: value }) }\n\/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yukardaki kodda:<ul><li>&#8220;<code>id<\/code>&#8221; de\u011feri, ayar i\u00e7in olu\u015fturulan HTML eleman\u0131na bir <code>id=\"diledigimiz-bir-id-degeri\"<\/code> de\u011feri<\/li><li>&#8220;<code>label<\/code>&#8221; ise ayar i\u00e7in olu\u015fturulan HTML eleman\u0131na <code>aria-label=\"Yatay\/Dikey hizalama\"<\/code> \u00f6zelli\u011fi ekler.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi\"><strong>Kodun Kullan\u0131m\u0131<\/strong><\/span><\/h3>\n\n\n\n<p><strong>Bu bile\u015feni kullanmak i\u00e7in \u015fu ad\u0131mlar\u0131 takip ederiz:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6nce, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin ayar\u0131n\u0131 hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>alignment<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"alignment\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"center center\"\n\t},\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Bu de\u011fi\u015fken, bile\u015fen \u00fczerindeki her bir nokta i\u00e7in ayr\u0131 bir de\u011fer al\u0131r.<\/li><li>Bu de\u011ferler \u015f\u00f6yledir:<ul><li>&#8220;center center&#8221;: Ortadaki noktan\u0131n de\u011feridir. (Varsay\u0131lan olarak ayarlad\u0131k.)<\/li><li>&#8220;center right&#8221;: Orta sa\u011f noktan\u0131n de\u011feridir.<\/li><li>&#8220;center left&#8221;: Orta sol noktan\u0131n de\u011feridir.<\/li><li>&#8220;top right&#8221;: \u00dcst sa\u011f noktan\u0131n de\u011feridir.<\/li><li>&#8220;top center&#8221;: \u00dcst orta noktan\u0131n de\u011feridir.<\/li><li>&#8220;top left&#8221;: \u00dcst sol noktan\u0131n de\u011feridir.<\/li><li>&#8220;bottom right&#8221;: Alt sa\u011f noktan\u0131n de\u011feridir.<\/li><li>&#8220;bottom center&#8221;: Alt orta noktan\u0131n de\u011feridir.<\/li><li>&#8220;bottom left&#8221;: Alt sol noktan\u0131n de\u011feridir.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>Sonra, <code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><ul><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor.<\/li><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><li>Bu i\u015flemlerden sonra <em>block-settings.js<\/em> dosyas\u0131 \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/li><\/ul><\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z ayar, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Buradan bu ayar\u0131 getirmek i\u00e7in, <code>Edit({ attributes, setAttributes })<\/code> ve <code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu de\u011fi\u015fkeni kullan\u0131r\u0131z:<ul><li><code>attributes.alignment<\/code><\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"AlignmentMatrixControl_Bileseninin_Kullanimi\">AlignmentMatrixControl Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    __experimentalAlignmentMatrixControl as AlignmentMatrixControl, \/\/ Komponenti getirdik.\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    console.log(attributes.alignment) \/\/ Yapt\u0131\u011f\u0131m\u0131z ayara g\u00f6re de\u011ferini test etmek i\u00e7in\n    \n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;label&gt;{ __( 'Yatay\/Dikey hizalama', 'sc-cards' ) }&lt;\/label&gt;\n                    &lt;PanelRow&gt;\n                        &lt;AlignmentMatrixControl\n                            value={ attributes.alignment }\n                            onChange={ ( value ) =&gt; setAttributes({ alignment: value }) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015eimdi gelin, bu de\u011fi\u015fkeni, edit\u00f6r taraf\u0131nda, blo\u011fumuzun parent eleman\u0131 i\u00e7in bir <em>CSS class<\/em> de\u011feri (<code>className<\/code>) olarak kullanal\u0131m:<\/li><\/ul>\n\n\n\n<p>edit.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nimport { block_settings } from '.\/inc\/block-settings';\n\nexport default function Edit({ attributes, setAttributes }) {\n\treturn (\n\t\t&lt;&gt;\n\t\t\t{block_settings(attributes, setAttributes)}\n\t\t\t&lt;p { ...useBlockProps({\n\t\t\t\t\tclassName: attributes.alignment\n\t\t\t\t}) }\n\t\t\t&gt;\n\t\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\n\t\t\t&lt;\/p&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Ayn\u0131 de\u011fi\u015fkeni, tema g\u00f6r\u00fcn\u00fcm\u00fcnde de bir <em>CSS class<\/em> de\u011feri olarak kullanabiliriz.<ul><li>Ben blo\u011fu bir <code>div<\/code> i\u00e7erisine ald\u0131m ve bu div i\u00e7in de <code>attributes.alignment<\/code> de\u011ferini <em>class <\/em>olarak kulland\u0131m.<\/li><li>Farkl\u0131 bir kullan\u0131m\u0131 g\u00f6stermek i\u00e7in, ayn\u0131 de\u011feri, bu <code>div<\/code> i\u00e7indeki <code>p<\/code> eleman\u0131na da <em>class <\/em>olarak atad\u0131m. Tabi ayn\u0131 <em>CSS class<\/em>\u0131n\u0131 hem <em>parent <\/em>hem de <em>child <\/em>elemanlar\u0131nda kullanmak pek kullan\u0131\u015fl\u0131 de\u011fil. Siz birini tercih edebilirsiniz.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><code>save.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nexport default function save({ attributes }) {\n\treturn (\n\t\t&lt;div { ...useBlockProps.save({\n\t\t\tclassName: attributes.alignment\n\t\t}) }&gt;\n\t\t\t&lt;p className={attributes.alignment}&gt;\n\t\t\t\t{ __(\n\t\t\t\t\t'Sc Cards \u2013 hello from the saved content!',\n\t\t\t\t\t'sc-cards'\n\t\t\t\t) }\n\t\t\t&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\n<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<ul class=\"has-white-color has-vivid-purple-background-color has-text-color has-background wp-block-list\"><li>Bu kontrol\u00fc eklerken ve kullan\u0131rken takip etti\u011fimiz ad\u0131mlar, di\u011fer b\u00fct\u00fcn kontroller i\u00e7in de hemen hemen ayn\u0131d\u0131r.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffd5e0\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"AnglePickerControlnbsp_Aci_Secici_Kontrolu\">AnglePickerControl&nbsp;: A\u00e7\u0131 Se\u00e7ici Kontrol\u00fc<\/span><\/h2>\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<h3 class=\"wp-block-heading\"><span id=\"Gorevi-2\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir a\u00e7\u0131 de\u011feri olu\u015fturup saklamam\u0131z\u0131 sa\u011flar.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-2\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"109\" class=\"wp-image-6292\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Kontrol-Ekleme-Aci.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-Kontrol-Ekleme-A\u00e7\u0131\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-2\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;AnglePickerControl\n    value={ attributes.angle }\n    onChange={ ( value ) =&gt; setAttributes({ angle: value }) }\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-2\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6nce, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin ayar\u0131n\u0131 hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>angle<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<ul><li>Varsay\u0131lan de\u011fer olarak 0 de\u011ferini verdim. Bir de\u011fi\u015fiklik yapmazsam de\u011feri s\u0131f\u0131r olacak.<\/li><\/ul><\/li><li>&#8220;<em>alignment<\/em>&#8221; bir \u00f6nceki kontrol i\u00e7in eklenmi\u015fti, \u015fu an konumuzla ilgisi yoktur.<\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"alignment\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t},\n\t\"angle\": {\n\t\t\"type\": \"number\",\n\t\t\"default\": 0\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>Sonra, <code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><ul><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor.<\/li><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z ayar, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde <code>angle<\/code> de\u011fi\u015fkenin de\u011feri oarak saklan\u0131r.<\/strong><ul><li>Buradan bu ayar\u0131 getirmek i\u00e7in, <code>Edit({ attributes, setAttributes })<\/code> ve <code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu de\u011fi\u015fkeni kullan\u0131r\u0131z:<ul><li><code>attributes.angle<\/code><\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"AnglePickerControl_Bileseninin_Kullanimi\">AnglePickerControl Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<ul class=\"wp-block-list\"><li>Bu bile\u015fen kendi <code>&lt;label&gt;&lt;\/label&gt;<\/code> eleman\u0131n\u0131 kendisi olu\u015fturuyor.<\/li><li>Bu y\u00fczden <code>AlignmentMatrixControl<\/code> bile\u015fenden hemen \u00f6nce olu\u015fturdu\u011fumuz <code>&lt;label&gt;&lt;\/label&gt;<\/code> eleman\u0131n\u0131 olu\u015fturmad\u0131k.<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    __experimentalAlignmentMatrixControl as AlignmentMatrixControl,\n    AnglePickerControl, \/\/ Komponenti getirdik.\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    console.log(attributes.angle) \/\/ Yapt\u0131\u011f\u0131m\u0131z ayara g\u00f6re de\u011ferini test etmek i\u00e7in\n    \n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;label&gt;{ __( 'Yatay\/Dikey hizalama', 'sc-cards' ) }&lt;\/label&gt;\n                    &lt;PanelRow&gt;\n                        &lt;AlignmentMatrixControl\n                            id=\"diledigimiz-bir-id-degeri\"\n                            label={ __( 'Yatay\/Dikey hizalama', 'sc-cards' ) }\n                            value={ attributes.alignment }\n                            onChange={ ( value ) =&gt; setAttributes({ alignment: value }) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;AnglePickerControl\n                            value={ attributes.angle }\n                            onChange={ ( value ) =&gt; setAttributes({ angle: value }) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fun edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fcnde kullan\u0131m\u0131na bir \u00f6rnek:<\/li><\/ul>\n\n\n\n<p><code>edit.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nimport { block_settings } from '.\/inc\/block-settings';\n\nexport default function Edit({ attributes, setAttributes }) {\n\n    const textStyle = {\n        transform: `rotate(${attributes.angle}deg)`\n    }\n\n\treturn (\n\t\t&lt;&gt;\n\t\t\t{block_settings(attributes, setAttributes)}\n\t\t\t&lt;div { ...useBlockProps({\n\t\t\t\t\tclassName: attributes.alignment\n\t\t\t\t}) }\n\t\t\t&gt;\n\t\t\t\t&lt;p style={textStyle}&gt;\n\t\t\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\n\t\t\t\t&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fun tema g\u00f6r\u00fcn\u00fcm\u00fcnde kullanmak i\u00e7in de save.js dosyas\u0131nda \u015f\u00f6yle bir de\u011fi\u015fiklik yapabiliriz:<\/li><\/ul>\n\n\n\n<p><code>save.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nexport default function save({ attributes }) {\n\n\tconst textStyle = {\n        transform: `rotate(${attributes.angle}deg)`\n    }\n\n\treturn (\n\t\t&lt;div { ...useBlockProps.save({\n\t\t\tclassName: attributes.alignment\n\t\t}) }&gt;\n\t\t\t&lt;p\tstyle={textStyle}&gt;\n\t\t\t\t{ __(\n\t\t\t\t\t'Sc Cards \u2013 hello from the saved content!',\n\t\t\t\t\t'sc-cards'\n\t\t\t\t) }\n\t\t\t&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\n<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffecb9\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"BaseControlnbsp_Temel_Kontrol\">BaseControl&nbsp;: Temel Kontrol<\/span><\/h2>\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<h3 class=\"wp-block-heading\"><span id=\"Gorevi-3\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Kapsad\u0131\u011f\u0131 kontrol veya input eleman\u0131na bir <code>&lt;label&gt;&lt;\/label&gt;<\/code> ve bir a\u00e7\u0131klama k\u0131sm\u0131 ekler.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-3\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir <code>&lt;textarea&gt;&lt;\/textarea&gt;<\/code> ile \u015fu \u015fekilde g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"139\" class=\"wp-image-6344\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-BaseControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-BaseControl-Bile\u015feni-\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-3\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;BaseControl\n    id=\"textarea-1\"\n    label={__('Text girin', 'sc-cards')}\n    help={__('Buras\u0131 \u015fu i\u015fe yarar.', 'sc-cards')}\n    __nextHasNoMarginBottom={ true }\n    onChange = {(value) =&gt; setAttributes({textInput: value})}\n&gt;\n    &lt;textarea id=\"textarea-1\"&gt;{attributes.textInput}&lt;\/textarea&gt;\n&lt;\/BaseControl&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-3\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><ul><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor.<\/li><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><li>Bu i\u015flemlerden sonra <em>block-settings.js<\/em> dosyas\u0131 \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/li><\/ul><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li>Ben bir <code>&lt;textarea \/&gt;<\/code> eleman\u0131 i\u00e7in kulland\u0131m, fakat siz bu kontrol\u00fc, di\u011fer kontroller de dahil diledi\u011finiz bir <em>input<\/em> eleman\u0131 ile kullanabilirsiniz.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"BaseControl_Bileseninin_Kullanimi\">BaseControl Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    BaseControl \n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n    \n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;BaseControl\n                            id=\"textarea-1\"\n                            label={__('Text girin', 'sc-cards')}\n                            help={__('Buras\u0131 \u015fu i\u015fe yarar.', 'sc-cards')}\n                            __nextHasNoMarginBottom={ true }\n                        &gt;\n                            &lt;textarea id=\"textarea-1\" \/&gt;\n                        &lt;\/BaseControl&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fun edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fcnde kullan\u0131m\u0131na bir \u00f6rnek:<\/li><\/ul>\n\n\n\n<p><code>edit.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nimport { block_settings } from '.\/inc\/block-settings';\n\nexport default function Edit({ attributes, setAttributes }) {\n\n    const textStyle = {\n        transform: `rotate(${attributes.angle}deg)`\n    }\n\n\treturn (\n\t\t&lt;&gt;\n\t\t\t{block_settings(attributes, setAttributes)}\n\t\t\t&lt;div { ...useBlockProps({\n\t\t\t\t\tclassName: attributes.alignment\n\t\t\t\t}) }\n\t\t\t&gt;\n\t\t\t\t&lt;p style={textStyle}&gt;\n\t\t\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\n\t\t\t\t&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Blo\u011fun tema g\u00f6r\u00fcn\u00fcm\u00fcnde kullanmak i\u00e7in de save.js dosyas\u0131nda \u015f\u00f6yle bir de\u011fi\u015fiklik yapabiliriz:<\/li><\/ul>\n\n\n\n<p><code>save.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nexport default function save({ attributes }) {\n\n\tconst textStyle = {\n        transform: `rotate(${attributes.angle}deg)`\n    }\n\n\treturn (\n\t\t&lt;div { ...useBlockProps.save({\n\t\t\tclassName: attributes.alignment\n\t\t}) }&gt;\n\t\t\t&lt;p\tstyle={textStyle}&gt;\n\t\t\t\t{ __(\n\t\t\t\t\t'Sc Cards \u2013 hello from the saved content!',\n\t\t\t\t\t'sc-cards'\n\t\t\t\t) }\n\t\t\t&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\n<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#defff1\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"BorderBoxControlnbsp_Kutu_Kenari_Kontrolu\">BorderBoxControl&nbsp;: Kutu Kenar\u0131 Kontrol\u00fc<\/span><\/h2>\n\n\n\n<p class=\"has-white-color has-vivid-red-background-color has-text-color has-background\" style=\"font-size:15px\">! Bu bile\u015fen hen\u00fcz deneme a\u015famas\u0131ndad\u0131r (experimental). \u0130lerleyen d\u00f6nemlerde, bile\u015fenin yap\u0131s\u0131nda, blo\u011funuzun hata vermesine sebep olabilecek de\u011fi\u015fiklikler olabilir.<\/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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-4\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Birimleri ile birlikte, bir HTML kutusunun;<ul><li><code>top<\/code><\/li><li><code>right<\/code><\/li><li><code>bottom<\/code><\/li><li><code>left<\/code><br>de\u011ferlerini ayarlamak i\u00e7in kullan\u0131l\u0131r.<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-4\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"187\" class=\"wp-image-6360\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-BorderBoxControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-BorderBoxControl-Bile\u015feni-\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-4\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;BoxControl\n    values={{\n        top: attributes.containerPadding.top,\n        left: attributes.containerPadding.left,\n        right: attributes.containerPadding.right,\n        bottom: attributes.containerPadding.bottom,\n    }}\n    onChange={(value) =&gt; setAttributes({ containerPadding: value })}\n    label={__('Blok container eleman\u0131n\u0131n padding de\u011ferleri:', 'sc-cards')}\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-4\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6nce, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin ayar\u0131n\u0131 hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>containerPadding<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"containerPadding\": {\n\t\t\"type\": \"object\",\n\t\t\"default\": {\"top\": \"5px\", \"left\": \"10px\", \"right\": \"10px\", \"bottom\": \"5px\"}\n\t},\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>Sonra, <code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><ul><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor.<\/li><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z ayar, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Buradan bu ayar\u0131 getirmek i\u00e7in, <code>Edit({ attributes, setAttributes })<\/code> ve <code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu de\u011fi\u015fkenleri kullan\u0131r\u0131z:<ul><li><code>attributes.containerPadding.left,<\/code><\/li><li><code>attributes.containerPadding.right,<\/code><\/li><li><code>attributes.containerPadding.top,<\/code><\/li><li><code>attributes.containerPadding.bottom<\/code><\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"BaseControl_Bileseninin_Kullanimi-2\">BaseControl Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    __experimentalBoxControl as BoxControl\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n    \n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;BoxControl\n                            values={{\n                                top: attributes.containerPadding.top,\n                                left: attributes.containerPadding.left,\n                                right: attributes.containerPadding.right,\n                                bottom: attributes.containerPadding.bottom,\n                            }}\n                            onChange={(value) =&gt; setAttributes({ containerPadding: value })}\n                            label={__('Blok container eleman\u0131n\u0131n padding de\u011ferleri:', 'sc-cards')}\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015eimdi gelin, bu de\u011fi\u015fkeni, edit\u00f6r taraf\u0131nda, blo\u011fumuzun <code>&lt;p&gt;&lt;\/p&gt;<\/code> eleman\u0131nda <em>padding<\/em> de\u011ferleri vermek i\u00e7in kullanal\u0131m:<\/li><\/ul>\n\n\n\n<p><code>edit.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nimport { block_settings } from '.\/inc\/block-settings';\n\nexport default function Edit({ attributes, setAttributes }) {\n\n\n    const textStyle = {\n\tpaddingLeft: attributes.containerPadding.left,\n\tpaddingRight: attributes.containerPadding.right,\n\tpaddingTop: attributes.containerPadding.top,\n\tpaddingBottom: attributes.containerPadding.bottom\n    }\n\n\treturn (\n\t\t&lt;&gt;\n\t\t\t{block_settings(attributes, setAttributes)}\n\t\t\t&lt;div { ...useBlockProps({\n\t\t\t\t\tclassName: attributes.alignment\n\t\t\t\t}) }\n\t\t\t&gt;\n\t\t\t\t&lt;p style={textStyle}&gt;\n\t\t\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\n\t\t\t\t&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Ayn\u0131 mant\u0131kla, yapt\u0131\u011f\u0131m\u0131z ayar\u0131, tema g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in blo\u011fumuzun <code>save.js<\/code> dosyas\u0131nda kullanabiliriz.<\/li><\/ul>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffe9a7\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"BorderControl_Kenar_Kontrolu\">BorderControl : Kenar Kontrol\u00fc<\/span><\/h2>\n\n\n\n<p class=\"has-white-color has-vivid-red-background-color has-text-color has-background\" style=\"font-size:15px\">! Bu bile\u015fen hen\u00fcz deneme a\u015famas\u0131ndad\u0131r (experimental). \u0130lerleyen d\u00f6nemlerde, bile\u015fenin yap\u0131s\u0131nda, blo\u011funuzun hata vermesine sebep olabilecek de\u011fi\u015fiklikler olabilir.<\/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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-5\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Birimleri ile birlikte, bir HTML kutusunun;<ul><li><code>border<\/code> de\u011ferlerini ayarlamak i\u00e7in kullan\u0131l\u0131r.<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-5\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"144\" class=\"wp-image-6376\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-BorderControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-BorderControl-Bile\u015feni-\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-5\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Buras\u0131 fonksiyonun return ifadesinden \u00f6nce girilir.\nconst colors = &#91;\n    { name: 'Blue 20', color: '#72aee6' },\n    { name: 'Black', color: '#000000' },\n    { name: 'White', color: '#ffffff' },\n    { name: 'Gray 20', color: '#dddddd' },\n];\n\n\/\/ Bile\u015fenin kodu - return k\u0131sm\u0131nda yer al\u0131r\n&lt;BorderControl\n    colors={ colors }\n    label={ __( 'Kenarl\u0131k', 'sc-cards' ) }\n    onChange={(value) =&gt; setAttributes({ containerBorder: value })}\n    value={ attributes.containerBorder }\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-5\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6nce, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin ayar\u0131n\u0131 hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>containerBorder<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"containerBorder\": {\n\t\t\"type\": \"object\",\n\t\t\"default\": {}\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>Sonra, <code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    __experimentalBorderControl as BorderControl\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z ayar, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken ve <em>CSS border<\/em> \u00f6zelli\u011finde \u015fu \u015fekilde kullan\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>border: `${attributes.containerBorder.width} ${attributes.containerBorder.style} ${attributes.containerBorder.color}`<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffcad6\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"BoxControlnbsp_Kenar_Kontrolu\">BoxControl&nbsp;: Kenar Kontrol\u00fc<\/span><\/h2>\n\n\n\n<p class=\"has-white-color has-vivid-red-background-color has-text-color has-background\" style=\"font-size:15px\">! Bu bile\u015fen hen\u00fcz deneme a\u015famas\u0131ndad\u0131r (experimental). \u0130lerleyen d\u00f6nemlerde, bile\u015fenin yap\u0131s\u0131nda, blo\u011funuzun hata vermesine sebep olabilecek de\u011fi\u015fiklikler olabilir.<\/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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-6\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Birimleri ile birlikte, bir HTML kutusunun;<ul><li><code>top<\/code><\/li><li><code>right<\/code><\/li><li><code>bottom<\/code><\/li><li><code>left<\/code><br>de\u011ferlerini ayarlamak i\u00e7in kullan\u0131l\u0131r.<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-6\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"180\" class=\"wp-image-6391\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-BoxControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-BoxControl-Bile\u015feni-\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-6\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Bu k\u0131s\u0131m fonksiyonun return k\u0131sm\u0131ndan \u00f6nce girilir.\nconst units = &#91;\n    { value: 'px', label: 'px', default: 0 },\n    { value: '%', label: '%', default: 10 },\n    { value: 'em', label: 'em', default: 0 },\n]\n\n\/\/ Fonksiyonun return k\u0131sm\u0131nda verilir.\n&lt;BoxControl\n    label={ __( 'Padding', 'sc-cards' ) }\n    values={ attributes.containerPadding }\n    onChange={(value) =&gt; setAttributes({ containerPadding: value })}\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-6\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6nce, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin ayar\u0131n\u0131 hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>containerPadding<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"containerPadding\": {\n\t\t\"type\": \"object\",\n\t\t\"default\": {\"top\": \"5px\", \"left\": \"10px\", \"right\": \"10px\", \"bottom\": \"5px\"}\n\t},\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>Sonra, <code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    __experimentalBoxControl as BoxControl \n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z ayar, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken ve <em>CSS padding<\/em> \u00f6zelli\u011finde \u015fu \u015fekilde kullan\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>padding: `${attributes.containerPadding.top} ${attributes.containerPadding.right} ${attributes.containerPadding.bottom} ${attributes.containerPadding.left}`<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"BoxControl_Bileseninin_Kullanimi\">BoxControl Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    __experimentalBoxControl as BoxControl\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    const units = &#91;\n        { value: 'px', label: 'px', default: 0 },\n        { value: '%', label: '%', default: 10 },\n        { value: 'em', label: 'em', default: 0 },\n    ]\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;BoxControl\n                            units={units}\n                            label={ __( 'Padding', 'sc-cards' ) }\n                            values={ attributes.containerPadding }\n                            onChange={(value) =&gt; setAttributes({ containerPadding: value })}\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<p>edit.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nimport { block_settings } from '.\/inc\/block-settings';\n\nexport default function Edit({ attributes, setAttributes }) {\n\n\n    const textStyle = {\n        padding: `${attributes.containerPadding.top} ${attributes.containerPadding.right} ${attributes.containerPadding.bottom} ${attributes.containerPadding.left}`\n    }\n\n\treturn (\n\t\t&lt;&gt;\n\t\t\t{block_settings(attributes, setAttributes)}\n\t\t\t&lt;div { ...useBlockProps({\n\t\t\t\t\tclassName: attributes.alignment\n\t\t\t\t}) }\n\t\t\t&gt;\n\t\t\t\t&lt;p style={textStyle}&gt;\n\t\t\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\n\t\t\t\t&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}\n<\/code><\/pre>\n\n\n\n<p><code>save.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nexport default function save({ attributes }) {\n\n\tconst textStyle = {\n        padding: `${attributes.containerPadding.top} ${attributes.containerPadding.right} ${attributes.containerPadding.bottom} ${attributes.containerPadding.left}`\n    }\n\n\treturn (\n\t\t&lt;div { ...useBlockProps.save({\n\t\t\tclassName: attributes.alignment\n\t\t}) }&gt;\n\t\t\t&lt;p\tstyle={textStyle}&gt;\n\t\t\t\t{ __(\n\t\t\t\t\t'Sc Cards \u2013 hello from the saved content!',\n\t\t\t\t\t'sc-cards'\n\t\t\t\t) }\n\t\t\t&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\n<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#c8eaff\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"Button_Buton_Kontrolu\">Button : Buton Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-7\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir buton yaratmak i\u00e7in kullan\u0131l\u0131r.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-7\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"153\" class=\"wp-image-6407\" style=\"width: 300px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Button-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-Button-Bile\u015feni-\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-7\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Bu k\u0131s\u0131m fonksiyonun return k\u0131sm\u0131ndan \u00f6nce girilir.\nconst buttonClickFunction = () =&gt; {\n    setAttributes({ayar: \"de\u011feri\"})\n}\n\n\/\/ Fonksiyonun return k\u0131sm\u0131nda verilir.\n&lt;Button\n    disabled={false}\n\n    isDestructive={false}\n    variant=\"primary\"\n    onClick={() =&gt; buttonClickFunction()}\n&gt; { __( 'Kaydet', 'sc-cards' ) }\n&lt;\/Button&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><code>variant<\/code> \u00f6zelli\u011fi \u015fu de\u011ferleri alabilir:<ul><li>&#8220;primary&#8221; : Mavi buton<\/li><li>&#8220;secondary&#8221; : Gri buton<\/li><li>&#8220;tertiary&#8221; : Text butonu<\/li><li>&#8220;link&#8221; : Butonu bir a eleman\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<ul><li>Bu se\u00e7enek ile birlikte <code>href<\/code> ve <code>target<\/code> \u00f6zelli\u011fi de gelir.<\/li><\/ul><\/li><\/ul><\/li><li><code>isDestructive={true}<\/code> : Bu \u00f6zellik buton rengini k\u0131rm\u0131z\u0131 yapar<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-7\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>E\u011fer t\u0131klama bir ayar de\u011fi\u015fikli\u011fi yapacaksa \u00f6nce, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin ayar\u0131n\u0131 hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>ayar<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"ayar\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t},\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>Sonra, <code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    Button \n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015feni, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7ine yerle\u015ftiriyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Buton t\u0131klamas\u0131 ile yapt\u0131\u011f\u0131m\u0131z ayar, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde kullan\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.ayar<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"Button_Bileseninin_Kullanimi\">Button Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    Button\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n\n    const clickFunction = () =&gt; {\n        setAttributes({ayar: \"de\u011feri\"})\n    }\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;Button\n                            disabled={false}\n                            variant=\"secondary\"\n                            onClick={() =&gt; clickFunction()}\n                        &gt; { __( 'Kaydet', 'sc-cards' ) }\n                        &lt;\/Button&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/button\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#d9ff70\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"ButtonGroup_Buton_Grubu_Kontrolu\">ButtonGroup : Buton Grubu Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-8\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir buton grubu yaratmak i\u00e7in kullan\u0131l\u0131r.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-8\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"95\" class=\"wp-image-6431\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ButtonGroup-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-ButtonGroup-Bile\u015feni\"><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-8\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ButtonGroup&gt;\n    &lt;Button variant=\"secondary\"&gt;{__('%100', 'sc-cards')}&lt;\/Button&gt;\n    &lt;Button variant=\"secondary\"&gt;{__('%75', 'sc-cards')}&lt;\/Button&gt;\n    &lt;Button variant=\"secondary\"&gt;{__('%50', 'sc-cards')}&lt;\/Button&gt;\n    &lt;Button variant=\"secondary\"&gt;{__('%25', 'sc-cards')}&lt;\/Button&gt;\n&lt;\/ButtonGroup&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-8\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    Button,\n    ButtonGroup\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"ButtonGroup_Bileseninin_Kullanimi\">ButtonGroup Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    Button,\n    ButtonGroup\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;ButtonGroup&gt;\n                            &lt;Button variant=\"secondary\"&gt;{__('%100', 'sc-cards')}&lt;\/Button&gt;\n                            &lt;Button variant=\"secondary\"&gt;{__('%75', 'sc-cards')}&lt;\/Button&gt;\n                            &lt;Button variant=\"secondary\"&gt;{__('%50', 'sc-cards')}&lt;\/Button&gt;\n                            &lt;Button variant=\"secondary\"&gt;{__('%25', 'sc-cards')}&lt;\/Button&gt;\n                        &lt;\/ButtonGroup&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/button-group\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffeee2\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"Card_Kart_Kontrolu\">Card : Kart Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-9\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir kart yaratmak i\u00e7in kullan\u0131l\u0131r.<\/li><li>Olu\u015fturulan kart \u015fu alt bile\u015fenlere sahip olabilir:<ul><li>CardHeader<\/li><li>CardBody<\/li><li>CardDivider<\/li><li>CardMedia<\/li><li>CardFooter<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-9\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"366\" class=\"wp-image-6447\" style=\"width: 250px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Card-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-Card-Bile\u015feni-\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Card-Bileseni-.jpg 280w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Card-Bileseni--205x300.jpg 205w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-9\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Card\n    elevation=\"10\"\n&gt;\n    &lt;CardHeader&gt;Kart Ba\u015fl\u0131\u011f\u0131&lt;\/CardHeader&gt;\n    &lt;CardBody&gt;Kart g\u00f6vdesi g\u00f6vdesi kart g\u00f6vdesi&lt;\/CardBody&gt;\n    &lt;CardDivider \/&gt;\n    &lt;CardBody&gt;Kart g\u00f6vdesi g\u00f6vdesi kart g\u00f6vdesi&lt;\/CardBody&gt;\n    &lt;CardMedia&gt;\n        &lt;img src=\"https:\/\/www.fillmurray.com\/640\/360\" \/&gt;\n    &lt;\/CardMedia&gt;\n    &lt;CardFooter&gt;Kart footer k\u0131sm\u0131&lt;\/CardFooter&gt;\n&lt;\/Card&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><code>elevation=\"10\"<\/code> : \u00f6zelli\u011fi g\u00f6lge miktar\u0131n\u0131 kontrol eder.<\/li><li>Bu \u00f6zelli\u011fin yan\u0131nda \u015funlar da eklenebilir:<ul><li><code>size (string)<\/code><ul><li><code>xSmall,&nbsp;small,&nbsp;medium,&nbsp;large<\/code> de\u011ferlerinden birini alabilir.<\/li><\/ul><\/li><li><code>isRounded<\/code> <code>(boolean)<\/code><ul><li>Varsay\u0131lan olarak <code>true<\/code> de\u011ferini al\u0131r.<\/li><\/ul><\/li><li><code><code>isBorderless<\/code><\/code> <code>(boolean)<\/code><ul><li>Varsay\u0131lan olarak <code>false<\/code> de\u011ferini al\u0131r.<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-9\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    Card,\n    CardBody,\n    CardDivider,\n    CardFooter,\n    CardHeader,\n    CardMedia,\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"Card_Bileseninin_Kullanimi\">Card Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    Card,\n    CardBody,\n    CardDivider,\n    CardFooter,\n    CardHeader,\n    CardMedia,\n    PanelBody,\n    PanelRow,\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    const units = &#91;\n        { value: 'px', label: 'px', default: 0 },\n        { value: '%', label: '%', default: 10 },\n        { value: 'em', label: 'em', default: 0 },\n    ]\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;Card\n                            elevation=\"10\"\n                        &gt;\n                            &lt;CardHeader&gt;Kart Ba\u015fl\u0131\u011f\u0131&lt;\/CardHeader&gt;\n                            &lt;CardBody&gt;Kart g\u00f6vdesi g\u00f6vdesi kart g\u00f6vdesi&lt;\/CardBody&gt;\n                            &lt;CardDivider \/&gt;\n                            &lt;CardBody&gt;Kart g\u00f6vdesi g\u00f6vdesi kart g\u00f6vdesi&lt;\/CardBody&gt;\n                            &lt;CardMedia&gt;\n                                &lt;img src=\"https:\/\/www.fillmurray.com\/640\/360\" \/&gt;\n                            &lt;\/CardMedia&gt;\n                            &lt;CardFooter&gt;Kart footer k\u0131sm\u0131&lt;\/CardFooter&gt;\n                        &lt;\/Card&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/card\/\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#def3ff\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"CheckboxControl_Secim_Kutusu_Kontrolu\">CheckboxControl : Se\u00e7im Kutusu Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-10\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir checkbox (kontrol) kutucu\u011fu olu\u015fturur.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-10\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0130\u015faretlenmeden \u00f6nce:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"85\" class=\"wp-image-6509\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-CheckBoxControl-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-CheckBoxControl-Bile\u015feni\"><\/li><li>\u0130\u015faretlendikten sonra:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"92\" class=\"wp-image-6511\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-CheckBoxControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-CheckBoxControl-Bile\u015feni-\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-CheckBoxControl-Bileseni-.jpg 303w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-CheckBoxControl-Bileseni--300x79.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-10\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;CheckboxControl\n    label={__('Fiyat\u0131 g\u00f6ster', 'sc-cards')}\n    help={__('Buray\u0131 i\u015faretlersen \u00fcr\u00fcn fiyatlar\u0131 g\u00f6r\u00fcnecek', 'sc-cards')}\n    checked={ attributes.showPrices }\n    onChange={(value) =&gt; setAttributes({ showPrices: value })}\n\/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><code>indeterminate&nbsp;= true<\/code> \u00f6zelli\u011fi belirsiz olmas\u0131n\u0131 sa\u011flar:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"85\" class=\"wp-image-6515\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-CheckBoxControl-Bileseni-indeterminate.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-CheckBoxControl-Bile\u015feni-indeterminate\"><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-10\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>showPrices<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"showPrices\": {\n\t\t\"type\": \"boolean\",\n\t\t\"default\": false\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Sonra, <strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    CheckboxControl\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z se\u00e7im, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.showPrices<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"CheckboxControl_Bileseninin_Kullanimi\">CheckboxControl Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    CheckboxControl\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;CheckboxControl\n                            label={__('Fiyat\u0131 g\u00f6ster', 'sc-cards')}\n                            help={__('Buray\u0131 i\u015faretlersen \u00fcr\u00fcn fiyatlar\u0131 g\u00f6r\u00fcnecek', 'sc-cards')}\n                            checked={ attributes.showPrices }\n                            onChange={(value) =&gt; setAttributes({ showPrices: value })}\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/checkbox-control\/\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffecdf\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"ColorIndicator_Renk_Gostergesi_Kontrolu\">ColorIndicator : Renk G\u00f6stergesi Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-11\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Belirli bir rengi g\u00f6sterir.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-11\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"50\" class=\"wp-image-6522\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorIndicator-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-ColorIndicator-Bile\u015feni\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorIndicator-Bileseni.jpg 333w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorIndicator-Bileseni-300x43.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-11\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PanelRow&gt;\n    {__('Kullan\u0131lan renk: ', 'sc-cards')}\n    &lt;ColorIndicator colorValue=\"yellow\" \/&gt;\n&lt;\/PanelRow&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-11\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    ColorIndicator\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"ColorIndicator_Bileseninin_Kullanimi\">ColorIndicator Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    ColorIndicator\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        {__('Kullan\u0131lan renk: ', 'sc-cards')}\n                        &lt;ColorIndicator colorValue=\"yellow\" \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/color-indicator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#d5ffee\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"ColorPalette_Renk_Paleti_Kontrolu\">ColorPalette : Renk Paleti Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-12\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir renk paleti olu\u015fturur.<ul><li>Dilerseniz bir &#8220;<em>varsay\u0131lan renkler<\/em>&#8221; listesi de olu\u015fturabilirsiniz.<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-12\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"224\" class=\"wp-image-6526\" style=\"width: 300px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorPalette-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-ColorPalette-Bile\u015feni\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorPalette-Bileseni.jpg 325w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorPalette-Bileseni-300x224.jpg 300w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-12\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Buras\u0131 fonksiyonun return b\u00f6l\u00fcm\u00fcnden \u00f6nce yer al\u0131r.\nconst colors = &#91;\n    { name: 'red', color: '#f00' },\n    { name: 'white', color: '#fff' },\n    { name: 'blue', color: '#00f' },\n    { name: 'grey', color: '#ddd' },\n    { name: 'yellow', color: 'yellow' },\n    { name: 'brown', color: 'brown' },\n    { name: 'orange', color: 'orange' },\n    { name: 'renk 2', color: 'rgb(100,100,100)' },\n];\n\n\/\/ Fonksiyonun return b\u00f6l\u00fcm\u00fcnde yer al\u0131r.\n&lt;ColorPalette\n    colors={ colors }\n    value={ attributes.selectedColor }\n    onChange={ ( color ) =&gt; setAttributes( {selectedColor: color} ) }\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-12\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>selectedColor<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"selectedColor\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    ColorPalette\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z se\u00e7im, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.selectedColor<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"ColorPalette_Bileseninin_Kullanimi\">ColorPalette Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    ColorPalette\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\nconst colors = &#91;\n    { name: 'red', color: '#f00' },\n    { name: 'white', color: '#fff' },\n    { name: 'blue', color: '#00f' },\n    { name: 'grey', color: '#ddd' },\n    { name: 'yellow', color: 'yellow' },\n    { name: 'brown', color: 'brown' },\n    { name: 'orange', color: 'orange' },\n    { name: 'renk 2', color: 'rgb(100,100,100)' },\n];\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;ColorPalette\n                            colors={ colors }\n                            value={ attributes.selectedColor }\n                            onChange={ ( color ) =&gt; setAttributes( {selectedColor: color} ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/color-palette\/\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#fffaa2\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"ColorPicker_Renk_Secici_Kontrolu\">ColorPicker : Renk Se\u00e7ici Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-13\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir renk se\u00e7icisi olu\u015fturur.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-13\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"355\" class=\"wp-image-6536\" style=\"width: 250px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorPicker-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-ColorPicker-Bile\u015feni\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorPicker-Bileseni.jpg 287w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ColorPicker-Bileseni-211x300.jpg 211w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-13\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ColorPicker\n    color={attributes.selectedColor}\n    onChange={ ( color ) =&gt; setAttributes( {selectedColor: color} ) }\n    enableAlpha={true}\n    defaultValue=\"#000\"\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-13\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>selectedColor<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"selectedColor\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    ColorPicker\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z se\u00e7im, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.selectedColor<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"ColorPicker_Bileseninin_Kullanimi\">ColorPicker Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/color-picker\/\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#d5ffee\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"ComboboxControlnbsp_Suzmeli_Secim_Kontrolu\">ComboboxControl&nbsp;: S\u00fczmeli Se\u00e7im Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-14\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00c7ok uzun bir listeden bir se\u00e7im yapmam\u0131z gerekiyorsa, girdi\u011fimiz harflere g\u00f6re se\u00e7enekleri s\u00fczerek getirir.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-14\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0130lk defa t\u0131kland\u0131\u011f\u0131nda:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"256\" class=\"wp-image-6544\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ComboboxControl-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-ComboboxControl-Bile\u015feni\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ComboboxControl-Bileseni.jpg 321w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ComboboxControl-Bileseni-300x220.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li><li>Bir harf girildi\u011finde:<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"153\" class=\"wp-image-6545\" style=\"width: 180px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-ComboboxControl-Bileseni-.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-ComboboxControl-Bile\u015feni-\"><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-14\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Buras\u0131 fonksiyonun return b\u00f6l\u00fcm\u00fcnden \u00f6nce yer al\u0131r.\nconst options = &#91;\n    {\n        value: 'xsmall',\n        label: 'xSmall',\n    },\n    {\n        value: 'small',\n        label: 'Small',\n    },\n    {\n        value: 'normal',\n        label: 'Normal',\n    },\n    {\n        value: 'medium',\n        label: 'Medium',\n    },\n    {\n        value: 'large',\n        label: 'Large',\n    },\n    {\n        value: 'xlarge',\n        label: 'xLarge',\n    },\n    {\n        value: 'huge',\n        label: 'Huge',\n    },\n];\nconst setFilteredOptions = (options, inputValue) =&gt; {\n    options.filter( ( option ) =&gt;\n        option.label\n            .toLowerCase()\n            .startsWith( inputValue.toLowerCase() )\n    )\n}\n\n\/\/ Fonksiyonun return b\u00f6l\u00fcm\u00fcnde yer al\u0131r.\n&lt;ComboboxControl\n    label={__('Font Size', 'sc-cards')}\n    value={ attributes.fontSize }\n    onChange={ (value) =&gt; setAttributes({fontSize: value}) }\n    options={ options }\n    onFilterValueChange={(inputValue) =&gt; setFilteredOptions(options, inputValue)}\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-14\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak bir de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>selectedColor<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz bir isim verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"fontSize\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    ComboboxControl\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Yapt\u0131\u011f\u0131m\u0131z se\u00e7im, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.fontSize<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"ColorPalette_Bileseninin_Kullanimi-2\">ColorPalette Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    ComboboxControl\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    const options = &#91;\n        {\n            value: 'xsmall',\n            label: 'xSmall',\n        },\n        {\n            value: 'small',\n            label: 'Small',\n        },\n        {\n            value: 'normal',\n            label: 'Normal',\n        },\n        {\n            value: 'medium',\n            label: 'Medium',\n        },\n        {\n            value: 'large',\n            label: 'Large',\n        },\n        {\n            value: 'xlarge',\n            label: 'xLarge',\n        },\n        {\n            value: 'huge',\n            label: 'Huge',\n        },\n    ];\n\n    const setFilteredOptions = (options, inputValue) =&gt; {\n        options.filter( ( option ) =&gt;\n            option.label\n                .toLowerCase()\n                .startsWith( inputValue.toLowerCase() )\n        )\n    }\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;ComboboxControl\n                            label={__('Font Size', 'sc-cards')}\n                            value={ attributes.fontSize }\n                            onChange={ (value) =&gt; setAttributes({fontSize: value}) }\n                            options={ options }\n                            onFilterValueChange={(inputValue) =&gt; setFilteredOptions(options, inputValue)}\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/combobox-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#f1ffeb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"Dashicon_Dashicon_Kontrolu\">Dashicon : Dashicon Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-15\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir icon olu\u015fturur.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-15\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"36\" class=\"wp-image-6596\" style=\"width: 32px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Dashicon-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-Dashicon-Bile\u015feni\"><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-15\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Dashiconlar, WordPress ile birlikte gelirler. B\u00fct\u00fcn dashiconlara <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/#video-alt\" target=\"_blank\" rel=\"noreferrer noopener\">buradan<\/a> ula\u015fabilirsiniz.<ul><li>Mesela, &#8220;<code>dashicon-admin-home<\/code>&#8221; ikonunu kullanmak i\u00e7in a\u015fa\u011f\u0131daki kod yap\u0131s\u0131n\u0131 kullan\u0131r\u0131z:<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Dashicon icon=\"admin-home\" \/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-15\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>\u00d6nce, bile\u015feni <code>@wordpress\/components<\/code> ten <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    Dashicon\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> bile\u015feninin i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><li><strong>NOT<\/strong>: Dashicon bile\u015feni sadece edit\u00f6rde \u00e7al\u0131\u015f\u0131r, temada g\u00f6r\u00fcnmez.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"Dashicon_Bileseninin_Kullanimi\">Dashicon Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    Dashicon\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;Dashicon icon=\"admin-home\" \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#fff1ca\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"DateTimePicker_Tarih_ve_Saat_Secme_Kontrolu\">DateTimePicker : Tarih ve Saat Se\u00e7me Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-16\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Tarih se\u00e7mek i\u00e7in bir takvim olu\u015fturur.<\/li><li>Se\u00e7ti\u011fimiz tarihi bir string olarak ve a\u015fa\u011f\u0131da verilen formatta d\u00f6nd\u00fcr\u00fcr:<ul><li><code>2022-06-29T22:49:00<\/code><\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-16\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u015e\u00f6yle g\u00f6r\u00fcn\u00fcr:<br><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"341\" class=\"wp-image-6606\" style=\"width: 250px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-DateTimePicker-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-DateTimePicker-Bile\u015feni\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-DateTimePicker-Bileseni.jpg 337w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-DateTimePicker-Bileseni-220x300.jpg 220w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-16\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Buras\u0131 fonksiyonun return b\u00f6l\u00fcm\u00fcnden \u00f6nce yer al\u0131r.\nconst date = new Date();\n\n\/\/ Fonksiyonun return b\u00f6l\u00fcm\u00fcnde yer al\u0131r.\n&lt;DateTimePicker\n    currentDate={ attributes.date ? attributes.date : date }\n    onChange={ ( newDate ) =&gt; setAttributes( {date: newDate} ) }\n    is12Hour={ false }\n    __nextRemoveHelpButton\n    __nextRemoveResetButton\n\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-16\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak iki de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>date<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz isimleri verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"date\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li><code>B<\/code>ile\u015fenini <code>@wordpress\/<code>components<\/code><\/code> den <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    DateTimePicker\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;PanelRow&gt; &lt;\/PanelRow&gt;<\/code> eleman\u0131n\u0131n i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Se\u00e7ti\u011fimiz tarih, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.date<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"DateTimePicker_Bileseninin_Kullanimi\">DateTimePicker Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    DateTimePicker\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    const date = new Date();\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ attributes.date ? attributes.date : date }\n                            onChange={ ( newDate ) =&gt; setAttributes( {date: newDate} ) }\n                            is12Hour={ false }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yapt\u0131\u011f\u0131n\u0131z resmin url de\u011ferini;<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><\/ul><ul><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.date<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/date-time\/\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#dafff0\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"Disabled_Devre_Disi_Birakma_Kontrolu\">Disabled : Devre D\u0131\u015f\u0131 B\u0131rakma Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-17\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir form eleman\u0131n\u0131 devre d\u0131\u015f\u0131 b\u0131rak\u0131r.<\/li><li>Kullan\u0131m\u0131 daha iyi anlayabilmek i\u00e7in bu bile\u015fen ile birlikte \u015fu bile\u015fenleri de kullanaca\u011f\u0131z:<ul><li><code>&lt;TextControl&gt;<\/code><\/li><li><code>&lt;Button&gt;<\/code><\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-17\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Resim y\u00fcklemeden \u00f6ncesi:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"162\" class=\"wp-image-6626\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Disabled-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-Disabled-Bile\u015feni\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Disabled-Bileseni.jpg 328w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-Disabled-Bileseni-300x139.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-17\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PanelRow&gt;\n    &lt;Disabled isDisabled={attributes.disabled}&gt;\n        &lt;TextControl\n            label={__('Ad\u0131n\u0131z\u0131 girin:', 'sc-cards')}\n            onChange={ () =&gt; {} }\n            placeholder={__('Ad\u0131m SOYADIM', 'sc-cards')}\n            style={ { opacity: attributes.disabled ? 0.5 : 1 } }\n        \/&gt;\n    &lt;\/Disabled&gt;\n&lt;\/PanelRow&gt;\n&lt;PanelRow&gt;\n    &lt;Button\n        variant=\"secondary\" \n        onClick={ () =&gt; setAttributes({disabled: !attributes.disabled}) }\n        isDestructive={true}\n    &gt;\n    {__('De\u011fer giri\u015fini kapat', 'sc-cards')}\n    &lt;\/Button&gt;\n&lt;\/PanelRow&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-17\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak iki de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenin ad\u0131n\u0131 &#8220;<em>date<\/em>&#8221; yapt\u0131m, siz diledi\u011finiz isimleri verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"date\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li><code>B<\/code>ile\u015fenini <code>@wordpress\/<code>components<\/code><\/code> den <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    DateTimePicker\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu <code>&lt;PalenBody&gt; &lt;\/PanelBody&gt;<\/code> bile\u015feni i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Se\u00e7imimiz, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.disabled<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"Disabled_Bileseninin_Kullanimi\">Disabled Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    PanelRow,\n    Disabled,\n    Button,\n    TextControl\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;PanelRow&gt;\n                        &lt;Disabled isDisabled={attributes.disabled}&gt;\n                            &lt;TextControl\n                                label={__('Ad\u0131n\u0131z\u0131 girin:', 'sc-cards')}\n                                onChange={ () =&gt; {} }\n                                placeholder={__('Ad\u0131m SOYADIM', 'sc-cards')}\n                                style={ { opacity: attributes.disabled ? 0.5 : 1 } }\n                            \/&gt;\n                        &lt;\/Disabled&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;Button\n                            variant=\"secondary\" \n                            onClick={ () =&gt; setAttributes({disabled: !attributes.disabled}) }\n                            isDestructive={true}\n                        &gt;\n                        {__('De\u011fer giri\u015fini kapat', 'sc-cards')}\n                        &lt;\/Button&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yapt\u0131\u011f\u0131n\u0131z resmin url de\u011ferini;<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><\/ul><ul><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.disabled<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/disabled\/\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group p-2 has-background\" style=\"background-color:#ffedf0\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"mt-4 wp-block-heading\"><span id=\"MediaUpload_Resim_Yukleme_Kontrolu\">MediaUpload : Resim Y\u00fckleme Kontrol\u00fc<\/span><\/h2>\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\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorevi-18\">G\u00f6revi<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>WordPress&#8217;in medya y\u00fckleyicisi yard\u0131m\u0131yla bir resim y\u00fcklemek i\u00e7in kullan\u0131l\u0131r.<ul><li><code>&lt;MediaUploadCheck&gt;<\/code><\/li><li><code>&lt;Button&gt;<\/code><br>bile\u015fenleri ile birlikte kulland\u0131k.<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading\"><span id=\"Gorunumu-18\">G\u00f6r\u00fcn\u00fcm\u00fc<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Resim y\u00fcklemeden \u00f6ncesi:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"146\" class=\"wp-image-6574\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-MediaUpload-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-MediaUpload-Bile\u015feni\"><\/li><li>Resim y\u00fckledikten sonras\u0131:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"278\" class=\"wp-image-6575\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2022\/06\/WordPress-Block-Editoru-MediaUpload-Editor-Bileseni.jpg\" alt=\"WordPress-Block-Edit\u00f6r\u00fc-MediaUpload-Edit\u00f6r-Bile\u015feni\"><br><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Yapisi-18\">Kod Yap\u0131s\u0131<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Buras\u0131 fonksiyonun return b\u00f6l\u00fcm\u00fcnden \u00f6nce yer al\u0131r.\nconst removeMedia = () =&gt; {\n    setAttributes({\n        mediaId: 0,\n        mediaUrl: ''\n    });\n}\nconst onSelectMedia = (media) =&gt; {\n    setAttributes({\n        mediaId: media.id,\n        mediaUrl: media.url\n    });\n}\n\n\/\/ Fonksiyonun return b\u00f6l\u00fcm\u00fcnde yer al\u0131r.\n&lt;div className=\"sc-editor-post-featured-image\"&gt;\n    &lt;MediaUploadCheck&gt;\n        &lt;MediaUpload\n            onSelect={onSelectMedia}\n            value={attributes.mediaId}\n            allowedTypes={&#91;'image']}\n            render={({ open }) =&gt; (\n                &lt;Button\n                className={attributes.mediaId == 0 ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}\n                onClick={open}\n                &gt;\n                    {attributes.mediaId == 0 &amp;&amp; __('Resim se\u00e7', 'sc-cards')}\n                    {attributes.mediaId != 0 &amp;&amp;\n                        &lt;fieldset className='stcnnt-img-preview'&gt;\n                            &lt;img src={attributes.mediaUrl} \/&gt;\n                        &lt;\/fieldset&gt;\n                    }\n                &lt;\/Button&gt;\n            )}\n        \/&gt;\n    &lt;\/MediaUploadCheck&gt;\n    {attributes.mediaId != 0 &amp;&amp;\n        &lt;MediaUploadCheck&gt;\n            &lt;MediaUpload\n                title={__('De\u011fi\u015ftir', 'sc-cards')}\n                value={attributes.mediaId}\n                onSelect={onSelectMedia}\n                allowedTypes={&#91;'image']}\n                render={({ open }) =&gt; (\n                    &lt;Button className=\"sc-change-img\" variant=\"secondary\" onClick={open}&gt;{__('Resmi de\u011fi\u015ftir', 'sc-cards')}&lt;\/Button&gt;\n                )}\n            \/&gt;\n        &lt;\/MediaUploadCheck&gt;\n    }\n    {attributes.mediaId != 0 &amp;&amp;\n        &lt;MediaUploadCheck&gt;\n            &lt;Button\n                variant=\"secondary\"\n                isDestructive={true}\n                onClick={removeMedia}&gt;{__('Kald\u0131r', 'sc-cards')}&lt;\/Button&gt;\n        &lt;\/MediaUploadCheck&gt;\n    }\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kodun_Kullanimi-18\">Kodun Kullan\u0131m\u0131<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>\u00d6ncelikle, <code>block.json<\/code> dosyas\u0131na, bu bile\u015fenin se\u00e7imini hat\u0131rlayacak iki de\u011fi\u015fken olu\u015ftural\u0131m.<\/strong><ul><li>Ben bu de\u011fi\u015fkenlerin ad\u0131n\u0131 &#8220;<em>mediaId<\/em>&#8221; ve <em>&#8220;mediaUrl&#8221;<\/em> yapt\u0131m, siz diledi\u011finiz isimleri verebilirsiniz.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p><code>block.json<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"attributes\": {\n\t\"mediaId\": {\n\t\t\"type\": \"number\",\n\t\t\"default\": 0\n\t},\n\t\"mediaUrl\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"\"\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong><code>block-settings.js<\/code> sayfas\u0131na bile\u015fen i\u00e7in gerekli kodlar\u0131 ekleyelim.<\/strong><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li><code>MediaUpload<\/code> ve <code>MediaUploadCheck<\/code> bile\u015fenlerini <code>@wordpress\/block-editor<\/code> den <em>import <\/em>etmemiz gerekiyor:<\/li><li><code>Button<\/code> bile\u015fenini <code>@wordpress\/<code>components<\/code><\/code> den <em>import <\/em>etmemiz gerekiyor:<\/li><\/ul>\n\n\n\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n    MediaUpload,\n    MediaUploadCheck\n} from '@wordpress\/block-editor';\n\nimport {\n    Button\n} from '@wordpress\/components';<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\"><li>Sonra bile\u015fenin kodunu, block ayarlar\u0131 i\u00e7in olu\u015fturdu\u011fumuz bir <code>&lt;div className=\"sc-editor-post-featured-image\"&gt; &lt;\/div&gt;<\/code> eleman\u0131n\u0131n i\u00e7inde d\u00f6nd\u00fcr\u00fcyoruz.<\/li><li>Sonra, resim y\u00fckleyicisinin edit\u00f6rde g\u00fczel g\u00f6r\u00fcnmesi i\u00e7in, <code>editor.scss<\/code> dosyas\u0131na bir ka\u00e7 SCSS kodluyoruz.<\/li><\/ul>\n\n\n\n<p><code>editor.scss<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.sc-editor-post-featured-image\n{\n\twidth: 100%;\n\ttext-align: center;\n\t.editor-post-featured-image__toggle, .editor-post-featured-image__preview img\n\t{\n\t\tborder: 3px solid #ddd;\n\t\tpadding: 5px;\n\t\tmargin: 0 auto;\n\t}\n\t.stcnnt-img-preview\n\t{\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n        align-items: center;\n\t\theight: 150px;\n\t\toverflow: hidden;\n\t\timg {\n\t\t\tobject-fit: cover;\n\t\t\theight: 150px;\n\t\t};\n\t\tmargin-bottom: 5px;\n\t}\n\t.sc-change-img{\n\t\tmargin-right: 5px;\n\t}\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Se\u00e7ti\u011fimiz resmin url adresi, <code>block.json<\/code> dosyas\u0131ndaki <code>attribute<\/code> objesinde saklan\u0131r.<\/strong><ul><li>Bu ayar\u0131 oradan getirip kullanmak i\u00e7in:<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>attributes.mediaUrl<\/code><\/pre>\n\n\n\n<div class=\"wp-block-bod-modal-block bod-block-popup align-center\"><button type=\"button\" style=\"background-color:rgba(0,121,121,1);color:#ffffff\" class=\"bod-block-popup-trigger type_btn bod-btn\">Tam kullan\u0131m\u0131 g\u00f6r<\/button><div style=\"background-color:rgba(0,108,130,0.72)\" class=\"bod-block-popup-overlay\" data-disabled-overlay-close=\"false\" data-disabled-escape-close=\"false\"><\/div><div role=\"dialog\" aria-modal=\"false\" aria-labelledby=\"\" aria-describedby=\"\" class=\"bod-block-popup-wrap undefined\"><div style=\"background-color:#ffffff;border-radius:10px \" class=\"bod-block-popup size-l\"><div id=\"\" style=\"background-color:#ffffff;text-align:center\" class=\"bod-modal-title\"><h2 style=\"color:#000000\"><span id=\"MediaUpload_Bileseninin_Kullanimi\">MediaUpload Bile\u015feninin Kullan\u0131m\u0131<\/span><\/h2><\/div> <div id=\"\" class=\"bod-modal-content\">\n<p><code>block-settings.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { __ } from '@wordpress\/i18n';\n\nimport {\n    InspectorControls,\n    MediaUpload,\n    MediaUploadCheck\n} from '@wordpress\/block-editor';\n\nimport {\n    PanelBody,\n    Button\n} from '@wordpress\/components';\n\nexport function block_settings(attributes, setAttributes) {\n\n    const removeMedia = () =&gt; {\n        setAttributes({\n            mediaId: 0,\n            mediaUrl: ''\n        });\n    }\n    const onSelectMedia = (media) =&gt; {\n        setAttributes({\n            mediaId: media.id,\n            mediaUrl: media.url\n        });\n    }\n\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelBody\n                    title={__('Genel Ayarlar', 'sc-cards')}\n                    initialOpen={true}\n                &gt;\n                    &lt;div className=\"sc-editor-post-featured-image\"&gt;\n                        &lt;MediaUploadCheck&gt;\n                            &lt;MediaUpload\n                                onSelect={onSelectMedia}\n                                value={attributes.mediaId}\n                                allowedTypes={&#91;'image']}\n                                render={({ open }) =&gt; (\n                                    &lt;Button\n                                    className={attributes.mediaId == 0 ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}\n                                    onClick={open}\n                                    &gt;\n                                        {attributes.mediaId == 0 &amp;&amp; __('Resim se\u00e7', 'sc-cards')}\n                                        {attributes.mediaId != 0 &amp;&amp;\n                                            &lt;fieldset className='stcnnt-img-preview'&gt;\n                                                &lt;img src={attributes.mediaUrl} \/&gt;\n                                            &lt;\/fieldset&gt;\n                                        }\n                                    &lt;\/Button&gt;\n                                )}\n                            \/&gt;\n                        &lt;\/MediaUploadCheck&gt;\n                        {attributes.mediaId != 0 &amp;&amp;\n                            &lt;MediaUploadCheck&gt;\n                                &lt;MediaUpload\n                                    title={__('De\u011fi\u015ftir', 'sc-cards')}\n                                    value={attributes.mediaId}\n                                    onSelect={onSelectMedia}\n                                    allowedTypes={&#91;'image']}\n                                    render={({ open }) =&gt; (\n                                        &lt;Button className=\"sc-change-img\" variant=\"secondary\" onClick={open}&gt;{__('Resmi de\u011fi\u015ftir', 'sc-cards')}&lt;\/Button&gt;\n                                    )}\n                                \/&gt;\n                            &lt;\/MediaUploadCheck&gt;\n                        }\n                        {attributes.mediaId != 0 &amp;&amp;\n                            &lt;MediaUploadCheck&gt;\n                                &lt;Button\n                                    variant=\"secondary\"\n                                    isDestructive={true}\n                                    onClick={removeMedia}&gt;{__('Kald\u0131r', 'sc-cards')}&lt;\/Button&gt;\n                            &lt;\/MediaUploadCheck&gt;\n                        }\n\n                    &lt;\/div&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n\n\n\n<p><code>editor.scss<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.sc-editor-post-featured-image\n{\n\twidth: 100%;\n\ttext-align: center;\n\t.editor-post-featured-image__toggle, .editor-post-featured-image__preview img\n\t{\n\t\tborder: 3px solid #ddd;\n\t\tpadding: 5px;\n\t\tmargin: 0 auto;\n\t}\n\t.stcnnt-img-preview\n\t{\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n        align-items: center;\n\t\theight: 150px;\n\t\toverflow: hidden;\n\t\timg {\n\t\t\tobject-fit: cover;\n\t\t\theight: 150px;\n\t\t};\n\t\tmargin-bottom: 5px;\n\t}\n\t.sc-change-img{\n\t\tmargin-right: 5px;\n\t}\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Yapt\u0131\u011f\u0131n\u0131z resmin url de\u011ferini;<ul><li><code>Edit({ attributes, setAttributes })<\/code> veya<\/li><\/ul><ul><li><code>save({attributes})<\/code> fonksiyonlar\u0131 i\u00e7erisinde iken \u015fu \u015fekilde \u00e7a\u011f\u0131r\u0131r\u0131z:<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src={attributes.mediaUrl} \/&gt;<\/code><\/pre>\n<\/div> <\/div> <div class=\"bod-block-popup-closer\"><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-editor\/src\/components\/media-upload\/README.md\">Bile\u015fenin di\u011fer \u00f6zellikleri i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/li><\/ul>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>WordPress Block Edit\u00f6r\u00fc i\u00e7in bir block olu\u015ftururken kullanabilece\u011fimiz kontrolleri anlatt\u0131k.<\/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":[263,258,260],"class_list":["post-6275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-blok-gelistirme-kodlama","tag-block-kontrolleri","tag-wordpress-block-editor","tag-wordpress-block-kodlama"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6275","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=6275"}],"version-history":[{"count":2,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6275\/revisions"}],"predecessor-version":[{"id":6640,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6275\/revisions\/6640"}],"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=6275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=6275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=6275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}