Als je WordPress 5.0 en hoger gebruikt, heb je ongetwijfeld gehoord van de Gutenberg -update die in december 2018 is samengevoegd met WordPress , tenzij je onder een steen hebt geleefd .

Dus als u de nieuwste versie van WP gebruikt, gebruikt u Gutenberg al of bent u doorgegaan met het gebruik van de klassieke editor door de WordPress Classic Editor-plug-^{( WordPress Classic Editor plugin)} in te installeren .

Waarom Gutenberg?^{(Why Gutenberg?)}

Veel WP-gebruikers zijn niet klaar om op de Gutenberg-wagen^{(on the Gutenberg wagon)} te springen , maar sommigen zijn dat wel, waaronder deze website.

Een paar van de redenen waarom u Gutenberg^(Gutenberg) zou willen gebruiken , zijn omdat het:

• Is de toekomst voor WP-ontwikkelaars.
• Biedt een betere gebruikerservaring.
• Is flexibeler dan de originele editor van WP ( TinyMCE ).
• Biedt een nieuwe markt voor ontwikkelaars.

Wat zijn de verschillen tussen WordPress en Gutenberg?^{(What Are The Differences Between WordPress & Gutenberg?)}

WP's Classic Editor is een teksteditor en lijkt erg op Microsoft Word . Het heeft een enkel bewerkingsveld zoals te zien is in de onderstaande schermafbeelding.

Gutenberg is een op blokken gebaseerde editor die er als volgt uitziet:

Er zijn meerdere blokken voor verschillende soorten inhoud die hun eigen opmaakopties bevatten. Blokken zoals:

• Knop
• Afbeelding
• Tafel
• Ingesloten
• Lijst
• Galerij
• Audio
• Citaten
• rubriek
• Code
• Vers
• Aangepaste HTML

Thema's en plug-ins bieden ook meer blokken en widgets die u kunt gebruiken in uw WP-berichten en -pagina's.

Hoe worden bestaande pagina's of berichten beïnvloed?^{(How Are Existing Pages Or Posts Affected?)}

Na het upgraden en gebruiken van Gutenberg , zouden uw bestaande pagina's en berichten correct moeten blijven worden weergegeven. 

U moet echter uw shortcodes controleren en ervoor zorgen dat de plug-ins die u mogelijk gebruikt, werken.

Wanneer je een bestaande pagina of post bewerkt, wordt deze automatisch geopend in een enkel nieuw klassiek Gutenberg -editorblok.

Ben jij klaar om de overstap te maken?

Een staging-site gebruiken^{(Use a Staging Site)}

Het laatste dat u wilt doen, is uw bestaande site kapot maken. De manier om dit te voorkomen is door Gutenberg te activeren op een staging-site^{(a staging site)} . Dit is een exacte replica van uw website waar u dingen kunt testen zonder uw live site te beschadigen.

Testsites bevatten uw thema, plug- ins , opties en inhoud. Uw hostingbedrijf biedt mogelijk staging-sites aan. Als dat niet het geval is, kunt u de WordPress Staging-plug-^{( WordPress Staging plugin)} in gebruiken .

Nadat uw staging-site actief is, installeert en activeert u de Gutenberg-plug-^{( Gutenberg plugin)} in en begint u met testen. Of installeer een gloednieuw exemplaar van WordPress op uw computer en test daar.

Controleer uw plug-ins^{(Check Your Plugins)}

WordPress-gebruikers zijn bekend met wat er gebeurt als plug-ins niet goed samengaan. Soms is het te wijten aan de functionaliteit of conflicterende code. Dit is een uitstekende tijd om te zien of u alle plug-ins gebruikt die u hebt geïnstalleerd. Als je dat niet bent, verwijder ze dan.

U wilt ook zien welke plug-ins worden gebruikt wanneer u inhoud in WordPress bewerkt . Specifieke plug-ins zoals Akismet , Contact Form 7 , Google Sitemap Generator en WP Super Cache hebben niets te maken met de editor en worden niet beïnvloed door het gebruik van Gutenberg .

Aan de andere kant is elke plug-in die functionaliteit toevoegt of de manier waarop de klassieke WP-editor eruitziet, mogelijk niet compatibel met Gutenberg . Vooral plug-ins die shortcodes genereren, aangepaste stijlen toevoegen of recentelijk niet zijn bijgewerkt, zijn meestal in conflict en veroorzaken problemen.

Gutenberg had vroeger een actieve database voor plug-incompatibiliteit . ^{(Plugin Compatibility)}Het is echter stilgelegd omdat het niet langer actief wordt onderhouden.

U kunt de definitieve gegevens bekijken en de database downloaden^{( download the database)} als een CSV -bestand. Zonder toegang tot een actieve compatibiliteitsdatabase voor plug-ins, zult u elke plug-in die u gebruikt handmatig moeten testen.

Probeer een nieuw bericht op uw testsite te maken. Je zult zien dat je in de Gutenberg- editor bent en het zal er voor jou anders uitzien. Wanneer u begint te typen, maakt u automatisch een alineablok. U hoeft geen nieuw blok toe te voegen wanneer u een nieuwe alinea toevoegt. Druk gewoon^(Just) op enter of de return-toets.

Aangezien je probeert te zien of je huidige plug-ins zullen werken, probeer dan opnieuw te creëren hoe je ze allemaal hebt gebruikt en kijk of het nog steeds werkt.

Als dit niet het geval is, zoek dan naar dezelfde functionaliteit in het standaard Gutenberg -blok, voeg dat blok toe en voeg uw inhoud toe.

Zorg ervoor dat u een lijst bijhoudt van de plug-ins die niet correct werken, zodat u ze kunt verwijderen wanneer u met Gutenberg live gaat .

Wat als er geen standaardblok is voor de functionaliteit die u nodig hebt?^{(What If There Is No Default Block For The Functionality You Need?)}

Controleer alle blokken om te zien of de functionaliteit die je nodig hebt zich in een ander blok bevindt. Als je iets niet kunt vinden dat werkt, kun je contact opnemen met de auteurs van de plug-ins en hen vragen of ze van plan zijn om het bij te werken zodat het compatibel is met Gutenberg .

Als al het andere faalt, probeer dan een Gutenberg-plug-^{( Gutenberg plugin)} in te vinden die doet wat je nodig hebt. Verwijder de plug-ins die niet werken van uw testsite.

Live gaan^{(Going Live)}

Voordat je IETS met je live site doet, moet je een volledige back-up maken van je hele site voor het geval je iets hebt gemist bij het controleren op compatibiliteit of als er een andere fout optreedt.

Het is mogelijk om alle noodzakelijke wijzigingen aan te brengen op uw testsite en deze naar uw live site te pushen. Dit vereist echter enige technische kennis. Dus, tenzij u een ontwikkelaar bent of er een hebt die voor u werkt, is het beter om de wijzigingen handmatig aan te brengen.  

Begin met het verwijderen van de plug-ins die niet werkten en voeg de nieuwe toe om ze te vervangen. Als oude plug-ins gegevens verwerken voor bestaande berichten en pagina's en nieuwe niet breken, kunt u ze geïnstalleerd laten.

Wilt u uw oude berichten en pagina's converteren naar Gutenberg-blokken?^{(Do You Want To Convert Your Old Posts & Pages To Gutenberg Blocks?)}

Open elke pagina en post vanuit het klassieke blokmenu^{(Block Menu)} . Klik^(Click) op de drie stippen om de opties te bekijken^{(view options)} . Selecteer in het vervolgkeuzemenu Converteren naar blokken^{(Convert to Blocks)} .

Nadat WP uw inhoud naar het Gutenberg -bloksysteem heeft geconverteerd, moet u elk blok bekijken. Gebruik Bloknavigatie^{(Use Block Navigation)} (van pictogrammen) om alle delen van uw bericht of pagina te zien.

Zoals je kunt zien in de bovenstaande schermafbeelding, bevindt elke alinea, afbeelding, lijst en kop zich nu in een eigen blok. Het converteren van bestaande pagina's en berichten naar het nieuwe Gutenberg -systeem is snel en eenvoudig.

Het kan enkele uren duren om uw plug-ins te testen en nieuwe te vinden, maar u hoeft dit maar één keer te doen. Zorg ervoor dat u de hierboven voorgestelde stappen volgt om uw verhuizing naar Gutenberg pijnloos en foutloos te maken.

How To Transition From The Classic WordPress Editor To Gutenberg

If you use WordPress 5.0 and higher, unless you have been living undеr a rock, you will have undоubtedly hеard оf the Gutenbеrg update which was merged into WordPress in December 2018.

So if you are using the latest version of WP, you are either already using Gutenberg or have continued using the classic editor by installing the WordPress Classic Editor plugin.

Why Gutenberg?

Many WP users are not ready to jump on the Gutenberg wagon, but some are, including this website.

A few of the reasons why you might want to use Gutenberg are because it:

• Is the future for WP developers.
• Provides a better user experience.
• Is more flexible that WP’s original editor (TinyMCE).
• Will provide a new market for developers.

What Are The Differences Between WordPress & Gutenberg?

WP’s Classic Editor is a text editor and looks very much like Microsoft Word. It has a single editing field as seen in the screenshot below.

Gutenberg is a block-based editor that looks like this:

There are multiple blocks for different types of content that include their own formatting options. Blocks such as:

• Button
• Image
• Table
• Embeds
• List
• Gallery
• Audio
• Quotes
• Heading
• Code
• Verse
• Custom HTML

Also, themes and plugins offer more blocks and widgets for you to use in your WP posts and pages.

How Are Existing Pages Or Posts Affected?

After upgrading and using Gutenberg, your existing pages and posts should continue to display correctly. 

However, you should check your shortcodes and make sure that the plugins you might be using are working.

When you edit an existing page or post, it will automatically open in a single new Gutenberg editor classic block.

Are you ready to make the switch?

Use a Staging Site

The last thing you want to do is break your existing site. The way to avoid this is to activate Gutenberg on a staging site. This is an exact replica of your website where you can test things out without doing any damage to your live site.

Test sites include your theme, plugins, options, and content. Your hosting company might offer staging sites. If they don’t, you can use the WordPress Staging plugin.

After your staging site is up and running, install and activate the Gutenberg plugin and start testing. Or install a brand new instance of WordPress on your computer and test on there.

Check Your Plugins

WordPress users are familiar with what happens when plugins don’t play nice together. Sometimes it’s due to the functionality or conflicting code. This is an excellent time to see if you are using all the plugins you have installed. If you aren’t, remove them.

You also want to see which plugins are being used when you are editing content in WordPress. Specific plugins such as Akismet, Contact Form 7, Google Sitemap Generator, and WP Super Cache have nothing to do with the editor and will not be affected by using Gutenberg.

On the other hand, any plugin that adds functionality or changes the way the WP classic editor looks might not be compatible with Gutenberg. In particular, plugins that generated shortcodes, adds custom styles, or haven’t been updated recently, usually conflict and cause problems.

Gutenberg used to have an active Plugin Compatibility database. However, it has been shut down because it is no longer actively maintained.

You can review the final data and download the database as a CSV file. Without access to an active plugin compatibility database, you are going to have to manually test each plugin you use.

Try creating a new post on your test site. You will see that you are in the Gutenberg editor and it will look different to you. When you start typing, you are automatically creating a paragraph block. You don’t have to add a new block when you add a new paragraph. Just hit enter or the return key.

Since you are trying to see if your current plugins will work, try to recreate how you used each one and see if it still works.

If it doesn’t, look for the same functionality in the default Gutenberg block, add that block, and add your content.

Be sure to keep a list of the plugins that don’t work correctly so you can remove them when going live with Gutenberg.

What If There Is No Default Block For The Functionality You Need?

Check all the blocks to see if the functionality you need lives inside another block. If you can’t find something that will work, you can contact the plugin authors and ask them if they are planning to update it to be compatible with Gutenberg.

If all else fails, try to find a Gutenberg plugin that does what you need. Delete the plugins that don’t work from your staging site.

Going Live

Before you do ANYTHING to your live site, make a complete backup of your entire site in case you missed something when checking for compatibility or another error occurs.

It is possible to make all the necessary changes on your test site and push them to your live site. However, this requires some technical knowledge. So, unless you are a developer or have one that works for you, it is better to make the changes manually.  

Start by deleting the plugins that didn’t work and adding the new ones you found to replace them. If old plugins are processing data for existing posts and pages and do not break new ones, you can leave them installed.

Do You Want To Convert Your Old Posts & Pages To Gutenberg Blocks?

Open each page and post from the Classic Block Menu. Click the three dots to view options. Select from the drop-down menu Convert to Blocks.

After WP converts your content to the Gutenberg block system, you should review each block. Use Block Navigation (from icons) to see all the parts of your post or page.

As you can see in the above screenshot, every paragraph, image, list, and heading is now in its own block. Converting existing pages and posts to the new Gutenberg system is quick and easy.

It might take several hours to test your plugins and find new ones, but you only have to do this once. Make sure to follow the steps suggested above to make your move to Gutenberg painless and error-free.

Related posts

• WordPress Gutenberg-zelfstudie: hoe de nieuwe editor te gebruiken

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

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

• Supersnel WordPress draaien op Microsoft Azure

• Hoe privacy in WordPress te configureren en waarom het belangrijk is

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

• Hoe PHP in WordPress te updaten

• Lumen5 gebruiken om van uw blogbericht een video te maken

• Een Wix-blog bouwen dat net zo goed is als WordPress

• Een pagina dupliceren in WordPress

• Hoe maak je een back-up van je WordPress-site

• 7 WordPress-tips voor een mobielvriendelijke website

• Hoe effectieve split-tests uit te voeren in WordPress

• Hoe WP Super Cache te gebruiken op WordPress blog

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

• Hoe installeer ik WordPress op Google Cloud Platform

• WordPress Jetpack: wat is het en is het de moeite waard om te installeren?

• Hoe WordPress handmatig op een domein in te stellen

• Een WordPress-site versnellen in 11 stappen

• Wat is AMP voor WordPress en hoe installeer je het?