Selles osas kirjutame oma kohandatud ploki registreerimiseks ja konfigureerimiseks Javascripti. Lõpus registreerime skripti PHP-ga ja teeme vajaliku PHP koodi, et WordPress tuvastaks selle uue plokina.
Kõigepealt kiire märkus WordPressi Gutenbergi funktsioonidele ja komponentidele juurdepääsu kohta.
Ülemaailmne wppakett ja destruktureerimine
Kui oleme Gutenbergi redaktoris järjekorda pandud Javascripti failis, on meil juurdepääs globaalsele objektile/paketile: wp. See on väga mitmekesine Javascripti objekt ja see sisaldab tervet hulka kasulikke komponente ja funktsioone, mida kasutame plokkide loomiseks. Kohandatud plokkide jaoks Javascripti kirjutamisel viitate wpüsna paljule.
Seetõttu on nii kaasaegses Javascriptis kui ka Reactis tavaline hävitada see, mida me sellest kasutada tahame. Põhimõtteliselt tähendab see lihtsalt seda, et me määratleme kohalikud muutujad suurema struktuuri osadest. Näiteks esimene funktsioon, mida me kasutame, on registerBlockType()see, mis eksisteerib wp.blocks. Võiksime funktsiooni kutsuda järgmiselt:
wp.blocks.registerBlockType();Kuid seda on lihtsam hävitada järgmiselt:
const { registerBlockType } = wp.blocks;
registerBlockType();Nüüd saate funktsioonile otse viidata, ilma selle struktuuri ette lisamata. See muutub palju kasulikumaks, kui viitame funktsioonidele või komponentidele, mida me sageli kordame.
Teeme selles sarjas ümberstruktureerimise ja õpetuses edasi liikudes näeme, kui palju loetavamaks ja lühemaks muutub meie kood.
Uue ploki registreerimine
Uue kohandatud ploki registreerimise funktsioon on paketis registerBlockType()saadaval. wp.blocksSee aktsepteerib kahte parameetrit; esiteks string ploki nimeruumi ja nimega ning teiseks kogu ploki konfiguratsiooniga objekt.
Gutenberg eeldab, et kõigil plokkidel on nimeruum ja nimi, mille vahel on kaldkriips. Nimeruumi eesmärk on tagada, et teie ploki nimi ei oleks vastuolus teiste sama nime kasutavate plokkidega. Kõik WordPressi plokid kasutavad nimeruumi core. Näiteks WordPressi standardse lõiguploki nimi on core/paragraph. Kui valite mõne muu nimeruumi, saate probleeme tekitamata luua ka ploki nimega lõik.
Otsustage slug-versiooni nimeruum, mis on teie jaoks ainulaadne. Kasutan awpselles seerias nimeruumi (A White Pixeli lühiversioon).
Avage viimases etapis loodud lähtefail; src/block-awhitepixel-myfirstblock.js, toimetajas. Esmalt helistame nimega registerBlockTypedestructured. Kohandage oma nime ja nimeruumi.wp.blocks``awp/firstblock
const { registerBlockType } = wp.blocks;
registerBlockType('awp/firstblock', {
// Your block configuration and code here
});Teises parameetris, ploki konfiguratsiooniobjektis, peame selle edukaks registreerimiseks määratlema mõned omadused. Pidage meeles, et ploki konfiguratsioon on objekt, mis tähendab, et peate kõik kirjutama võtme + väärtuse paaridena, eraldades need komadega. Võimalikke konfiguratsiooniatribuute on üsna palju, nii et vaatame need läbi ja näeme lõpus lõplikku koodi.
Nõutav: pealkiri
Esimene nõutav vara on title. See on nimi, nagu see kuvatakse, kui valite plokkide vahel. Määrake see atribuut stringis soovitud nimeks.
Lisame pealkirjaks järgmise:
title: 'My first block',PS: Vaatame uuesti, kuidas me oma plokki kõik stringid kirjutame, et tagada nende tõlkimine 8. osas. Kuid praegu hoiame selle lihtsana ja kirjutame lihtsalt stringe.
Nõutav: kategooria
Atribuut categorymäärab, kus millises plokikategoorias teie plokk kuvatakse, kui valite redaktoris plokid sisestamiseks. Võimalikud väärtused on common, formatting, layout, widgets, embed.
Paneme commonselle esimesse ploki kategooriasse.
category: 'common',Valikuline: ikoon
Kui olete Gutenbergi kasutanud, olete ilmselt märganud, et kõigil plokkidel on ikoonid. Saate lisada oma plokile ikooni kas stringiga, mis viitab mis tahes WordPressi Dashiconile, või pakkuda kohandatud svgelemendi.
Ma valin lihtsalt ühe WordPressi armatuurlaua, emotikoni – aga saate valida ükskõik millise, mida soovite. Pange tähele, et jätate oma ikooni klassinimesse "dashicons-" lisamata.
icon: 'smiley',Valikuline: kirjeldus
Saate esitada kirjelduse, mis kuvatakse seadete külgribal (paremal pool), kui plokk on aktiivne.
Lisan näitena kiire teksti:
description: 'Learning in progress',Valikuline: märksõnad
Gutenberg toetab plokitüüpide valimisel otsingufunktsiooni. Saate pakkuda hulga võimalikke vasteid kinnisvaras keywords. Ilma selleta keywordsleiaksite oma ploki ainult selle nime otsides.
Lisan exampleja test, et saaksime hõlpsasti leida oma kohandatud ploki, kui hakkame ühte neist märksõnadest sisestama.
keywords: ['example', 'test'],Valikuline: atribuudid
Atribuut attributeson väga oluline omadus, mida me selles õpetusesarjas üsna sageli uuesti käsitleme. See on koht, kus salvestate oma ploki struktureeritud andmed ja kasutajateabe. Võite seda kujutleda muutujatena. Me ei lisa seda praegu, kuid tuleme selle juurde kindlasti varsti tagasi.
(Kind of) nõutav: redigeeri ja valikuline: salvesta
Atribuudid editon savetegelikult koht, kus saate lisada kogu koodi nii redaktori väljundi kui ka esiserva renderdamise jaoks. Mõlemad omadused eeldavad funktsiooni, mis peaks tagastama teatud väljundi.
Atribuut editkirjeldab teie ploki struktuuri redaktoris. Kinnistu savetegeleb põhimõtteliselt kahe asjaga; teie ploki väljund kasutajaliideses, aga ka teie ploki andmebaasi salvestamise struktuur. Peamiselt töötate, editkuna siin lisate sisendeid asjade sisestamiseks või valimiseks ning ploki andmete värskendamiseks. Funktsioon saveei tohiks andmeid mingil viisil värskendada ega redigeerida, see peaks lihtsalt väljastama.
Gutenberg peab suutma teie ploki koos kõigi selle sätetega redaktoris uuesti konstrueerida selle põhjal, mis savefunktsioonis (ja atribuutides) väljastatakse. Kui Gutenberg avab kunagi postituse, kus eelnevalt salvestatud ploki väljund erineb (kasvõi veidi) salvestamisel määratletust, muutub teie plokk kehtetuks.
Võin teile garanteerida, et kohandatud plokkide väljatöötamisel puutute sellega palju kokku. Kui see juhtub, peate ploki eemaldama (tööriistariba punktidest) ja uuesti lisama. Soovitan teha ka brauseri värskendamist (F5 või CTRL+R).
WordPressil on spetsiaalne dokumentatsioonileht ploki redigeerimis- ja salvestamisfunktsioonide jaoks, kui soovite lisateavet.
Mis puutub meie esimesse plokki, siis väljastame midagi põhilist. Tagastame sama mõlema editja save; ":)", mis on mähitud <div>. Lõppkokkuvõttes on ploki ikoon naeratus.
Muud omadused
; jaoks on valikulisemad atribuudid registerBlockType; parent, supports, transforms, exampleja styles. Jätame need praegu vahele, kuna enamik on mõeldud täiustatud või kohandatud plokkide ehitamiseks. Kui olete huvitatud nende kohta lisateabe lugemisest, vaadake WordPressi dokumentatsiooni.
Lõpliku registri ploki kood
Meie kood näeb nüüd välja umbes selline.
Sellega on meil piisavalt, et meie blokk oleks edukalt registreeritud kohandatud plokina. Vaatame seda praktikas Gutenbergi toimetaja sees.
Kas mäletasite Javascripti koostamist? Eelmises etapis saime teada, et me ei saa seda Javascripti faili Gutenbergi laadida; vajame kompileeritud versiooni. Tavaliselt arenete npm run starttaustal jooksmisega või võite npm run buildnüüd korra joosta. See peaks koostama meie lähtekoodi Javascripti ja asetama selle igale poole, kuhu määrasite selle paigutamiseks ja nime kandmiseks teie webpack.config.js.
PHP osa ploki registreerimisest
Iga ploki jaoks peate registreerima Javascripti faili ja see on täpselt sama, mis WordPressis muude skriptide registreerimisel – kasutades [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)(). Pange tähele, et me registreerime skripti, mitte ei pane seda järjekorda. Seda seetõttu, et iga kohandatud ploki registreerimiseks peame kutsuma ka PHP funktsiooni ja see funktsioon vastutab skripti vajaduse korral järjekorda seadmise eest.
Eelistan hoida Gutenbergiga seotud koodi oma teemades eraldi failis. functions.phpKuid te saate ja me selles õpetuses kirjutame lihtsalt kogu PHP-koodi lihtsuse huvides otse teemasse .
Soovitan kasutada initkonksu oma funktsiooni jaoks, mitte enqueue_block_assets. Saame kokku panna nii skripti registreerimise kui ka ploki registreerimise.
PHP-funktsioon, mida me uue ploki registreerimiseks kasutame, on [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Sarnaselt Javascriptiga registerBlockType()aktsepteerib see kahte parameetrit; ploki nimeruum ja nimi ning argumentidega massiiv. Veenduge, et sisestaksite PHP-s täpselt sama nimeruumi ja nime, mis Javascriptis.
Teises argumendis on mõned võimalikud argumendid (mõnede juurde tuleme selles seerias hiljem tagasi). Kuid kõige olulisem on see editor_script, kus annate wp_register_script()registreeritud skripti käepideme (esimene parameeter).
Ja see ongi kõik!
Meie plokk Gutenbergi toimetajas
Nüüd, kui värskendate mõnes postituses oma redaktorit, peaksite leidma meie ploki – kas avades ühise kategooria või otsides mõnda teie sisestatud märksõna või nime.
Meie plokk renderdab lihtsa ":)" nii redaktoris kui ka kasutajaliideses. Praeguse seisuga ei saa te plokis midagi muuta, kuid seda õpime järgmistes etappides!