Så här använder du WordPress Block Editor (Gutenberg Tutorial)

Blockredigeraren i WordPress är standardredigeraren för att skriva innehåll och redigera din webbplats. Den introducerades 2019 med smeknamnet Gutenberg och ersatte den gamla klassiska redigeraren.

Block Editor erbjuder ett enkelt och intuitivt sätt att skapa content och editera din WordPress site.

I denna tutorial kommer vi att visa dig hur du använder WordPress Block Editor och bemästra den för att skapa visuellt fantastiska blogginlägg och pages.

Vad är skillnaden mellan Block Editor (Gutenberg) och Classic Editor?

Innan vi dyker in i block editorn, låt oss jämföra och förstå skillnaderna mellan Gutenberg Block Editor och den äldre klassiska editorn.

Så här gillar du den klassiska Editorn i WordPress:

Den hade en box för textredigerare med några grundläggande alternativ för format. Det var ganska limit i funktionalitet och visuellt appearance.

Så här gillar du Block Editor i WordPress:

Som du ser är det två helt olika Editors för att skapa content i WordPress.

Den gamla klassiska editorn var en textredigerare med knappar för formatering liknande Microsoft Word.

Den nya editorn använder en annan metod, som anropas ”Block” (därav namnet Block Editor).

Block är content-element som du kan add to på vyn edit för att skapa layouts. Varje objekt som du addar till din post eller page är ett block.

Du kan till exempel add to block för stycken, images, videos, galleries, audio, lists med mera. Det finns block för alla vanliga element i content, och fler kan läggas till med tillägg till WordPress.

Hur är WordPress Block Editor bättre än den klassiska Editorn?

WordPress Block Editor erbjuder ett enkelt sätt att add to olika typer av content till dina posts och pages.

Om du till exempel tidigare ville lägga till en tabell i ditt innehåll med hjälp av den klassiska redigeraren behövde du ett separat tabellplugin.

Med block editor kan du helt enkelt add to ett tabellblock, select your columns and rows och börja lägga till content.

You can move content elements up and down, edit them as individual blocks, and easily create media-rich content.

Viktigast av allt är att WordPress Block Editor är lätt att använda och lära sig.

Detta ger en enorm fördel för all WordPress Beginnare som just har startat sin första blogg eller bygger en DIY-affärswebbplats.

Med detta sagt, låt oss undersöka hur du kan använda WordPress blockredigerare för att skapa bra innehåll som ett proffs.

Här är vad vi kommer att täcka i denna Gutenberg tutorial:

Är du redo? Låt oss dyka in.

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Använda Gutenberg – The WordPress Block Editor

Blockeditorn är utformad för att vara intuitiv och flexibel. Även om den ser annorlunda ut än den gamla WordPress-redigeraren kan den fortfarande göra allt som du kunde göra i den klassiska redigeraren.

Låt oss börja med att gå igenom de grundläggande sakerna som du gjorde i den klassiska editorn och hur de görs i blockeditorn.

Skapa ett nytt blogginlägg eller en ny page med hjälp av Block Editor

Du kommer att börja skapa ett nytt blogginlägg eller en ny sida som vanligt. Klicka helt enkelt på menyn Inlägg ” Lägg till nytt inlägg i din WordPress-admin. Om du skapar en sida går du istället till menyn Pages ” Add New.

Detta startar block editor.

Så här lägger du till ett block i Block Editor

Det första blocket i varje post eller page är titeln.

Du kan använda musen för att flytta dig under rubriken eller trycka på Tab-tangenten på ditt tangentbord för att flytta markören nedåt och börja skriva.

Som standard är nästa block ett Paragraph-block. Detta allow användare att börja skriva direkt.

Men om du vill lägga till något annat kan du klicka på knappen add new block [+] högst upp till vänster i Editorn, under ett befintligt block eller till höger om ett block.

Om du klickar på knappen visas menyn add block med ett search-fält högst upp och vanligt förekommande block under.

You can click on tabs to browse block categories or type in a keyword to quickly search for a specific block.

Om du inte vill använda musen för att clicka på knappen kan du också använda en kortkommando på tangentbordet.

Börja med att skriva / för att söka efter ett block och infoga det sedan genom att trycka på Enter på ditt tangentbord.

Arbeta med Block i den nya Editorn

Varje block har ett verktygsfält som visas ovanpå det. Knapparna i verktygsfältet ändras beroende på vilket block du redigerar.

Till exempel, i skärmdumpen under, arbetar vi med ett Paragraph-block som visar grundläggande formateringsknappar som textjustering, fet, kursiv, insert link och fler alternativ som finns tillgängliga under menyn med tre punkter.

Förutom verktygsfältet kan varje block ha sina egna blockinställningar, som visas i den högra kolumnen på redigeringsskärmen.

Dessa Settings varierar beroende på vilket block du editerar. I blocket Paragraph kan du till exempel editera text-, bakgrunds- och link-färg samt typografi.

Du kan flytta blocken upp och ner och ordna om dem.

Om du vill göra detta klickar du bara för att dra and drop eller klickar på upp- och nedknapparna i blockets toolbar.

Related to: Se vår guide om hur du tar bort ett block i WordPress.

Organisera Block i grupper och Column

Block Editor har också praktiska tools för att hantera och organisera layouts för ditt content.

Du kan välja flera block genom att clicka på dem samtidigt som du trycker på Shift-tangenten på ditt tangentbord.

Därefter går du vidare och klickar på knappen Blocktyp i toolbaren för att omvandla de valda blocken till grupper eller Column.

Du kan sedan tillämpa stilar på hela Group-blocket, till exempel genom att ändra justering eller avstånd.

Block Editor allow you also to add a empty Group or Columns block.

Efter det kan du fylla dem med andra block.

Du kan lägga till alla typer av block i varje Column efter behov.

This allows you to create beautiful layouts for different use cases.

Save och återanvändning av Block i Gutenberg

En av de bästa sakerna med att använda block är att de kan sparas och återanvändas. Detta är till viss hjälp för website-ägare och bloggare som ofta behöver add to specifika content snippets till sina artiklar eller pages.

Klicka bara på menyknappen i det högra hörnet av verktygsfältet för varje block. I menyn väljer du alternativet ”Skapa mönster”.

Observera: Du kan också använda hela grupper och kolumner som återanvändbara block. På så sätt kan du spara hela avsnitt och använda dem när det behövs.

Då visas en popup-ruta där du måste ange ett namn för mönstret. Det kan vara vad som helst som hjälper dig att enkelt identifiera när du behöver återanvända det.

Sedan kan du valfritt välja kategorier. Detta hjälper dig att sortera dina mönster på ett organiserat sätt.

Därefter klickar du på knappen ”Create” för att save your pattern. WordPress kommer att lagra ditt mönster med alla block i det.

Om du vill återanvända ditt mönster redigerar du bara den post eller page där du vill add to det.

Klicka sedan på knappen [+] add block eller använd kortkommandot /. Du kan hitta mönstret genom att skriva det namn you gav det.

Mönster gör det enkelt för webbplatsägare att lägga till vanliga element i sina layouter, till exempel uppmaningar till handling, knappar för sociala medier, banners och mycket mer.

Ditt WordPress-tema eller dina plugins kan till och med levereras med egna mönster, eller så kan du hitta mönster som skapats av andra i WordPress Block Patterns-biblioteket.

Om du behöver mer hjälp har vi en separat guide för nybörjare om hur du hittar och använder WordPress blockmönster.

Publicera och hantera alternativ i Gutenberg Block Editor

Varje WordPress post innehåller en hel del metadata. Detta inkluderar information som publiceringsdatum, kategorier och tags, featured images och mycket mer.

Alla dessa alternativ är prydligt placerade i den högra columnen på vyn editor.

Alternativ för plugins i Gutenberg

WordPress-tillägg kan dra nytta av Block Editors API för att integrera sina inställningar i vyn edit.

Vissa populära tillägg har sina egna block.

WPForms, det bästa kontaktformulärpluginet för WordPress, låter dig till exempel lägga till formulär i ditt innehåll med hjälp av ett block.

Andra tillägg till WordPress kan också lägga till sina Settings på vyn Block Editor.

Till exempel, här är hur All in One SEO för WordPress allow you to edit your SEO settings at the bottom of the block editor:

På samma sätt, om du driver en onlinebutik med WooCommerce, kommer du att märka att den också har sina egna block.

Dessa block allow you to add your products to any of your WordPress posts and pages.

Lägga till några vanliga block i Block Editor

Blockeditorn kan göra allt som den äldre klassiska editorn kunde göra.

Men du kommer att göra saker snabbare och elegantare än tidigare. Dessutom kan det göra mycket mer, gillar att låta dig styla ditt content med en massa alternativ utan kod.

Här är några av de vanligaste blocken som du kan använda.

1. Lägga till en image i WordPress Block Editor

Det finns ett färdigt Imagely-block i WordPress block editor. Det är bara att add to blocket och sedan uploada en image-fil eller välja den från media-biblioteket.

Du kan också drag and drop bilder från din dator, så skapar editorn automatiskt ett Image block.

När du har lagt till en bild kommer du att kunna se blockinställningarna, där du kan lägga till metadata för bilden, som alt-text, bildupplösningsstorlek och lägga till en länk till bilden.

För mer information, ta en titt på vår tutorial om hur du lägger till images i WordPress.

2. Lägga till en Link i Block Editor

Block Editor har flera block där du kan add to text. Det vanligaste är blocket Paragraph, som har en knapp för insert-länk i toolbaren.

Alla andra block som används ofta har också en knapp för länkar i toolbaren.

Du kan också infoga en länk med hjälp av kortkommandot, som är Command + K för Mac och CTRL + K på Windows-datorer.

3. Lägga till ett galleri för images i Gutenberg

Blocket Gallery fungerar på samma sätt som blocket Image. You add to det och sedan uploadar eller väljer du image-filer.

För mer details, se vår guide om hur du skapar ett image gallery i WordPress.

4. Lägga till shortcodes i WordPress Posts med hjälp av Gutenberg

Alla dina shortcodes kommer att fungera precis som de gjorde i den klassiska Editorn. Du kan helt enkelt add to dem till ett Paragraph block, eller så kan du använda Shortcode block.

Utforska andra block med content i Block Editor

Gutenberg-editorn lovade att lösa några långvariga användbarhetsproblem i WordPress genom att införa nya block.

Följer är några av de favoriter som vi tror att användarna kommer att ha stor nytta av.

1. Lägga till en image bredvid en text i WordPress

Många av våra användare kunde inte placera en bild bredvid texten med den gamla editorn. Det kan du nu göra med blocket Media & Text.

Det här enkla blocket har två block placerade sida vid sida, vilket allow you att enkelt add to en image med lite text bredvid.

2. Lägga till en knapp i WordPress Posts och Pages

Ett annat irritationsmoment med den gamla editorn var att lägga till en knapp i blogginläggen eller på sidorna. Du var antingen tvungen att använda ett plugin som skapade en kortkod för knappen eller växla till HTML-läge och skriva kod.

Lyckligtvis har Gutenberg ett Button-block som gör att du snabbt kan lägga till en knapp i ett inlägg eller på en sida.

Du kan add to en link för din knapp, ändra färger och mycket mer. För detaljer, se vår artikel om hur du enkelt lägger till knappar i WordPress.

3. Lägga till vackra cover images i blogginlägg och landing pages

En annan cool funktion som du kanske vill prova är Cover-blocket, som tillåter dig att add to cover images eller bakgrundsbilder i färg till dina post och pages.

En cover image är en bredare image som ofta används för en new section på en page eller i början av en story. Det ser beautiful ut och allow you att skapa engagerande layouts för content.

Det är bara att add to ett Cover block och sedan uploada den image du vill använda. Du kan välja en överläggsfärg för coveret eller göra det till en fix bakgrundsbild för att skapa en parallaxeffekt när användarna rullar ner på sidan.

För mer details, se vår artikel om skillnaden mellan cover images och featured images i WordPress.

4. Skapa tabeller inuti artiklar

Den klassiska Editorn hade inte en knapp för att add to tabeller till dina WordPress posts. Du var tvungen att använda ett plugin eller skapa en tabell genom att skriva custom CSS och HTML.

Nu har blockredigeraren ett standardtabellblock som gör det superenkelt att lägga till tabeller i dina inlägg och sidor. Lägg bara till blocket och välj antalet kolumner och rader som du vill infoga.

Du kan nu börja lägga till data i tabellraderna. Du kan alltid lägga till fler rader och kolumner om det behövs, och två grundläggande stilalternativ finns tillgängliga.

5. Skapa content med flera Column

Att skapa innehåll med flera kolumner var ett annat problem som den klassiska editorn inte hanterade alls.

Som tur är kan du i blockredigeraren lägga till ett Columns-block, som lägger till två kolumner i styckeblocken.

Detta block med Column är ganska flexibelt. You can add to upp till 6 columns in a row and even use other blocks inside each column.

Bonustips för att använda Gutenberg som en Pro

När du tittar på blockredigeraren kanske du undrar om du kommer att ägna mer tid åt att lägga till och justera block än att skapa faktiskt innehåll.

Blockredigeraren är otroligt snabb, och även om du bara använder den i några minuter kan du lägga till block direkt utan att ens tänka efter.

Pretty soon, you will realize how much faster your workflow will become with this approach.

Här är några bonustips för avancerade användare som hjälper dig att arbeta ännu snabbare med WordPress Block Editor.

1. Flytta toolbaren Block högst upp

Du kanske har märkt i skärmdumparna ovan att ett verktygsfält visas högst upp i varje block. Du kan flytta detta verktygsfält till toppen av redigeraren.

För att komma åt alternativet ”Top toolbar”, klicka på knappen med tre punkter i det övre högra hörnet av skärmen.

2. Använd kortkommandon på tangentbordet

Gutenberg kommer med flera praktiska genvägar som gör your arbetsflöde ännu snabbare och enklare. Den första du bör börja använda direkt är /.

Du behöver bara enter /, börja skriva och sedan visar Editorn matchande block som du omedelbart kan add to.

Du hittar fler genvägar genom att klicka på menyn med tre punkter längst upp till höger på skärmen och välja ”Kortkommandon”.

Detta kommer att visa en popup med en lista över alla kortkommandon du kan använda. Listan har olika genvägar för Windows- och Mac-användare.

3. Drag and drop Media för att automatiskt skapa Media Blocks

Med Gutenberg kan du dra och släppa filer var som helst på skärmen och automatiskt skapa ett block åt dig.

You kan till exempel släppa en enda image- eller videoklippsfil, så skapas blocket åt you. Alternativt kan du släppa flera image-filer för att skapa ett Gallery-block.

4. Lägga till YouTube, Twitter, Vimeo och andra embeds

Blockredigeraren gör det enklare att bädda in innehåll från tredje part i ditt WordPress-innehåll. Det finns block för alla populära tjänster från tredje part.

Du kan dock bara copy and paste URL:en för embed när som helst, och det kommer automatiskt att skapa ett block åt you.

Om du t.ex. lägger till en URL till en YouTube-video skapas automatiskt ett YouTube-inbäddningsblock och videon visas.

Standardalternativet för inbäddning fungerar inte för Facebook- och Instagram-inbäddningar, men det finns en lösning. Se vår artikel om inbäddning av Facebook- och Instagram-inlägg i WordPress.

Lägga till fler block till Gutenberg Block Editor i WordPress

Blockeditorn i WordPress gör det möjligt för utvecklare att skapa sina egna block. Några utmärkta WordPress-plugins erbjuder blockpaket för den nya editorn.

Här är några av dem:

1. Spectra WordPress Gutenberg Blocks

Spectra WordPress Gutenberg Blocks är ett blockbibliotek med många avancerade block som hjälper dig att add to fler designelement till your content.

Spectra, som skapades av personerna bakom det populära Astra WordPress-temat, hjälper dig att skapa vackra mönster utan att skriva någon kod.

För mer information, se vår kompletta Spectra review.

2. PublishPress Block

PublishPress Blocks är ett annat kraftfullt blockbibliotek som levereras med ytterligare block för att utöka Gutenberg block editor.

Den innehåller beautiful layout options, sliders, buttons, icons, image galleries, maps, tabs, testimonials, accordions, and more.

3. Stapelbara – Gutenberg Blocks

Stackable – Gutenberg Blocks är en samling vackert designade Gutenberg-block som du kan använda på din webbplats. Den innehåller block för behållaren, inlägg, funktionsgaller, dragspel, bildruta, ikonlista, uppmaning till handling och mer.

Vanliga frågor om Gutenberg – Block Editor i WordPress

Sedan Gutenberg blev standard WordPress editor har vi fått många frågor om hur man använder den. Här är svaren på några av de vanligaste frågorna om Block Editor.

1. Vad händer med mina äldre inlägg och pages i block editor? Kan jag fortfarande editera dem?

Blockeditorn påverkar inte dina gamla inlägg och sidor. Du kan fortfarande redigera dem, och blockredigeraren öppnar dem automatiskt i ett block som innehåller den klassiska redigeraren.

Du kan editera dem i den gamla editorn, eller så kan du konvertera äldre artiklar till block och använda block editorn.

2. Kan jag fortsätta att använda den gamla Editorn?

Ja, du kan fortfarande använda den gamla Editorn. Installera och aktivera helt enkelt Classic Editor plugin.

Vid aktivering inaktiveras blockredigeraren och du kan fortsätta att använda den klassiska redigeraren.

Observera att Classic Editor kommer att stödjas fram till 2024. För att bekanta dig med blockredigeraren kan du börja använda den nu.

3. Vad gör jag om block editor inte fungerar med ett plugin eller tema som jag använder?

Project Gutenberg var länge under utveckling, vilket gav plugin- och temautgivare gott om tid att testa sin kod för kompatibilitet.

Det finns dock fortfarande en chans att vissa plugins och teman inte fungerar bra med blockredigeraren. I så fall kan du installera plugin-programmet Classic Editor, be utvecklaren att lägga till Gutenberg-stöd eller hitta ett alternativt plugin-program eller tema.

4. Hur kan jag lära mig mer om Gutenbergs tips och tricks?

WPBeginner är det bästa stället att lära sig om block editor i WordPress. Vi är den största WordPress resource site på internet.

Vi kommer att publicera nya artiklar och uppdatera våra gamla resurser för att hjälpa dig att bemästra blockredigeraren.

Under tiden, om du har några frågor, är du välkommen att kontakta oss genom att lämna en kommentar eller använda kontaktformuläret på vår webbplats.

5. Run på problem med Gutenberg?

Om du har problem med WordPress blockredigerare har vi skapat en snabb felsökningsguide som listar alla vanliga problem med blockredigeraren som användare stöter på och hur man löser dem.

Bonusresurser

Nedan följer några ytterligare resurser som hjälper dig att använda blockeditorn på ett mer effektivt sätt:

• WordPress Blockredigerare vs Sidbyggare: Vad är skillnaden?
• Så här skapar du ett anpassat WordPress-block (enkelt sätt)
• Så här importerar / exporterar du dina Gutenberg-block i WordPress (2 steg)
• WordPress Widgets vs Blocks – Vad är skillnaden? (Förklarat)
• En komplett nybörjarguide till WordPress Full Site Editing
• Bästa blockteman för redigering av hela webbplatsen i WordPress

Vi hoppas att denna Gutenberg tutorial hjälpte dig att lära dig hur du använder WordPress block editor. Du kanske också vill se vår kompletta WordPress prestandaguide för att förbättra hastigheten på din website eller kontrollera vår jämförelse av de bästa e-postmarknadsföringstjänsterna för småföretag.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.