Om du har använt WordPress i ganska många år, kommer du ihåg när folket på WordPress rullade ut Gutenberg- redigeraren i WordPress 5.0 redan 2018.

Denna nya standardredigerare var en stor översyn för att redigera både inlägg och sidor på din webbplats. Det förvandlade den stora textrutan som webbplatsägare var vana vid till en helt annan blockbaserad redigeringsplattform.

Vissa webbplatsägare hatade det så mycket att de undvek att uppgradera till WordPress 5.0 och stannade kvar med den klassiska standardredigeraren så länge som möjligt. Andra webbplatsägare omfamnade förändringen för dess enkelhet och användarvänlighet.

Om du gör övergången och är nyfiken på vad du kan förvänta dig, kommer denna WordPress Gutenberg -handledning att gå igenom de viktigaste funktionerna du behöver veta och förstå. Detta bör göra din övergång så enkel som möjligt.

Vad du kan förvänta dig i WordPress Gutenberg

Det viktigaste att veta om Gutenberg -redigeraren är att den är blockbaserad. Detta innebär att allt du behöver lägga till hanteras via block. Block i Gutenberg inkluderar (men är inte begränsade till):

• Paragraf
• Rubrik
• Bild
• Lista
• Citat
• Koda
• Förformaterad
• Dragcitat
• Tabell

Det finns också några andra avancerade block som sällan används. Du kan se ytterligare block om du installerar nya WordPress-plugins^{(new WordPress plugins)} till redigeraren.

Att lägga till block är lika enkelt som att välja +-ikonen till höger under det senaste blocket du har lagt till.

Om du väljer något av blocken från popup-fönstret läggs det blocket till som nästa avsnitt på din sida eller ditt inlägg. 

Innan vi kommer till dessa block, låt oss börja från början och skapa ett nytt inlägg med Gutenberg i WordPress .

Skapa inlägg och lägga till block

Att lägga till ett inlägg förblir oförändrat från den senaste versionen av WordPress . Välj bara ^(Just)Inlägg^(Posts) från det vänstra navigeringsfältet och välj Lägg till nytt^{(Add New)} under det. 

Detta öppnar inläggsredigeringsfönstret. Det är också här allt är annorlunda. Du kommer att se Gutenbergs standard WordPress-^{(Gutenberg WordPress)} redigerare. 

Lägga till blockobjekt^{(Block Items)} i Gutenberg Editor

Du kan skriva rubriken för ditt inlägg i rubrikfältet. Välj sedan + -ikonen till höger för att lägga till det första blocket.

Styckeblock^{(Paragraph Blocks)}

Det vanligaste första blocket som folk lägger till efter titeln är ett styckeblock. För att göra detta, välj Stycke^(Paragraph) i popup-fönstret. 

Detta kommer att infoga ett blockfält där du kan börja skriva det första stycket i ditt inlägg. Formateringen för styckeblocket^(Paragraph) följer standardteckensnittet^{(the default font)} för din webbplatss styckeblock. 

Här är några tips för att lägga till styckeblock i Gutenberg- redigeraren.

• Ditt stycke kan vara hur långt du vill. Texten kommer automatiskt att slås in i nästa rad, precis som i den klassiska redigeraren.
• Om du trycker på Enter skapar Gutenberg- editorn automatiskt ett nytt styckeblock, men det ser bara ut som ett andra stycke med en styckebrytning.
• Om du markerar någon text i stycket visas ett formateringsfönster där du kan ändra formateringen för den texten, eller ändra blocket till en lista eller någon annan blocktyp.
• Välj de tre prickarna och välj Ta bort block^{(Remove block)} för att ta bort ett styckeblock och ersätta det med något annat.

Bildblock^{(Image Blocks)}

Om du väljer bildblocket^(Image) kommer du att se en bildruta^(Image) där du kan välja en Ladda^(Upload) upp-knapp för att ladda upp en bild till ditt inlägg från din dator. Välj länken Mediebibliotek^{(Media Library)} för att använda en bild från ditt befintliga mediebibliotek, eller Infoga från URL^{(Insert from URL)} för att länka till en bild från en annan webbplats.

Detta kommer att infoga bilden i artikeln där du lade till det nya bildblocket^(Image) . Du kommer att märka att du kan skriva bildtexten för bilden direkt under själva bilden.

Du kan använda samma formateringsalternativ på bildtexten som du kan på den vanliga stycketexten.

Lista block^{(List Blocks)}

När du lägger till ett nytt block och väljer Lista^(List) , infogas listblocket vid den punkten i artikeln.

Det kommer att visa en kula, men när du skriver och trycker på Enter kommer varje ny punkt att dyka upp när du behöver dem.

Listformateringen följer också teckensnittsstilen och storleken som definieras av ditt tema^{(your theme)} , så bli inte förvånad om teckensnittet i din lista ser annorlunda ut än dina styckeblock.

Du kan markera text i listblocket och du kommer att se formateringsalternativ för denna text om du vill ändra den. Du kan inte ändra teckensnittsstilen här, men du kan fetstil, kursiv stil, lägga till en hyperlänk eller ändra blocktypen helt.

Andra block^{(Other Blocks)}

Om du vill se alla block som är tillgängliga, välj + för att lägga till ett block, välj sedan Bläddra i alla^{(Browse all)} för att se hela listan.

Den här listan är faktiskt ganska lång. Allt du kommer ihåg är tillgängligt i den klassiska redigeraren via dess menysystem kommer att inkluderas här. Dessa inkluderar andra vanliga block som:

• Tabeller
• Filer och media
• videoklipp
• Taggen "Mer".
• Sidbrytningar och avgränsare
• Widgets som sociala ikoner, taggmoln, kalender^(calendar) och WordPress-pluginwidgets
• Bädda in^(Embed) kod för sociala webbplatser, mediasajter som YouTube och Spotify med mera

Andra Gutenberg-funktioner

Du behöver inte hålla dig till blocken du har lagt till var du än har lagt till dem. Du kan rulla tillbaka upp i ditt inlägg och välja + -ikonen mellan något av de befintliga blocken. Detta låter dig infoga nya block mellan befintliga.

Du har inte heller fastnat för placeringen av dina block. I den klassiska WordPress- redigeraren var det inte alltid lätt att flytta saker som bilder till andra delar av ditt inlägg utan att ibland förstöra bakgrundskodningen.

I Gutenberg är det så enkelt att flytta element som bilder som att välja blocket och sedan välja upp- eller nedpilarna i popup-menyraden för att flytta blocket uppåt eller nedåt i inlägget.

Varje gång du väljer pilen kommer det att glida blocket en position i vilken riktning du än har valt.

Använda Glutenberg Editor i WordPress

Inläggsområdet är inte det enda stället att lägga till nya block. Du kommer att märka att det finns en mycket enkel ikonmeny högst upp i redigeraren där du kan använda + -ikonen för att lägga till block också.

De andra ikonerna i den här menyn ger dig snabb åtkomst till andra Gutenberg- funktioner.

• Pennan Redigera-^(Edit) ikonen låter dig växla till valläge för att enklare välja block. Dubbelklicka på^{(Double-click)} ett block för att gå tillbaka till redigeringsläget^(Edit) .
• Ångra^(Undo) eller Gör om^(Redo) ikoner (vänster och höger böjda pilar) kommer att ångra eller göra om din senaste redigering.
• I - ikonen⁽ⁱ⁾ (Detaljer) visar dig antalet tecken, ord, rubriker, stycken och block i ditt inlägg.
• Konturikonen låter^(Outline) dig snabbt navigera till block i ditt inlägg baserat på deras ordning i din inläggskontur.

För många människor tar Gutenberg- redigeraren i WordPress lite att vänja sig vid. Men efter att ha upplevt hur enkelt det är att skapa, redigera och manipulera block av element i dina inlägg, kommer du att upptäcka att processen att skapa inlägg och sidor är snabbare och mer produktiv.

WordPress Gutenberg Tutorial: How to Use the New Editor

If yoυ’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rоlled out the Gυtenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 måste ha plugins för nya WordPress-installationer

• Hur man övergår från den klassiska WordPress-redigeraren till Gutenberg

• Hur man döljer snabblänkar på en ny fliksida i Edge med hjälp av Registereditorn

• Hur man flyttar WordPress-webbplats från en värd till en annan

• Hur man installerar och ställer in WordPress på Microsoft Azure

• Hur man uppdaterar PHP i WordPress

• 11 bästa WordPress Podcast Plugins

• Hur man tar bort skadlig programvara från din WordPress-webbplats

• Hur du skapar din egen Twitter-liknande webbplats med WordPress P2-tema

• Hur man kontrollerar om en webbplats är avstängd från AdSense

• 10 viktiga WordPress-plugins för en webbplats för småföretag

• Hur man gör en WordPress-webbplats säker

• Hur du hittar din WordPress-administratörsinloggning

• Hur man installerar ett tema på WordPress

• Hur man utför effektiva delade tester i WordPress

• Hur man konfigurerar sekretess i WordPress och varför det är viktigt

• Hur man snabbar upp en WordPress-webbplats i 11 steg

• Hur man använder WP Super Cache på WordPress-bloggen

• Hur du skapar din egen kupongpopup i WordPress

• Hur man installerar en WordPress-testwebbplats på din dator