Als je WordPress al een flink aantal jaren gebruikt, weet je nog dat de mensen bij WordPress de ^(WordPress)Gutenberg- editor in WordPress 5.0 in 2018 uitrolden .

Deze nieuwe standaardeditor was een grote revisie voor het bewerken van zowel berichten als pagina's op uw site. Het transformeerde het grote tekstvak dat website-eigenaren gewend waren in een heel ander op blokken gebaseerd bewerkingsplatform.

Sommige website-eigenaren hadden er zo'n hekel aan dat ze de upgrade naar WordPress 5.0 vermeden en zo lang mogelijk bij de klassieke standaardeditor bleven. Andere website-eigenaren omarmden de verandering vanwege de eenvoud en het gebruiksgemak.

Als je de overstap maakt en nieuwsgierig bent naar wat je kunt verwachten, zal deze WordPress Gutenberg -zelfstudie je door de belangrijkste functies leiden die je moet kennen en begrijpen. Dit zou uw overstap zo gemakkelijk mogelijk moeten maken.

Wat te verwachten in WordPress Gutenberg

Het belangrijkste om te weten over de Gutenberg -editor is dat deze op blokken is gebaseerd. Dit betekent dat alles wat u moet toevoegen, wordt beheerd via blokken. Blokken in Gutenberg omvatten (maar zijn niet beperkt tot):

• Paragraaf
• koptekst
• Afbeelding
• Lijst
• Citaat
• Code
• Voorgeformateerd
• Aanhalingsteken
• Tafel

Er zijn ook een paar andere geavanceerde blokken die zelden worden gebruikt. Mogelijk ziet u extra blokkades als u nieuwe WordPress-plug-ins^{(new WordPress plugins)} voor de editor installeert.

Het toevoegen van blokken is net zo eenvoudig als het selecteren van het +-pictogram rechts onder het meest recente blok dat je hebt toegevoegd.

Als u een van de blokken in het pop-upvenster selecteert, wordt dat blok toegevoegd als de volgende sectie op uw pagina of bericht. 

Voordat we bij deze blokken komen, laten we beginnen bij het begin en een nieuw bericht maken met Gutenberg in WordPress .

Berichten maken en blokken toevoegen

Het toevoegen van een bericht blijft ongewijzigd ten opzichte van de laatste versie van WordPress . Selecteer gewoon ^(Just)Berichten^(Posts) in de linkernavigatiebalk en selecteer daaronder  Nieuwe toevoegen .^{(Add New)}

Dit opent het berichteditorvenster. Ook hier is alles anders. U ziet de standaard Gutenberg WordPress- editor. 

Blokitems toevoegen in^{(Block Items)} de Gutenberg-editor

U kunt de titel van uw bericht typen in het titelveld. Selecteer vervolgens het + -pictogram aan de rechterkant om het eerste blok toe te voegen.

Alineablokken^{(Paragraph Blocks)}

Het meest voorkomende eerste blok dat mensen na de titel toevoegen, is een alineablok. Selecteer hiervoor Alinea^(Paragraph) in het pop-upvenster. 

Hiermee wordt een blokveld ingevoegd waar u kunt beginnen met het typen van de eerste alinea van uw bericht. De opmaak voor het alineablok^(Paragraph) volgt het standaardlettertype voor de alineablokken^{(the default font)} van uw site. 

Hier zijn enkele tips voor het toevoegen van alineablokken in de Gutenberg- editor.

• Je alinea kan zo lang zijn als je wilt. De tekst loopt automatisch terug naar de volgende regel, net als in de klassieke editor.
• Als u op Enter drukt , maakt de Gutenberg -editor automatisch een nieuw alineablok aan, maar het ziet eruit als een tweede alinea met een alinea-einde.
• Als u tekst in de alinea markeert, wordt een opmaakvenster weergegeven waarin u de opmaak voor die tekst kunt wijzigen, of het blok kunt wijzigen in een lijst of een ander bloktype.
• Selecteer de drie stippen en selecteer Blok^{(Remove block)} verwijderen om een ​​alineablok te verwijderen en door iets anders te vervangen.

Afbeeldingsblokken^{(Image Blocks)}

Als je het afbeeldingsblok^(Image) selecteert , zie je een afbeeldingsvak^(Image) waarin je een knop Uploaden^(Upload) kunt selecteren om een ​​afbeelding vanaf je computer naar je bericht te uploaden. Selecteer de koppeling Mediabibliotheek^{(Media Library)} om een ​​afbeelding uit uw bestaande mediabibliotheek te gebruiken, of Invoegen vanuit URL^{(Insert from URL)} om naar een afbeelding van een andere site te linken.

Hiermee wordt de afbeelding ingevoegd in het artikel waar u het nieuwe afbeeldingsblok^(Image) hebt toegevoegd . U zult merken dat u het bijschrift voor de afbeelding direct onder de afbeelding zelf kunt typen.

U kunt dezelfde opmaakopties gebruiken voor de bijschrifttekst als voor de gewone alineatekst.

Lijst blokken^{(List Blocks)}

Wanneer u een nieuw blok toevoegt en Lijst^(List) selecteert , wordt het lijstblok op dat punt in het artikel ingevoegd.

Er wordt één opsommingsteken weergegeven, maar terwijl u typt en op Enter drukt , wordt elk nieuw opsommingsteken weergegeven wanneer u ze nodig hebt.

Lijstopmaak volgt ook de lettertypestijl en -grootte zoals gedefinieerd door uw thema^{(your theme)} , dus wees niet verbaasd als het lettertype in uw lijst er anders uitziet dan uw alineablokken.

U kunt tekst in het lijstblok markeren en u ziet opmaakopties voor deze tekst als u deze wilt wijzigen. U kunt de lettertypestijl hier niet wijzigen, maar u kunt vet, cursief, een hyperlink toevoegen of het bloktype volledig wijzigen.

Andere blokken^{(Other Blocks)}

Als u alle beschikbare blokken wilt zien, selecteert u + om een ​​blok toe te voegen en selecteert u vervolgens Alles doorzoeken^{(Browse all)} om de volledige lijst te zien.

Deze lijst is eigenlijk best lang. Alles waarvan u zich herinnert dat het beschikbaar was in de klassieke editor via het menusysteem, wordt hier opgenomen. Deze omvatten andere veelgebruikte blokken zoals:

• Tafels
• Bestanden en media
• Videos
• De "Meer"-tag
• Pagina-einden en scheidingstekens
• Widgets zoals sociale pictogrammen, tag clouds, kalender^(calendar) en widgets voor WordPress-plug-ins
• Insluitcode^(Embed) voor sociale sites, mediasites zoals YouTube en Spotify , en meer

Andere Gutenberg-functies

Je hoeft niet vast te houden aan de blokken die je hebt toegevoegd, waar je ze ook hebt toegevoegd. Je kunt terug scrollen in je bericht en het + -pictogram tussen een van de bestaande blokken selecteren. Hiermee kunt u nieuwe blokken invoegen tussen bestaande.

Ook zit je niet vast aan de plaatsing van je blokken. In de klassieke WordPress- editor was het niet altijd gemakkelijk om dingen zoals afbeeldingen naar andere delen van je bericht te verplaatsen zonder de achtergrondcodering soms te verpesten.

In Gutenberg is het verplaatsen van elementen zoals afbeeldingen net zo eenvoudig als het selecteren van het blok en vervolgens het selecteren van de pijlen omhoog of omlaag in de pop-upmenubalk om het blok omhoog of omlaag in de post te verplaatsen.

Elke keer dat u de pijl selecteert, schuift het blok één positie in de richting die u hebt geselecteerd.

De Glutenberg-editor gebruiken in WordPress

Het postgedeelte is niet de enige plek om nieuwe blokken toe te voegen. U zult merken dat er een heel eenvoudig pictogrammenu bovenaan de editor is, waar u het + pictogram kunt gebruiken om ook blokken toe te voegen.

De andere pictogrammen in dit menu geven u snel toegang tot andere Gutenberg- functies.

• Met het pictogram Bewerken^(Edit) van de pen kunt u overschakelen naar de selectiemodus om gemakkelijker blokken te selecteren. Dubbelklik op^{(Double-click)} een blok om terug te gaan naar de bewerkingsmodus^(Edit) .
• Ongedaan^(Undo) maken of Opnieuw^(Redo) pictogrammen (links en rechts gebogen pijlen) zullen uw laatste bewerking ongedaan maken of opnieuw uitvoeren.
• Het i (Details)-pictogram toont u het aantal tekens, woorden, koppen, alinea's en blokken in uw bericht.
• Met het overzichtspictogram^(Outline) kun je snel naar blokken in je bericht navigeren op basis van hun volgorde in je berichtoverzicht.

Voor veel mensen is de Gutenberg- editor in WordPress even wennen. Maar nadat je hebt ervaren hoe gemakkelijk het is om blokken met elementen in je berichten te maken, te bewerken en te manipuleren, zul je merken dat het maken van berichten en pagina's sneller en productiever verloopt.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a fеw years, then you remеmber when the folks at WordPress rolled out the Gutenberg 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 plug-ins die je nodig hebt voor nieuwe WordPress-installaties

• Hoe over te stappen van de klassieke WordPress-editor naar Gutenberg?

• Snelkoppelingen op een nieuw tabblad in Edge verbergen met de Register-editor

• Hoe een WordPress-site van de ene host naar de andere te verplaatsen

• Hoe WordPress te installeren en in te stellen op Microsoft Azure

• Malware van uw WordPress-site verwijderen

• Hoe maak je een WordPress-site veilig

• Hoe u uw eigen coupon-pop-up kunt maken in WordPress

• Het beste schrijfformaat voor blogs om uw punten over te brengen

• Hoe u een WordPress-site kunt versnellen met .HTACCESS

• Een pagina dupliceren in WordPress

• Hoe u pagina's op uw WordPress-website met een wachtwoord kunt beveiligen

• Hoe WordPress handmatig op een domein in te stellen

• Hoe PHP in WordPress te updaten

• Kindthema maken in WordPress

• WordPress toont HTTP-fout bij het uploaden van afbeeldingen

• Leid gebruikers om vanaf 404-pagina in WordPress

• Moet WordPress Yoast SEO-instellingen 2022 hebben

• Een thema installeren op WordPress

• 10 essentiële WordPress-plug-ins voor een website voor kleine bedrijven