Hvis du har brugt WordPress i en del år, så kan du huske, da folk hos WordPress rullede Gutenberg- editoren ud i WordPress 5.0 tilbage i 2018.

Denne nye standardeditor var en større revision til redigering af både indlæg og sider på dit websted. Det forvandlede den store tekstboks, som webstedsejere var vant til, til en meget anderledes blokbaseret redigeringsplatform.

Nogle webstedsejere hadede det så meget, at de undgik at opgradere til WordPress 5.0 og blev med den klassiske standardeditor så længe som muligt. Andre webstedsejere omfavnede ændringen for dens enkelhed og brugervenlighed.

Hvis du laver overgangen og er nysgerrig efter, hvad du kan forvente, vil denne WordPress Gutenberg- tutorial lede dig gennem de vigtigste funktioner, du har brug for at kende og forstå. Dette skulle gøre din overgang så let som muligt.

Hvad kan du forvente i WordPress Gutenberg

Det vigtigste at vide om Gutenberg -editoren er, at den er blokbaseret. Dette betyder, at alt, hvad du skal tilføje, administreres via blokke. Blokke i Gutenberg inkluderer (men er ikke begrænset til):

• Afsnit
• Header
• Billede
• Liste
• Citere
• Kode
• Forformateret
• Trækcitat
• Bord

Der er også et par andre avancerede blokke, som sjældent bruges. Du kan muligvis se yderligere blokke, hvis du installerer nye WordPress-plugins^{(new WordPress plugins)} til editoren.

Tilføjelse af blokke er så simpelt som at vælge +-ikonet til højre under den seneste blok, du har tilføjet.

Hvis du vælger en af ​​blokkene fra pop op-vinduet, tilføjes denne blok som det næste afsnit på din side eller dit indlæg. 

Før vi kommer til disse blokke, lad os starte fra begyndelsen og oprette et nyt indlæg ved hjælp af Gutenberg i WordPress .

Oprettelse af indlæg og tilføjelse af blokke

Tilføjelse af et indlæg forbliver uændret i forhold til den sidste version af WordPress . Bare^(Just) vælg Indlæg^(Posts) fra venstre navigationslinje, og vælg Tilføj nyt^{(Add New)} under den. 

Dette åbner postredigeringsvinduet. Det er også her, alt er anderledes. Du vil se Gutenbergs standard WordPress-^{(Gutenberg WordPress)} editor. 

Tilføjelse af blokelementer^{(Block Items)} i Gutenberg Editor

Du kan skrive titlen til dit indlæg i titelfeltet. Vælg derefter + -ikonet til højre for at tilføje den første blok.

Afsnitsblokke^{(Paragraph Blocks)}

Den mest almindelige første blok, folk tilføjer efter titlen, er en afsnitsblok. For at gøre dette skal du vælge Afsnit^(Paragraph) fra pop op-vinduet. 

Dette vil indsætte et blokfelt, hvor du kan begynde at skrive det første afsnit af dit indlæg. Formatering for afsnitsblokken^(Paragraph) følger standardskrifttypen^{(the default font)} for dit websteds afsnitsblokke. 

Her er nogle tips til at tilføje afsnitsblokke i Gutenberg- editoren.

• Dit afsnit kan være lige så langt, som du vil. Teksten ombrydes automatisk til næste linje, ligesom i den klassiske editor.
• Hvis du trykker på Enter , opretter Gutenberg -editoren automatisk en ny afsnitsblok, men den ser bare ud som et andet afsnit med et afsnitsskift.
• Fremhævelse af tekst i afsnittet vil vise et formateringsvindue, hvor du kan ændre formateringen for den tekst eller ændre blokken til en liste eller en anden bloktype.
• Vælg de tre prikker, og vælg Fjern blok^{(Remove block)} for at slette en afsnitsblok og erstatte den med noget andet.

Billedblokke^{(Image Blocks)}

Hvis du vælger billedblokken^(Image) , vil du se en billedboks, hvor du kan vælge en Upload -knap for at uploade et ^(Upload)billede^(Image) til dit indlæg fra din computer. Vælg linket Mediebibliotek^{(Media Library)} for at bruge et billede fra dit eksisterende mediebibliotek, eller Indsæt fra URL^{(Insert from URL)} for at linke til et billede fra et andet websted.

Dette vil indsætte billedet^(Image) i artiklen, hvor du tilføjede den nye billedblok. Du vil bemærke, at du kan skrive billedteksten til billedet direkte under selve billedet.

Du kan bruge de samme formateringsmuligheder på billedteksten, som du kan på den almindelige afsnitstekst.

Liste blokke^{(List Blocks)}

Når du tilføjer en ny blok og vælger Liste^(List) , indsætter den listeblokken på det tidspunkt i artiklen.

Det vil vise én punkttegn, men mens du skriver og trykker på Enter , vil hver ny punkttegn dukke op, efterhånden som du har brug for dem.

Listeformatering følger også skrifttypestilen og -størrelsen som defineret af dit tema^{(your theme)} , så bliv ikke overrasket, hvis skrifttypen på din liste ser anderledes ud end dine afsnitsblokke.

Du kan fremhæve tekst i listeblokken, og du vil se formateringsmuligheder for denne tekst, hvis du vil ændre den. Du kan ikke ændre skrifttypestilen her, men du kan fed, kursiv, tilføje et hyperlink eller ændre bloktypen helt.

Andre blokke^{(Other Blocks)}

Hvis du vil se alle de tilgængelige blokke, skal du vælge + for at tilføje en blok og derefter vælge Gennemse alle^{(Browse all)} for at se hele listen.

Denne liste er faktisk ret lang. Alt, hvad du husker at være tilgængeligt i den klassiske editor via dens menusystem, vil blive inkluderet her. Disse inkluderer andre almindeligt anvendte blokke som:

• Tabeller
• Filer og medier
• Videoer
• Tagget "Mere".
• Sideskift og separatorer
• Widgets som sociale ikoner, tag-skyer, kalender^(calendar) og WordPress-plugin-widgets
• Integrer^(Embed) kode til sociale websteder, mediesider som YouTube og Spotify og mere

Andre Gutenberg-funktioner

Du behøver ikke holde dig til de blokke, du har tilføjet, uanset hvor du tilføjede dem. Du kan rulle tilbage op i dit indlæg og vælge + -ikonet mellem enhver af de eksisterende blokke. Dette vil lade dig indsætte nye blokke mellem eksisterende.

Du sidder heller ikke fast med placeringen af ​​dine blokke. I den klassiske WordPress- editor var det ikke altid nemt at flytte ting som billeder til andre sektioner af dit indlæg uden nogle gange at ødelægge baggrundskodningen.

I Gutenberg er det at flytte elementer som billeder så simpelt som at vælge blokken og derefter vælge pil op eller pil ned i pop-up menulinjen for at flytte blokken op eller ned i indlægget.

Hver gang du vælger pilen, vil den glide blokeringen én position i den retning, du har valgt.

Brug af Glutenberg Editor i WordPress

Postområdet er ikke det eneste sted at tilføje nye blokke. Du vil bemærke, at der er en meget enkel ikonmenu øverst i editoren, hvor du også kan bruge + -ikonet til at tilføje blokke.

De andre ikoner i denne menu giver dig hurtig adgang til andre Gutenberg- funktioner.

• Penneredigeringsikonet lader^(Edit) dig skifte til valgtilstand for nemmere at vælge blokke. Dobbeltklik på^{(Double-click)} en blok for at gå tilbage til redigeringstilstand^(Edit) .
• Fortryd^(Undo) eller Redo ikoner (venstre og højre buede pile) vil fortryde eller gentage din sidste redigering.
• I -ikonet (⁽ⁱ⁾ Detaljer) viser dig antallet af tegn, ord, overskrifter, afsnit og blokke i dit indlæg.
• Med dispositionsikonet^(Outline) kan du hurtigt navigere til blokke i dit indlæg baseret på deres rækkefølge i din indlægsoversigt.

For mange mennesker tager Gutenberg- editoren i WordPress noget at vænne sig til. Men efter at have oplevet, hvor nemt det er at oprette, redigere og manipulere blokke af elementer i dine indlæg, vil du opdage, at din proces med at oprette indlæg og sider er hurtigere og mere produktiv.

WordPress Gutenberg Tutorial: How to Use the New Editor

If yоu’ve been using WordPress for quіte a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordРress 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 skal have plugins til nye WordPress-installationer

• Sådan går du fra den klassiske WordPress-editor til Gutenberg

• Sådan skjuler du hurtige links på en ny faneside i Edge ved hjælp af registreringseditor

• Sådan flytter du WordPress-websted fra en vært til en anden

• Sådan installeres og konfigureres WordPress på Microsoft Azure

• Sådan øger du ydeevnen i WordPress gennem en databaserensning

• 11 bedste WordPress Podcast-plugins

• Sådan bruger du Lumen5 til at gøre dit blogindlæg til en video

• WordPress Jetpack: Hvad er det, og er det værd at installere?

• Sådan installeres WordPress på Google Cloud Platform

• Sådan kører du lynhurtigt WordPress på Microsoft Azure

• Skal have WordPress Yoast SEO-indstillinger 2022

• Sådan opsætter du WordPress manuelt på et domæne

• Sådan beskytter du sider med adgangskode på dit WordPress-websted

• Sådan ændrer du din WordPress-login-URL for bedre sikkerhed

• Det bedste blogskriveformat til at få dine point på tværs

• Sådan gør du et WordPress-websted sikkert

• Hvad er AMP til WordPress, og hvordan man installerer det

• Sådan finder du dit WordPress Admin-login

• Vis uddraget på hjemmesiden til WordPress-bloggen