Alle take-aways van WordCamp Europe 2024

Elke jaar gaan de Maatjes van team webdevelopent naar WordCamp Europe. Dit keer was het in Turijn in Italië! 🍕 WordCamp Europe is the place to be als het gaat om de nieuwste ontwikkelingen binnen WordPress. In deze blog kan je de take-aways vinden van de sessies die we hebben gevolgd. 😎

Voor het gemak, de sessies op een rij:

  1. Interactivity API: de nieuwe standaard om modern front-end te ontwikkelen
  2. SEO & development – Hoe voorkom je wrijving
  3. De nieuwe Woo product editor
  4. Legacy naar Block: Het migreren van een legacy website naar de Block editor
  5. Block hooks: Een nieuwe manier om je block thema’s uit te breiden (flits presentatie)
  6. Het meesteren van block thema’s: 3 basis principes voor beginners
  7. Hack je WordPress website
  8. Hoe ga je om met uitstelgedrag (flits presentatie)

Interactivity API: de nieuwe standaard om modern front-end te ontwikkelen

De nieuwe Interactive API is een nieuwe ingebouwde manier in WordPress om interactiviteit toe te voegen aan een WordPress website. 

De interactive API is gebaseerd op react.js zodat deze schaalbaar is, maar is net als vanilla js en jQuery makkelijk om in te zetten zonder dat het nodig is om te compileren. Je kunt gemakkelijk WordPress hooks en filters integreren wat niet mogelijk is bij vanilla JS en react.js.

De voordelen op een rij:

WhatsApp Image 2024 06 14 at 10.52.48 scaled

Omdat je niet afhankelijk bent van libraries zoals Jquery bevorderd dit de performance van de site.

De interactie API werkt op basis attributes die je aan je html elementen kunt toevoegen om interactiviteit in te bouwen. In de js van je block kan je vervolgens functies aanroepen op basis van deze attributen.

In de volgende Github link kan je een werkend voorbeelden vinden van de Interactive API.

SEO & development – Hoe voorkom je wrijving

De overgang van development naar SEO werkt helaas niet altijd. Het ligt vaak aan de communicatie tussen de verschillende teams. Het is erg lastig om een goede middenweg te kiezen in het geval dit nodig is, maar het grootste probleem is dat je elkaar goed moet gebruiken. Het is dan ook belangrijk dat beide teams het eindproduct, de werkomgeving en de specialisaties van elkaar in gedachten houden tijdens het communiceren om wrijving te voorkomen.

Zonder hetzelfde doel voor ogen te hebben is het onmogelijk om een goede website neer te zetten die goede resultaten behaalt.

Wat veroorzaakt de wrijving?

  • Slechte communicatie
  • Geen respect voor ervaring
  • Overbodige onderdelen
  • Geen kennis van de andere specialiteiten
  • Geen kompassie
  • Niet in willen geven

Wat heeft en developer nodig in de communicatie?

  • Leg uit wat het doel is en wat de eisen zijn
  • Geef advies en ondersteuning

Wat heeft een SEO nodig in de communicatie?

  • Informatie over de beperkingen van een CMS
  • Transparantie over de uitvoering en impact op de website

Een van de belangrijkste stappen in de workflow is om erachter te komen wie de juiste persoon is om mee in contact te zijn. Soms heeft de uitvoerende partij niet alle kennis die nodig is. Wees niet bang om dit aan te geven.

Enkel een standup is vaak niet genoeg om alle eisen te bespreken, omdat je het hier eigenlijk altijd met elkaar eens bent. Daarom is het belangrijk om tijdens de uitvoerende fase ook goed in contact met elkaar te blijven en flexibel in het project te staan.

Door goede communicatie krijg je niet alleen een beter eindresultaat, maar ook het product, de werk atmosfeer in je interne reputatie zal hier enorm van verbeteren.

De nieuwe Woo product editor

De manier van het toevoegen van producten is op de schop gegaan binnen Woocommerce. De product editor maakt nu gebruik van de Block API zodat Woocommerce functioneel meer werkt zoals heel WordPress. Het bewerken van de producten werkt dus meer zoals het bewerken van een regulier pagina in de back-end. 

Je kunt blokken registreren specifiek voor Woo die visueel worden weergegeven in de producten editor. Voorheen kon je dit alleen doen via hooks. 

Benieuwd hoe dit er visueel uitziet, in deze blog kan je zien hoe deze nieuwe editor werkt: https://woocommerce.com/document/new-product-editor-beta/

Hieronder kan je een snel overzicht vinden van de voordelen en nadelen op een rij van de oude en de nieuwe editor. Je kunt in de laatste versie van Woo de nieuwe editor aanzetten. Deze is momenteel nog in beta en alleen beschikbaar van Woo 7.9 of hoger.

De voordelen op een rij:

Woo classic editor Woo Block Editor
Een groot formulier om alles te bewerkenVerschillende tabs voor verschillende onderdelen van een product
Is afhankelijk van WordPress meta dataGebruikt de Block API om data op te slaan
Oude interface die moderne elementen mistBlock Editor blocken worden gebruikt voor een optimale beleving

Legacy naar Block: Het migreren van een legacy website naar de Block editor

Twee developers gaven een lezing over de ervaringen die ze hadden met het migreren van een legacy WordPress site naar de Block Editor. 

Ze benadrukken om heel duidelijk de scope van het project te snappen. Grote migraties zijn heel complex. Hieronder een aantal tools die ze hebben gebruikt om de content in kaart te brengen:

  • Jira
  • Google sheets mapping 
  • Influence

Via Google sheets hebben ze uiteindelijk alle content in kaart gebracht en gemapped aan de nieuwe designs en blokken die gemaakt moesten worden.         

Ze haalde de data uit de database, zette deze vervolgens om in een Excel bestand om de scope te bepalen. Vervolgens sloegen ze deze data op in een database, waarmee ze vervolgens via een plugin pagina’s aanmaakte op basis van de data in de database:

Conference scaled

De takeaways die ze hadden waren:

  • Verdeel taken over diverse developers
  • Deel informatie zo vroeg mogelijk met de belanghebbende
  • Herbruik zoveel als mogelijk
  • Het team is net zo belangrijk als de klant
  • Migratie commandos kunnen resource intensief zijn
  • Het opzetten van een multisite heeft de migratie flink versimpelt

Block hooks: Een nieuwe manier om je block thema’s uit te breiden (flits presentatie)

Via Block hooks kan je inhaken op blokken. Je kunt bijvoorbeeld via een plugin twee blokken combineren als je een plugin activeert. Een voorbeeld hiervan is een like button toevoegen aan het einde van een post content blok.

De gebruiker kan wel in de editor handmatig de extra toegevoegde blok weer verwijderen. 

Benieuwd hoe dit precies werkt? Via dit artikel kan je hier meer te weten over komen.

Het meesteren van block thema’s: 3 basis principes voor beginners

In deze lezing gaf Jamie Marsland een demonstratie over de 3 principes die belangrijk zijn voor het werken met een block theme. 

Templates:

Door templates te gebruiken kan je zonder codering kennis het skelet bouwen van een website. Denk hierbij aan de standaard lay-out voor je blog omgeving maar bijvoorbeeld ook de 404-pagina. 

Via de Site editor kan je de templates bewerken vanuit een interface. De interface is geïntroduceerd in WordPress 6.4.

Een template bestaat uit template parts. Dit is bijvoorbeeld een header part een footer part en een content part. Als je een pagina aanmaakt dan wordt de content van de pagina die je aanmaakt ingeladen in de content part van de template. Door templates effectief in te zetten voorkom je repetitief werk. 

Blocks

Alle pagina’s en templates bestaan uit blokken. Blokken zijn eigenlijk lego stenen die je in elkaar klikt. Op deze manier kan je via de block editor op een eenvoudige manier pagina’s aanmaken en herorganiseren.

Steeds meer plugins zoals Woo (Woocommerce) integreren hun eigen blokken in WordPress. Denk hierbij aan een check-out block die je via drag & drop kunt verslepen.

Via patterns kan je groepen blokken opslaan om op andere pagina’s opnieuw te gebruiken. Op deze manier kan je repatatief werk voorkomen.

In de nabije toekomst kan je ook gebruik maken van pattern overrides. Door een pattern vast te zetten kan je voorkomen dat de lay-out tijdens het bewerken van een pagina onbedoeld wordt aangepast. Je kunt vervolgens wel de teksten en afbeeldingen bijvoorbeeld aanpassen, maar niet de kolommen structuur bijvoorbeeld.

Sinds WordPress 6.5 kan je via de Block Bindings API meta data velden koppelen aan blokken. Nu wordt op dit moment nog de bekende plugin ACF gebruikt om dit te doen.

Styles

Je kunt via de site editor globaal stijlen aanpassen van je website. Denk hierbij aan het aanpassen van globale kleuren, maar je kunt bijvoorbeeld ook het lettertype aanpassen van je site.

Hack je WordPress website

Dit was een sessie over hoe je een WordPress website kunt hacken. In zijn demonstratie laat hij zien hoe de media endpoint misbruikt kan worden. In principe kunnen alle bestanden opgehaald worden uit de media bestanden. (/wp-json/wp/v2/media)

Via SVG uploads kan je een website hacken, je kunt namelijk in principe Javascript mee uploaden in het SVG bestand. Het is dus goed om dit uit te sluiten. Je kunt dit zelfs misbruiken door posts aan te maken of door een admin account aan te maken. Bij een RSS feed connectie komen deze posts zelfs naar voren op andere sites.

Bij sommige hostingpartijen is de bash history bereikbaar via de url. Dit kan gevolgen hebben, omdat in dit bestand bijvoorbeeld ook back-up bestanden benoemd kunnen worden die je via een url direct kunt aanroepen en downloaden in sommige gevallen (.bash_history).

Verder benadrukt de presentator hoe belangrijk het is om plugins en WordPress te updaten. Hackers kunnen uit de logs van de ontwikkelaars halen wat de zwaktes waren en inzetten op je website. Juist het verhelpen van de security lek worden niet geüpdatet websites kwetsbaar.

Hoe ga je om met uitstelgedrag (flits presentatie)

In de flitspresentatie gaf de medeoprichtser van Yoast tips hoe je om kan gaan met het uitstellen van werk. De take-aways die ze gaf zijn:

  1. Motiveer jezelf voor de taak en het gevoel dat het je geeft als je het hebt gedaan
  2. Maak een planning in hapbare stukken
  3. Zorg voor reminders als je aan de slag moet met de taak
  4. Als je vast loopt, pas dan je plan aan om frustratie te voorkomen
  5. Maak een gewoonte van je werk
  6. Zorg dat je in een schone omgeving werkt met weinig afleiding
  7. Wees trots op je werk als je je doel hebt behaald. Vier dit echt even!

De Maatjes van team webdevelopement hebben zoals je kunt zien een hoop inspiratie opgedaan tijdens WordCamp in Turijn. Als je nog even wilt sparren over een van de bovenstaande onderwerpen, twijfel niet om contact op te nemen.

Tot volgend jaar bij een nieuwe editie! ✈️