[et_pb_section bb_built=”1″ admin_label=”section”][et_pb_row admin_label=”row” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.3.1″]
De Nieuwe Gutenberg editor voor WordPress
[/et_pb_text][et_pb_text _builder_version=”3.3.1″]
Als je veel met WordPress werkt heb je er vast al over gelezen, de Gutenberg editor. Het is de bedoeling van het team achter WordPress dat de huidige standaard TinyMce editor wordt vervangen door deze Gutenberg editor.
Het is vast een bekend gezicht, de huidige standaard editor:
[/et_pb_text][et_pb_image admin_label=”Afbeelding standaard editor” _builder_version=”3.3.1″ src=”https://www.netsitez.nl/wp-content/uploads/WordPress-editor.jpg” animation_style=”slide” animation_direction=”left” /][et_pb_text _builder_version=”3.3.1″]
Die editor heeft, zoals bekend twee opties:
- Visueel tekst verwerken
- Tekst verwerken in de Tekst modus
Beide opties zijn handig, maar beperkt. Om een layout te kunnen maken die zich echt onderscheidt van een standaard tekst, afbeelding, nog een stuk tekst en misschien wat opmaak als een blokquote of een scheidingslijn heb je html en css kennis nodig als je alleen de standaard editor gebruikt.
Sommige thema’s bieden de mogelijkheid om bepaalde berichttypen te gebruiken, die berichttypen zorgen dan dat er een bepaalde layout wordt geladen. Dat is al een kleine stap vooruit, maar niet alle thema’s bieden die mogelijkheid.
[/et_pb_text][et_pb_image _builder_version=”3.3.1″ src=”https://www.netsitez.nl/wp-content/uploads/Gutenberg-editor.jpg” /][et_pb_text _builder_version=”3.3.1″]
Waarom een nieuwe editor in WordPress?
Het doel van de Gutenberg editor is om verandering te brengen in de manier waarop je een content layout maakt. Het moet stukken makkelijker worden om op een relatief eenvoudige manier een geavanceerde layout te maken, dat is het idee achter deze nieuwe editor. Het gaat een stuk verder dan alleen maar een nieuwe tekst editor, de gehele interface zal veranderen.
Momenteel is de editor nog niet ingebakken in de kern van WordPress, maar al wel te downloaden als plugin. Met die plugin is alvast te testen, vóórdat Gutenberg in de core ingebakken mee wordt geleverd, en er met een nieuwe update ineens alleen nog maar met die nieuwe editor gewerkt kan worden.
Als je er mee wil gaan testen, dan is het ten zeerste aan te raden om dat niet op een live website te doen, maar op een testomgeving. De plugin is nog in Beta versie namelijk. Mocht je een probleem ondervinden door een bug, dan is het beter om dat op een testsite te ondervinden.
De nieuwe interface zal bestaan uit blokken. Die blokken verenigen functies die nu mogelijk worden gemaakt door shortcodes, embeds, widgets, post formats, custom post types, theme opties, meta-boxen, en andere elementen voor formatting.
[/et_pb_text][et_pb_image _builder_version=”3.3.1″ src=”https://www.netsitez.nl/wp-content/uploads/Gutenberg-editor-backend.png” /][et_pb_text _builder_version=”3.3.1″]
Zoals je ziet is de hele interface veranderd. Dit is wat je ziet nadat de Gutenberg plugin is geactiveerd.
[/et_pb_text][et_pb_image _builder_version=”3.3.1″ src=”https://www.netsitez.nl/wp-content/uploads/Gutenberg-blokken.png” /][et_pb_text admin_label=”Page buildertekst” _builder_version=”3.3.1″]
De mogelijkheden die de Gutenberg editor levert, worden nu al voor een groot deel mogelijk gemaakt door thema’s als Divi, die een eigen pagina bouwer (Divi Builder Plugin) ingebouwd heeft. Of thema’s die zijn ontwikkeld met Visual Composer. En natuurlijk zijn er ook sites die zijn gebouwd met Pagina bouwers als Beaverbuilder, Page Builder by SiteOrigin, WR Pagebuilder (hoewel, als je WR Pagebuilder gebruikt is het misschien wel tijd voor iets nieuws, die is niet getest met de laatste drie updates van WordPress), MotoPress Content Editor. Live Composer en Themify Builder.
Een groot deel van de sites die ik heb gebouwd werkt met zo’n pagebuilder. Wat ik dus belangrijk vind, is om te weten of en hoe bestaande sites, die al gebruik maken van een andere pagebuilder, functioneren in combinatie met Gutenberg.
Allereerst moet ik er zeker van zijn dat die sites niet helemaal ondersteboven gaan wanneer Gutenberg wordt uitgerold.
Daarom heb ik de Gutenberg plugin geïnstalleerd, en ben aan het testen geslagen. Nog niet zo eenvoudig, want er moet een flinke hoeveelheid aan page builders en themes op m’n testsite worden geïnstalleerd…
Vooralsnog heb ik Gutenberg al getest op een site die gebouwd is met Divi. Het resultaat van die test is dat bestaande inhoud overeind blijft gelukkig. Maar er zijn wel wat punten waar ik tegenaan loop…
Als ik namelijk zeg dat de content overeind blijft, dan is dat ook echt het enige. Alleen een bestaand bericht wijzigen, dat wordt een heel stuk lastiger.
Omdat de Gutenberg de gehele interface overneemt, laadt de Divi builder niet. De codes die de page builder van Divi in een bericht plaatst worden behouden omdat ze in de database zijn opgeslagen. Daarom blijft een bestaand bericht overeind.
[/et_pb_text][et_pb_image _builder_version=”3.3.1″ src=”https://www.netsitez.nl/wp-content/uploads/Gutenberg-en-Divi.png” /][et_pb_text _builder_version=”3.3.1″]
Hierboven de editor versie van dit bericht, opgemaakt met behulp van Divi, en daarna bekeken terwijl de Gutenberg plugin actief is.
Je ziet de codes die worden geplaatst door de Divi builder, die worden allemaal behouden. Daardoor is er gelukkig geen acuut probleem wanneer Gutenberg in de core actief wordt en de interface overneemt. Het probleem ontstaat pas als je aanpassingen wilt gaan doen.
Er is geen optie om te selecteren welke interface je wilt gebruiken, standaard wordt Gutenberg geladen. De plugin deactiveren is de enige manier om de Divi builder te kunnen gebruiken. Als Gutenberg in de core zit en geen plugin meer is, dan is het nog maar de vraag hoe dat zal gaan, er is dan geen plugin meer die uitgeschakeld kan worden.
Op dit moment kun je wel de teksten aanpassen die met de Divi builder zijn gemaakt, je zult alleen moeten oppassen dat je de shortcodes van Divi intact laat.
Als het nodig is om daadwerkelijk blokken te wijzigen, dan zal er niets anders opzitten dan het hele bericht opnieuw op te bouwen met de Gutenberg editor.
Mogelijk verandert dit nog wanneer Gutenberg in de WordPress core wordt verwerkt. Mogelijk wordt de mogelijkheid om te selecteren welke page builder gebruikt moet worden, overgenomen uit de huidige interface. En anders zullen er daarvoor waarschijnlijk wel plugins voor worden ontwikkeld…
[/et_pb_text][et_pb_text _builder_version=”3.3.1″]
Update 07-08-2018
Sinds WordPress versie 4.9.8 wordt in het dashboard melding gemaakt van het feit dat de nieuwe editor er aan komt. Dat zou (denk ik) kunnen betekenen dat de nieuwe editor inderdaad met WordPress versie 5 wordt uitgerold.
Sinds 19 juni ’18 (toen ik deze post publiceerde) heeft het team achter Divi via een nieuwsbrief laten weten dat de Divi page builder in staat zal zijn om net zoals dat gaat met de huidige standaard editor en de Divi builder, bij het openen van een bericht of pagina de keuze zal bieden of de standaard editor of de Divi editor moet worden gebruikt.
Ook de Page Builder van SiteOrigin is er klaar voor om te werken met de Gutenberg editor.
Visual Composer is er ook klaar voor. Het wordt mogelijk om Gutenberg volledig binnen de visual composer bouwer te gebruiken. Op dit moment wordt er alleen melding gemaakt van de gutenberg editor plugin. Visual Composer Premium gebruikers kunnen een extra module downloaden van de visual composer marketplace en die toevoegen. Daarmee kan op iedere gewenste plek een Gutenberg blok worden toegevoegd. Hoe dit werkt wanneer Gutenberg wordt uitgerold en in de core wordt meegeleverd, daar kan ik nog niets over vinden.
Gelukkig is er de mogelijkheid om de klassieke editor te blijven gebruiken. Voor dat doel is er deze plugin:
Daarmee krijg je de vertrouwde editor weer terug:
Mocht je deze nu al willen gaan testen, hij werkt alleen wanneer de Gutenberg editor ook is geïnstalleerd en actief is.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]