Cum să adăugați un buton la Editorul Gutenberg

Urât de unii și iubit de mulți, este clar că noul editor de blocuri WordPress nu te lasă indiferent. Este la noi de mai bine de o lună și mai multe plugin-uri și teme sunt compatibile cu acesta.

În calitate de dezvoltator de pluginuri, trebuie să spun că adaptarea produselor noastre la Gutenberg nu a fost ceva ce poate fi făcut în câteva zile. La Nelio urmărim evoluția și dezvoltarea noului editor de blocuri de ceva timp pentru a putea menține aceleași funcționalități ale pluginurilor noastre fără modificări semnificative.

Unul dintre punctele cheie pentru a putea adapta Nelio Content la Gutenberg a fost capacitatea de a adăuga butoane în blocurile de text pentru a continua să facem același lucru pe care îl făceam cu TinyMCE (editorul clasic). Vă reamintesc că una dintre cele mai interesante caracteristici ale Nelio Content este aceea de a vă permite să selectați fraze din conținut pentru a le partaja direct pe rețelele dvs. de socializare, sau să le marcați și apoi algoritmul nostru le va selecta pe cele mai relevante și va configura o serie. a mesajelor promotionale automate. Ți-am mai explicat în această postare.

Pentru a include butoane suplimentare în TinyMCE, WordPress are o documentație destul de completă. Dar cum o facem în Gutenberg? Cum adăugăm un buton în blocuri de text îmbogățit în WordPress?

Este clar că păstrarea acestei funcționalități este esențială pentru a oferi în continuare un produs de calitate, cum ar fi Nelio Content, nu numai pentru clienții noștri, ci și pentru noi înșine, deoarece și noi suntem interesați să folosim funcționalitatea de evidențiere a propoziției din Gutenberg.

Din acest motiv, am decis să deschid un număr în GitHub al proiectului Gutenberg în care să explic problema și să cer ajutor în ianuarie 2018 (acum aproape un an, la momentul publicării acestei postări). Acolo am cerut posibilitatea de a adăuga butoane la blocurile de text ale lui Gutenberg pentru a lucra cu textul selectat în astfel de blocuri.

Evoluția problemei a fost pozitivă și, în final, o astfel de funcționalitate a fost adăugată datorită Tipurilor de format de la Gutenberg. Deoarece documentația este încă destul de slabă (în timp ce scriu această postare), voi explica cum să adăugați un buton personalizat la blocurile de text ale editorului de blocuri, astfel încât să nu vă pierdeți timpul și să aveți un timp mai ușor decât pe mine.

Veți găsi tot codul de plugin care adaugă un buton la editor în acest depozit GitHub. Deși este destul de simplu, voi explica mai detaliat cele mai importante părți ale acestui proiect.

Fișierul cheie al proiectului este cel pe care îl veți găsi la /src/js/gutenberg.js și pe care îl aveți mai jos:

Funcția registerFormatType este specifică nucleului WordPress și este cea care vă permite să adăugați un nou tip de format, împreună cu butonul care declanșează acțiunea. Transmiteți un nume ( 'nelio/button' ) și un obiect JavaScript cu argumente ca parametri. Printre aceste argumente, aveți metoda de edit , care este cea care returnează un React Element , care în cazul nostru va fi butonul pe care vrem să-l punem în bloc.

Acest buton este un RichTextToolbarButton , care nu este altceva decât o componentă React a editorului Gutenberg însuși pe care o puteți găsi definită aici. Această componentă are nevoie de o pictogramă (care este un fișier SVG cu logo-ul lui Nelio, în acest caz), titlul butonului și o funcție care va fi executată când se apasă butonul. Această funcție ajunge să apeleze funcția doTheJob , unde textul selectat este preluat și tipărit în consola browserului. Acesta este locul în care puteți adăuga orice cod JavaScript pe care doriți să le gestionați textul selectat.

În atributul pictogramă RichTextToolbarButton puteți pune un șir cu numele unui WordPress Dashicon în loc de SVG. Pentru ca SVG-ul să funcționeze, rețineți că folosim pachetul svg-react-loader care convertește fișierele SVG în elemente React, de care au nevoie aceste componente React.

Codul folosește sintaxa ES6+ pentru a fi mai ușor de înțeles, dar pentru a-l face să funcționeze trebuie să îl procesezi cu Babel, iar pentru asta avem această configurație în webpack:

Nu voi intra în detaliu pentru ce este fiecare linie a fișierului de configurare webpack anterior, dar dacă vă uitați la el, veți vedea că folosim svg-react-loader pentru fișiere SVG și babel-loader pentru a procesa JavaScript și a converti în cod care funcționează în orice browser. Am vorbit deja despre toate aceste tehnologii moderne în această postare.

Rezultatul este fișierul JavaScript gutenberg.js care apare în /dist/js . Acum, ceea ce trebuie să facem este să încărcăm acest fișier în ecranul de editare WordPress, folosind (ca întotdeauna) wp_enqueue_script :

Rețineți că scriptul este pus în coadă în hook enqueue_block_editor_assets , care este cel care ne asigură că scriptul va fi încărcat doar atunci când este folosit editorul de blocuri WordPress.

Dacă doriți să încercați codul, descărcați proiectul GitHub și mutați folderul în WordPress în /wp-content/plugins . Acolo, deschideți un terminal și rulați npm install . Trebuie să aveți instalat NodeJS pentru ca totul să funcționeze și să puteți include dependențele necesare pe care le cere codul nostru.

Când aveți dependențe, rulați npm run build în terminal pentru a genera codul final (procesarea JavaScript și așa mai departe). Acum puteți merge la WordPress și să activați pluginul pe care tocmai l-am adăugat.

Când deschideți o postare pentru editare, veți vedea noul buton care apare în blocurile de text. Dacă selectați un fragment din text și faceți clic pe butonul, veți vedea textul selectat care apare în consola browserului. Acesta este ceea ce ne așteptam să se întâmple, așa cum am văzut în codul de mai sus.

Pentru a afla mai multe…

Acesta este doar un exemplu minim despre cum să puneți un buton într-un bloc de text. Dacă doriți ca textul selectat să fie modificat atunci când faceți clic pe buton, vă încurajez să revizuiți codul acestui plugin unde sunt adăugate mai multe butoane cu formate diferite, mai complexe.

Pe de altă parte, pentru cei dintre voi care doresc să aprofundeze și mai mult subiectul, vă recomand să vă uitați la codul pluginului GhostKit, care modifică interfața implicită a lui Gutenberg adăugând diferite elemente suplimentare. Este, de asemenea, un cod foarte bine structurat și ușor de înțeles.

La un moment dat vom avea o documentație oficială și detaliată care acoperă toate aspectele acestei caracteristici Gutenberg, dar deocamdată trebuie să citim codul pentru a afla cum să implementăm aceste tipuri de modificări ale editorului de blocuri WordPress. Noroc!

Imagine prezentată de Ashim D'Silva pe Unsplash.