{"id":6166,"date":"2022-06-27T02:19:11","date_gmt":"2022-06-26T23:19:11","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=6166"},"modified":"2022-06-27T14:25:40","modified_gmt":"2022-06-27T11:25:40","slug":"wordpress-block-editor-icin-block-ayari-paneli-olusturma","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/gutenberg-blok-gelistirme-kodlama\/wordpress-block-editor-icin-block-ayari-paneli-olusturma\/","title":{"rendered":"WordPress Block Edit\u00f6r \u0130\u00e7in Block Ayarlar\u0131 Paneli Olu\u015fturma"},"content":{"rendered":"\n

WordPress Block Edit\u00f6r\u00fc i\u00e7in “sc-cards” 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 ekleyebilece\u011fimiz bir panel olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz.<\/p>\n\n\n\n

Bu yaz\u0131, WordPress Block Edit\u00f6r\u00fc kodlama konusunda, bundan \u00f6nce yazd\u0131\u011f\u0131m\u0131z 2 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

  1. WordPress Block Edit\u00f6r\u00fc \u0130\u00e7in Bir Block Olu\u015fturma (@wordpress\/create-block ile)<\/a><\/li>
  2. WordPress Block Edit\u00f6r\u00fc \u0130\u00e7in Olu\u015fturulan Block Dosyalar\u0131n\u0131n Anatomisi<\/a><\/li><\/ol>\n\n\n\n

    Block Dizinine “inc\/block-settings.js” Dizini Ekleyelim<\/h2>\n\n\n\n
    • Mecburi bir hamle de\u011fil ama daha d\u00fczenli gitmek i\u00e7in, eklentimizin “src<\/code>” klas\u00f6r\u00fcne;
      • “inc<\/code>” ad\u0131nda bir alt dizin (klas\u00f6r)<\/li>
      • bu dizine de “block-settings.js<\/code>” ad\u0131na bir dosya ekleyelim.<\/li><\/ul><\/li>
      • Bu i\u015flemden sonra, eklenti dizinimiz \u015f\u00f6yle g\u00f6r\u00fcnmelidir:
        \"WordPress-Block-Kodlama-Olu\u015fturma-Kodlama-Gutenberg-block-dizini\"<\/li>
      • Art\u0131k blo\u011fumuza bir tak\u0131m kontroller eklemeye haz\u0131r\u0131z.
        • Bu i\u015fleme dilerseniz \u00f6nce ayarlar\u0131m\u0131za bir yer haz\u0131rlayarak ba\u015flayal\u0131m:<\/li><\/ul><\/li><\/ul>\n\n\n\n

          “Block” Men\u00fcs\u00fcnde Ayar B\u00f6l\u00fcm\u00fc Olu\u015fturma<\/h2>\n\n\n\n
          \n
          \n
          • Bloklara \u00f6zg\u00fc ayarlar, Block Edit\u00f6r\u00fcn\u00fcn sa\u011f kenar\u0131nda g\u00f6r\u00fcnen ayarlar men\u00fcs\u00fcnde yer al\u0131r.<\/li>
          • Bu ayarlar\u0131 a\u00e7mak i\u00e7in, yandaki\/a\u015fa\u011f\u0131daki resimde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, \u00f6nce, edit\u00f6r sayfas\u0131n\u0131n sa\u011f \u00fcst k\u00f6\u015fesinde bulunan di\u015fli ikonu (1) sonra block sekmesi (2) t\u0131klanmal\u0131d\u0131r.
            • Yandaki resimde verilen ayarlar, bir “Ba\u015fl\u0131k<\/em>” blo\u011funun ayarlar\u0131d\u0131r.<\/li><\/ul><\/li>
            • Biz de “Block<\/em>” sekmesinde, blo\u011fumuzun ayarlar\u0131 i\u00e7in b\u00f6l\u00fcmler olu\u015fturaca\u011f\u0131z.<\/li><\/ul>\n<\/div>\n\n\n\n
              \n
              \"WordPress-Block-Kodlama-Olu\u015fturma-Kodlama-Gutenberg-block-ayarlar\u0131\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
              • Blo\u011fumuza bir ayar b\u00f6l\u00fcm\u00fc olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131da verilen ad\u0131mlar\u0131 takip ediyoruz:<\/li><\/ul>\n\n\n\n
                1. Biraz \u00f6nce olu\u015fturdu\u011fumuz “block-settings.js<\/code>” dosyas\u0131na \u015fu kodlar\u0131 yap\u0131\u015ft\u0131r\u0131yoruz:<\/strong><\/li><\/ol>\n\n\n\n

                  block-settings.js<\/code><\/p>\n\n\n\n

                  import { __ } from '@wordpress\/i18n';\r\n\r\nimport {\r\n    InspectorControls\r\n} from '@wordpress\/block-editor';\r\n\r\nimport {\r\n    PanelBody,\r\n    PanelRow,\r\n} from '@wordpress\/components';\r\n\r\nexport function block_settings(attributes, setAttributes) {\r\n    \r\n    return (\r\n        <>\r\n            <InspectorControls>\r\n                <PanelBody\r\n                    title={__('Genel Ayarlar', 'sc-cards')}\r\n                    initialOpen={true}\r\n                >\r\n                    <PanelRow>\r\n                        Burada ayarlar olacak!\r\n                    <\/PanelRow>\r\n                <\/PanelBody>\r\n            <\/InspectorControls>\r\n        <\/>\r\n    )\r\n}<\/code><\/pre>\n\n\n\n
                  • Ayarlar\u0131m\u0131z\u0131n ortak ad\u0131n\u0131 “Genel Ayarlar<\/strong>” yapt\u0131k. Bu isim tamamen bizim tercihimizdir, diledi\u011fimiz gibi de\u011fi\u015ftirebiliriz.<\/li><\/ul>\n\n\n\n
                    1. Sonras\u0131nda, src<\/code> dizinindeki edit.js<\/code> dosyas\u0131na giderek \u015fu hale getirelim:<\/strong><\/li><\/ol>\n\n\n\n
                      edit.js<\/code><\/p>\n\n\n\n
                      import { __ } from '@wordpress\/i18n';\r\nimport { useBlockProps } from '@wordpress\/block-editor';\r\nimport '.\/editor.scss';\r\n\r\nimport { block_settings } from '.\/inc\/block-settings';\r\n\r\nexport default function Edit({ attributes, setAttributes }) {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{block_settings(attributes, setAttributes)}\r\n\t\t\t<p { ...useBlockProps() }>\r\n\t\t\t\t{ __( 'Sc Cards \u2013 hello from the editor!', 'sc-cards' ) }\r\n\t\t\t<\/p>\r\n\t\t<\/>\r\n\t);\r\n}\r\n<\/code><\/pre>\n\n\n\n
                      \n
                      \n
                      1. Block edit\u00f6re gidip, sayfay\u0131 tazeleyelim tekrar blo\u011fumuzu \u00e7a\u011f\u0131ral\u0131m.<\/strong>
                        • Bu a\u015famada blo\u011fumuz hata verebilir, endi\u015feye gerek yok.
                          • Blo\u011fu kald\u0131r\u0131p tekrar a\u00e7t\u0131\u011f\u0131m\u0131zda g\u00fcncel haliyle tekrar gelecektir.<\/li><\/ul><\/li>
                          • Blo\u011fumuzu a\u00e7\u0131p ayarlar\u0131na bakt\u0131\u011f\u0131m\u0131zda \u015f\u00f6yle bir g\u00f6r\u00fcnt\u00fc olmal\u0131d\u0131r:<\/li><\/ul><\/li><\/ol>\n<\/div>\n\n\n\n
                            \n
                            \"WordPress-Block-Kodlama-Olu\u015fturma-Kodlama-Gutenberg-block-ayarlar\u0131-1\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
                            Olu\u015fturdu\u011fumuz panel, \u00e7e\u015fitli kontroller ekleyerek, blo\u011funuzu daha dinamik hale getirmek isterseniz, bir sonraki yaz\u0131m\u0131z\u0131 mutlaka g\u00f6remilisiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"
                            WordPress Block Edit\u00f6r\u00fc i\u00e7in bir block olu\u015ftururken bir ayar paneli olu\u015fturmay\u0131 anlatt\u0131k.<\/p>\n","protected":false},"author":1,"featured_media":5579,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254],"tags":[263,258,262,260],"class_list":["post-6166","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-gelistirme","tag-wordpress-block-kodlama"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6166","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=6166"}],"version-history":[{"count":2,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6166\/revisions"}],"predecessor-version":[{"id":6284,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6166\/revisions\/6284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/5579"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=6166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=6166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=6166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}