Hoe u uw plug-ins voor WordPress Gutenberg kunt voorbereiden

Gutenberg is een gloednieuwe bewerkingsinterface die de manier waarop mensen WordPress gebruiken zal veranderen. Ben je klaar voor die verandering? Als u een plugin-ontwikkelaar bent, moet u uw eigen plug-ins voor Gutenberg voorbereiden. 

In het geval dat je nog niet van Gutenberg hebt gehoord, is het een nieuwe WordPress-editor die de manier waarop je inhoud schrijft, zal veranderen. Onder Gutenberg, ingesteld om onderdeel te worden van WordPress core in versie 5, zal elk element in je inhoud een blok zijn (van type alinea, afbeelding, blockquote, kop, enzovoort).

Zelfs metaboxen zullen niet hetzelfde zijn. 

Eenvoudige metaboxen zouden uit de doos met Gutenberg moeten werken, hoewel ze anders worden weergegeven. Als u echter complexe metaboxen heeft zoals die in de Yoast SEO-plug-in, moet u deze testen tegen Gutenberg en misschien een nieuwe maken voor Gutenberg..

Dus welke plug-ins moeten worden bijgewerkt voor Gutenberg? Plug-ins met:

• aangepaste berichttypen
• complexe metaboxen
• shortcodes
• of editor-functies

Er zijn twee benaderingen die we als plugin-ontwikkelaars kunnen gebruiken: ondersteuning Gutenberg of onbruikbaar maken Gutenberg. Ondersteunen van Gutenberg zou betekenen dat we extra inspanningen zullen leveren om onze code te refactoren (misschien zelfs een paar te dupliceren), zodat onze plugin-gebruikers er geen moeite mee zullen hebben om het te gebruiken.

Hoe Gutenberg uit te schakelen

Als we besluiten Gutenberg niet te steunen, moeten we Gutenberg uitschakelen. We kunnen Gutenberg volledig uitschakelen of alleen waar onze plug-in wordt gebruikt. In deze sectie neem ik mijn eigen plugin "Simple Giveaways" die een aangepast berichttype en ook metaboxen heeft.

Gutenberg volledig uitschakelen

Dit is iets dat ik niet zou aanraden om te doen vanuit je plug-in. In plaats daarvan wilt u uw plug-in-gebruikers op de hoogte brengen met een beheerdersverklaring dat uw plug-in niet met Gutenberg werkt, zodat deze terug kunnen gaan naar de Classic Editor.

Terugzetten kan gedaan worden door de plug-in Classic Editor te installeren. Of u kunt een nieuwe instelling voor uw plug-in maken en dit doen om het uit te schakelen:

Dit filter is te vinden in de functie gutenberg_can_edit_post_type die wordt gebruikt om te controleren of Gutenberg op dat specifieke berichttype kan worden geladen. Als we altijd terugkeren vals, dan betekent het dat we Gutenberg helemaal niet zullen steunen.
Gutenberg per berichttype uitschakelen
Als uw plug-in een aangepast berichttype heeft, wilt u Gutenberg mogelijk uitschakelen voor dat specifieke berichttype. Om Gutenberg uit te schakelen voor uw aangepaste berichttype, kunt u gewoon uw configuratie van het posttype wijzigen.
Redacteur Ondersteuning
Gutenberg wordt niet geladen als je berichttype de editor niet ondersteunt. Dit is geschikt als je aangepaste berichttype de editor niet nodig heeft.
 __ ('Simple Giveaways', 'giveasap'), 'labels' => $ labels, 'supports' => array ('title', // 'editor', Gutenberg 'thumbnail' uitschakelen,), 'hierarchical' => false, // ...); register_post_type ('giveasap', $ args);
REST API-ondersteuning
Misschien hebt u de editor nodig, maar hebt u deze niet nodig in de REST-API? Gutenberg wordt niet geladen als u de REST API niet ondersteunt. Net als bij het bovenstaande voorbeeld doen we dat in de configuratie van het posttype.
 __ ('Simple Giveaways', 'giveasap'), // ... 'show_in_rest' => false, // Gutenberg uitschakelen // ...); register_post_type ('giveasap', $ args);
Door de parameter in te stellen show_in_rest naar vals, we zullen Gutenberg voor dat berichttype uitschakelen.
Ondersteuning bij berichttype
We kunnen het eerder genoemde filter gebruiken om Gutenberg alleen uit te schakelen voor ons aangepaste berichttype.
Met deze code controleren we of we ons aangepaste berichttype gebruiken. Als we dat zijn, retourneer dan gewoon false. Dit heeft geen invloed op andere berichttypen.
Gutenberg uitschakelen met Metaboxen
Als u complexe metaboxen heeft, zou het misschien te lang duren voordat u een versie van uw plug-in zou maken die Gutenberg zou kunnen ondersteunen. Als dat het geval is, kun je Gutenberg uitschakelen totdat je iets hebt dat werkt met Gutenberg.
Om Gutenberg uit te schakelen met uw metaboxen, moet u ze definiëren als niet compatibel.
 false,));
Als u wilt leren hoe u Gutenberg kunt ondersteunen met complexe metaboxen, moet u leren hoe u ze kunt converteren naar een blok en hoe u ze kunt opslaan. Zorg ervoor dat u daarvoor het WordPress Gutenberg-handboek raadpleegt.
Hoe Gutenberg te ondersteunen
Een betere optie dan Gutenberg uit te schakelen is om het te ondersteunen!
Aangezien metaboxen waarschijnlijk uit de doos zullen werken, zult u hier niet veel te doen hebben (tenzij ze geavanceerd zijn, zoals we eerder hebben geleerd). Als je Gutenberg steunt, werk je vooral aan het maken van nieuwe blokken voor je shortcodes en zelfs widgets.
Shortcodes zullen ook uit de doos werken. Maar om een ​​betere gebruikerservaring te bieden, moet u waarschijnlijk blokken voor hen maken.
U kunt statische en dynamische blokken maken. Statische blokken worden volledig in JavaScript geschreven en de uitgevoerde HTML wordt in de inhoud opgeslagen. 
Dynamische blokken zijn een beetje anders. Je zult ook het JavaScript-gedeelte moeten maken, zodat het werkt met de Gutenberg-editor. Maar u definieert ook een PHP-functie die wordt aangeroepen om deze weer te geven bij het weergeven van die inhoud op de voorkant van uw site.
Laten we, om statische en dynamische blokken te begrijpen, een eenvoudig voorbeeld bekijken - een eenvoudig waarschuwingsblok - en het op beide manieren implementeren. 
Een blok registreren
Om een ​​blok te registreren, moeten we eerst het definiëren in PHP en vervolgens in JavaScript.
 'guten-tuts',)); // Ons dynamische blok. register_block_type ('guten-tuts / alertdynamic', array ('render_callback' => 'guten_tuts_dynamic_alert'));  add_action ('init', 'guten_tuts_block');
Wanneer u een script registreert, moeten we hier de afhankelijkheden definiëren. De wp-block en wp-element afhankelijkheden zijn degenen die we nodig hebben bij het maken van blokken.
Ik zal niet ingaan op een gedetailleerd overzicht van blokken of de API als geheel. Om dit meer te begrijpen, zou u het handboek van Gutenberg moeten lezen.
JavaScript-blokbestand
Het begin van ons JavaScript-bestand block.js zal dit hebben:
var el = wp.element.createElement, __ = wp.i18n .__, registerBlockType = wp.blocks.registerBlockType, RichText = wp.blocks.RichText, blockStyle = backgroundColor: '# 900', color: '#fff', opvulling: '20px'; 
Statisch blok
Laten we nu ons statische blok definiëren. Aangezien onze melding alleen uit tekst bestaat, hebben we één kenmerk nodig: tekst. In onze Bewerk functie (gebruikt in de Editor), zullen we een Rijke text blok. Met dit blok kunnen we de tekst invoegen, stijlen toevoegen, enzovoort.
De definitie van ons kenmerk tekst zal de Gutenberg vertellen om de tekst in de div. We vertellen Gutenberg ook dat dit een reeks van alle onderliggende elementen zal zijn. Gewoon bijvoorbeeld dit 
em-tekst andere tekst vetgedrukte tekst
 zou omzetten in een array van drie elementen: "em-tekst", "andere tekst", en "vetgedrukte tekst" samen met hun structuur zoals em en stoutmoedig.
De conversie van deze attributen gebeurt in de uitvoer van de opslaan methode.
registerBlockType ('guten-tuts / alert', title: __ ('Guten Tuts - Alert'), pictogram: 'megaphone', categorie: 'layout', attributen: text: type: 'array', bron: ' children ', selector:' div ',, edit: function (props) var content = props.attributes.text; function onChangeText (newText) props.setAttributes (text: newText); return el (RichText , tagName: 'div', className: props.className, onChange: onChangeText, value: content, isSelected: props.isSelected, style: blockStyle);, save: function (props) var text = props.attributes. text; return el ('div', style: blockStyle, className: props.className, text);,);
Dynamisch blok
Het dynamische blok heeft de Bewerk methode, maar de opslaan methode zal terugkeren nul. We hebben het niet nodig opslaan methode hier omdat we een PHP-callback-functie definiëren om het dynamische blok aan de voorzijde weer te geven.
We hebben een terugroepactie geregistreerd guten_tuts_dynamic_alert voor:
 'guten_tuts_dynamic_alert')); // ... 
Deze callback zal ook een parameter ontvangen $ attributen. Dit is een array van alle geregistreerde kenmerken. Het gedrag lijkt sterk op het registreren van een shortcode.
De functie guten_tuts_dynamic_alert ziet er zo uit:
 
 
De uitvoer is slechts een div element met wat tekst.
Voor zover ik kan nagaan, kunnen we de RichText niet gebruiken voor dynamische blokken omdat de kenmerken niet worden bijgewerkt. Als ik het mis heb, laat het me dan weten in de comments!
We zullen een regulier gebruiken invoer om de tekst van de waarschuwing in te voeren. Omdat we geen a hebben opslaan methode hier, ik heb het attribuut gedefinieerd tekst als een eenvoudige string.
registerBlockType ('guten-tuts / alertdynamic', title: __ ('Guten Tuts - Dynamic Alert'), pictogram: 'megaphone', categorie: 'layout', attributen: text: type: 'string', selector: 'div',,, bewerken: function (props) var content = props.attributes.text; blockStyle ['width'] = '100%'; function onChangeText (e) var newText = e.target.value ; props.setAttributes (text: newText); return el ('input', className: props.className + 'widefat', onChange: onChangeText, value: content, isSelected: props.isSelected, style: blockStyle) ;, opslaan: functie (rekwisieten) return null;,);
Je zult een gewone zien invoer die een achtergrondkleur en een andere stijl heeft dan de Rijke text blok. Natuurlijk kun je dat veranderen en dezelfde stijlen nabootsen.
Omdat onze PHP-gegenereerde waarschuwing een andere achtergrondkleur heeft dan de kleur die is gedefinieerd in onze JavaScript-code, zien we ook het verschil aan de voorzijde.
Conclusie
De voorbereiding van uw plug-in voor Gutenberg kan veel werk zijn. Maar aangezien Gutenberg net zo uitbreidbaar is als de rest van WordPress, heb je veel flexibiliteit om de functies van je plug-in in Gutenberg te ondersteunen.
Ga vandaag nog aan de slag door Gutenberg te installeren en te testen met uw plug-in. 



		
			
	   
	




Code