Skapa anpassat Gutenberg-block – Del 5: Inspektörsinställningar
I de föregående stegen lärde vi oss grunderna i hur man renderar komponenter och attribut i ett block. I det här steget kommer vi att fokusera på vad WordPress (åtminstone i kod) kallar Inspector: sidofältet till höger i editorn. Vi kommer att beröra några nya komponenter som är vettiga att placera i sidofältet och hur man hanterar dessa.
Inspektör/sidofältskomponent
För att infoga dina anpassade inställningar och HTML i Inspector sidofältet kommer du att linda in allt i en komponent som heter InspectorControls. Vad du än lägger in i den här komponenten kommer att matas ut i sidofältet och inte i själva blocket/redigeraren. Du kan i princip lägga komponenten och dess innehåll överallt i returen av editfunktionen.
Förutom det skulle du hantera inställningar i sidofältet som de var inne i blocket. Varje inställning kräver ett attribut, och du laddar och uppdaterar attributen på samma sätt.
Låt oss först ta en snabb titt på hur vårt blocks sidofält ser ut (när vårt block är aktivt i editorn), baserat på koden vi hamnade i föregående steg.
Alla block kommer som standard att visa blockets ikon, namn och beskrivning, och avsnittet Avancerat – komprimerat. Inuti Advanced hittar du en textinmatning för att tillhandahålla CSS-klass för blocket.
Lägger till en sidofältssektion och några inställningar
Sidofältet är uppdelat i sektioner (kallas paneler i kod), och för optimal design och funktionalitet (inklusive öppen kollaps funktionalitet) bör vi använda WordPress komponenter för att mata ut paneler på rätt sätt.
Använd komponenten PanelBodyför att lägga till en sektion (de som du kan öppna eller komprimera), som finns i wp.componentspaketet. Komponenten accepterar några rekvisita, till exempel för titeln och om panelen ska vara öppen eller stängd som standard. Du kan också tillhandahålla anpassad klass, ikon och bifoga en händelsefunktion till öppna-stäng-utlösaren.
Inom PanelBodyWordPress rekommenderar sedan att du använder PanelRowkomponenten som fungerar som generiska behållare i panelen – för att säkerställa att designen effektiviseras. Den här komponenten tillämpar automatiskt viss marginal och flex radstil för ditt innehåll. På grund av " flex-direction: row" stylingen bör du linda in varje inställning i en PanelRoweller så kan du hoppa över den helt och ta ansvar för att styla den själv med divs och så.
Lägga till en panel och inställningar
Låt oss lägga till en sidofältspanel för vårt block med några inställningar inuti, bara för att se det i praktiken. Vi lägger till en växlingskontroll, en vald ingång, en färgväljare och en kryssruta – bara för att få lite erfarenhet av olika typer av ingångskomponenter. Jag har lämnat blockinnehållet (med de två RichTexts) och savefunktionen precis som tidigare.
Som alltid börjar vi med att förstöra de komponenter och funktioner vi vill använda. Inuti attributesdefinierar registerBlockType()vi ett attribut per ingång och matchar typen – till exempel förväntar växlingskontrollen ett booleskt värde och eftersom värdena i rullgardinsmenyn är strängar bör det attributet också vara en typsträng.
Vid raden #41startar vi InspectorControlskomponenten, och allt från den punkten till raden #80kommer att visas i sidofältet. Resten kommer att dyka upp i själva redigeraren, och jag har inte gjort några ändringar där.
Inuti skapar vi först en panel med PanelBodyoch med propen initialOpeninställd på sant säger vi till Gutenberg att den här panelen ska öppnas som standard. Och sedan är det upp till oss vad vi ska lägga till i varje PanelRow.
För komponenten ToggleControlanvänder vi samma rekvisita som vi har gjort tidigare med textinmatning, förutom att valuevi istället för props tillhandahåller attributvärdet inuti prop checked. Detta gäller alla indata som förväntar sig ett markerat attribut i vanlig HTML, till exempel kryssrutor. För radioknappar skulle du använda rekvisitan selectedeftersom detta är vad du också skulle använda i vanlig HTML. Tänk på att attributet för denna ingång måste vara av typen boolean.
När det gäller CheckboxControlhanteringen av en singular kryssruta fungerar exakt samma sak som ToggleControl– den returnerar ett boolesk värde oavsett om det är markerat eller inte.
Den SelectControlgenererar en rullgardinsmeny för val och förväntar sig de möjliga valen som en array i rekvisiten options. Varje element måste vara ett objekt med egenskaperna labeloch value. Detsamma gäller för kryssrutor och alternativknappar (RadioControl). Under normala omständigheter skulle du förmodligen generera valen som en variabel utanför HTML-utdata.
Du kanske märker att de ColorPickerfungerar lite annorlunda än de andra eftersom detta är en mer komplex komponent och inte en vanlig HTML-inmatning. Ange rekvisiten colorför den sparade färgen och använd istället för onChange(avfyras en gång när du klickar men också varje gång värdet ändras medan du drar – vilket kan resultera i många bränder) onChangeComplete. Den rekvisita som returneras i denna händelse är också ett objekt där vi måste bestämma vilken del vi vill spara i vårt attribut. I det här exemplet vill vi spara hex-värdet (utan alfa/opacitet), så inuti setAttributes()extraherar vi hexegenskapen för det colorreturnerade objektet. Det är också därför vi lägger till fastighetendisableAlphaatt ta bort alfakanalens användargränssnitt (för att kontrollera opaciteten) eftersom det inte är meningsfullt att erbjuda användaren detta när vi aldrig sparar opacitetsvärdet.
Var och en av komponenterna har en labelrekvisita tillgänglig förutom colorpicker. Om du vill skriva ut en etikett eller text innan den måste du pilla runt med HTML eller styling för att säkerställa att det ser bra ut.
Du kan självklart lägga till hur många paneler du vill, lägg bara till ytterligare en PanelBodykomponent efter den föregående.
Om du är intresserad av att lära dig mer om att lägga till blockinställningar har jag separata handledningar för mer komplexa inställningar och komponenter för Inspector; Hur man lägger till ett bildval och hur man lägger till en färginställningspanel.
Hanteringsave
Jag har lämnat savefunktionen som den var tidigare. Det är upp till dig och allt beror på vad inställningarna styr i utgången. Du vet redan hur du får fram värdena för varje inställning. Låt oss som ett exempel anta att det booleska attributet activateLasersstyr om ett anpassat HTML-element renderas eller inte. Om attributet är trueen div ska matas ut, annars inte. Du kan göra det med traditionell if-check eller använda JSX:s inline ifoch &&operator. Läs mer om detta i Reacts guide för villkorlig rendering.
Eftersom vi använder RichTextdenna utdata skulle den inte vara synlig i editorn, men den kommer att visas i frontend.
Du hittar fler komponenter i wp.components Github-repo. De flesta av dessa mappar bör ge dig ett readme med viss dokumentation om hur du använder det. Jag lärde mig det mesta av detta genom att titta i denna repo och även på de viktigaste WordPress-komponenterna hur de gjorde det.
I nästa steg i serien kommer vi att fokusera på hur man styr blockets verktygsfält. Vi lär oss hur man hanterar till exempel ett blocks justering och lägger till anpassade knappar i verktygsfältet.