Cum să vă pregătiți pluginurile pentru WordPress Gutenberg

Gutenberg este o interfață de editare nouă, care va schimba modul în care oamenii folosesc WordPress. Sunteți pregătiți pentru această schimbare? Dacă sunteți un dezvoltator de pluginuri, trebuie să vă pregătiți pluginurile personale pentru Gutenberg. 

În cazul în care nu ați auzit încă despre Gutenberg, acesta este un nou editor WordPress care va schimba modul în care scrieți conținut. Sub Gutenberg, setat să devină parte a programului WordPress core în versiunea 5, fiecare element din conținutul dvs. va fi un bloc (de tip paragraf, imagine, blockquote, heading și așa mai departe).

Chiar și metaboxele nu vor fi la fel. 

Metaboxurile simple ar trebui să funcționeze cu Gutenberg din cutie, deși ele vor fi afișate diferit. Cu toate acestea, dacă aveți metaboxe complexe, cum ar fi cel din pluginul Yoast SEO, atunci va trebui să-l testați împotriva lui Gutenberg și poate să creați unul nou doar pentru Gutenberg.

Deci, care pluginuri trebuie actualizate pentru Gutenberg? Plugin-uri cu:

• tipuri personalizate de posturi
• Metaboxele complexe
• numerele scurte
• sau caracteristici ale editorului

Există două abordări pe care le putem lua ca dezvoltatori de plugin-uri: a sustine Gutenberg sau dezactivați Gutenberg. Sprijinirea lui Gutenberg ar însemna că vom depune eforturi suplimentare pentru a refăcrarea codul nostru (poate chiar duplicarea unor astfel de coduri), astfel încât utilizatorii noștri de plugin-uri să nu aibă nici o dificultate în utilizarea acestuia.

Cum să dezactivați Gutenberg

Dacă ne hotărâm să nu-l susținem pe Gutenberg, atunci trebuie să-l dezactivăm pe Gutenberg. Putem dezactiva Gutenberg complet sau numai în cazul în care plugin-ul nostru este utilizat. În această secțiune, voi lua plugin-ul meu "Simple Giveaways" care are un post post particularizat și metaboxe.

Dezactivarea complet a lui Gutenberg

Acesta este un lucru pe care nu l-aș recomanda să fac din plugin-ul tău. În schimb, este posibil să doriți să informați utilizatorii plugin-ului cu o notificare de administrator că pluginul dvs. nu funcționează cu Gutenberg, astfel încât să poată reveni la editorul clasic.

Revenirea se poate face prin instalarea pluginului Classic Editor. Sau puteți crea o nouă setare pentru pluginul dvs. și faceți acest lucru pentru al dezactiva:

Acest filtru poate fi găsit în funcție gutenberg_can_edit_post_type care este folosit pentru a verifica dacă Gutenberg poate fi încărcat pe tipul respectiv de post. Dacă întotdeauna ne întoarcem fals, atunci înseamnă că nu vom susține deloc Gutenberg.
Dezactivarea tipului Gutenberg pe tip de postare
Dacă pluginul dvs. are un tip de post personalizat, atunci este posibil să doriți să dezactivați Gutenberg pentru tipul respectiv de postare. Pentru a dezactiva Gutenberg pentru tipul dvs. de post particularizat, puteți să vă modificați configurația tipului de postare.
Suport pentru editori
Gutenberg nu se va încărca dacă tipul postului nu suportă editorul. Acest lucru este potrivit dacă tipul dvs. de post personalizat nu are nevoie de editor.
 __ ('Simple Giveaways', 'giveasap'), 'labels' => etichete $, 'supports' => array ('title', // 'editor', 'hierarchical' fals, //… ); register_post_type ('giveasap', $ args);
REST API Support
Poate că aveți nevoie de editor, dar nu aveți nevoie de el în API-ul REST? Gutenberg nu se va încărca dacă nu susțineți API-ul REST. Similar cu exemplul de mai sus, vom face acest lucru în configurația tip post.
 __ ('Giveaways simple', 'giveasap'), // ... 'show_in_rest' => false, // Dezactivați Gutenberg // ...); register_post_type ('giveasap', $ args);
Prin setarea parametrului show_in_rest la fals, vom dezactiva Gutenberg pentru acel tip de post.
Suport tip post
Putem folosi filtrul menționat anterior pentru a dezactiva Gutenberg numai pentru tipul nostru de post personalizat.
Cu acest cod, verificăm dacă suntem pe tipul de post personalizat. Dacă suntem, atunci reveniți falsi. Acest lucru nu va afecta alte tipuri de postări.
Dezactivarea lui Gutenberg cu metaboxuri
Dacă aveți metaboxe complexe, ar putea dura prea mult pentru a crea o versiune a plugin-ului dvs. care ar putea susține Gutenberg. Dacă este așa, puteți dezactiva Gutenberg până când veți avea ceva care să lucreze cu Gutenberg.
Pentru a dezactiva Gutenberg cu metaboxele, trebuie să le definiți ca fiind incompatibil.
 fals, ) );
Dacă doriți să aflați cum să sprijiniți Gutenberg cu metaboxuri complexe, va trebui să învățați cum să le convertiți într-un bloc și cum să le salvați. Asigurați-vă că verificați manualul WordPress Gutenberg pentru asta.
Cum să sprijine Gutenberg
O opțiune mai bună decât dezactivarea lui Gutenberg este să o susțină!
Din moment ce metaboxele vor ieși probabil din cutie, nu veți avea de făcut prea multe aici (dacă nu sunteți avansați, așa cum am învățat mai devreme). Atunci când îl sprijiniți pe Gutenberg, veți lucra mai ales la crearea de noi blocuri pentru codurile scurte și chiar widget-urile.
Codurile scurte vor funcționa și din cutie. Dar pentru a oferi o experiență mai bună pentru utilizatori, probabil ar trebui să faceți blocuri pentru ei.
Puteți crea blocuri statice și dinamice. Blocurile statice vor fi complet scrise în JavaScript, iar HTML-ul afișat va fi salvat în conținut. 
Blocurile dinamice sunt puțin diferite. De asemenea, va trebui să creați partea JavaScript, astfel încât să funcționeze cu editorul Gutenberg. Dar, de asemenea, veți defini o funcție PHP care va fi apelată pentru a fi afișată atunci când se afișează acel conținut pe partea frontală a site-ului dvs..
Pentru a înțelege blocurile statice și dinamice, să analizăm un exemplu simplu - un bloc de alertă simplu - și să îl implementăm în ambele sensuri. 
Înregistrarea unui bloc
Pentru a înregistra un bloc, mai întâi trebuie să îl definim în PHP și apoi în JavaScript.
 "guten-tuts",)); // Blocul nostru dinamic. register_block_type ('guten-tuts / alertdynamic', array ('render_callback' => 'guten_tuts_dynamic_alert'));  add_action ('init', 'guten_tuts_block');
Când înregistram un script, trebuie să definim dependențele aici. wp-bloc și wp element dependențele sunt cele de care avem nevoie atunci când creăm blocuri.
Nu voi intra într-o prezentare detaliată a blocurilor sau API ca un întreg. Pentru a înțelege mai mult acest lucru, trebuie să citiți manualul Gutenberg.
Fișier blocare JavaScript
Începutul fișierului nostru JavaScript block.js va avea aceasta:
var el = wp.element.createElement, __ = wp.i18n .__, registerBlockType = wp.blocks.registerBlockType, RichText = wp.blocks.RichText, blockStyle = backgroundColor: '# 900', culoare: '#fff', padding: '20px'; 
Bloc static
Acum, să definim blocul nostru static. Deoarece alerta noastră va fi doar text, avem nevoie de un atribut: text. În a noastră Editați | × (folosită în Editor), vom avea un RichText bloc. Acest bloc ne permite să inserăm textul, să adăugăm stiluri și așa mai departe.
Definiția atributului nostru text îi va spune lui Gutenberg să alunge textul în interiorul lui div. Spunem, de asemenea, lui Gutenberg că acesta va fi o gamă de elemente de copil. Doar de exemplu, asta 
em text alt text îndrăzneț text
 ar converti într - o serie de trei elemente: "text em", "alt text" și "text îndrăzneț" împreună cu structura lor, cum ar fi em și îndrăzneţ.
Conversia acestor atribute are loc la ieșirea din Salvați metodă.
(de exemplu: '', '', '', '' '', ' (text: newText); return (el) (RichText)  , tagName: 'div', className: props.className, onChange: onChangeText, valoare: conținut, isSelected: props.isSelected, stil: blockStyle); save: function (recuzită) var text = props.attributes. text; retur el ('div', stil: blockStyle, className: props.className, text);,);
Bloc dinamic
Blocul dinamic va avea Editați | × metoda, dar Salvați metoda va reveni nul. Nu avem nevoie de ele Salvați aici pentru că vom defini o funcție de retur PHP pentru a face blocul dinamic pe front.
Am înregistrat un apel invers guten_tuts_dynamic_alert inainte de:
 'guten_tuts_dynamic_alert')); // ... 
Acest apel de apel va primi de asemenea un parametru atributele $. Aceasta va fi o matrice a tuturor atributelor înregistrate. Comportamentul este foarte similar cu înregistrarea unui scurtcod.
Functia guten_tuts_dynamic_alert va arata astfel:
 
 
Rezultatul este doar a div element cu un text.
Din câte vă pot spune, nu putem folosi RichText pentru blocurile dinamice deoarece atributele nu se actualizează. Dacă mă înșel, spuneți-mi în comentariile!
Vom folosi un regulat intrare pentru a introduce textul alertei. Din moment ce nu avem Salvați aici am definit atributul text ca un șir simplu.
(de exemplu: 'text', 'type': 'string', selector: 'text' 'div',, edita: funcția (props) var content = props.attributes.text; blockStyle ['width'] = '100%'; ; props.setAttributes (text: newText); return el ('introducere', className: props.className + 'widefat', peChange: onChangeText, value: content, isSelected: props.isSelected, style: blockStyle) ;, salvați: funcția (recuzită) return null;,);
Veți vedea un obișnuit intrare care are o culoare de fundal și stil diferit de RichText bloc. Desigur, puteți schimba acest lucru și puteți imita aceleași stiluri.
Deoarece alerta noastră de randare PHP are o culoare de fundal diferită de cea definită în codul nostru JavaScript, putem vedea și diferența pe partea din față.
Concluzie
Pregătirea pluginului pentru Gutenberg poate fi o mulțime de lucruri. Dar din moment ce Gutenberg este la fel de extensibil ca restul WordPress, aveți o mulțime de flexibilitate pentru a sprijini caracteristicile plugin-ului dvs. în Gutenberg.
Începeți astăzi instalând Gutenberg și testați-l împotriva pluginului. 



		
			
	   
	




Cod