När WordPress blockredigerare, eller Gutenberg, lanserades i december år 2018 visste vi inte vad vi skulle förvänta oss. Vi hade visserligen haft gott om tid på oss att leka med betaversionen, men vi kunde inte förutsäga hur smidigt den faktiska lanseringen skulle gå. Vi förutsåg inte heller hur ivrigt användare och utvecklare skulle omfamna den nya redigeraren.
Vi har sett hur Gutenberg-redigeraren har fått en enorm tillväxt under de ca två år som gått sedan vi först publicerade det här inlägget. Den har formats från en produktlansering som nätt och jämnt var genomförbar (MVP) till ett mer moget projekt som närmar sig målet att skapa Full Site Editing för WordPress.
Med dessa förändringar i åtanke, har vi återbesökt Gutenberg-redigeraren för att visa dig hur den fungerar idag, och även vilken utveckling som väntar i framtiden.
Vad är blockredigeraren Gutenberg?
Gutenberg, alternativt känd som ”WordPress blockredigerare” eller bara ”WordPress redigerare”, är WordPress innehållsredigerare som introducerades i WordPress 5.0, och släpptes den 6 december 2018.
Det är standardredigeraren som alla WordPress-webbplatser använder om man inte har inaktiverat den, och ser ut ungefär så här:
Den stora skillnaden mellan WordPress-redigeraren Gutenberg och den tidigare WordPress-redigeraren (nu kallad ”klassisk redigerare” eller ”TinyMCE-redigerare”) är en ny blockbaserad metod för att skapa innehåll.
Med Gutenberg är varje element i ditt innehåll ett block, vilket möjliggör en enkel manipulering av innehåll. Varje stycke är ett block, varje bild är ett block, varje knapp är ett block – ja du fattar!
Tredjepartsutvecklare kan även skapa anpassade block, vilket gör att man slipper WordPress krångel med kortkoder. Låt oss säga att du vill bädda in ett kontaktformulär. Istället för att behöva lägga till en kortkod (t.ex. `[your-form-shortcode]`)) som du gjorde tidigare, kan du nu bara släppa ner blocket för ditt formulärs plugin.
Utöver detta kan du även använda block för att skapa mer komplexa layouter. Du kan exempelvis ställa in en design med flera kolumner eller gruppera block för att skapa en sammanhängande sektion.
När vi djupdyker i hur du använder blockredigeraren får du en bättre uppfattning om hur du kan använda block för att förbättra ditt innehållsskapande.
Gutenberg är inte bara en innehållsredigerare
En viktig sak att förstå är att Gutenberg-projektet syftar till att vara mer än bara en innehållsredigerare.
I juli år 2021 är Gutenberg fortfarande bara en innehållsredigerare (för det mesta). Men det långsiktiga målet för Gutenberg är att landa i något som kallas Full Site Editing.
Tanken med Full Site Editing är att du ska kunna designa 100% av din webbplats med Gutenberg-redigeraren. I stället för att vara begränsad till rubrikalternativen som inkluderas i ditt WordPress-tema, kommer du exempelvis att kunna nyttja Gutenberg för att utforma anpassade rubriker med blockredigeraren.
Den här typen av funktioner är inte tillgängliga ännu, men det är på gång, och vi har några ”proof of concept” -projekt som vi kommer att titta på i slutet av det här inlägget.
Fördelar och nackdelar med Gutenberg vs populära alternativ
Efter att ha kunnat använda WordPress blockredigerare i över två år har vi fått en bra uppfattning om några av fördelarna och nackdelarna med Gutenberg vs andra lösningar.
Det finns två huvudalternativ för att skapa innehåll på WordPress:
- WordPress TinyMCE-redigerare: Detta är den klassiska redigeraren som WordPress använde före WordPress 5.0.
- Sidbyggar-plugins: Det här är plugins från tredje part som lägger till en visuell, dra-och-släpp-design till WordPress.
Generellt erbjuder den klassiska TinyMCE-redigeraren en mer avskalad Word-liknande upplevelse, medan sidbyggarna ger en mycket mer flexibel och visuell designupplevelse med dra och släpp-funktioner.
Om vi rangordnade redigerarna baserat på deras designflexibilitet skulle det se ut ungefär så här:
Klassisk TinyMCE-redigerare (minst flexibel) < Gutenberg < Sidbyggare (mest flexibla)
Låt oss nu prata om några av för- och nackdelarna med blockredigeraren Gutenberg vs alternativen.
Gutenberg vs Klassisk Redigerare: Fördelar och nackdelar
Låt oss först jämföra Gutenberg med den klassiska TinyMCE-redigeraren.
Fördelar:
- Gutenberg erbjuder en mer visuell designbakgrund
- Du behöver inte använda kortkoder för att bädda in innehåll – du får ett enhetligt blocksystem
Nackdelar:
- Vissa tycker att skrivandet i Gutenberg är lite otympligt eftersom varje stycke är ett separat block. Det kan vara svårt att manipulera text, för långa inlägg. Det kan vara smidigare att skriva i en annan redigerare och klistra in texten i Gutenberg när du är klar.
- Även om Gutenbergs prestanda har förbättrats avsevärt, kan den fortfarande bli långsam av massiva inlägg. Detta är mindre troligt med den klassiska redaktören.
Om du tycker att den klassiska TinyMCE-redigeraren passar dina behov bättre kan du inaktivera Gutenberg-redigeraren helt och hållet.
Gutenberg vs sidbyggare: Fördelar och nackdelar
Låt oss nu ta en titt på hur Gutenberg står sig mot plugins från tredjepart.
Fördelar:
- Gutenberg är en kärnfunktion, vilket innebär att du inte behöver oroa dig för kompatibilitetsproblem.
- Eftersom det är en kärnfunktion kan alla utvecklare bygga in Gutenberg-stöd i sina plugins, vilket förbättrar kompatibiliteten.
- Gutenberg matar ut en renare och mer lättviktig kod. En design som är skapad med Gutenberg kommer vanligtvis att laddas snabbare än en design som är skapad med en sidbyggare.
Nackdelar:
- Gutenberg erbjuder inte samma korrekta visuella redigering som en sidbyggare. Den är mer tillgänglig än den klassiska redigeraren, men fortfarande inte lika sömlös som en sidbyggare.
- Sidbyggare ger dig fortfarande mer flexibla design- och layoutalternativ.
- De flesta sidbyggarna erbjuder mycket mer flytande och flexibla dra och släpp-rörelser.
Tankar om jämförelsen
För de flesta användare duger flexibiliteten i Gutenberg gott och väl.
De flesta människor behöver inte flexibiliteten hos en sidbyggare för sitt innehåll, särskilt när det gäller blogginlägg. Men det är samtidigt trevligt att snabbt kunna ställa in en flerkolumnsdesign eller infoga en knapp, vilket inte är så enkelt med den klassiska redigeraren.
Med detta i åtanke, ska vi nu gå in på hur du kan börja använda Gutenberg.
Hur man använder WordPress-blockredigeraren Gutenberg
Nu när du vet lite om Gutenberg, ska vi gå igenom hur du kan använda den för att börja skapa innehåll.
Vi börjar med att ta en titt på gränssnittet och går sedan gradvis igenom mer och mer avancerade sätt att använda redigeraren och förbättra dina arbetsflöden.
Gränssnittet för blockredigeraren Gutenberg
När du öppnar redigeraren kommer den att dölja WordPress-instrumentpanelens sidofält och ge dig en helskärmsupplevelse:
Det finns tre huvuddelar i denna redigerare:
- Innehåll: Ditt innehåll tar upp det mesta av skärmen. Du ser en visuell förhandsgranskning av hur det kommer att se ut på din webbplats frontend. Det är inte 100% exakt, men du bör få en ganska bra uppfattning om den slutliga designen.
- Det övre verktygsfältet: Verktygsfältet högst upp hjälper dig att infoga nya block, ångra/göra om och komma åt andra viktiga inställningar
- Sidofält: Sidofältet innehåller två flikar. Med fliken Inlägg kan du konfigurera inställningar på inläggsnivå som dess kategorier, taggar, utvalda bilder Block-fliken visar inställningarna för det block som du har valt, men mer om detta senare.
För att skapa en mer uppslukande skrivupplevelse kan du dölja sidofältet genom att klicka på verktygs-ikonen i det övre högra hörnet. För att få tillbaka sidofältet behöver du bara klicka på verktygs-ikonen igen:
Så här ser redigeringsgränssnittet ut om du använder det nya standardtemat Twenty Twenty-One:
Lägga till block
Om du vill lägga till vanlig stycketext i inlägget kan du bara klicka och skriva. Varje gång som du trycker enter skapar redigeraren automatiskt ett nytt styckeblock.
För andra typer av innehåll måste du infoga ett nytt block. Du kommer att nyttja block för bilder, knappar, videoinbäddningar osv.
Om du vill lägga till ett nytt block kan du klicka på en av plusikonerna i gränssnittet. Huvudikonen för blockinsättningar finns i det övre vänstra hörnet, men det finns även andra ikoner i gränssnittet som öppnar ett mindre blockinfogningsgränssnitt:
Börja med att placera muspekaren där du vill infoga det nya blocket. Om du exempelvis vill lägga till ett nytt block under knappen kan du klicka under knappen och sedan klicka på +-ikonen.
Du bör se en sidopanel som visar alla tillgängliga block, indelade i olika kategorier. Du kan antingen söka efter ett visst block eller helt enkelt välja ett alternativ i listan. När du håller muspekaren över ett block visas en beskrivning av vad det gör och en förhandsgranskning.
För att infoga blocket behöver du bara klicka på det. Om du exempelvis vill infoga en vanlig bild klickar du bara på bildblocket:
Du kan sedan följa anvisningarna för att ladda upp en bild eller välja en befintlig bild från mediebiblioteket.
Viktiga formateringsalternativ
Om du vill välja grundläggande formateringsalternativ för dina block får du ett flytande verktygsfält som visas när du klickar på ett block.
Om du formaterar vanlig text är det på det här stället som du kan:
- Lägga till fetstil eller kursiverad stil
- Infoga länkar
- Ändra justeringar
- Lägga till formatering, exempelvis infogad kod, genomstrykning och understreck
Låt oss exempelvis säga att du vill infoga en länk i ditt innehåll. Du väljer först den specifika text som du vill länka – i vårt exempel är det ”För andra typer av innehåll”. Du kan sedan klicka på länkikonen i verktygsfältet för att öppna alternativen för länkinfogning:
Konfigurera avancerade blockinställningar
Alla block som du infogar har ytterligare inställningar i sidofältet. Vissa block har några få inställningar, medan andra ger dig flera alternativ för att styra design, layout, funktionalitet osv.
Om du vill öppna ett blocks inställningar klickar du på blocket i redigeraren för att markera det. Gå sedan till Block-fliken i sidofältet för att se dess inställningar.
Nedan kan du se inställningarna för knappblocket, som är ett av de mer flexibla blocken. Du kan ändra färg, göra det bredare och mycket mer.
När du gör ändringar i ett blocks inställningar ser du ändringarna direkt i redigeraren.
Som jag nämnde tidigare kommer varje block att ha inställningar som är unika för just det blocket. Om du exempelvis öppnar inställningarna för vanlig stycketext får du endast några grundläggande typografi- och färgalternativ. Nedan kan du se att vi kunde använda en färgbakgrund för att markera lite text:
Arrangera om block
Förutom att du kan använda kopiera och klistra in (vilket du kan göra för text precis som i alla andra redigerare), erbjuder Gutenberg två huvudsakliga sätt att arrangera om block.
Om du exempelvis vill flytta ett block uppåt eller nedåt några positioner kan du använda upp- eller nedpilarna i det flytande verktygsfältet.
För omfattande rörelser kan du använda dra och släpp. Om du vill dra och släppa ett block måste du klicka på ”sex punkts”-ikonen till vänster om pilarna.
När du klickar och håller musen på den ikonen kan du dra blocket vart som helst på sidan:
Bädda in innehåll från andra källor
Gutenberg levereras med dedikerade block för att bädda in innehåll från tredjepartskällor som YouTube, Vimeo, Soundcloud, osv. Du hittar alla dessa alternativ i avsnittet Inbäddningar i blockinfogaren.
Om du exempel vill bädda in en YouTube-video behöver du bara:
- Lägg till det dedikerade YouTube-blocket.
- Klistra in den direkta webbadressen i videon.
- Klicka på Bädda in.
Du bör sedan se en förhandsgranskning av den inbäddade videon i redigeraren.
Skapa layouter med flera kolumner eller grupper
Som vi nämnde tidigare är en av de största fördelarna med blockredigeraren att du kan skapa mer komplexa layouter utan att behöva förlita dig på anpassad kod eller kortkoder. Detta var inte möjligt med den äldre TinyMCE-redigeraren.
Blockredigeraren levereras med två standardblock som hjälper dig att göra detta:
- Kolumner: Skapa en layout med flera kolumner.
- Grupper: Gruppera flera block. Du kan exempelvis använda detta för att ange en bakgrundsfärg för en hel sektion som visas bakom många block.
Båda dessa block arbetar med principen ”inkapsling” av block, vilket innebär att du kommer att placera ett eller flera block inuti ett annat block.
Vi kommer att visa dig ett exempel med kolumnblocket, men samma grundläggande princip gäller för gruppblocket.
Låt oss säga att du vill skapa en layout med två kolumner där kolumnen till vänster har lite vanlig stycketext och kolumnen till höger har en knapp.
För att komma igång använder du blockinfogaren för att lägga till kolumnblocket. Du kommer att få en fråga om önskad layout:
Vi väljer en layout med två kolumner på 50/50 för det här exemplet. Med den ser du två lika stora rutor med +-ikoner inuti. Om du vill infoga innehåll kan du klicka på +-ikonen för att öppna blockinfogningsgränssnittet:
När du har lagt till det första blocket i en kolumn kan du trycka på +-ikonen för att infoga ytterligare block. Du kan även dra och släppa ett block som finns utanför kolumnstrukturen i kolumnen.
10 användbara Gutenberg-tips för att arbeta mer produktivt
Nu när du har en grundläggande förståelse för hur Gutenberg fungerar, ska vi gå igenom några värdefulla tips och tricks som hjälper dig att använda blockredigeraren mer effektivt.
1. Använd / (Framåt snedstreck) för att snabbt infoga block
Om du behöver infoga många block kan det bli lite tråkigt att öppna blockinfogaren manuellt. Det finns som tur är ett mycket snabbare sätt att infoga block med endast tangentbordet – / (framåt snedstreck).
Om du trycker ”Enter” för att starta ett nytt styckeblock kan du snabbt infoga ett block genom att skriva ett framåt snedstreck, följt av namnet på det block som du vill infoga.
När du börjar skriva visas en lista över alla block som matchar din sökfråga. Du kan sedan använda tangentbordspilarna för att navigera i blocken och trycka”Enter” för att markera det block som du vill infoga.
Här är ett exempel på hur du använder snabbinfogning för att lägga till ett bildblock:
2. Infoga bilder genom att dra dem från skrivbordet
Om du vill infoga många bilder inkluderar blockredigeraren en annan tidsbesparande funktion. Den låter dig eliminera behovet av att lägga till ett bildblock innan du laddar upp en bild.
Du kan istället bara dra bildfilen direkt från skrivbordet till den plats där du vill lägga till den i inlägget. När du drar bildfilen över webbplatsens innehåll visas en blå linjemarkering där bilden visas.
När du släpper filen kommer WordPress automatiskt att ladda upp den och infoga ett bildblock på rätt plats:
3. Använd lite Markdown-formatering
Om du är ett fan av Markdown-syntaxen för att skapa innehåll, kan jag glädja dig med att blockredigeraren stöder en begränsad användning av markdown – främst när det gäller rubriker.
Om du exempelvis vill infoga ett rubrikblock med en H3-tagg kan du skriva tre hashtags (###) följt av mellanslag. Redigeraren konverterar automatiskt detta till en H3 och du kan sedan fortsätta att skriva rubriken:
Du kanske vill ha ett ännu mer avancerat stod för Markdown? I så fall kan du installera ett kostnadsfritt plugin som EditorsKit. Det låter dig använda Markdown för fet stil, kursiverad stil och genomstrykning – vi kommer att prata mer om Gutenberg-plugins lite senare i det här inlägget.
4. Fäst formateringsverktygsfältet högst upp i redigeraren
Om du inte gillar hur formateringsverktyget ”flyter” ovanför ett block inkluderar blockredigeraren en funktion som låter dig fästa det under det övre verktygsfältet:
5. Kopiera ett block och alla dess inställningar
Med blockredigeraren kan du kopiera och klistra in text precis som med vilken redigerare som helst – ”Ctrl + C” eller högerklicka och välj Kopiera.
Du kan dock inte använda den här metoden för att kopiera och klistra in ett helt block samtidigt som inställningarna bevaras. Det krävs istället att du:
- Markerar blocket.
- Klickar på ikonen med tre punkter i blockets verktygsfält.
- Väljer Kopiera.
När du har kopierat blocket på det här sättet kan du klistra in det som vanligt , dvs . ”Ctrl + V” eller högerklicka och välja att klistra in.
6. Välj rätt block snabbt med blocklistevyn
För de flesta block kan du helt enkelt klicka på redigeraren för att välja blocket. Detta kan dock bli knepigt om du börjar använda ”inkapslade” block, som är infogade inuti kolumnerna eller gruppblocken.
Av den anledningen innehåller redigeraren ett listvyalternativ som du kan öppna från det övre verktygsfältet. I listvyn visas alla block, inklusive inkapslade block.
Du kan välja ett block genom att klicka på det i listan, och redigeraren markerar även blocket när du håller muspekaren över det i listan.
I exemplet nedan kan du se:
- Blockets primära överordnade kolumner
- Inkapslade block för varje kolumn
- Ett inkapslat gruppblock i en kolumn
- Ett inkapslat rubrikblock i gruppblocket
Om du vill välja det överordnade rubrikblocket kan du helt enkelt öppna listvyn och välja det i listan:
7. Öppna kodredigeraren (för enskilda block eller fullständiga inlägg)
En av fördelarna med blockredigeraren Gutenberg är att den låter dig konfigurera många stilar och layoutalternativ utan att du behöver nyttja kod. Det kan dock uppstå vissa situationer för mer avancerade användare, där man vill komma åt koden direkt.
För att hjälpa dig att göra detta inkluderar Gutenberg-redigeraren några olika alternativ.
Du kan dels redigera koden för ett enskilt block. Detta är användbart för mindre justeringar som infogandet av en CSS-klass. Du gör detta genom att öppna rullgardinsmenyn i blockets verktygsfält och välja Redigera som HTML:
Om du väljer det här alternativet förvandlas den visuella förhandsgranskningen till en kodredigerare för just det blocket, utan att de visuella förhandsgranskningarna av andra block påverkas:
Ett annat alternativ är att nyttja redigerarens anpassade HTML-block som du kan använda för att bädda in fullständiga HTML-utdrag. Du lägger helt enkelt till blocket och klistrar in i koden.
Du kan slutligen även öppna den fullständiga kodredigeraren för hela dokumentet genom att använda listrutan i det övre högra hörnet eller ett kortkommando: Ctrl + Skift + Alt + M.
Tänk på att när du öppnar den fullständiga kodredigeraren så ser du även blockformaterings-markup från Gutenberg, så det kan vara lite svårt att navigera:
8. Lär dig kortkommandon
Blockredigeraren inkluderar många kortkommandon som låter dig utföra vanliga åtgärder. Det är bra att lära sig dem eftersom de gör dig mer produktiv och besparar dig många repetitiva musklick.
Här är några av de vanligaste kortkommandona – om du är på en Mac ska du byta ”Ctrl” mot ”Command (⌘)”:
- Öppna blocklistvyn — Skift + Alt + O
- Spara ändringarna — Ctrl + S
- Ångra de senaste ändringarna — Ctrl + Z
- Gör om ditt senaste ångerkommando — Ctrl + Skift + Z
- Duplicera markerade block — Ctrl + Skift + D
- Ta bort markerade block — Skift + Alt + Z
- Infoga ett nytt block före de markerade blocken — Ctrl + Alt + T
- Infoga ett nytt block efter de markerade blocken — Ctrl + Alt + Y
Du kan även öppna en fullständig fusklapp med alla kortkommandon när du är i redigeraren. För att göra detta kan du antingen använda ett kortkommando – Skift + Alt + H – eller klicka på menyikonen med ”tre lodräta punkter” (⋮ ) i det övre högra hörnet av redigeraren och välja Kortkommandon i listrutan.
9. Rensa ditt gränssnitt genom att dölja block
Blockredigeraren lägger till många block som standard, men du kommer förmodligen inte att använda dem alla. För att hjälpa dig att rensa gränssnittet inkluderar redigeraren en funktion som heter Blockhanteraren som låter dig inaktivera och dölja block som du inte använder:
10. Lägg till ankare för hopplänkar
Vårt sista användbara tips handlar om blockredigerarens dedikerade HTML-ankarlänkfunktion, som låter dig skapa hopplänkar till specifika delar av ditt innehåll (exempelvis för en innehållsförteckning).
I den klassiska redigeraren var du tvungen att lägga till HTML-ankare manuellt med kod. Men med Gutenberg räcker det att du anger texten för din hopplänk i HTML-ankarfältet i området Avancerat i varje blockinställning:
Mer avancerade tekniker för blockredigeraren
Nu har jag gått igenom en hel del om hur redigeraren fungerar och gett dig några tips om hur du arbetar mer effektivt. Med den baskunskapen i bagaget, är det dags att gå igenom två lite mer avancerade taktiker:
- Blockmönster
- Återanvändbara block
Blockmönster
Ett blockmönster är i huvudsak en mall. Det är en samling block som är ordnade i en layout. Det kan vara något mindre, som ett arrangemang av knappar. Det kan även vara en mall för en hel sektion, eller till och med en hel sida.
WordPress inkluderar sina egna inbyggda blockmönster, och utvecklare av tredjepart-plugins kan även lägga till sina egna.
Du kan infoga nya mönster från fliken Mönster i huvudblockinfogaren:
När du har infogat blockmönstret kan du redigera alla block som utgör detta mönster, precis som om du hade lagt till blocken manuellt.
För närvarande kan du inte skapa dina blockmönster med gutenberg-redigeraren (om du inte vet hur du kodar). Du kan dock fixa detta med Justin Tadlocks kostnadsfria Block Pattern Builder-plugin. När pluginet är aktiverat kan du skapa dina mönster med Gutenberg och sedan spara den designen som ett mönster.
Börja med att gå till Blockmönster > Lägg till nytt för att skapa ett nytt mönster med redigeraren. Se till att publicera det när du är klar:
När du har gjort detta kan du infoga ditt blockmönster på samma sätt som med alla andra mönster – leta efter det i sektionen Okategoriserat:
WordPress kärnteam har även lanserat ett officiellt blockmönsterbibliotek på WordPress.org. Du kan infoga dem i redigeraren genom att kopiera och klistra in. Klicka bara på knappen Kopiera på blockmönsterbibliotekets webbplats och klistra sedan in det i redigeraren.
Återanvändbara block
Återanvändbara block är en samling av ett eller flera block som du kan infoga som grupp. De liknar blockmönster, men med en viktig skillnad:
Ett blockmönster är en startmall som du redigerar i varje instans, medan ett återanvändbart block är detsamma i samtliga fall där du inkluderar det.
Om du uppdaterar det återanvändbara blocket gäller dessa ändringar automatiskt för alla befintliga instanser.
Du kan exempelvis använda ett återanvändbart block för att skapa en call to action (CTA) som du vill ska vara densamma i allt ditt innehåll. Om du sedan vill uppdatera CTA, behöver du endast uppdatera det återanvändbara blocket en gång för att det ska ändras på hela webbplatsen.
Om du vill skapa ett återanvändbart block i WordPress-redigeraren Gutenberg klickar du och drar för att markera ett eller flera block. Klicka sedan på alternativet Lägg till i återanvändbara block. (Pluginet som vi nämnde ovan låter dig även skapa ett blockmönster på detta sätt.)
Efter detta grupperas blocken – du kan ge det återanvändbara blocket ett namn i det återanvändbara blockets inställningar i sidofältet.
Nu kan du infoga det återanvändbara blocket genom att söka efter dess namn. Du kan använda ’/’ för att snabbt infoga blocket:
Om du ändrar det återanvändbara blocket får du möjlighet att publicera ändringarna när du uppdaterar inlägget. Om du bestämmer dig för att publicera ändringarna av det återanvändbara blocket gäller dessa ändringar automatiskt för varje instans av det återanvändbara blocket:
Utöka blockredigeraren med plugins
Vi har hittills fokuserat på de viktigaste blockredigerarfunktionerna, med några undantag.
En av de mest fantastiska sakerna med blockredigeraren är dock att du kan använda plugins att utöka den, precis som du kan göra med resten av din WordPress-webbplats.
Du kan använda plugins för några olika saker:
- Lägga till nya innehållsblock: Plugins kan lägga till nya block som du kan använda i dina mönster. Det är för närvarande det vanligaste användningsområdet för Gutenberg-plugins.
- Lägga till nya mallar/blockmönster: Vissa plugins använder kärnblockmönstersystemet, medan andra har skapat sina egna mallsystem.
- Ändra redigerargränssnittet/funktionerna: Du kan använda plugins för att ändra själva redigeraren. Du kan exempelvis lägga till bättre stöd för Markdown.
Utöver de plugins som är speciellt byggda för Gutenberg kan även många andra WordPress-plugins använda blockredigeraren.
Om du exempelvis använder ett plugin för kontaktformulär kan pluginet ge dig ett dedikerat block som du kan använda för att bädda in dina formulär. Detsamma gäller för många andra typer av plugins.
När du behärskar grunderna i redigeraren är det en bra idé att utforska dessa plugins för att se om du hittar några som kan förbättra din upplevelse.
Här är några av de mest populära alternativen vid skrivandet av det här inlägget:
Du kan se mer i WordPress.org’s sektion för blockaktiverade plugins.
WordPress-redigeraren Gutenberg och Full Site Editing
Som vi nämnde i början av det här inlägget syftar Gutenberg-projektet till att vara mycket mer än bara en innehållsredigerare.
Den långsiktiga planen är att WordPress börjar nyttja Full Site Editing. Det betyder exakt vad det står – målet är att du så småningom ska kunna redigera alla delar av din webbplats med Gutenberg-redigeraren. Detta inkluderar din webbplats sidhuvud, sidfot, sidofält osv.
Till skillnad från lanseringen av blockredigeraren i WordPress 5.0 tar Full Site Editing ett iterativt tillvägagångssätt. Det kommer att bli ett gradvist tillägg av funktioner, där varje ny utgåva bygger på de tidigare.
Från och med WordPress 5.8 nyttjas blockredigeraren för att hantera webbplatsens widgetar. Du får även tillgång till några nya temafokuserade block som webbplatslogotyp, navigering, frågeloop (låter dig skapa mallar för listinlägg) och mer.
Men även om en officiell Full Site Editing fortfarande är ett pågående arbete, har vissa orädda temautvecklare redan börjat släppa blockbaserade teman. Detta ger oss en ganska bra bild av hur Full Site Editing kan fungera.
Du kan dessutom komma åt några av de experimentella funktionerna för Full Site Editing i plugin-versionen av Gutenberg.
Så låt oss titta på två saker:
- De befintliga grundläggande Full Site Editing-funktionerna som vi har från och med WordPress 5.8
- Hur ”fullständig” Full Site Editing kan fungera baserat på experimentella funktioner
Använda block i stället för widgetar
Från och med WordPress 5.8 kommer du att använda block istället för widgetar för att styra dina sidofält och sidfötter (du kan som standard inaktivera detta om du vill).
När du går till Utseenden > widgetar kan du hantera innehållet i varje widgetområde med hjälp av blockredigeraren.
Du kan se att varje widgetområde får en separat redigerare, som du kan öppna genom att klicka på dragspelsknapparna. Du kan även flytta block mellan olika widgetområden genom att klicka på de kopplade pilikonerna nära toppen:
Använda nya temablock
WordPress 5.8 lägger även till nya dedikerade temablock som låter dig infoga dynamiskt innehåll på din webbplats. Dessa block kommer även att spela en avgörande roll när du utformar mallar för ditt tema i framtida utgåvor.
Låt oss exempelvis säga att du vill bädda in en lista över ditt senaste innehåll på en sida. Nu kan du helt enkelt lägga till Query Loop-blocket, och dynamiskt infoga innehåll från en viss inläggstyp (exempelvis blogginlägg), inklusive filtrering efter kategorier, författare, nyckelord och mer:
I Query Loop-blocket kan du kapsla in de andra temablocken för att styra mallen för det innehåll som visas där. Du kan exempelvis visa varje inläggs datum genom att lägga till blocket för inläggsdatum i mallen.
Med Query Loop-blocket i WordPress 5.8 kan du i huvudsak utforma din egen anpassade blogglistningssida. När Full Site Editing är fullt utarbetat kommer detta att utökas till hela ditt tema – så låt oss titta på det härnäst.
Designa innehållsmallar
Mallredigeringsläge är en annan ny funktion i WordPress 5.8. Det låter dig använda Gutenberg för att utforma mallarna för dina inlägg och sidor med hjälp av block.
För närvarande är den här funktionen endast tillgänglig om din temautvecklare specifikt har aktiverat den, så du kanske inte ser den om ditt temas utvecklare ännu inte har gjort detta.
Om du använder ett tema som stöder mallredigeringsläget i WordPress 5.8 visas ett nytt mallavsnitt under fliken Inlägg/Sida i sidofältet när du redigerar ett inlägg eller en sida. Du kan skapa en ny mall eller välja en av dina befintliga mallar:
Om du skapar en ny mall kan du ge den ett namn som du lätt kan komma ihåg. Du kan sedan utforma mallen med hjälp av mallredigeringsläget, tillsammans med de nya temablocken som vi beskrev i föregående avsnitt:
Exempel på Full Site Editing med Blockbase
Blockbase är ett tema från Automattic som fungerar som ett slags ”proof of concept” och lekplats för Full Site Editing. Det är fortfarande på experimentstadiet och kan förändras innan dessa funktioner finns i kärnprogramvaran för WordPress. Men det ger dig en uppfattning om vad Full Site Editing innebär.
När du har installerat tema och plugin-versionen av Gutenberg får du ett nytt Site Editor-område som låter dig ”bygga” ditt tema med samma redigerare som du såg ovan.
Den kritiska skillnaden är dock att du inte bara bygger ett enda inlägg eller en sida. Du använder istället WordPress blockredigerare Gutenberg för att skapa de faktiska mallar som hela webbplatsens innehåll kommer att använda, exempelvis mallen för din rubrik.
För att hjälpa dig att uppnå detta får du en rad nya designblock, inklusive några av de temablock som du såg ovan:
För att navigera mellan olika mallar kan du klicka på WordPress-logotypen i det övre vänstra hörnet för att redigera andra mallar och skapa nya:
Tanken är som sagt att du så småningom ska kunna använda Gutenberg-redigeraren för att styra alla ditt temas mallar / layouter. Och när detta sker kommer skapandet av en WordPress-webbplats att se ganska annorlunda ut än vad vi ser som ”normalt” år 2021.
Sammanfattning
Sedan 2018 har blockredigeraren Gutenberg gjort stora framsteg. När Full Site Editing är verklighet kommer blockredigeraren att bli en ännu mer betydande del av WordPress.
I det här inlägget har vi både gått igenom grunderna i blockredigeraren och avancerade tips och funktioner. Vi har även tittat på hur Full Site Editing kan se ut i framtiden.
Om du ännu inte är redo att prova detta kan du inaktivera Gutenberg permanent och använda den klassiska redigeraren. Gutenberg kommer dock att fortsätta växa, så det är inget som du bör ignorera för alltid.
Har du fortfarande några frågor eller tankar om redigeraren? Vi vill isåfall gärna höra dina kommentarer, både bra och dåliga.
Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.
Lämna ett svar