Fronteers — vakvereniging voor front-end developers

WordPress Gutenberg

Gutenberg is de nieuwe blokken-editor in WordPress. In eerste instantie moet deze de verouderde TinyMCE editor gaan vervangen en dient het voornamelijk voor het schrijven van content. Inmiddels is ook duidelijk dat Gutenberg uitgerold gaat worden over heel WordPress. Daarmee wordt 's werelds meest populaire CMS dadelijk volledig component-based. Hoewel dat al een behoorlijke verschuiving is binnen WordPress, is Gutenberg ook nog helemaal opgebouwd met React en moderne Javascript. Nog een flinke verandering ten opzichte van de, veelal verouderde, PHP code in het CMS.

In deze workshop gaan we kijken naar de nuts & bolts van Gutenberg zelf: hoe zit het systeem in elkaar en hoe werken blokken. Om dit te bereiken gaan we zelf blokken bouwen. Hoewel Gutenberg zelf nog behoorlijk gaat veranderen de komende paar jaren (de accessibility-reviews zijn immers niet mals), is de logica voor het bouwen van blokken behoorlijk goed uitgewerkt en, met de komst van WordPress 5.0, stabiel.

Wat gaan we doen?

  • We kijken eerst naar de structuur van Gutenberg: hoe zijn blokken opgebouwd?
  • We bouwen met z'n allen een eenvoudig blok: een "intro tekst" voor een pagina.
  • We kijken naar de diverse opties die aan zo'n blok toe te voegen zijn.
  • We kijken naar hoe de data wordt opgeslagen en welke problemen dit nog kan opleveren.
  • We kijken naar dynamische blokken waarmee 'live' gegevens uit de database gehaald kunnen worden.
  • We bouwen een dynamisch blok (een lijst met gerelateerde berichten uit een te bepalen categorie).
  • We kijken naar de voordelen van dynamische templates.

Voor wie is deze workshop bedoeld?

Mensen die regelmatig met WordPress werken en op een gegeven moment over 'moeten' naar Gutenberg, React-fans die benieuwd zijn of deze editor ze wellicht weer kan laten werken met 's werelds grootste CMS en front-end developers die zelf meer controle willen houden over de HTML output van een WordPress website.

Moet ik al met React kunnen werken?

Je hoeft absoluut geen React-kenner te zijn om met Gutenberg aan de slag te kunnen. De blokken API is goed ingericht en goed gedocumenteerd.
Afhankelijk van je wensen en verwachtingen zul je weinig React hoeven schrijven.
Javascript-kennis is wel belangrijk. Weten wat er staat en waarom het er staat hierin is 't belangrijkste. We gaan veel werken met componenten binnen WordPress en zullen dus geen eigen React componenten 'from scratch' gaan schrijven. We werken met enkele basisprincipes uit ES6. Als deze je vreemd zijn, kan dit redelijk snel uitgelegd worden.
Basiskennis van PHP en hoe WordPress werkt met filters en actions is wel belangrijk. Gelukkig is er voor de workshop nog voldoende tijd om hier even in te duiken: https://codex.wordpress.org/Plugin_API. Verder werken we alleen met HTML en CSS.

Wat moet je meenemen?

Een laptop waar je lokaal een versie van WordPress op kunt draaien. Je zult vóór de aanvang van de workshop hiervoor een volledige installatie ontvangen inclusief database. Het is wel belangrijk dat je deze vóór aanvang van de workshop hebt geïnstalleerd. Mocht je hier niet uitkomen dan kun je altijd contact met me opnemen via de Fronteers-slack, dan loods ik je door het proces heen.

Daarnaast dienen Node.js en NPM op je laptop geïnstalleerd te zijn.

Over Luc Princen

Luc Princen heeft al jaren ervaring met WordPress ontwikkeling én front-end development. Hij is vroeg begonnen met ontwikkelen in Gutenberg (zeg maar gerust té vroeg) en heeft inmiddels al genoeg ervaring opgedaan met Gutenberg in live-situaties. In November heeft hij samen met Peter van Grieken van Frozen Rockets de website voor het Koninklijk instituut voor de Tropen (KIT.nl) opgeleverd en daarmee de Automattic Design Award voor "Best Site" in de wacht gesleept vanwege het, volledig met Gutenberg gerealiseerde, inclusive design.

Luc is zelfstandig developer en designer. Je vind hem op Twitter onder de naam @LucP

Opgave

Voor deze workshop is nog geen (nieuwe) datum gepland. Mocht je geïnteresseerd zijn in de workshop, hou dan het overzicht in de gaten of blijf op de hoogte via RSS en Twitter.

Archief