WordPress Gutenberg Block API Extending Blocks

Välkommen tillbaka till vår serie om att skapa anpassade block med WordPress Gutenberg Block API. Denna handledning handlar om att utöka det slumpmässiga bildblock som vi skapade i föregående inlägg. Vi har så långt som att lägga till en nedrullningskontroll för att välja en bildkategori. Vi fortsätter med detta genom att lägga till fler blockalternativ för att möjliggöra ytterligare anpassning.

I synnerhet ser vi hur man lägger till blockinställningar i olika delar av redigeraren. Det är rätt, du är inte bara begränsad till att lägga till blockkontroller direkt på själva blocket!

Den slutliga my-custom-blocket plugin-kod är tillgänglig för nedladdning. Klicka bara på länken i sidofältet till höger och ladda ner zip-filen till din dator och installera den som du skulle något annat WordPress-plugin. Du kan också hitta källkoden i vår GitHub repo.

Gutenberg-utvecklingen spricker på en rättvis takt, och det har skett en ny signifikant release sedan den senaste handledningen publicerades. Den version av Gutenberg som används i denna handledning har uppdaterats till 3.0.1, och en del av redigeringsgränssnittet kan se lite annorlunda ut än skärmdumpar som visas i tidigare handledning i denna serie.

Låt oss förlänga!

Nedrullningskontrollen som vi lade till i föregående handledning placerades inne i redigeraren, direkt under markeringen för den slumpmässiga bilden. Detta var bekvämt, men vi har också andra val.

Vi kan också lägga till blockkontroller till en popup-verktygsfält (som visas när ett block är valt) och en block inspektionspanel.

I skärmdumpen ovan kan vi se verktygsfältets kontroller för styckningsblocket [1], liksom de tillhörande kontrollerna i panelen inspektören [3]. Plats [2] visar rullgardinsmenyn för vårt slumpmässiga bildblock.

Du kanske redan tänker på vilken plats du vill välja för dina egna blockinställningar, men du behöver inte välja bara en av dessa platser. De utesluter inte varandra. Till exempel, för styckningsblocket (visas ovan) kan du se att inställningarna delas mellan blockinspektionspanelen och verktygsfältet. 

Dessutom är det helt okej att ha två separata kontroller på olika platser i redaktören som påverkar samma miljö. Du kanske inte vill göra det för ofta, men det är användbart att veta hur man implementerar det, så vi får se hur man gör det lite senare.

Direkt blockinställningar

Låt oss börja med det enklaste sättet att lägga till funktionalitet i ditt block, som ligger direkt inuti blocket redigera fungera. Vi har redan använt detta tillvägagångssätt för att lägga till vår slumpmässiga bild nedrullningskontroll eftersom det kräver mycket lite extra ansträngning.

Vi kommer inte att övergå till att lägga till nya kontroller till själva blocket, men vi kan justera nedåtgående kontrollens beteende för att vara lite mer intuitivt. För att göra det så nära som möjligt till frontänden kan vi begränsa nedrullningen från att visas om inte blocket är valt.

Låt oss göra denna ändring nu. Om du följer den här handledningen från sista gången öppnar du den /my-custom-block/src/random-image/index.js i din favoritredigerare. Detta är den viktigaste JavaScript-filen för vårt slumpmässiga bildblock.

En av rekvisita som skickas till alla block är är vald, som håller status för blockets synlighet. Vi kan använda detta för att skickligt visa kategorin rullgardinsmeny.

För det första dra ut är vald från rekvisita objekt och lägg till den i listan över konstanter inuti redigera fungera. Detta är användbart så att vi kan referera det till ett förkortat namn (dvs.. är vald hellre än props.isSelected).

const attribut: category, setAttributes, isSelected = rekvisita;

Därefter kan vi använda den här egenskapen för att avgöra om rullgardinsmenyn ska visas:

 är vald && ( 
  djur Arkitektur Natur människor Tech  
 )

Detta är ett kortfattat sätt att testa det är vald är sant, eftersom vi inte kan använda en fullblåst JavaScript om uttalande inuti JSX-koden.

Se till att du fortfarande tittar på filer för ändringar så att alla blockkällkod (JSX, ES6 +, Sass, etc.) transpileras till giltigt JavaScript och CSS. Om du inte tittar på filer för ändringar, öppnar du ett kommandoradsfönster i my-custom-blocket plugin root mapp och skriv in npm start.

Öppna Gutenberg-redigeraren och lägg till det slumpmässiga bildblocket. Den här gången är nedrullningskontrollen inte synlig om blocket ännu inte har klickats.

Detta ger blocket en mycket mer interaktiv känsla för det.

Verktygsfält kontroller

Om du har använt några av de kärnan Gutenberg-blocken (t.ex. styckningsblocket) kommer du att känna till verktygsfältets inställningar. Så snart punktblocket är valt visas en popup-verktygsfält som innehåller knappar för att formatera texten. Denna typ av kontroll är utmärkt för blockinställningar som har en typ av på / av-typ, till exempel textjustering eller formatering som fet eller kursiv.

Vi använder kontrollpanelen för inbyggd anpassning för att tillåta att kontrollen med nedrullning av bildkategori lämnas (standard), höger eller mittlinjejusterad.

Först måste vi dra ut AlignmentToolBar och BlockControls komponenter från wp.blocks. Dessa tillåter oss att visa justeringskontroller inuti ett flytande verktygsfält ovanför vårt block när det väljs. Dessa är en del av kärnkomponenterna som vi kan använda i våra egna block.

const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;

De BlockControls komponent fungerar som verktygsfältbehållaren, och AlignmentToolbar är placerad inuti.

Vi behöver fortfarande koppla in uppriktningen av verktygsfältet manuellt, vilket vi kan göra genom att lägga till en ny categoryAlign attribut till lagringsblokjusteringsstatus (vänster, höger eller center).

Vår attribut objektet innehåller nu två inställningar.

attribut: kategori: typ: 'string', standard: 'nature', categoryAlign: typ: 'string' default: "

Standard för categoryAlign Attributet är en tom sträng, vilket leder till att ingen justering tillämpas som standard.

För att hänvisa till det nya attributet kan vi dra ut det här värdet i sin egen konstanta variabel på samma sätt som vi gjorde för rullgardinsmenyn kategori attribut.

const attribut: kategori, categoryAlign, setAttributes, isSelected = rekvisita;

Allt vi behöver göra nu är att släppa de två nya komponenterna in i redigera funktion och konfigurera egenskaperna.

  setAttributes (categoryAlign: value) /> 

Som du kan se allt vi behövde göra var att tilldela värde attribut av Alignmenttoolbar till categoryAlign ange och ringa setAttributes funktion närhelst en ny verktygsfältsknapp har klickats. Denna funktion uppdaterar i sin tur categoryAlign attribut och håller allt i synkronisering.

För att tillämpa anpassningsstilen på rullgardinsmenyn måste vi lägga till en stilegenskap i vårt formulärelement.

Observera att vi inte behöver den här kontrollen för att påverka något på framsidan, så vi behövde inte lägga till någon kod i blocket spara fungera.

Lägga till en inställningspanel

Block inspektörspanelen ger dig ett stort område för att lägga till blockkontroller och är ett utmärkt läge för mer komplexa kontroller.

Vi kommer att fokusera på att lägga till två nedrullnings kontroller till inspektionspanelen. Den första kommer att vara en dubblett av kategorin rullgardinsmeny för att välja typ av slumpmässig bild. Detta visar hur man har mer än en kontroll uppdatering av ett gemensamt attribut.

När en kontroll uppdateras uppdateras den automatiskt automatiskt också! I praktiken behöver du vanligtvis bara en kontroll per inställning.

Den andra nedrullningskontrollen låter dig välja det filter som tillämpas på den slumpmässiga bilden. Webbplatsen PlaceIMG stöder två typer av filter-gråskala och sepia-och vi kan välja mellan dem genom att helt enkelt lägga till sepia eller gråskale till HTTP-förfrågningsadressen. Om vi ​​inte anger ett filter returneras en standardfärgad bild.

Koden för de två nedgångarna är ganska lik, så vi lägger till dem tillsammans.

Låt oss först och främst definiera de nya blocken och komponenterna vi behöver.

const AlignmentToolbar, BlockControls, registerBlockType, InspectorControls = wp.blocks; const PanelBody, PanelRow = wp.components; const Fragment = wp.element;

Här är de nya variablerna InspectorControls, PanelBody, PanelRow, och Fragment, som alla används för att skapa inspektionspanelens gränssnitt.

De  komponent är väldigt användbar när du behöver returnera flera toppnivåelement från redigera eller spara funktioner men vill inte sätta ihop dem i ett element som kommer att matas ut.

 kommer inte att skriva ut någon markering alls på framsidan och fungerar som en osynlig behållare. Det är bara ett bekvämt sätt att returnera flera element på toppnivå och är ett alternativ till den tidigare metoden att återställa en rad element i stället.

Vi behöver bara lägga till ett nytt attribut som heter Imagefilter som den befintliga kategori attributet kan återanvändas.

attribut: kategori: typ: 'string', standard: 'nature', categoryAlign: typ: 'string', standard: ", imageFilter: typ: 'string'

Inuti redigera funktion måste vi lägga till en ny variabel med referenser till det nya attributet.

const attribut: category, categoryAlign, imageFilter, setAttributes, isSelected = rekvisita;

Att lägga till en blockinspektionspanel är överraskande enkelt. Den komponentstruktur vi ska använda är som följer:

  ...  ...    ...  ...   

De  komponent fungerar som block inspektör behållaren, och  definierar individuella hopfällbara sektioner. Inuti var och en av dessa kan du ha ett antal  komponenter, som i sin tur innehåller dina kontroller.

Vi har redan definierat markup för vår kategori nedrullningskontroll som vi kan återanvända. För att göra detta, sammanfatta det i en separat funktion:

funktion showForm () returnera (   djur Arkitektur Natur människor Tech   ); 

Den här funktionen kan då hänvisas när vi behöver den rullande kategorin kontrollen som gjorts. Markeringen för blockinspektionspanelen måste vara utanför blockmarkeringen, så vi kan använda  komponent för att pakka dem båda innan de returneras.

Därefter måste vi lägga till blockinspektörskomponenterna för kategorin och bildfiltret. Dessa måste definieras inuti  komponenter, och vi måste också definiera en ny återuppringningsfunktion för att hantera onChange händelse. Det här ligner mycket på kategorin rullgardinsmenyn från den sista handledningen, så det borde vara bekant för dig nu.

Att lägga allt detta tillsammans, redigera metodens lämna tillbaka funktionen ser nu ut så här:

lämna tillbaka (     Ange filter showForm ()   Ange filter 
  Ingen sepia Gråskale  
    
   setAttributes (categoryAlign: value) />   isSelected && (showForm ()) 
  );

Och den setFilter återuppringning definieras som:

funktion setFilter (händelse) const selected = event.target.querySelector ('# image-filter option: checked'); setAttributes (imageFilter: selected.value); event.preventDefault (); 

För att få den filtrerade bilden behöver vi uppdatera RandomImage komponent för att acceptera det nya filtervärdet varje gång nedrullningen ändras.

funktionen RandomImage (category, filter) if (filter) filter = '/' + filter;  const src = 'https://placeimg.com/320/220/' + kategori + filter; lämna tillbaka ; 

Lägg märke till hur vi använder den här nya komponentegenskapen i redigera metod för att skicka det nya filtervärdet till PlaceIMG.

Alla dessa kodändringar resulterar i att en ny blockinspektörspanel skapas med två nedrullningsreglage för att ändra bildkategori och filter.

För att få den nya filteregenskapen för frontänden också behöver vi bara uppdatera spara metod. 

spara: funktion (rekvisita) const attribut: category, imageFilter = rekvisita; lämna tillbaka ( 
  
 ); 

Slutsats

I det här inlägget täckte vi tre olika metoder för att lägga till inställningar i ett block:

• popup-verktygsfältet
• direkt på själva blocket
• block inspektör panel

Vi lade bara till grundläggande inställningar för varje block, men vi kunde enkelt ta det här ännu mer genom att lägga till stöd för flera bilder, lägga till bildtexter och styra stilar, t.ex. kantfärg, radie eller slumpmässig bildstorlek.

Jag är säker på att du förmodligen fått några idéer för att skapa egna egna block. Jag skulle gärna höra vilken typ av block du skulle hitta användbar i dina egna projekt!

Vi har precis börjat med Gutenberg här på Envato Tuts +, så om det finns några speciella aspekter av Gutenbergs blockutveckling, skulle du vilja se mer omdjupad i framtida handledning, var snäll och låt oss veta via kommentarerna.