Skapa anpassat Gutenberg-block – Del 6: Verktygsfält

I det här inlägget lär vi oss hur du lägger till WordPress verktygsfält i vårt block, dvs för justering och blockjustering. Vi kommer också att lära oss att lägga till våra egna verktygsfält med våra egna knappar för att göra anpassade åtgärder.

Lägga till verktygsfält

För att lägga till något i verktygsfältet för vårt block måste vi linda in det vi vill ha i det i en komponent som heter BlockControls(från wp.blockEditor). Inuti denna komponent kan vi lägga till antingen en av WordPress-komponenterna för standardverktygsfälten vi känner från andra block (till exempel justering) eller så kan vi lägga till vårt eget verktygsfält.

Som standard kommer ett block att ha ett verktygsfält som endast innehåller blockets ikon (för Transformera till funktionalitet) och blockmenyn för att t.ex. ta bort blocket. Vi kan inte ta bort dem, men vi kan lägga till våra egna knappar och verktygsfält däremellan.

Vissa WordPress-komponenter kommer dock att lägga till sina egna verktygsfält. Från och med nu visar vårt block ett verktygsfält för textformatering som kommer från RichTextkomponenten vi lagt till.

Lägga till ett verktygsfält för blockjustering

Blockjusteringsverktygsfältet finns på praktiskt taget alla WordPress-blocktyper, så låt oss lägga till det i vårt block också. Bakom kulisserna finns det en komponent BlockAlignmentToolbarsom vi skulle kunna lägga till, men jag rekommenderar att inte göra det. Att använda det kräver att du manuellt hanterar klasserna för blockjustering och ser till att blocket utökar sin bredd i editorn när du väljer "Wide Width" eller "Full Width". Som tur är har WordPress gjort det väldigt enkelt att implementera det, helautomatiskt.

PS: Det aktiva temat måste aktivt ha lagt till temastöd för dessa två blockjusteringar. Du kan lägga till stöd för dessa genom att ha add_theme_support('align-wide')i after_setup_themekroken.

Vi kan lägga till en ny egenskap till vår objektkonfiguration i registerBlockType(), kallad supports. Det finns några andra funktioner men det vi är intresserade av här är align. Vi kan antingen ställa alignin för trueatt lägga till alla möjliga justeringar, eller så kan vi tillhandahålla en uppsättning av exakt vilka justeringar vi tillåter för vårt block.

Vilket ger oss detta i redaktören:

Om du till exempel vill förhindra att någon använder Wide Width eller Full Width, kan du tillhandahålla en array och utesluta dessa två. Namnen på blockjusteringarna är följande: left, right, center, wide, och full.

supports: {
    align: ['left', 'right', 'center']
},

Behöver du standardjustering?

Som standard får blocket ingen blockjustering. Om du vill kan du ställa in en standard genom att skapa ett attribut med nyckeln align, ställa in typen på stringoch ställa in standarden där. WordPress kommer automatiskt att koppla detta attribut till blockjusteringen.

attributes: {
    align: {
        type: 'string',
        default: 'center'
    }
},
supports: {
    align: true
},

Med detta när ett nytt block av vår typ skapas, centreras standardblockinriktningen.

Blockera inriktning styling röra? Inte vårt fel

Obs: Standardblockstilen från WordPress kommer att störa flödet av ditt inläggsinnehåll när du använder vänster och höger blockjustering. Samma sak händer med andra blocktyper från WordPress också och är inte enbart vårt blocks problem. Detta orsakas av att lägga till float till elementet, vilket kollapsar det överordnade elementet. Tro mig, jag har försökt konstruera blocket för att undvika detta problem. Det enda jag har funnit fungera korrekt utan att krångla med de andra blockjusteringarna är genom att lägga till styling i editorn och justera flytstilen.

Oavsett vilket har WordPress gjort det ganska enkelt att implementera blockjustering. Låt oss nu titta på andra verktygsfält vi kan använda.

Lägga till ett verktygsfält för textjustering

Om du hellre vill ha verktygsfältet för textjustering kan du göra detta istället för blockjustering – i detta verktygsfält har vi bara vänster-, centrerings- och högerjustering. Faktum är att du kan använda både textjustering och blockjustering tillsammans – de fungerar separat. För att inte förvirra användare kan du till exempel bara lägga till stöd för bred- och fullbreddsblockjustering, och använda verktygsfältet för textjustering för att styra vänster-, mitt- eller högerjusteringen. Genom att göra detta undviker du ovan nämnda problem med blockflödet i editorn. Det är upp till dig hur du vill att ditt block ska fungera.

WordPress har en komponent för att mata ut verktygsfältet för textjustering, men ingen automatisk hantering av att lägga till rätt klasser för att faktiskt göra innehållet justerat – både inuti editorn och frontend (såvitt jag har hittat åtminstone!). Vi måste manuellt lägga till och uppdatera ett attribut för textjusteringen.

Lägger till BlockControlsochAlignmentToolbar

Låt oss äntligen lägga BlockControlstill vår editfunktion för vår produktion i verktygsfältet. Komponenten för textjustering är AlignmentToolbarfrån wp.blockEditorpaketet.

Observera att jag har uteslutit innehållet i allt vi skapade InspectorControlsi föregående steg för att förkorta koden.

Mellan raden #37till #42finns hela innehållet i vårt verktygsfält (förutom blockjusteringen som automatiskt läggs till av supportsegenskapen och textformateringen som läggs till av våra RichTextkomponenter). Vi använder BlockControlsför att komma åt verktygsfältet, och inuti lägger vi till AlignmentToolbarkomponenten.

Som vi har gjort flera gånger med ingångar tillhandahåller vi en valueprop för att visa det sparade värdet och en onChangeprop för att uppdatera vårt attribut till AlignmentToolbarkomponenten. Attributet vi kommer att använda för att lagra den valda textjusteringen definieras som textAlignmentoch måste vara typ string. Som vanligt kan du tillhandahålla ett defaultför att säkerställa att nyskapade block får en standardjustering.

För att säkerställa att blocket både matar ut anpassningsinformationen och även blir formaterad korrekt (så att vi faktiskt ser texten ändra justering) både i editorn och i frontend, måste vi manuellt ställa in rätt klass på wrapping div. I både editoch savejag definierar en variabel som kontrollerar om attributes.textAlignmentär satt. Om det är så bygger jag klassnamnet efter WordPresss standarder för textjusteringar, vilket är "has-text-align-(left|center|right)". Med den här klassen kommer WordPress att applicera sin stil på vårt block och se till att vårt block visuellt justeras korrekt, både i editorn och frontend.

Lägga till anpassade verktygsfält med våra egna knappar

Du kan också lägga till dina egna knappar i verktygsfältet för att göra vad du vill när du klickar på dem. För att göra detta vill du lägga till komponenten Toolbaroch inuti detta element lägga till en IconButton(båda i wp.componentspaketet). Allt inom BlockControlssåklart.

Obs: Enligt WordPress är Gutenbergs ändringslogg utfasad IconButtontill förmån för att använda Button. Men jag verkar inte få en ikon att visas med Buttonkomponenten oavsett vad jag gör, även om den ska stödja det. Så från och med nu kommer jag att använda IconButton.

Du kan självklart kombinera flera verktygsfältskomponenter inom BlockControls. Med koden nedan lägger vi till verktygsfältet för textjustering och vårt anpassade verktygsfält med en knapp efter.

IconButton-komponenten accepterar en WordPress-dashikonikon eller en SVG till rekvisitan icon. Vi kan tillhandahålla några andra rekvisita som classNameoch label(kommer att visas i verktygstipset när du håller muspekaren över knappen). Den rekvisita vi är mest intresserad av är uppenbarligen den onClickrekvisita som avfyras när knappen klickas. Här kan vi tillhandahålla en funktion och i princip göra vad vi vill. Möjligheterna är oändliga och beror på vad du vill göra. I koden ovan konsolloggar jag helt enkelt något när knappen klickas. När vi går vidare i den här handledningsserien kommer du förmodligen att få några idéer om hur du får din anpassade knapp att göra vad du vill att den ska göra.

Det här är vad vi har gjort hittills. I nästa steg i serien börjar vi titta på mer avancerade saker och vi kommer att lära oss hur vi skapar våra egna komponenter för att utnyttja statliga och andra fördelar.