wp<\/code>pakett ja destruktureerimine<\/h2>\nKui oleme Gutenbergi redaktoris j\u00e4rjekorda pandud Javascripti failis, on meil juurdep\u00e4\u00e4s globaalsele objektile\/paketile: wp<\/code>. See on v\u00e4ga mitmekesine Javascripti objekt ja see sisaldab tervet hulka kasulikke komponente ja funktsioone, mida kasutame plokkide loomiseks. Kohandatud plokkide jaoks Javascripti kirjutamisel viitate wp<\/code>\u00fcsna paljule.<\/p>\nSeet\u00f5ttu on nii kaasaegses Javascriptis kui ka Reactis tavaline h\u00e4vitada see, mida me sellest kasutada tahame. P\u00f5him\u00f5tteliselt t\u00e4hendab see lihtsalt seda, et me m\u00e4\u00e4ratleme kohalikud muutujad suurema struktuuri osadest. N\u00e4iteks esimene funktsioon, mida me kasutame, on registerBlockType()<\/code>see, mis eksisteerib wp.blocks<\/code>. V\u00f5iksime funktsiooni kutsuda j\u00e4rgmiselt:<\/p>\nwp.blocks.registerBlockType();<\/code><\/pre>\nKuid seda on lihtsam h\u00e4vitada j\u00e4rgmiselt:<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\nN\u00fc\u00fcd saate funktsioonile otse viidata, ilma selle struktuuri ette lisamata. See muutub palju kasulikumaks, kui viitame funktsioonidele v\u00f5i komponentidele, mida me sageli kordame.<\/p>\n
Teeme selles sarjas \u00fcmberstruktureerimise ja \u00f5petuses edasi liikudes n\u00e4eme, kui palju loetavamaks ja l\u00fchemaks muutub meie kood.<\/p>\n
Uue ploki registreerimine<\/h2>\n
Uue kohandatud ploki registreerimise funktsioon on paketis registerBlockType()<\/code>saadaval. wp.blocks<\/code>See aktsepteerib kahte parameetrit; esiteks string ploki nimeruumi ja nimega ning teiseks kogu ploki konfiguratsiooniga objekt.<\/p>\nGutenberg eeldab, et k\u00f5igil plokkidel on nimeruum ja nimi, mille vahel on kaldkriips. Nimeruumi eesm\u00e4rk on tagada, et teie ploki nimi ei oleks vastuolus teiste sama nime kasutavate plokkidega. K\u00f5ik WordPressi plokid kasutavad nimeruumi core<\/code>. N\u00e4iteks WordPressi standardse l\u00f5iguploki nimi on core\/paragraph<\/code>. Kui valite m\u00f5ne muu nimeruumi, saate probleeme tekitamata luua ka ploki nimega l\u00f5ik.<\/p>\nOtsustage slug-versiooni nimeruum, mis on teie jaoks ainulaadne. Kasutan awp<\/code>selles seerias nimeruumi (A White Pixeli l\u00fchiversioon).<\/p>\nAvage viimases etapis loodud l\u00e4htefail; src\/block-awhitepixel-myfirstblock.js<\/code>, toimetajas. Esmalt helistame nimega registerBlockType<\/code>destructured. Kohandage oma nime ja nimeruumi.wp.blocks``awp\/firstblock<\/code><\/p>\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n \/\/ Your block configuration and code here\n});<\/code><\/pre>\nTeises parameetris, ploki konfiguratsiooniobjektis, peame selle edukaks registreerimiseks m\u00e4\u00e4ratlema m\u00f5ned omadused. Pidage meeles, et ploki konfiguratsioon on objekt, mis t\u00e4hendab, et peate k\u00f5ik kirjutama v\u00f5tme + v\u00e4\u00e4rtuse paaridena, eraldades need komadega. V\u00f5imalikke konfiguratsiooniatribuute on \u00fcsna palju, nii et vaatame need l\u00e4bi ja n\u00e4eme l\u00f5pus l\u00f5plikku koodi.<\/p>\n
N\u00f5utav: pealkiri<\/h3>\n
Esimene n\u00f5utav vara on title<\/code>. See on nimi, nagu see kuvatakse, kui valite plokkide vahel. M\u00e4\u00e4rake see atribuut stringis soovitud nimeks.<\/p>\nLisame pealkirjaks j\u00e4rgmise:<\/p>\n
title: 'My first block',<\/code><\/pre>\nPS: Vaatame uuesti, kuidas me oma plokki k\u00f5ik stringid kirjutame, et tagada nende t\u00f5lkimine 8. osas. Kuid praegu hoiame selle lihtsana ja kirjutame lihtsalt stringe.<\/p>\n
N\u00f5utav: kategooria<\/h3>\n
Atribuut category<\/code>m\u00e4\u00e4rab, kus millises plokikategoorias teie plokk kuvatakse, kui valite redaktoris plokid sisestamiseks. V\u00f5imalikud v\u00e4\u00e4rtused on common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\nPaneme common<\/code>selle esimesse ploki kategooriasse.<\/p>\ncategory: 'common',<\/code><\/pre>\nValikuline: ikoon<\/h3>\n
Kui olete Gutenbergi kasutanud, olete ilmselt m\u00e4rganud, et k\u00f5igil plokkidel on ikoonid. Saate lisada oma plokile ikooni kas stringiga, mis viitab mis tahes WordPressi Dashiconile<\/a>, v\u00f5i pakkuda kohandatud svg<\/code>elemendi.<\/p>\nMa valin lihtsalt \u00fche WordPressi armatuurlaua, emotikoni<\/a> \u2013 aga saate valida \u00fcksk\u00f5ik millise, mida soovite. Pange t\u00e4hele, et j\u00e4tate oma ikooni klassinimesse "dashicons-" lisamata.<\/p>\nicon: 'smiley',<\/code><\/pre>\nValikuline: kirjeldus<\/h3>\n
Saate esitada kirjelduse, mis kuvatakse seadete k\u00fclgribal (paremal pool), kui plokk on aktiivne.<\/p>\n
Lisan n\u00e4itena kiire teksti:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\nValikuline: m\u00e4rks\u00f5nad<\/h3>\n
Gutenberg toetab plokit\u00fc\u00fcpide valimisel otsingufunktsiooni. Saate pakkuda hulga v\u00f5imalikke vasteid kinnisvaras keywords<\/code>. Ilma selleta keywords<\/code>leiaksite oma ploki ainult selle nime otsides.<\/p>\nLisan example<\/code>ja test<\/code>, et saaksime h\u00f5lpsasti leida oma kohandatud ploki, kui hakkame \u00fchte neist m\u00e4rks\u00f5nadest sisestama.<\/p>\nkeywords: ['example', 'test'],<\/code><\/pre>\nValikuline: atribuudid<\/h3>\n
Atribuut attributes<\/code>on v\u00e4ga oluline omadus, mida me selles \u00f5petusesarjas \u00fcsna sageli uuesti k\u00e4sitleme. See on koht, kus salvestate oma ploki struktureeritud andmed ja kasutajateabe. V\u00f5ite seda kujutleda muutujatena. Me ei lisa seda praegu, kuid tuleme selle juurde kindlasti varsti tagasi.<\/p>\n(Kind of) n\u00f5utav: redigeeri ja valikuline: salvesta<\/h3>\n
Atribuudid edit<\/code>on save<\/code>tegelikult koht, kus saate lisada kogu koodi nii redaktori v\u00e4ljundi kui ka esiserva renderdamise jaoks. M\u00f5lemad omadused eeldavad funktsiooni, mis peaks tagastama teatud v\u00e4ljundi.<\/p>\nAtribuut edit<\/code>kirjeldab teie ploki struktuuri redaktoris. Kinnistu save<\/code>tegeleb p\u00f5him\u00f5tteliselt kahe asjaga; teie ploki v\u00e4ljund kasutajaliideses, aga ka teie ploki andmebaasi salvestamise struktuur. Peamiselt t\u00f6\u00f6tate, edit<\/code>kuna siin lisate sisendeid asjade sisestamiseks v\u00f5i valimiseks ning ploki andmete v\u00e4rskendamiseks. Funktsioon save<\/code>ei tohiks andmeid mingil viisil v\u00e4rskendada ega redigeerida, see peaks lihtsalt v\u00e4ljastama.<\/p>\nGutenberg peab suutma teie ploki koos k\u00f5igi selle s\u00e4tetega redaktoris uuesti konstrueerida selle p\u00f5hjal, mis save<\/code>funktsioonis (ja atribuutides) v\u00e4ljastatakse. Kui Gutenberg avab kunagi postituse, kus eelnevalt salvestatud ploki v\u00e4ljund erineb (kasv\u00f5i veidi) salvestamisel m\u00e4\u00e4ratletust, muutub teie plokk kehtetuks.<\/p>\n![\"Loo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d21609214.png\")
<\/a><\/p>\nV\u00f5in teile garanteerida, et kohandatud plokkide v\u00e4ljat\u00f6\u00f6tamisel puutute sellega palju kokku. Kui see juhtub, peate ploki eemaldama (t\u00f6\u00f6riistariba punktidest) ja uuesti lisama. Soovitan teha ka brauseri v\u00e4rskendamist (F5 v\u00f5i CTRL+R).<\/p>\n
WordPressil on spetsiaalne dokumentatsioonileht<\/a> ploki redigeerimis- ja salvestamisfunktsioonide jaoks, kui soovite lisateavet.<\/p>\nMis puutub meie esimesse plokki, siis v\u00e4ljastame midagi p\u00f5hilist. Tagastame sama m\u00f5lema edit<\/code>ja save<\/code>; ":)", mis on m\u00e4hitud <div><\/code>. L\u00f5ppkokkuv\u00f5ttes on ploki ikoon naeratus.<\/p>\nedit:() => { \n return <div>:)<\/div> \n},\nsave:() => { \n return <div>:)<\/div> \n}<\/code><\/pre>\nMuud omadused<\/h3>\n
; jaoks on valikulisemad atribuudid registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>ja styles<\/code>. J\u00e4tame need praegu vahele, kuna enamik on m\u00f5eldud t\u00e4iustatud v\u00f5i kohandatud plokkide ehitamiseks. Kui olete huvitatud nende kohta lisateabe lugemisest, vaadake WordPressi dokumentatsiooni<\/a>.<\/p>\nL\u00f5pliku registri ploki kood<\/h2>\n
Meie kood n\u00e4eb n\u00fc\u00fcd v\u00e4lja umbes selline.<\/p>\n
const { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n edit: () => { \n return <div>:)<\/div> \n },\n save: () => { \n return <div>:)<\/div> \n }\n});<\/code><\/pre>\nSellega on meil piisavalt, et meie blokk oleks edukalt registreeritud kohandatud plokina. Vaatame seda praktikas Gutenbergi toimetaja sees.<\/p>\n
Kas m\u00e4letasite Javascripti koostamist? Eelmises etapis saime teada, et me ei saa seda Javascripti faili Gutenbergi laadida; vajame kompileeritud versiooni. Tavaliselt arenete npm run start<\/code>taustal jooksmisega v\u00f5i v\u00f5ite npm run build<\/code>n\u00fc\u00fcd korra joosta. See peaks koostama meie l\u00e4htekoodi Javascripti ja asetama selle igale poole, kuhu m\u00e4\u00e4rasite selle paigutamiseks ja nime kandmiseks teie webpack.config.js<\/code>.<\/p>\nPHP osa ploki registreerimisest<\/h2>\n
Iga ploki jaoks peate registreerima Javascripti faili ja see on t\u00e4pselt sama, mis WordPressis muude skriptide registreerimisel \u2013 kasutades [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Pange t\u00e4hele, et me registreerime skripti, mitte ei pane seda j\u00e4rjekorda. Seda seet\u00f5ttu, et iga kohandatud ploki registreerimiseks peame kutsuma ka PHP funktsiooni ja see funktsioon vastutab skripti vajaduse korral j\u00e4rjekorda seadmise eest.<\/p>\nEelistan hoida Gutenbergiga seotud koodi oma teemades eraldi failis. functions.php<\/code>Kuid te saate ja me selles \u00f5petuses kirjutame lihtsalt kogu PHP-koodi lihtsuse huvides otse teemasse .<\/p>\nSoovitan kasutada init<\/code>konksu oma funktsiooni jaoks, mitte enqueue_block_assets<\/code>. Saame kokku panna nii skripti registreerimise kui ka ploki registreerimise.<\/p>\nadd_action('init', function() {\n wp_register_script('awp-myfirstblock-js', get_template_directory_uri(). '\/assets\/js\/gutenberg\/block-awhitepixel-myfirstblock.js');\n\u00a0\n register_block_type('awp\/firstblock', [\n 'editor_script' => 'awp-myfirstblock-js',\n ]);\n});<\/code><\/pre>\nPHP-funktsioon, mida me uue ploki registreerimiseks kasutame, on [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Sarnaselt Javascriptiga registerBlockType()<\/code>aktsepteerib see kahte parameetrit; ploki nimeruum ja nimi ning argumentidega massiiv. Veenduge, et sisestaksite PHP-s t\u00e4pselt sama nimeruumi ja nime, mis Javascriptis.<\/p>\nTeises argumendis on m\u00f5ned v\u00f5imalikud argumendid (m\u00f5nede juurde tuleme selles seerias hiljem tagasi). Kuid k\u00f5ige olulisem on see editor_script<\/code>, kus annate wp_register_script()<\/code>registreeritud skripti k\u00e4epideme (esimene parameeter).<\/p>\nJa see ongi k\u00f5ik!<\/p>\n
Meie plokk Gutenbergi toimetajas<\/h2>\n
N\u00fc\u00fcd, kui v\u00e4rskendate m\u00f5nes postituses oma redaktorit, peaksite leidma meie ploki \u2013 kas avades \u00fchise kategooria v\u00f5i otsides m\u00f5nda teie sisestatud m\u00e4rks\u00f5na v\u00f5i nime.<\/p>\n
![\"Loo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d216d1cdb.png\")
<\/a>![\"Loo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d217e1762.gif\")
<\/a><\/p>\nMeie plokk renderdab lihtsa ":)" nii redaktoris kui ka kasutajaliideses. Praeguse seisuga ei saa te plokis midagi muuta, kuid seda \u00f5pime j\u00e4rgmistes etappides!<\/p>\n