Slik lager du Plugins for WordPress Gutenberg

Gutenberg er et helt nytt redigeringsgrensesnitt som vil endre måten folk bruker WordPress på. Er du klar for den forandringen? Hvis du er en plugin-utvikler, må du lage dine egne plugins for Gutenberg. 

Hvis du ennå ikke har hørt om Gutenberg, er det en ny WordPress-editor som vil endre hvordan du skriver innhold. Under Gutenberg, som er satt til å bli en del av WordPress-kjerne i versjon 5, vil hvert element i innholdet ditt være en blokk (av type avsnitt, bilde, blokk, overskrift osv.).

Selv metaboxer vil ikke være det samme. 

Enkle metaboxer skal fungere med Gutenberg ut av esken, selv om de vil bli vist annerledes. Men hvis du har komplekse metaboxer som den i Yoast SEO plugin, må du teste den mot Gutenberg og kanskje lage en ny bare for Gutenberg.

Så hvilke plugins trenger oppdatering for Gutenberg? Plugins med:

• egendefinerte innleggstyper
• komplekse metaboxer
• kortkoder
• eller redigeringsfunksjoner

Det er to tilnærminger som vi kan ta som plugin-utviklere: Brukerstøtte Gutenberg eller deaktivere Gutenberg. Støtte Gutenberg ville bety at vi vil legge ekstra innsats for å refactoring vår kode (kanskje til og med duplisere noe), slik at våre plugin-brukere ikke har noen problemer med å bruke det.

Slik deaktiverer du Gutenberg

Hvis vi bestemmer oss for ikke å støtte Gutenberg, må vi deaktivere Gutenberg. Vi kan deaktivere Gutenberg helt eller bare der vår plugin brukes. I denne delen vil jeg ta mitt eget plugin "Simple Giveaways" som har en egendefinert innleggstype og også metaboxer.

Deaktiverer Gutenberg helt

Dette er noe jeg ikke vil anbefale å gjøre fra plugin-modulen din. I stedet vil du kanskje informere plugin-brukere med en administrasjonsmelding om at pluginet ditt ikke fungerer med Gutenberg slik at de kan gå tilbake til Classic Editor.

Tilbakestilling kan gjøres ved å installere plugin Classic Editor. Eller du kan opprette en ny innstilling for pluginet ditt og gjør dette for å deaktivere det:

Dette filteret finnes i funksjonen gutenberg_can_edit_post_type som brukes til å sjekke om Gutenberg kan lastes på den aktuelle posttypen. Hvis vi alltid kommer tilbake falsk, da betyr det at vi ikke vil støtte Gutenberg i det hele tatt.
Deaktivering av Gutenberg per posttype
Hvis din plugin har en egendefinert innleggstype, kan du kanskje deaktivere Gutenberg for den aktuelle posttypen. Hvis du vil deaktivere Gutenberg for din egendefinerte innleggstype, kan du bare endre konfigurasjonen for posttypen.
Editor Support
Gutenberg vil ikke lastes hvis posttypen din ikke støtter redaktøren. Dette er hensiktsmessig hvis den egendefinerte innleggstypen din ikke trenger redigeringsprogrammet.
 __ ('Simple Giveaways', 'giveasap'), 'labels' => $ etiketter, 'supports' => array ('title', // 'redaktør', deaktiverer Gutenberg 'miniatyrbilde'), 'hierarkisk' => falsk, //… ); register_post_type ('giveasap', $ args);
REST API-støtte
Kanskje du trenger redaktøren, men du trenger ikke den i REST API? Gutenberg vil ikke lastes hvis du ikke støtter REST API. På samme måte som i eksemplet ovenfor, vil vi gjøre det i posttypekonfigurasjonen.
 __ ('Simple Giveaways', 'giveasap'), // ... 'show_in_rest' => false, // Deaktiver Gutenberg // ...); register_post_type ('giveasap', $ args);
Ved å sette parameteren show_in_rest til falsk, Vi vil deaktivere Gutenberg for den posttypen.
Post Type Support
Vi kan bruke det tidligere nevnte filteret for å deaktivere Gutenberg bare for vår egendefinerte innleggstype.
Med denne koden, sjekker vi om vi er på vår egendefinerte innleggstype. Hvis vi er, så returner du bare falsk. Dette påvirker ikke andre posttyper.
Deaktivering av Gutenberg med metaboxer
Hvis du har komplekse metaboxer, kan det hende at det tar for lang tid for deg å lage en versjon av plugin som kan støtte Gutenberg. Hvis det er tilfelle, kan du deaktivere Gutenberg til du har noe som fungerer med Gutenberg.
For å deaktivere Gutenberg med metaboxene dine må du definere dem som ikke kompatibel.
 falsk, ) );
Hvis du vil lære å støtte Gutenberg med komplekse metaboxer, må du lære å konvertere dem til en blokk, og også hvordan du lagrer dem. Pass på å sjekke WordPress Gutenberg håndboken for det.
Slik støtter du Gutenberg
Et bedre alternativ enn å deaktivere Gutenberg er å støtte det!
Siden metaboxene sannsynligvis vil gå ut av esken, vil du ikke ha mye å gjøre her (med mindre de er avanserte, som vi tidligere har lært). Når du støtter Gutenberg, vil du for det meste jobbe med å lage nye blokker for kortkodene dine og til og med widgets.
Kortkoder vil også fungere ut av esken. Men for å gi en bedre brukeropplevelse, bør du nok gjøre blokker for dem.
Du kan opprette statiske og dynamiske blokker. Statiske blokker skrives fullstendig i JavaScript, og den utgående HTML-filen blir lagret i innholdet. 
Dynamiske blokker er litt annerledes. Du må også lage JavaScript-delen slik at den fungerer med Gutenberg-redaktøren. Men du vil også definere en PHP-funksjon som vil bli kalt for å gjengi det når du viser innholdet på forsiden av nettstedet ditt.
For å forstå statiske og dynamiske blokker, la oss se på et enkelt eksempel - en enkel advarselsblokk - og implementere det begge veier. 
Registrere en blokk
For å registrere en blokk, må vi først definere den i PHP og deretter i JavaScript.
 'guten-tuts',)); // Vår dynamiske blokk. register_block_type ('guten-tuts / alertdynamic', array ('render_callback' => 'guten_tuts_dynamic_alert'));  add_action ('init', 'guten_tuts_block');
Når du registrerer et skript, må vi definere avhengighetene her. De wp-blokk og wp-element avhengigheter er de vi trenger når du lager blokker.
Jeg vil ikke gå inn i en detaljert oversikt over blokker eller API som helhet. For å forstå dette mer, bør du lese Gutenberg-håndboken.
JavaScript Block File
Begynnelsen av vår JavaScript-fil block.js vil ha dette:
var el = wp.element.createElement, __ = wp.i18n .__, registerBlockType = wp.blocks.registerBlockType, RichText = wp.blocks.RichText, blockStyle = backgroundColor: '# 900', farge: '#fff', polstring: '20px'; 
Statisk blokk
La oss nå definere vår statiske blokk. Siden vårt varsel blir bare tekst, trenger vi et attributt: tekst. I vår redigere funksjon (brukt i redaktøren), vil vi ha en Rik tekst blokkere. Denne blokken tillater oss å sette inn teksten, legge til stiler og så videre.
Definisjonen av vårt attributt tekst vil fortelle Gutenberg å stripe teksten inne i div. Vi forteller også Gutenberg at dette vil være en rekke av alle barnelementer. Bare for eksempel dette 
em tekst annen tekst fet tekst
 ville konvertere til en rekke tre elementer: "em text", "annen tekst", og "fet skrift" sammen med sin struktur som em og modig.
Konverteringen av disse attributter skjer i utgangen av lagre metode.
registerBlockType ('guten-tuts / alert', title: __ ('Guten Tuts - Alert'), ikon: 'megafon', kategori: 'layout', attributter: text: type: 'array', kilde: ' barn, velg: div,, rediger: funksjon (rekvisitter) var innhold = props.attributes.text; funksjon onChangeText (newText) props.setAttributes (text: newText); return el , tagName: 'div', className: props.className, onChange: onChangeText, verdi: innhold, erSelected: props.isSelected, style: blockStyle);, lagre: funksjon (rekvisitter) var text = props.attributes. tekst; return el ('div', style: blockStyle, className: props.className, tekst);,);
Dynamisk blokk
Den dynamiske blokken vil ha redigere metode, men lagre metoden kommer tilbake null. Vi trenger ikke lagre Metode her fordi vi vil definere en PHP tilbakeringingsfunksjon for å gjengi dynamisk blokk på forsiden.
Vi har registrert en tilbakeringing guten_tuts_dynamic_alert før:
 'guten_tuts_dynamic_alert')); // ... 
Denne tilbakeringingen vil også motta en parameter $ attributter. Dette vil være en rekke av alle registrerte attributter. Oppførelsen ligner veldig på å registrere en kortkode.
Funksjonen guten_tuts_dynamic_alert vil se slik ut:
 
 
Utgangen er bare en div element med litt tekst.
Så vidt jeg kan fortelle, kan vi ikke bruke RichText for dynamiske blokker fordi attributtene ikke oppdateres. Hvis jeg har feil, gi meg beskjed i kommentarene!
Vi vil bruke en vanlig inngang for å legge inn varselets tekst. Siden vi ikke har en lagre Metode her, jeg har definert attributtet tekst som en enkel streng.
registerTypeType ('guten-tuts / alertdynamic', title: __ ('Guten Tuts - Dynamic Alert'), ikon: 'megafon', kategori: 'layout', attributter: text: type: 'string' 'div',,, rediger: funksjon (rekvisitter) var content = props.attributes.text; blockStyle ['width'] = '100%'; funksjon onChangeText (e) var newText = e.target.value ; props.setAttributes (text: newText); retur el ('input', className: props.className + 'widefat', onChange: onChangeText, verdi: innhold, erSelected: props.isSelected, style: blockStyle) ;, lagre: funksjon (rekvisitter) return null;,);
Du vil se en vanlig inngang som har en bakgrunnsfarge og forskjellig styling enn Rik tekst blokkere. Selvfølgelig kan du endre det og etterligne de samme stilene.
Siden PHP-gjengitt varsel har en annen bakgrunnsfarge enn den som er definert i JavaScript-koden, kan vi også se forskjellen på forsiden.
Konklusjon
Forberedelse av plugin for Gutenberg kan være mye arbeid. Men siden Gutenberg er like utvidbart som resten av WordPress, har du stor fleksibilitet for å støtte pluginens funksjoner i Gutenberg.
Kom i gang i dag ved å installere Gutenberg og teste den mot pluginet ditt. 



		
			
	   
	




Kode