Kako prilagoditi svoj dodatak za Gutenberg: 1. dio (Blokirani API)

Kako prilagoditi svoj dodatak za Gutenberg: 1. dio (Blokirani API)

Kako prilagoditi svoj dodatak za Gutenberg: 1. dio (Blokirani API)
СОДЕРЖАНИЕ
02 июня 2020

"Imam dodatak," kaže ti, "kako da ga spremim za Gutenberg?"


Priča je izravna; Gutenberg je novo iskustvo uređivača programa WordPress koje će se u sljedećem velikom izdanju spojiti u jezgru. Puno dodataka koji ne idu ukorak s tim postat će zastarjeli. Zbog toga je važno da dodatak za Gutenberg prilagodite prije nego što bude prekasno.

Tko je pogođen?

Gotovo svi dodaci Gutenberg će utjecati na to što ima ikakve veze s urednikom postova. Na primjer, ako vaš dodatak doda gumb u TinyMCE da biste zatim postavili kratki kod u uređivač, loše vijesti; bit će to kraj.
Prilagodite svoj dodatak za Gutenberg: 1. dio (Blokiranje API-ja)

"Moram li prilagoditi svoje dodatke za Gutenberg?"

Pa koji dodaci trebaju ažuriranje za Gutenberg? Svi dodaci koji rade s:

  • Prilagođeni metaboxi
  • kratke kodove
  • TinyMCE tipke
  • ili bilo koju značajku uređivača uopće

Iako će neki dodaci i dalje raditi s Gutenbergom, poput dodatka koji dodaje jednostavan metaboks, ali to neće biti tako glatko iskustvo za vaše korisnike.

Čak će i kratki kodovi nastaviti s radom kao i prije, ali to će biti samo običan tekstni čvor u uređivaču, dok će svi dodaci za kratki kod Gutenberga slijediti njegovo korisničko sučelje i korisnicima će biti lakše.

Pa da, korisnici će radije dodataka koji su stvoreni za Gutenberg doživljaj. A one koji ostanu iza njih zamijenit će natjecateljski dodatak.

Samo da vam pružim ideju, evo primjera kako izgleda standardno iskustvo starog uređivača korisnika s našim dodatkom (A), a onda kako izgleda u Gutenbergu (B) – s dodatkom optimiziranim za to.

(B)RSS feedovi Feedzy - dodatak koji je Gutenberg spreman

Ne boj se! Ovdje smo da bismo vam pomogli u pripremi vaših dodataka Gutenberg-a. Postoji mnogo načina integriranja vašeg dodatka prema Gutenbergu, ovisno o načinu rada vašeg dodatka, o kojem ćemo raspravljati u ovom članku..

Stvari koje valja unaprijed znatiGutenberg je napisan na React. A Gutenbergovi dodaci su kodirani u JavaScriptu, što također može biti gruba tranzicija za programere koji samo kodiraju u PHP. Iako ne morate imati znanje o React-u za izradu dodataka za Gutenberg, trebat će vam osnovno razumijevanje JavaScripta. Ako ste prethodno radili na Reactu i JSX-u, to će biti i za vas.

Iako ih nema dovoljno službena dokumentacija za Gutenberg, njegovo Github spremište sadrži mnogo vrijednih podataka za programere. Ako želite duboko naučiti Gutenbergov razvoj, morate držati oči otvorene za sve što se događa u Gutenbergovom skladištu GitHub jer se projekt kreće vrlo brzo i stvari se mijenjaju svaki dan.

Kako prilagoditi svoj dodatak za Gutenberg

Gutenbergov API pruža nam mnogo načina za proširivanje uređivača, poput Block API-ja, API-ja kratkog koda i još više. Koji API koristiti ovisi o vrsti dodatka koji gradimo.

Ako je vaš dodatak jednostavan dodatak za kratki kod, tada se Block API može upotrijebiti za stvaranje lijepog bloka za uređivač. Ali ako vaš dodatak upotrebljava složene metaboxe gdje blok nije dovoljan, možemo koristiti API bočne trake.

Također ćemo koristiti moderni skup alata za razvoj JavaScripta, kao što su NodeJS, NPM, webpack i ESNext. Pružit ćemo vam primjere datoteka, tako da ne morate brinuti oko postavljanja svog razvojnog okruženja.

U ovom postu ćemo pogledati kako pomoću API-ja Blokirati svoj dodatak Gutenberg kompatibilan. Ući ćemo u druge metode (API bočne trake, ploča s objavama, traka statusa) & slični API-ji) u drugom dijelu ako je potrebno.

Sve navedene primjere možete pronaći u ovo GitHub skladište.

Gutenberško razvojno okruženje

Razvoj za Gutenberg zahtijeva od vas da postavite gomilu alata, kao što su NPM, webpack, Babel i JSX. Potrebno je puno vremena i truda, pa smo za vas pripremili okoliš.

Gutenberg Boilerplate je dodatak s minimalnim Gutenbergovim razvojnim postavkama i primjerima. Sadrži primjer bloka i bočne trake. To možete koristiti za proširenje u svoj prilagođeni blok.

Gutenberg kotlovska ploča

Možete vilicu ili klonirati Gutenberg skladište kotlovskih ploča na svoje / Wp-sadržaja / plugins / i koristite ga kao svoje razvojno okruženje.

Nakon toga morate instalirati NodeJS na svoj stroj da biste započeli. Otvorite mapu Gutenberg Boilerplate i pokrenite npm install

Od ovog trenutka trebate znati tri naredbe koje ćete koristiti tijekom procesa razvoja:

  • npm install – Instalirajte ovisnosti projekta kada klonirate projekt.
  • npm run dev – Sastavi kod tijekom procesa razvoja. Ovo morate pokrenuti jednom i nastavit će pratiti promjene.
  • npm run build – Sastavite kôd za optimiziranu izgradnju nakon završetka razvojnog procesa.

API za blokiranje

Blokovi su temeljni element Gutenberga, on je uređivač temeljen na blokovima. API bloka omogućuje vam izradu blokova za Gutenberg. Možete napraviti blokove koji mogu donijeti osnovni HTML, kratke kodove ili čak napraviti dinamičke blokove za prikaz, na primjer, vaših najnovijih postova.

Proces zasnovan na postojećem dodatku

U našem primjeru usvojit ćemo kratki klikom Click to Tweet za Gutenbergov blok. Ovaj kratki kôd za Tweet Tweet predstavlja Tweet okvir s vašim tekstom i gumb za ugađanje tog teksta. Kao ovo:

Kliknite da biste Tweet postavili

Naš kratki kôd izgleda ovako:

[clicktotweet tweet ="Tekst za prikaz" tweetsent ="Tekst koji treba tvitati" gumb ="Cvrkut" tema ="klikni za cvrkut"]

Naš kratki kod ima četiri parametra:

  • tweet: Tekst koji se pojavljuje na vašoj web lokaciji.
  • tweetsent: Tekst koji ide na Twitter.
  • gumb: Tweet gumba tekst.
  • tema: Ili klikni na tweet ili klikni na tweet alt kao temu okvira.

Prilagođavanje dodataka za Gutenberg pomoću Block API-ja

Dva su načina da se to postigne s Gutenbergom: ili možemo HTML prebaciti u prednji dio, ili možemo pomoću našeg Gutenbergovog bloka da kratki kôd postavimo u prednji dio. U ovom ćemo članku raditi na potonjem.

Sav je kod dostupan na Pozdrav spremištu dodataka Gutenberg na GitHub-u. Možete klonirati spremište da biste vidjeli dodatak u akciji ili za izmjenu koda.

Upitajte skripte / stilove za Gutenberg

Prvo moramo upisati naše skripte i stilove u Gutenberg-ov urednik pomoću enqueue_block_assets:

/ **
* Upitati prednji kraj i uređivač JavaScript i CSS
* /
funkcija hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Enqueue paketnu JS datoteku u paketu
wp_enqueue_script (
‘halo-Gutenbergovom-blok-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blokovi’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Enqueue stilovi frontenda i editor bloka
wp_enqueue_style (
‘Halo-Gutenberg-blok-CSS’,
plugins_url ($ stylePath, __FILE__),
„”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Kuke skripte funkcioniraju u blok uređivač kuka
dodavanje (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Našem scenariju dodali smo četiri ovisnosti koje ćemo koristiti u našem bloku. Naučimo se najprije o tim ovisnostima:

wp-i18n je Gutenbergova verzija verzije internacionalizacijskih funkcija, poput __ (). wp-blokovi koriste se za funkciju registerBlockType koja registrira vaš blok. Za razne komponente u našem bloku koristimo wp-editor i wp-komponente skripte.

Sada kada smo stekli vašu imovinu, možemo početi pisati u blok /src/block.js datoteka.

Uvoz ovisnosti

Ako koristite Gutenberg bojler, onda je vaš block.js datoteka bi trebala imati osnovnu blok strukturu koju možete koristiti za izgradnju dodataka za Gutenberg:

/ **
* Unutarnji blok knjižnica
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Registrirajte blok
* /
izvoz zadani registarBlockType (‘gutenberg-kotlovnica / blok’, {
// Naslov bloka
naslov: __ (‘Gutenberg Boilerplate’),
// Opis bloka
opis: __ (‘Primjer bloka.’),
// Blokiraj kategoriju
kategorija: ‘uobičajeno’,
// Ikona bloka
ikona: ‘web mjesto administratora’,
// Blokiraj ključne riječi
ključne riječi: [
__( ‘Predložak’ ),
__( ‘Pozdrav svijete’ ),
__( ‘Primjer’ ),
],
atributi: {
},
// Definiranje sučelja za uređivanje
uredi: rekvizita => {
povratak (

{__ (‘Pozdrav Backendu’)}

);
},
// Definiranje sučelja sučelja
spremiti: rekvizita => {
povratak (

{__ (‘Pozdrav Frontend’)}

);
},
});

Možete pokrenuti npm run dev za početak sastavljanja našeg koda u stvarnom vremenu.

Prvo ćemo uvesti sve komponente i knjižnice koje su nam potrebne za blok na vrhu:

/ **
* Blokirajte ovisnosti
* /

uvesti nazive predavanja iz ‘imena imena’;

/ **
* Unutarnji blok knjižnica
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
Bogati tekst,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Alatna traka,
Dugme,
Opis,
} = wp.components;

Prvi uvoz classnames koje smo instalirali pomoću npm za upotrebu više klasa u našem kodu, jer JSX ne dopušta više klasa u elementima.

Naučit ćemo o ostalim komponentama koje smo uveli dok ih koristimo.

Odredite atribute

Sada ćemo definirati četiri atributa za naš blok Gutenberg, isti kao i naš kratki kod:

atributi: {
tweet: {
vrsta: ‘string’,
},
tweetsent: {
vrsta: ‘string’,
},
dugme: {
vrsta: ‘string’,
zadano: __ (‘Tweet’),
},
tema: {
tip: ‘boolean’,
zadano: lažno,
},
},

Kao što vidite, svi su atributi isti kao i naš kratki kod. Svi atributi imaju tipku tipa, koja Gutenbergu govori o njegovoj vrsti podataka. Možete koristiti niz, broj, boolean & objekta kao prihvaćene vrste.

Neki atributi također sadrže zadanu vrijednost. Atributi mogu imati i druga svojstva, poput izvora i odabirača, koja nećemo koristiti u našem primjeru, ali možete saznajte više o njima ovdje.

Uređivanje sučelja

Sada ćemo graditi uređivanje sučelja našeg bloka, koji će biti zaslon – korisnici će ga vidjeti tijekom uređivanja bloka u Gutenbergu.

Da bismo dobili osnovnu ideju, najprije možemo tvrdo kodirati naš blok i graditi na njemu zamjenom sljedećeg područja u našem kodu:

// Definiranje sučelja za uređivanje
uredi: rekvizita => {
povratak (

{__ (‘Pozdrav Backendu’)}

);
},

Sa sljedećim kodom:

// Definiranje sučelja za uređivanje
uredi: rekvizita => {
vratiti [

Bundeve i pingvini

Cvrkut

];
},

To bi vam trebalo dati predstavu o našem krajnjem rezultatu. Izgledat će ovako:

Dodaci za Gutenberg

Prvi element bloka je područje tvita teksta. Zamijenit ćemo ga tekstnim poljem koje je moguće uređivati, slično Gutenbergovom zaglavlju.

Iskoristit ćemo Bogati tekst komponenta koju smo prethodno uveli da bi zamijenili naš tvrdi kod.

Naša komponenta RichText-a ima pet argumenata. format je niz, jer ćemo koristiti svoj kratki kod za prikaz elemenata u prednjem dijelu. Kad bismo željeli upotrijebiti selektor u našem atributu, tada bi format bio niz.

RichText ima zadane opcije oblikovanja, poput podebljanog i kurzivnog znaka, što smo onemogućili prosljeđivanjem niza u argumentu formattingControls..

placeholder je tekst rezerviranog mjesta kada u njemu nema teksta, a onChange pokreće onChangeTweet funkciju kada se dogodi promjena.

Konačno, vrijednost će biti vrijednost našeg polja koja će biti uzeta iz atributa tweet koji smo definirali ranije.

Nakon što definiramo područje RichText, moramo izgraditi onChangeTweet funkciju koja će se pokrenuti kad se vrijednost promijeni u našem tekstnom polju..

// Definiranje sučelja za uređivanje
uredi: rekvizita => {
const onChangeTweet = vrijednost => {
props.setAttributes ({tweet: vrijednost});
};
vratiti [
…ostatak koda

Vrijednost polja RichText prenosimo na onChangeTweet funkciju, koja koristi props.setAttributes funkcija za ažuriranje vrijednosti atributa tweet.

Snagu Gutenberga vidjet ćete sada kad upotrebljavate svoj blok.

RichField u Gutenbergu

Nije li to sjajno?

Blok inspektor

Prilikom izrade dodataka za Gutenberg ne morate svaki put iznova iznovavati kotačić da biste napravili opcijske ploče za svoje dodatke. Gutenberg nam pruža pojednostavljen način koji omogućuje prilagođavanje blokova i osigurava da svaki korisnik ima dosljedno iskustvo s ugrađenim uzorcima sučelja.

Slično komponenti RichText, komponenta InspectorControls dodaje bočnu traku kada je odabran blok. Nešto kao ovo:

Gutenberške kontrole inspektora

Također ćemo koristiti TextareaControl i TextControl za dodavanje polja textarea i teksta u područje našeg inspektora..

U vašu izjavu o povratu dodat ćemo sljedeći kôd:

!! props.isSelected && (

),

props.isIzabrano provjerava kako bi se provjerilo da li se Inspektor pojavljuje samo kad je odabran blok.

Komponente TextareaControl i TextControl, slično RichText-u, imaju vrijednost i onChange metodu.

Moramo također promijeniti kôd zaslona vašeg bloka kako bismo prilagodili novim izmjenama. U našem slučaju trebamo dodati tekstove gumba u naš blok jer će tekst Tekst biti dodan u vezu, tako da ga ne trebamo prikazivati ​​u pozadini.

Hipervezu u našem početnom kodu možete zamijeniti slijedećim:


{props.attributes.button}

Kao što je već spomenuto, uklanjamo hipervezu s našeg koda jer je ne trebamo prikazivati ​​u pozadini. Zbog toga će naš blok izgledati ovako:

Gutenberg Kliknite za Tweet kontrole inspektora

Blok inspektor može biti moćan alat za vaš blok. Ako vaš dodatak ima napredne opcije koje su previše komplicirane za područje uređivača, tada ih možete staviti u područje Inspektor.

U naš ćemo blok dodati još jednu zadnju opciju da u sljedećem odjeljku dovršimo JavaScript dio.

Alatna traka bloka

Alatna traka bloka još je jedna unaprijed sastavljena korisnička sučelje koju možemo koristiti da bismo dodali više opcija našem bloku. Pojavit će se iznad vašeg bloka kad ga odaberete. Primjer:

Gutenbergova blok alatna traka

U idealnom slučaju, Alatna traka bloka trebala bi sadržavati primarne kontrole vašeg bloka, a inspektor domaćin sekundarnih kontrola. Međutim, to je diskutabilno i ovisi o vašem bloku.

Pomoću područja alternativnog stila ugostit ćemo područje blok alatne trake.

Slično kao Block Inspector, trebamo dodati sljedeći kôd u našu izjavu o povratu da bismo dodali Block Toolbar u naš blok:

!! props.isSelected && (

),

Za dodavanje alatne trake u naš blok koristimo komponente BlockControls i Toolbar. Slično kao i Block Inspector, props.isSelected osigurava da se naša alatna traka pojavljuje tek kada stavimo fokus na naš blok.

Za kontrolu koristimo i komponente Tooltip i Button. Komponenta alata je omotana oko komponente gumba kako bi se osiguralo da postoji opis, kada pokažite miš iznad miša i dobijete više konteksta.

Komponenta gumba koristi modul imena imena koji smo uvezli ranije u članku. Koristili smo funkciju imena razreda da bismo podredili tri klase. Treća klasa je aktivna i pojavljuje se samo kad je vrijednost atributa teme točna.

Njegova funkcija OnChange mijenja atribut teme na true / false. Na kraju, komponente Dashicon koriste se za prikaz ikone za našu kontrolu.

Također ćemo morati promijeniti svoj blok kod kako bi mogao raditi s promjenama. Moramo zamijeniti sljedeći redak:

S:

Provjeravamo je li atribut teme istinit ili lažan te u skladu s tim dodjeljujemo klasu našem bloku.

Sada bi vaš blok trebao izgledati ovako:

Kliknite za Tweet Alatna traka

Završili smo JavaScript dio našeg bloka u Gutenbergu. Možete pronaći cijeli izvorni kod datoteke ovdje.

Sada ćemo svoj blok dovršiti rukovanjem s izlazom sa strane poslužitelja.

Prikazivanje na strani poslužitelja

Gutenberg vam omogućuje korištenje renderiranja na strani poslužitelja za prikazivanje blokova s ​​prednje strane. To iscrtavanje na strani poslužitelja omogućava nam stvaranje blokova za kratke kodove.

Prvo ćemo napraviti našu metodu spremanja da vratimo null zamjenom sljedećeg koda:

// Definiranje sučelja sučelja
uštedjeti() {
// Renderiranje u PHP-u
vratiti null;
},

Koristit ćemo PHP funkciju register_block_type za registraciju naše vrste bloka u PHP-u:

if (function_exists (‘register_block_type’)) {
// Prikaz kuke na poslužitelju u povratni poziv
register_block_type (
‘hello-gutenberg / klikni za tweet’, [
‘render_callback’ => ‘Hello_gutenberg_block_callback’,
‘atributi’ => array (
‘tweet’ => array (
‘tip’ => ‘niz’,
),
‘tweetsent’ => array (
‘tip’ => ‘niz’,
),
„gumb” => array (
„Tip” => ‘niz’,
‘zadano’ => ‘Cvrkut’,
),
‘tema’ => array (
„Tip” => ‘Boolean’,
‘zadano’ => lažan,
),
),
]
);
}

Naša funkcija register_block_type. Prvo mu prosljeđujemo ime bloka, zajedno s nizom argumenata.

Prvi argument je funkcija render_callback, koja poziva na našu hello_gutenberg_block_callback funkciju za prikaz na strani poslužitelja.

Nakon povratnog povratka poziva, atribute prosljeđujemo kao niz, slično datoteci block.js, koju koristimo u našoj funkciji povratnog poziva..

Naša funkcija povratnog poziva izgleda ovako:

funkcija hello_gutenberg_block_callback ($ attr) {
ekstrakt ($ attr);
if (isset ($ tweet)) {
$ topic = ($ topic === istina? ‘klikni na tweet-alt’: ‘klikni na tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" gumb ="% s" tema ="% s"];
povratak sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ gumb, $ tema);
}
}

Izdvajamo sve atribute, a zatim vraćamo unutar našeg kratkog koda. To je sve što je potrebno za prilagodbu dodataka za kratke kodove za Gutenberg.

Sve kodove koji se koriste u ovom članku možete pronaći u ovom halo-Gutenberg skladište.

U sljedećem ćemo dijelu pogledati druge načine prilagodbe postojećih dodataka za Gutenberg, uključujući API Sidebar.

Ako imate bilo kakvih pitanja o tome kako prilagoditi svoj dodatak za Gutenberg, postavite ih u komentarima!

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
    Это интересно
    Adblock
    detector