Gutenbergi juhendaja algajatele arendajatele: looge oma esimene blokeerimise pistikprogramm

Gutenbergi juhendaja algajatele


Kui mõtlete WordPressi jaoks 2020. aastal midagi välja töötada, pole Gutenbergi eiramine lihtsalt valik. Pluginad ja teemad peavad kõik Gutenbergiga kenasti koostööd tegema ja pakkuma kasutajakogemust, mis on järjepidev kõiges, mida kasutaja WordPressi juhtpaneelil näeb. Ja eriti kuna Gutenberg on WordPressi lahutamatu osa – seda nimetatakse lihtsalt ploki redigeerijaks.

Nagu öeldud, pole Gutenbergiga alustamine sugugi nii lihtne. Kui paar aastat tagasi võisite kirjutada kvaliteetse WordPressi pistikprogrammi, kasutades ainult Notepadit, siis nüüd on protsess muutunud palju karmimaks..

Gutenberg kasutab selliseid tehnoloogiaid nagu WordPress REST API, JavaScript ja React. Seega olid Gutenbergiga töötamiseks vajalikud uued nõuded pistikprogrammidele ja teemadele.

Hea uudis on see, et me räägime sellest kõigest täna! See postitus on Gutenbergi õpetus algajatele, kes soovivad esmakordselt luua Gutenbergi pistikprogrammi.

Keskendume eeskätt Gutenbergi pistikprogrammi loomise erinevatele aspektidele – arenduskeskkonna seadistamisele, põhilise pistikprogrammi loomisele ja plokkidega töötamise mõningatele nüanssidele.

1. Seadke oma Gutenbergi arengukeskkond

Gutenbergi arendamisega alustamiseks vajate põhiteadmisi JavaScripti ja Reacti kohta. Siin on JavaScripti õpetus WordPressi arendajale. Lisaks võivad Gutenbergis olevad lisapaketid vajada NodeJS paketihalduri kasutamist, npm.

Installerite abil saate Windowsi või MacOS-i installida NodeJS-i uusima stabiilse versiooni ametlikul saidil. Kui teil on Linuxi server, saate kompileerida lähtekoodi või kasutada vastavat paketihaldurit (nt apt ja yum). Näiteks kui kasutate Ubuntu, käivitage terminalil järgmised käsud.

sudo apt värskendus
sudo apt install nodejs npm

Pärast installimise õnnestumist saate käivitada järgmise käsu, et kontrollida NodeJS-i versiooni.

nodejs –versioon

Pärast nende kastide märkimist on hea mõte seadistada oma testitav WordPressi veebisait üles praeguse Gutenbergi pistikprogrammi (eraldiseisev pistikprogramm) või isegi selle arendusversiooniga – saate selle saidilt GitHub.

⚠️ märkus; kuigi Gutenberg on nüüd WordPressi sisse ehitatud, pole see versioon kõige uuem. Gutenbergi arendus toimub ikka üsna eraldi ja kõik uus on kõigepealt Gutenbergi eraldiseisev pistikprogramm. Gutenbergi tegelik versioon tuumas ei ole veel saanud mingeid olulisi värskendusi pärast selle lisamist WordPressi 5.0. Soovite alati töötada Gutenbergi uusima versiooni kallal, kuna see annab teile paremad võimalused oma töö tulevikukindluseks ja veenduge, et teie looming oleks kooskõlas kõige sellega, mis saab hiljem WordPressi tuuma juurde.

Teise märkuse korral, kui kavatsete anda oma panuse Gutenbergi tuum pluginasse, on hoidlas see olemas toetavad juhised kuidas seadistada oma kohalik keskkond ja seadistada muudatused ülevaatuseks.

�� Kui soovite kohandada oma olemasolevaid pistikprogramme Gutenbergi jaoks, siis siin on üksikasjalik õpetus selle saavutamiseks: 1. osa ja 2. osa.

Alustage malli pistikprogrammide kataloogist, mis on juba valmis Gutenbergiga koostööd tegema, võite kaaluda selle kasutamist Gutenbergi katlamaja pistikprogramm. Selline lahendus aitab teil faili põhistruktuuri, nii et saate keskenduda pistikprogrammi sisule. Katlaplaadi kasutamiseks laadige alla ja installige pistikprogramm siit (zip). Katlamaja pistikprogrammi installimine ja aktiveerimine aktiveerib prooviplokid, mida me selles õpetuses uurime. Iga ploki koodi leiate selle vastavast kataloogist katlamaja pistikprogrammi asukohas.

2. Algne konfiguratsioon

Gutenberg tutvustab lihtsalt plokkide kontseptsiooni, mis asendavad tavalist TinyMCE toimetaja lõuendit. Mõnel juhul võivad plokid asendada ka lühikoode ja muid täiendavaid sisuelemente, mida pluginad WordPressi sisule erineval viisil lisamiseks kasutasid.

Kui olete huvitatud Gutenbergi jaoks ehitamisest, on kõige tavalisem lähenemisviis plugina ehitamiseks, mis loob uusi plokke ja teeb need kasutajale kättesaadavaks. See on täpselt see, mida me selles Gutenbergi õpetuses teeme.

Järgmistes osades kirjeldatakse protsessi algusest lõpuni.

Konkreetne pistikprogramm, mida me loome, prindib välja teatava kohandatava taustaga sõnumi. Lihtsalt näide ehitamisest, kuid võite võtta siin esitatud põhimõtted ja rakendada neid omaenda keerukamas pistikprogrammis.

Sellise pistikprogrammi ehitamise põhitõed peaksid olema tuttavad. Alustate uue kataloogi loomisega WordPressi pluginate kataloogis. Sellesse paigutame neli faili:

  • index.php – see fail sisaldab uue Gutenbergi ploki metaandmeid.
  • block.js – see JavaScripti fail registreerib kohandatud Gutenbergi ploki.
  • editor.css – see fail sisaldab redaktori stiile.
  • style.css – see fail sisaldab bloki esiosa stiile.

Loendi kaks esimest faili hoolitsevad ploki registreerimise eest ja kaks järgmist faili määratlevad ploki elementide visuaalse stiili.

3. Ploki registreerimine

Selles Gutenbergi ploki registreerimise etapis käsitleme üldjoontes kahte asja:

  • plugina metaandmete registreerimine WordPressi PHP mootoriga,
  • registreerides ploki Reacti raamistikus, millega Gutenberg töötab.

Fail index.php sisaldab ploki ja redigeerija jäljendatud varasid.

  • Esiteks registreerige kohandatud funktsioonid lisafunktsiooni kaudu.
  • Seejärel määrake funktsioonid wp_enqueue_style ja wp_enqueue_script funktsioonide abil, mis loetlevad JavaScripti ja CSS-failide tee ploki ja redigeerija jaoks.

Teeme sellest kokkuvõtte allpool oleva PHP-koodi kaudu:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funktsioon gb_block_01_basic_editor_assets () {
// Skriptid.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url (‘block.js’, __FILE__),
massiiv (‘wp-plokid’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Stiilid.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
massiiv (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

See määratleb põhitoimetaja ressursid. Ploki jaoks on vaja ainult CSS-faili, mis määratletakse funktsiooni wp_enqueue_style kaudu.

Fail block.js kirjeldab Gutenbergi redaktoris ploki omadusi. Me määratleme järgmised atribuudid ja omadused:

  • pealkiri – ploki pealkiri
  • ikoon – ikoon ploki kuvamiseks; saate valida suvalise ikooni see dashiconide kollektsioon
  • kategooria – grupp, kuhu blokk kuulub. Plokkide rühmade näideteks on "tavaline," "vormindamine," "manustama."
  • edit – JavaScripti funktsioon, mis tagastab DOM-i elemendi. Kasutame funktsiooni wp.element.createElement, et luua kohandatud lõigu DOM-element p, kuhu on kirjutatud kohandatud tekst. Gutenberg kutsub selle omaduse esile siis, kui kasutaja klõpsab redaktoril blokeerimisel.

(funktsioon () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
pealkiri: __ (‘GB Basic’, ‘GB’),
ikoon: ‘kilp-alt’,
kategooria: ‘tavaline’,

muuda: funktsioon (rekvisiidid) {
return wp.element.createElement (
‘p’,
{className: props.className},
‘Tere, Maailm! – toimetajalt (01 põhiplokk). ”
);
},

});
}) ();

Samamoodi saate luua salvestamise atribuudi, mis kutsutakse esile siis, kui plokk on esiotsa valitud.

Ülaltoodud koodis määratlesime p elemendi className props.className abil, mis loob klassi nime, mis algab wp-blockiga, millele järgneb ploki nimi. Selle Gutenbergi õpetuse järgmises jaotises määratleme selle klassi stiilid.

4. Ploki kohandamine

Nagu eelmises jaotises arutatud, on selle õpetuse järgmine samm ploki elementide omaduste määratlemine. Määratlegem taustvärv, teksti värv ja ääris.

.wp-block-gb-basic-01 {
värv: # 000;
taust: mistürose;
ääris: 0,2rem tahke punane;
}

CSS-failide asemel võite lisada ka SCSS-faile ja kompileerida need sõlmega. Edasi, siin on õpetus Gutenbergi elementide kujundamiseks saidilt CSS Tricks.

Teie esimese Gutenbergi õpetuse tulemused

Oleme lõpuks valmis katsetama meie loodud plokki. Kui Gutenbergi pistikprogramm on aktiveeritud, minge üle saidile + ja kontrollige, kas sinna ilmub uus blokk.

uus Gutenbergi blokk

Järgmisena, kui klõpsate plokki, märkate, et ülevalt kuvatav teade on taustvärvi ja äärisega CSS-failist:

blokeerida tegevuses

Järeldus

Oleme jõudnud teie esimese Gutenbergi õpetuse lõpuni. Loodan, et sellest on abi olnud. Tõsi küll, see, mille oleme siia ehitanud, pole eriti keeruline, kuid see peaks andma teile ettekujutuse Gutenbergiga töötamise põhistruktuuridest ja sellest, kuidas oma järgmist pistikprogrammi kavandada.

Esiteks arutasime Gutenbergi arengukeskkonna seadistamise samme. Järgmisena tutvustasime katlamaja pistikprogrammi, mis aitab edasi arendada. Seejärel nihkus arutelu fookus uue ploki registreerimise ja kujundamise erinevatele sammudele.

Loodan, et see Gutenbergi õpetus on aidanud teil luua oma päris esimese Gutenbergi pistikprogrammi!

Kui teil on küsimusi, kustutage allpool olevad kommentaarid.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map