Bytt tema och din välbekanta redigerare förvandlades till en obekant canvas av block? Alla som öppnade Gutenberg för första gången går igenom den här förlamningen. Välbekanta knappar försvann, metaboxfält flyttades och att skapa ett enkelt inlägg tar dubbelt så lång tid.

Men här är sanningen: WordPress blockredigerare är det snabbaste sättet att layouta innehåll utan kod. I praktiken har vi sett att efter ett par timmars arbete med block vill du inte gå tillbaka till den klassiska redigeraren. Och om du kan tangentbordsgenvägarna och några tricks börjar Gutenberg arbeta snabbare än någon sidbyggare.

I den här guiden får du en komplett genomgång av blockredigeraren: från första start till snabbkommandon. Ingen teori för teorins skull, bara konkreta steg du kan upprepa på din egen sajt.

💡 Snabb översikt:

• Öppna redigeraren: Inlägg → Lägg till nytt, så hamnar du i Gutenbergs blockgränssnitt
• Lägg till innehåll med block: varje stycke, rubrik, bild eller knapp är ett separat flyttbart block
• Infoga block via "+"-ikonen eller /-tangenten, skriv bara namnet på blocket du behöver
• Konfigurera block via sidopanelen: formaterings- och stilalternativ ändras beroende på vald blocktyp
• Lär dig snabbkommandona: Shift + Alt + H (Windows) öppnar ett fuskblad med alla genvägar

Vad är Gutenberg-redigeraren

Gutenberg är blockinnehållsredigeraren som är inbyggd i WordPress core från och med version 5.0. Till skillnad från den klassiska TinyMCE-redigeraren, där hela inlägget var ett enda textfält, bryter Gutenberg ner innehållet i oberoende block: stycken, rubriker, bilder, gallerier, knappar, kolumner och dussintals andra element.

Varje block kan flyttas, konfigureras och stylas oberoende av de andra. Resultatet syns direkt: detta är en visuell redigerare, inte ett textfält med en "Förhandsgranska"-knapp.

Från och med 2026 har Gutenberg utvecklats från en kontroversiell nyhet till en fullfjädrad sidbyggare. Med införandet av Full Site Editing (FSE) har blockredigeraren rört sig bortom inlägg och sidor. Nu kan du redigera sidhuvuden, sidfötter, inläggsmallar och arkiv via den. Den klassiska redigeraren finns fortfarande tillgänglig som ett separat plugin, men WordPress avslutade officiellt stödet för den redan 2022. Säkerhetsuppdateringar släpps fortfarande, men inga nya funktioner läggs till.

Om du menar allvar med att arbeta med WordPress är Gutenberg inte ett alternativ utan huvudverktyget. Att lära sig det är värt ansträngningen om inte annat för hastigheten: när du väl vant dig blir inlägg klara 2-3 gånger snabbare än i den klassiska redigeraren med dess hög av metaboxfält.

Gränssnitt: första start

För att öppna redigeraren, gå till Inlägg → Lägg till nytt (eller Sidor → Lägg till nytt för sidor). WordPress laddar Gutenberg med en välkomstskärm och ett tomt titelfält.

Till höger finns en sidopanel med två flikar: Inlägg (eller Sida) och Block. Inläggsfliken innehåller globala inställningar: permalänk, kategorier, etiketter, utvald bild, utdrag och publiceringsstatus. Blockfliken visar inställningar för det specifikt markerade blocket.

Notera att permalänkfältet är tillgängligt direkt, utan ett separat klick på titeln. Det sparar några sekunder på varje inlägg.

Arbeta med textblock

Inläggstitel

Det första blocket i redigeraren är titeln. Skriv bara in text, så blir den automatiskt inläggets H1. Bredvid titeln finns en Redigera-knapp som öppnar permalänkredigering direkt i blocket.

Tryck på Enter så visas ett nytt styckesblock under rubriken. Gutenberg behåller den välbekanta tangentbordsnavigeringen från den klassiska editorn: Enter skapar ett nytt block, Backspace sammanfogar med det föregående.

Stycken och formateringsverktygsfältet

Standardblocket för nya block är Stycke. Men innan du skriver text visar Gutenberg alternativ: blocket kan göras om till en rubrik, bild, ett galleri, omslag och dussintals andra typer.

När du har skrivit text visas formateringsverktygsfältet:

Verktygsfältet låter dig:

• Göra om ett stycke till ett citat, en rubrik, lista, kod eller förformaterad text
• Använda fetstil, kursiv, genomstrykning och understrykning
• Justera text till vänster, höger, centrerat eller marginaljusterat
• Lägga till en länk med möjlighet att öppna i en ny flik
• Infoga en inline-bild direkt i raden
• Duplicera, flytta eller ta bort blocket
• Redigera blocket som HTML
• Spara blocket till Återanvändbara block

På fliken Block i sidofältet hittar du avancerade inställningar: teckenstorlek, anfang, bakgrunds- och textfärg, utfyllnad och anpassad CSS-klass. Färger kan ställas in till vad som helst; paletten är inte begränsad till temats förinställningar.

Lägga till bilder

Bilder kan infogas på tre sätt: via "+"-ikonen → fliken Bild, genom att dra en fil från skrivbordet direkt in i editorn, eller med tangentbordskommandot /image inuti ett stycke.

Klicka på valfri "+"-ikon, välj fliken Bild så visas ett block med tre källor: ladda upp från datorn, välj från mediebiblioteket eller klistra in via URL.

Att välja ett block via infogningsmenyn är den mest visuella metoden, särskilt i början. När du har vant dig kommer du att byta till /image, men den visuella menyn finns alltid kvar.

När du har infogat en bild erbjuder sidofältet: alt-text (avgörande för SEO och tillgänglighet), storlek, bildförhållande och stilar (avrundning, duotone, skuggor och ramar).

Den vanliga dialogrutan för mediafiler är bekant från den klassiska editorn; här kan du ange titel och beskrivning. Men huvudinställningarna är nu samlade i blockets sidofält.

I praktiken rekommenderar vi att du alltid fyller i alt-texten: den hjälper både sökmotorer och användare med skärmläsare. Beskrivningen bör vara specifik, 4-8 ord, med sektionens nyckelord.

Filer för nedladdning

Fil-blocket låter dig bifoga en PDF, ZIP, bild eller vilken annan fil som helst som läsarna kan ladda ner.

Ladda upp en fil eller välj från mediebiblioteket; Gutenberg skapar automatiskt en nedladdningsknapp.

Knapptexten och filnamnet går att redigera. Du kan lägga till en CSS-klass för anpassad stil. Knappen öppnas som standard i en ny flik.

Citat och callouts

Citat-blocket lägger till ett stiliserat citat. Till skillnad från ett vanligt stycke är citatet visuellt framhävt; temat applicerar särskild formatering på det.

Sidopanelen för Citat-blocket låter dig konfigurera bakgrundsfärg, typsnitt och utfyllnad. Citatet kan se ut som en del av din varumärkesprofil snarare än ett standardgrått block.

Ett citat tar emot samma text som ett stycke men står visuellt isär. Förutom det vanliga Citatet finns det Pullquote (en större callout) och Vers (ett block för poesi som bevarar mellanslag och radbrytningar).

Bädda in video och externt innehåll

Gutenberg stöder inbäddning av innehåll från över 30 plattformar: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare med flera. Processen är densamma för alla: infoga ett Inbäddning-block, välj plattform, klistra in URL:en och klicka på Bädda in.

Klistra in URL:en, klicka på Bädda in, och du är klar. Gutenberg hämtar automatiskt förhandsvisning, titel och videominiatyr från YouTube.

Videon visas direkt i redigeraren; du kan se förhandsvisningen utan att lämna adminpanelen. För YouTube finns inställningar tillgängliga: dölj kontroller, aktivera autoplay eller ange en starttid.

Knappar och calls to action

Knapp-blocket skapar en eller flera knappar i rad. Perfekt för CTA:er: "Ladda ner", "Registrera dig", "Gå till WordPress.org."

Skriv in texten, klistra in URL:en och konfigurera stilen: fyllning, kontur, hörnrundning, storlek. Knappar anpassar sig automatiskt till mobil; på smala skärmar sträcker de ut sig till full bredd.

Gutenberg kontrollerar kontrasten mellan knapptext och bakgrund: om färgkombinationen är oläslig visar redigeraren en varning. En liten detalj, men den sparar tid vid tillgänglighetskontroller.

Kolumner och rutnät

Blocket Kolumner skapar ett rutnät med 2-6 kolumner. Du kan infoga vilket annat block som helst i varje kolumn: ett stycke, en bild, en knapp eller ett citat.

Två kolumner skapas som standard, men du kan ändra antalet och bredden på varje i blockinställningarna.

På mobila enheter staplas kolumnerna automatiskt vertikalt; innehållet bryts inte isär och förblir läsbart. Detta krävde tidigare CSS media queries, men nu fungerar det direkt.

Media + text: bild bredvid text

Blocket Media & Text är ett av de mest användbara för formatering: en bild eller video till vänster (eller höger), text med en knapp till höger (eller vänster).

Ladda upp en bild, lägg till text och eventuellt en knapp. Sidorna kan bytas med ett enda klick.

Och så här ser det ut på frontend:

Det ser professionellt ut och tar bara en minut att skapa. Ingen sidbyggare behövs för den här typen av layout.

Tredjepartsblock: tillägg utökar Gutenberg

Många tillägg lägger till sina egna block i Gutenberg. WooCommerce är det mest framträdande exemplet: efter installation av tillägget visas block för att infoga produkter, varukorgar, filter och butikskategorier i redigeraren.

Jetpack lägger till block för formulär, prenumerationer och sociala ikoner. Yoast SEO bäddar in läsbarhetsanalys och SEO-tips direkt i redigerarens sidopanel. Contact Form 7 tillhandahåller ett kontaktformulärsblock.

Principen är densamma överallt: installera tillägget så visas blocken i infogningsmenyn. Ingen extra kod krävs.

Kortkommandon och tips

Det mest användbara Gutenberg-tipset är /-tangenten. Stå i valfritt stycke, skriv / och börja skriva blockets namn. Redigeraren visar matchande alternativ; välj med piltangenterna och tryck Enter.

Till exempel: /image → bildblock, /heading → rubrik, /table → tabell, /column → kolumner. Efter en veckas användning snabbar det här tricket upp ditt arbete avsevärt.

Fullständig lista över kortkommandon: Skift + Alt + H (Windows) eller Opt + Ctrl + H (Mac). Detta öppnar ett fuskblad med alla genvägar, från att flytta block till att växla mellan redigeringslägen.

Några fler tekniker vi använder i praktiken:

• Ctrl + Skift + D: duplicera det markerade blocket
• Ctrl + Alt + T: infoga ett nytt block före det aktuella
• Ctrl + Alt + Y: infoga ett nytt block efter det aktuella
• Klicka på i-ikonen i det övre verktygsfältet: visa dokumentstruktur (rubriker, ordantal, stycken)
• Listvy (ikonen med tre streck uppe till vänster): navigera bland alla block i inlägget som ett träd, praktiskt för långa artiklar

Och slutligen: felet "Uppdatering misslyckades" orsakas oftast av en instabil internetanslutning, inte ett problem med redigeraren. Kontrollera din anslutning och försök spara igen.

Video: Gutenberg på 15 minuter

Vill du se allt i aktion? Den här korta videon från WPBeginner visar hela cykeln för att skapa ett inlägg i Gutenberg, från det första blocket till publicering:

⁉️🤔 Vanliga frågor

Behöver jag installera Gutenberg separat?

Nej, blockredigeraren har varit inbyggd i WordPress kärna sedan version 5.0 (släppt i december 2018). Om du har en nyare version av WordPress fungerar Gutenberg redan. Det separata Gutenberg-tillägget finns bara för dem som vill testa nya block innan de inkluderas i kärnan.

Kan jag gå tillbaka till den klassiska redigeraren?

Ja, installera det kostnadsfria tillägget Classic Editor. Det inaktiverar Gutenberg helt och återställer den välbekanta TinyMCE. Men tänk på: WordPress avslutade officiellt supporten för den klassiska redigeraren 2022. Aktuella WordPress-versioner (6.x år 2026) fungerar fortfarande med Classic Editor, men nya funktioner (Full Site Editing, Block Themes, Patterns) är bara tillgängliga i Gutenberg.

Hur skiljer sig Gutenberg från Elementor eller Divi?

Gutenberg är den inbyggda innehållsredigeraren i WordPress: gratis och utan externa beroenden. Elementor och Divi är kommersiella sidbyggare med bredare designmöjligheter: popups, bildspel, marknadsföringsintegrationer. För en typisk blogg eller företagssajt täcker Gutenberg de viktigaste layoutbehoven. Om du tjänar pengar på din sajt (butik, landningssidor, trattar) erbjuder en sidbyggare mer flexibilitet. Goda nyheter: Gutenberg och sidbyggare fungerar samtidigt. Du kan bygga sidor i Elementor medan du hanterar inlägg i blockredigeraren.

Vad gör jag om block överlappar eller går sönder på mobilen?

Oftast ligger problemet i temat, inte i Gutenberg. Kontrollera: (1) om ditt aktiva tema stöder blockredigeraren (Block Themes garanterar korrekt layout); (2) om anpassad CSS åsidosätter blockens padding och bredd. Byt till standardtemat Twenty Twenty-Four för test; om blocken visas korrekt ligger problemet i ditt tema.

Hur lägger jag till ett block som inte finns i standarduppsättningen?

Två alternativ: (1) sök efter ett tillägg som lägger till blocket du behöver (till exempel Otter Blocks eller Spectra erbjuder dussintals extra block), eller (2) skapa ett anpassat block via Advanced Custom Fields (ACF), vilket är enklare än att skriva ett block i React. För de flesta uppgifter räcker tillägg: installera och använd.

Fungerar Gutenberg med anpassade inläggstyper (CPT)?

Ja, fullt ut. När du registrerar en CPT, ange 'show_in_rest' => true och 'supports' => array('editor'), så aktiveras blockredigeraren automatiskt. För befintliga CPT:er utan REST API-stöd finns adaptertillägg, men det är bättre att uppdatera registreringen av inläggstypen.

Vad ska man välja: Gutenberg eller sidbyggare

Gutenberg har utvecklats från en experimentell "funktion" till en mogen redigerare som driver miljontals sajter. För innehållsskapare innebär detta en direkt produktivitetsökning: visuell layout, omedelbar förhandsvisning och kortkommandon sparar 30 till 60 minuter per inlägg jämfört med den klassiska redigeraren och shortcode-tillägg.

Om du driver en blogg, nyhetssajt eller företagsportal täcker Gutenberg de viktigaste uppgifterna. Gratis, utan extern kod och ingen extra serverbelastning.

Om du bygger komplexa landningssidor, en webbutik med anpassad layout eller marknadsföringstrattar, ta en titt på sidbyggare. För dagligt innehållsarbete, starta Gutenberg, skriv /heading och börja bara skriva.