Het is bevestigd dat de Gutenberg-editor inderdaad de standaard artikeleditor voor WordPress zal zijn. Iai kon dit laatste testen en ik realiseerde me al snel dat veel gebruikers verloren zullen gaan met deze nieuwe editor, vandaar de reden voor deze tutorial. We zullen dus samen de basisbeginselen van de Gutenberg-editor doornemen en enkele geavanceerde punten bespreken.

voordat u begint

Als je niet de mogelijkheid hebt om WordPress versie 5.0 (die nog in ontwikkeling is) te installeren, dan kan dat nu download Gutenberg en test het op uw versie van WordPress (ik start weer een experimentele omgeving). Ik geef echter toe dat ik een beetje verbaasd ben bij het bekijken van de beoordelingen die aan deze nieuwe editor zijn gegeven, meer dan de helft van mijn gebruikers gaf een beoordeling van 1/5.

voorbeeld gutenberg rating wordpress.jpeg

Ik ga daar niet bij stoppen en testen om er gevoel voor te krijgen.

Interface presentatie

Om Gutenberg te gebruiken, moet u: schrijven een artikel (uiteraard), zoals je in het verleden hebt gedaan, d.w.z. " Artikelen> Toevoegen".

gutenberg presentation.jpeg

Wat me vanaf het begin opviel, is dat de uitgever veel nadruk heeft gelegd op de afwezigheid van afleiding en de volledige breedte van de pagina heeft benut.

oude versie wordpress.jpeg

Ook al moeten we erkennen dat er te veel marges zijn op Gutenberg, de witte achtergrond is volgens mij een kleur die voor minder afleiding zorgt. Je zult merken dat Gutenberg veel lijkt op de berichteditor op Calypso (WordPress.com).

calypso-editor wordpress.jpeg

Locatie van de elementen

Back-upgedeelte

De indeling is enorm veranderd. Het artikelbesparende gebied bevindt zich nu bovenaan. Het is eerder een gedeelte voor snelle toegang tot de knop Opslaan.

back-upsectie gutenberg.jpeg

Met de knop met het instellingspictogram kunt u de onderstaande klep sluiten. De knoppen waarmee we konden schakelen tussen de visuele editor en de teksteditor, bevinden zich nu in hetzelfde paneel helemaal rechts. Om een ​​voorbeeld van het artikel te zien, moet u op het oog klikken dat zich vóór de knop "Publiceren ..." bevindt.

geavanceerde controle gutenberg.jpeg

Het gedeelte voor het selecteren van de uitgelichte afbeelding voor categorieën en artikelzichtbaarheid bevindt zich zoals gewoonlijk aan de rechterkant. Moet u ervoor zorgen dat de " Document Is geselecteerd.

gutenberg sectieklasse en afbeelding op de first.jpeg

Bloksectie

Dit is de innovatie die Gutenberg brengt. U moet weten dat elke alinea over Gutenberg nu als een blok moet worden beschouwd. De blokken hebben deze mogelijkheid om afzonderlijk verstelbaar te zijn, maar ze kunnen ook gemakkelijk over het hele document worden verplaatst.

Als je de cursor op je alinea hebt geplaatst, om toegang te krijgen tot de functionaliteiten van het geselecteerde blok, moet je op de bloktab aan de rechterkant klikken.

blok gutenberg wordpress.jpeg

Met deze instellingen kunt u bijvoorbeeld een achtergrondkleur definiëren die alleen van toepassing is op het blok en de lettergrootte van het blok wijzigen. Ik vind het nogal handig.

Opmaakopties

De opmaak verschijnt boven elk blok.

optie formatting.jpeg

U zult ook de lay-outopties bovenaan weergeven door op de Editor-optie te klikken en vervolgens op "Stel de werkbalk bovenaan in" te klikken.

weergave-opmaakopties op de top.jpeg

Hoe aangepaste blokken toe te voegen

U bent niet beperkt tot het gebruik van het alineablok. Om meer blokken toe te voegen, moet u op het + -pictogram linksboven klikken.

ander blok gutenberg.jpeg

Hiermee heb je toegang tot de verschillende beschikbare blokken. Het is ook op deze locatie dat u toegang heeft tot de verschillende blokken die worden aangeboden door de thema's en plug-ins. Je hebt zelfs de mogelijkheid om je eigen aangepaste blokken op te slaan. Ik denk dat het gemakkelijker wordt om vergelijkbare artikelen te bewerken.

Dat is alles voor deze tutorial, we gaan verder in een volgende door alles wat we in deze tutorial hebben waargenomen in de praktijk te brengen.