Så här förbereder du dina plugins för WordPress Gutenberg

Gutenberg är ett helt nytt redigeringsgränssnitt som förändrar hur människor använder WordPress. Är du redo för den förändringen? Om du är en plugin-utvecklare måste du förbereda dina egna plugins för Gutenberg. 

Om du ännu inte har hört talas om Gutenberg, är det en ny WordPress-redaktör som kommer att ändra hur du skriver innehåll. Under Gutenberg, som är en del av WordPress-kärnan i version 5, kommer varje element i ditt innehåll att vara ett block (typ av typ, bild, blockquote, rubrik osv).

Även metaboxar kommer inte att vara desamma. 

Enkla metaboxer ska fungera med Gutenberg ur lådan, även om de kommer att visas olika. Men om du har komplexa metaboxer som den i Yoast SEO-plugin måste du testa den mot Gutenberg och kanske skapa en ny enbart för Gutenberg.

Så vilka plugins behöver uppdateras för Gutenberg? Pluggar med:

• anpassade posttyper
• komplexa metaboxer
• kortkoder
• eller redigeringsfunktioner

Det finns två metoder som vi kan ta som plugin-utvecklare: Stöd Gutenberg eller inaktivera Gutenberg. Att stödja Gutenberg skulle innebära att vi kommer att lägga extra ansträngningar för att refactoring vår kod (kanske till och med duplicera några) så att våra plugin-användare inte har några problem att använda det.

Så här inaktiverar du Gutenberg

Om vi ​​bestämmer oss för att inte stödja Gutenberg, måste vi avaktivera Gutenberg. Vi kan inaktivera Gutenberg helt eller bara där vårt plugin används. I det här avsnittet tar jag mitt eget plugin "Simple Giveaways" som har en anpassad posttyp och även metaboxer.

Inaktivera Gutenberg helt

Det här är något jag inte rekommenderar att göra från din plugin. I stället kanske du vill informera dina plugin-användare med ett administrativt meddelande att ditt plugin inte fungerar med Gutenberg så att de kan återgå till Classic Editor.

Återgå kan göras genom att installera plugin Classic Editor. Eller du kan skapa en ny inställning för ditt plugin och göra det här för att inaktivera det:

Detta filter finns i funktionen gutenberg_can_edit_post_type som används för att kontrollera om Gutenberg kan laddas på den aktuella posttypen. Om vi ​​alltid återvänder falsk, då betyder det att vi inte stöder Gutenberg alls.
Inaktivera Gutenberg per posttyp
Om ditt plugin har en anpassad posttyp kanske du vill inaktivera Gutenberg för den aktuella posttypen. För att inaktivera Gutenberg för din anpassade posttyp kan du bara ändra din posttyps konfiguration.
Editor Support
Gutenberg laddas inte om din posttyp inte stöder redaktören. Det här är lämpligt om din anpassade posttyp inte behöver redigeraren.
 __ ('Simple Giveaways', 'Giveasap'), 'labels' => $ etiketter, 'supports' => array ('title', // 'redaktör', Inaktivera Gutenberg 'thumbnail'), 'hierarchical' => falskt, // ...); register_post_type ('giveasap', $ args);
REST API-stöd
Kanske behöver du redaktören men behöver inte den i REST API? Gutenberg laddas inte om du inte stöder REST API. På samma sätt som ovanstående exempel kommer vi att göra det i konfigurationen för posttyp.
 __ ('Simple Giveaways', 'giveasap'), // ... 'show_in_rest' => false, // Inaktivera Gutenberg // ...); register_post_type ('giveasap', $ args);
Genom att ställa in parametern show_in_rest till falsk, vi kommer att inaktivera Gutenberg för den posttypen.
Stöd för posttyp
Vi kan använda det tidigare nämnda filtret för att inaktivera Gutenberg endast för vår anpassade posttyp.
Med denna kod kontrollerar vi om vi finns på vår anpassade posttyp. Om vi ​​är, returnera bara falskt. Detta påverkar inte några andra posttyper.
Inaktivera Gutenberg med metaboxer
Om du har komplexa metaboxer kanske det tar för lång tid att skapa en version av ditt plugin som kan stödja Gutenberg. Om så är fallet kan du inaktivera Gutenberg tills du har något som fungerar med Gutenberg.
För att inaktivera Gutenberg med dina metaboxer måste du definiera dem som inte kompatibel.
 falskt,));
Om du vill lära dig att stödja Gutenberg med komplexa metaboxer måste du lära dig hur man konverterar dem till ett block och hur man sparar dem. Var noga med att kolla in handboken för WordPress Gutenberg för det.
Hur man stöder Gutenberg
Ett bättre alternativ än att inaktivera Gutenberg är att stödja det!
Eftersom metaboxar troligen kommer att fungera ur lådan, kommer du inte ha mycket att göra här (om inte de är avancerade, som vi lärt oss tidigare). När du stöder Gutenberg arbetar du för det mesta med att skapa nya block för dina kortnummer och jämn widgets.
Kortnummer kommer också att fungera ur lådan. Men för att ge en bättre användarupplevelse borde du förmodligen göra block för dem.
Du kan skapa statiska och dynamiska block. Statiska block kommer att skrivas fullständigt i JavaScript, och den utmatade HTML-filen sparas i innehållet. 
Dynamiska block är lite annorlunda. Du måste också skapa JavaScript-delen så det fungerar med Gutenberg-redaktören. Men du kommer också att definiera en PHP-funktion som kommer att kallas för att göra det när du visar det innehållet på framsidan av din webbplats.
För att förstå statiska och dynamiska block, låt oss titta på ett enkelt exempel - ett enkelt varningsblock - och implementera det båda sätten. 
Registrera ett block
För att registrera ett block måste vi först definiera det i PHP och sedan i JavaScript.
 "guten-tuts")); // Vårt dynamiska block. register_block_type ('guten-tuts / alertdynamic', array ('render_callback' => 'guten_tuts_dynamic_alert'));  add_action ('init', 'guten_tuts_block');
När vi registrerar ett skript behöver vi definiera beroenden här. De wp-blocket och wp-elementet beroenden är de vi behöver när vi skapar block.
Jag kommer inte att gå in i en detaljerad översikt över block eller API som helhet. För att förstå detta mer bör du läsa Gutenbergs handbok.
JavaScript Block File
Inledningen av vår JavaScript-fil block.js kommer att ha detta:
var el = wp.element.createElement, __ = wp.i18n .__, registerBlockType = wp.blocks.registerBlockType, RichText = wp.blocks.RichText, blockStyle = backgroundColor: '# 900', färg: '#fff', vaddering: '20px'; 
Statiskt block
Låt oss nu definiera vårt statiska block. Eftersom vår alert kommer att vara bara text behöver vi ett attribut: text. I vår redigera funktionen (används i redigeraren) kommer vi att ha en Rik text blockera. Det här blocket låter oss infoga texten, lägga till stilar och så vidare.
Definitionen av vårt attribut text kommer att berätta för Gutenberg att ta bort texten inuti div. Vi berättar också för Gutenberg att detta kommer att vara en uppsättning av alla barnelement. Bara till exempel, detta 
em text annan text fettext
 skulle omvandlas till en uppsättning av tre element: "em text", "annan text" och "fet text" tillsammans med deras struktur som em och djärv.
Konverteringen av dessa attribut händer i produktionen av spara metod.
registerBlockType ('guten-tuts / alert', title: __ ('Guten Tuts - Alert'), ikon: 'megafon', kategori: 'layout', attribut: text: typ: 'array', source: ' barn, väljare: div,, redigera: funktion (rekvisita) var innehåll = props.attributes.text; funktion onChangeText (newText) props.setAttributes text: newText; return el , tagName: 'div', className: props.className, onChange: onChangeText, värde: innehåll, isSelected: props.isSelected, style: blockStyle);, spara: funktion (rekvisita) var text = props.attributes. text; returnera el ("div", style: blockStyle, className: props.className, text);,);
Dynamiskt block
Det dynamiska blocket kommer att ha redigera metod, men spara Metoden kommer att återvända null. Vi behöver inte spara metod här eftersom vi definierar en PHP-återuppringningsfunktion för att göra det dynamiska blocket på framsidan.
Vi har registrerat en återuppringning guten_tuts_dynamic_alert innan:
 "guten_tuts_dynamic_alert")); // ... 
Denna återuppringning kommer också att få en parameter $ attribut. Detta kommer att vara en uppsättning av alla registrerade attribut. Beteendet liknar mycket att registrera en kortnummer.
Funktionen guten_tuts_dynamic_alert kommer att se ut så här:
 
 
Utgången är bara en div element med viss text.
Såvitt jag kan säga kan vi inte använda RichText för dynamiska block eftersom attributen inte uppdateras. Om jag har fel, låt mig veta i kommentarerna!
Vi kommer att använda en vanlig inmatning för att ange varningens text. Eftersom vi inte har en spara metod här har jag definierat attributet text som en enkel sträng.
registertangent ('guten-tuts / alertdynamic'), title: __ ('Guten Tuts - Dynamic Alert'), ikon: 'megafon', kategori: 'layout', attribut: text: typ: 'string' 'div',,, redigera: funktion (rekvisita) var content = props.attributes.text; blockStyle ['width'] = '100%'; funktion påChangeText (e) var newText = e.target.value ; props.setAttributes (text: newText); returnera el ('input', className: props.className + 'widefat', onChange: onChangeText, värde: innehåll, isSelected: props.isSelected, style: blockStyle) ;, spara: funktion (rekvisita) return null;,);
Du kommer att se en vanlig inmatning som har en bakgrundsfärg och annan stil än den Rik text blockera. Självklart kan du ändra det och efterlikna samma stilar.
Eftersom vår PHP-återgivna varning har en annan bakgrundsfärg än den som definierats i vår JavaScript-kod, kan vi också se skillnaden på framsidan.
Slutsats
Att förbereda ditt plugin för Gutenberg kan vara mycket arbete. Men eftersom Gutenberg är lika utsträckt som resten av WordPress, har du mycket flexibilitet för att stödja dina plugins funktioner i Gutenberg.
Kom igång idag genom att installera Gutenberg och testa den mot din plugin. 



		
			
	   
	




Koda