WordPress Meetup 25-03-2019: Alles over Gutenberg


WordPress Meetup 25-03-2019

Vandaag is de spreker Veerle Verbert en ze leert ons bijna alles over Gutenberg!

Het onderwerp van vanavond is: maak je thema Gutenberg compatible ( basics)

Gutenberg is in december 2018 gelanceerd en niet alle WordPress thema’s waren toen compatible.

Met betrekking tot Gutenberg en je WordPress website zijn er 5 scenario’s:

  1. Niets doen
  2. Negeren
  3. De basics bijwerken
  4. Full force; alles goed afstemmen
  5. Opnieuw beginnen
  1. NIETS DOEN 

Als je niks doet en geüpdatet hebt heb je de nieuwe editor al. Je kan dit zelf testen. Gebruik een oud thema. Alles zit in eerste instantie in de oude teksteditor. Met een druk op de knop wordt het de Gutenberg editor. Je ziet dan dat er weinig verandert. Als je test en het ziet er totaal anders uit, dan moet je ingrijpen.

  • NEGEREN

Helemaal niks doen en nietupdaten naar 5.0 (op 4.9 blijven, je krijgt dan wel beveiligingsupdates tot 2020) of de Classic editor (https://nl.wordpress.org/plugins/classic-editor/) blijven gebruiken (kan tot 2021). Dat werkt nu goed omdat de plugins ook meewerken, maar het is nog onduidelijk tot wanneer het blijft werken.)

  • DE BASICS BIJWERKEN 

Basics om je thema Gutenberg editor ready te maken. Je krijgt met Gutenberg extra opties om foto’s te plaatsen bv. Dat werkt alleen met een thema dat Gutenberg compatible is. 

1. Voeg theme support for Gutenberg toe. 

Voor toevoegingen zoals b.v. Align-wide, Editor color palette, kleurpaletten (kan je eigen toevoegen of hem uitschakelen), editor text size palette (kan je eigen toevoegen of hem uitschakelen), Frontend styles & Editor styles, Responsive embeds-opt in (Gutenberg is responsive maar dat moet je wel aanzetten) Dark Mode voor de editor.(https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/)

-Mocht Gutenberg nog niet werken met je thema kan het zijn dat een van de twee codes in je thema niet is geactiveerd (rest api of supported level), dit kan ook in een child theme worden ingesteld

-Er zijn pluginsdie je mogelijkheid geven om per pagina te kiezen of je Gutenberg wil gebruiken of niet.

-Theme support kan je ook toevoegen in je eigen thema’s, link naar handleiding in de presentatie. Betekend ook dat je thema’s css aan bij moet werken.

-Kleurenpaletten: je kan het standaard kleurenpaletten ook overrulen en je eigen palette toevoegen. (beetje php, beetje css)

-Voor tekst grootte kan je met kleine stukjes code veel opties toevoegen. Of volledig uitschakelen.

2. Voeg CSS en Javascript toe.

Dat kon al maar er zijn nieuwe toegevoegd, je kan alleen in de editor, front en editor of alleen front) Op https://gutenberg.com/blocks/kan je alle core blocks bekijken. Voor custom Java script toe te voegen maak je gebruik van WP Core JS libraries.

3. Maak zelf je block templates.

Maak het block in code, voeg het toe aan een of meer posts, en restrikt de template, maar pas daar mee op want het beperkt je in je vrijheid. https://javascriptforwp.com/courses/wordpress-block-development/

  • FULL FORCE

Wil je echt verder met het maken van je eigen blokken voor Gutenberg zal je echt diep in Java Script, React en documentatie moeten duiken. Hierbij een een aantal links. 

https://wordpress.org/gutenberg/handbook/designers-developers/

https://github.com/WordPress/gutenberg/

https://reactforbeginners.com

https://advancedreact.com

https://fronteers.nl/workshops/wordpress-gutenberg

  • OPNIEUW BEGINNEN

Wil je overnieuw starten met je website dan geeft Veerle ook een aantal tips en links voor het opnieuw starten met als gouden tip om het WordPress thema Twentynineteen als uitgangspunt gebruiken. Zie deze links voor de thema’s: GitHub.com/wordpress/twentynineteen/  en GitHub.com/gutenberg-starter-theme/

Veerle sluit haar presentatie af over de basis van ontwikkeling van Gutenberg ready thema’s. 

Een mooi applaus van de zaal en het is tijd voor een korte pauze.

Hier kan je de slides downloaden van de presentatie van Veerle: 20190325 – Talk Make your theme Gutenberg compatible.pdf

En op https://wpbelgium.beheeft Veerle na haar vorige presentatie nog een hoop interessante links verzamelt: Gutenberg Theme Night – WPBelgium

Q & A

Na de pauze is Wendie begonnen met een demonstratie van het gebruik van Gutenberg

Als tip gaf ze de plugin ‘Design’ (https://wordpress.org/plugins/design/) die kent een aantal templates om te gebruiken. Ga er gewoon mee spelen dan merk je vanzelf wat je er allemaal mee kan. 

Er kan wildgroei gaan ontstaan m.b.t. de blokken. Het is onduidelijk hoe het georganiseerd gaat worden in de nabije toekomst.

Er wordt op basis van vraag en antwoord verder gekeken naar de mogelijkheden. 

Verder wordt er gekeken naar het verschil tussen de Gutenberg editor en klassieke pagebuilders. Het bleek dat Gutenberg een grijs gebied vult hierin, maar Gutenberg is meer een editor en dan een pagebuilder.

Atomic Blocks is een thema wat al veel met Gutenberg werkt en ook een eigen block library aanbiedt. https://nl.wordpress.org/themes/atomic-blocks/