Gutenberg Vodič za programere za početnike: Napravite svoj prvi blok dodatak

Gutenberg Tutorial za početnike


Ako razmišljate o razvoju bilo čega za WordPress 2020. godine, zanemarivanje Gutenberga jednostavno nije opcija. Dodaci i teme moraju lijepo surađivati ​​s Gutenbergom i pružiti korisničko iskustvo koje je konzistentno u svemu što korisnik može vidjeti na nadzornoj ploči WordPressa. A pogotovo što je Gutenberg sada sastavni dio WordPressa – jednostavno ga nazivaju uređivač blokova.

To što se kaže, započeti s Gutenbergom nije tako jednostavno. Dok ste prije nekoliko godina mogli napisati kvalitetan WordPress dodatak koristeći samo Notepad, proces je sada postao mnogo žešći..

Gutenberg koristi tehnologije poput WordPress REST API-ja, JavaScript i React. Stoga su za rad s Gutenbergom bili potrebni novi zahtjevi za dodacima i temama.

Dobra vijest je da ćemo danas razgovarati o svemu tome! Ovaj post služi kao Gutenberg vodič za početnike koji prvi put žele stvoriti dodatak za Gutenberg.

Usredotočimo se prvenstveno na različite aspekte stvaranja dodatka za Gutenberg – postavljanje razvojnog okruženja, stvaranje osnovnog dodatka i neke nijanse rada s blokovima.

1. Postavite svoje okruženje za razvoj u Gutenbergu

Za početak Gutenbergovog razvoja potrebno vam je osnovno znanje o JavaScript-u i React-u. Evo vodiča na JavaScriptu za WordPress programere. Nadalje, dodatni paketi u Gutenbergu možda trebaju korištenje NodeJS paketa za upravljanje, npm.

Pomoću instalacijskih programa možete instalirati najnoviju stabilnu verziju NodeJS na Windows ili MacOS na službenoj stranici. Ako imate Linux poslužitelj, možete sastaviti izvorni kôd ili upotrijebiti odgovarajući upravitelj paketa (poput apt i yum). Na primjer, ako koristite Ubuntu, na terminalu pokrenite sljedeće naredbe.

sudo apt update
sudo apt instalirati nodejs npm

Nakon uspješne instalacije možete pokrenuti sljedeću naredbu za provjeru verzije NodeJS.

nodejs – pretvaranje

Nakon što označite te okvire, dobra je ideja postaviti testnu web stranicu WordPress primjerkom trenutnog Gutenbergovog dodatka (samostalnog dodatka) ili čak razvojne verzije istog – to možete dobiti od GitHub-a.

⚠️ Napomena; dok je Gutenberg sada ugrađen u WordPress, ta verzija nije najnovija. Razvoj na Gutenbergu i dalje se događa prilično odvojeno, a sve što je novo prvo se uključuje u Gutenbergov samostalni dodatak. Stvarna verzija Gutenberga u jezgri tek treba primiti veće ažuriranje od uključivanja u WordPress 5.0. Uvijek želite raditi na najnovijoj verziji Gutenberga, jer vam pruža bolju šansu za budući rad i dokaz da će vaša kreacija biti u skladu sa svime što kasnije stigne do jezgre WordPressa.

S druge strane, ako namjeravate pridonijeti jezgrenom Gutenbergovom dodatku, spremište ima doprinose smjernicama o tome kako postaviti svoje lokalno okruženje i postaviti promjene na pregled.

Na kraju, ako želite prilagoditi svoje postojeće dodatke Gutenbergu, evo detaljnog vodiča o tome kako to postići: 1. dio i 2. dio.

Da biste započeli s direktorijom dodataka predloška koji je već spreman za suradnju s Gutenbergom, razmislite o upotrebi utikač Gutenberg kotlovske ploče. Takvo rješenje vam pomaže pri osnovnoj strukturi datoteka kako biste se mogli usredotočiti na sadržaj dodatka. Da biste koristili ploču s bojlerima, preuzmite i instalirajte dodatak odavde (zip). Ugradnjom i aktiviranjem dodatka kotlovske ploče aktivira se uzorak blokova koje ćemo istražiti u ovom vodiču. Možete pronaći kôd za svaki blok u pripadajućem direktoriju na lokaciji dodatka ploče za bojler.

2. Početna konfiguracija

Samo da vas podsjetim, Gutenberg predstavlja koncept blokova koji su zamjena za standardno platno urednika TinyMCE. U nekim slučajevima, blokovi također mogu zamijeniti kratke kodove i druge dodatne sadržajne elemente koji dodaci koriste za dodavanje u WordPress sadržaj na različite načine.

Ako vas zanima izgradnja za Gutenberg, najčešći pristup je izgradnja dodatka koji stvara nove blokove i stavlja ih na raspolaganje korisniku. To je upravo ono što ćemo raditi u ovom Gutenbergovom tutorialu.

Sljedeći odjeljci opisuju postupak od početka do kraja.

Određeni dodatak koji ćemo sastaviti ispisuje poruku s određene pozadine koja je prilagodljiva. Samo primjer, ali možete uzeti ovdje prikazane principe i primijeniti ih na svoj, složeniji dodatak.

Osnove izgradnje takvog dodatka trebaju biti poznate. Započinjete stvaranjem nove mape u direktoriju dodataka WordPressa. U njemu ćemo smjestiti četiri datoteke:

  • index.php – Ova datoteka sadrži metapodatke o novom bloku Gutenberg.
  • block.js – Ova JavaScript datoteka registrira prilagođeni blok Gutenberg.
  • editor.css – Ova datoteka sadrži stilove za uređivač.
  • style.css – Ova datoteka sadrži stilove za prednji kraj bloka.

Prve dvije datoteke s popisa vode računa o registraciji bloka, a sljedeće dvije datoteke definiraju vizualne stilove elemenata bloka.

3. Registracija bloka

U ovom koraku registracije bloka za Gutenberg, široko ćemo pokriti dvije stvari:

  • registriranje metapodataka dodatka PHP pokretačem WordPressa,
  • registriranje bloka u okviru React na kojem se pokreće Gutenberg.

Datoteka index.php sadrži entitete enqueue bloka i uređivača.

  • Prvo registrirajte prilagođene funkcije putem dodavanja.
  • Zatim definirajte funkcije koje popisuju niz JavaScript i CSS datoteka za blok i uređivač pomoću funkcija wp_enqueue_style i wp_enqueue_script.

Izdvojimo ovo kroz PHP kôd u nastavku:

dodavanje (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funkcija gb_block_01_basic_editor_assets () {
// Skripti.
wp_enqueue_script (
‘Gb-blok-01-osnovni’,
plugins_url (‘block.js’, __FILE__),
niz (‘wp-blokovi’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Stilovi.
wp_enqueue_style (
‘Gb-blok-01-osnovni-urednik’,
plugins_url (‘editor.css’, __FILE__),
niz (‘wp-edit-blokovi’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Ovo definira resurse za osnovni uređivač. Za blok je potrebna samo CSS datoteka koja je definirana funkcijom wp_enqueue_style.

Datoteka block.js opisuje svojstva bloka u Gutenbergovom uređivaču. Definiramo sljedeće atribute i svojstva:

  • title – Naslov bloka
  • ikona – ikona za prikaz bloka; možete odabrati bilo koju ikonu ova zbirka dašikona
  • kategorija – grupi kojoj će blok pripadati. Primjeri skupina blokova su "uobičajen," "formatiranja," "ugraditi."
  • uredi – JavaScript funkcija koja vraća DOM element. Funkciju wp.element.createElement koristimo za izradu prilagođenog DOM elementa, p, s upisanim prilagođenim tekstom. Gutenberg poziva na ovo svojstvo kada korisnik klikne blok iz uređivača.

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

registerBlockType (‘gb / basic-01’, {
naslov: __ (‘GB Basic’, ‘GB’),
ikona: ‘štit-alt’,
kategorija: ‘uobičajeno’,

uredi: funkcija (rekviziti) {
vratiti wp.element.createElement (
‘P’,
{className: props.className},
‘Pozdrav svijete! – iz uređivača (01 osnovni blok). ‘
);
},

});
}) ();

Slično tome, možete stvoriti svojstvo spremanja koje se poziva kada je odabran blok s prednjeg kraja.

U gornjem kôdu definirali smo className p elementa s props.className, koji će stvoriti ime klase počevši s wp-blokom, nakon čega slijedi naziv bloka. U sljedećem odjeljku ovog Gutenbergovog vodiča definiramo stilove ove klase.

4. Prilagodba bloka

Kao što je rečeno u prethodnom odjeljku, sljedeći korak ovog vodiča je definiranje svojstava blokovskih elemenata. Definirajmo boju pozadine, boju teksta i obrub.

.wp-block-gb-basic-01 {
boja: # 000;
pozadina: mistyrose;
obrub: 0.2rem čvrsto crveno;
}

Umjesto CSS datoteka, možete dodati SCSS datoteke i sastaviti ih s čvorom. Nadalje, evo ga udžbenik o stiliziranju Gutenbergovih elemenata iz CSS trikova.

Rezultati vašeg prvog Gutenbergovog vodiča

Napokon smo spremni isprobati blok koji smo stvorili. Ako je Gutenberg dodatak aktiviran, prijeđite na + ikonu i provjerite pojavljuje li se novi blok.

novi blok Gutenberg

Zatim, ako kliknete na blok, primijetit ćete da se poruka odozgo vidi, s bojom pozadine i obrubom iz CSS datoteke:

blok na djelu

Zaključak

Dolazimo do kraja vašeg prvog Gutenbergovog vodiča. Nadam se da je ovo bilo od pomoći. Pod uvjetom da ovo što smo ovdje izgradili nije super složeno, ali trebalo bi vam dati predstavu o osnovnim strukturama tijekom rada s Gutenbergom i kako planirati vaš sljedeći dodatak.

Prvo smo razgovarali o koracima za postavljanje razvojnog okruženja u Gutenbergu. Zatim smo uveli dodatak kotlovske ploče za pomoć u daljnjem razvoju. Tada se fokus diskusije preusmjerio na različite korake u registraciji i oblikovanju novog bloka.

Nadam se da vam je ovaj Gutenberški vodič pomogao u stvaranju vašeg prvog Gutenbergovog dodatka!

Ako imate bilo kakvih pitanja, otpustite ih u komentarima ispod.

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 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