Zelf eigen blokken maken Gutenberg WordPress plugin editor

Elke WordPress pagina bestaat uit zogenaamde Blokken. Met behulp van een WordPress plug-in en CSS kunt u ze zelf ontwerpen en uw eigen blokken maken.

Contentblokken voor Gutenberg met de ‘Lazy Blocks’ WordPress plugin

Gutenberg heeft al de nodige kant-en-klare blokken en talrijke plug-ins bieden extra functies. Maar als u meer wilt, zult u op beperkingen stuiten. In dit geval kunt u gewoon uw eigen blokken maken.

Er zijn verschillende WordPress plug-ins waarmee u uw eigen blokken kunt maken. Voor deze workshop gaan we werken met ‘Lazy BlocksWordPress Plugin‘. We leggen uit hoe de plug-in werkt en laten aan de hand van een voorbeeld zien hoe u uw eigen blok kunt maken. Deze basiskennis kunt u vervolgens toepassen op elk blokidee.

Om uw eigen Gutenberg blokken te maken, heeft u enige voorkennis nodig van HTML en CSS. Voor complexere blokken is kennis van PHP-programmering ook nuttig. Maar in het algemeen kan veel worden gedaan, zelfs zonder diepgaande programmeerkennis.

Hoe Lazy Blocks WordPress plugin werkt om blokken te maken

U maakt een nieuw blok aan door in het WordPress menu onder Lazy Blocks te klikken op Create. Hier ziet u drie gebieden:

  • Controls: hier maakt u de invoervelden die u later zult vullen met individuele inhoud wanneer u de editor gebruikt – bijvoorbeeld tekst, afbeeldingen, selectievakjes of iets dergelijks.
  • Code: hier maakt u de invoervelden die u later zult vullen met individuele inhoud.
  • Code: hier kunt u HTML- of PHP-code invoegen die de inhoud van de besturingselementen verwerkt en weergeeft. Een voorbeeld is een afbeelding links of rechts uitgelijnd, afhankelijk van de gekozen optie, zodat de tekst er omheen vloeit. Natuurlijk is ook hier een uitgebreide programmering mogelijk om de in de besturingselementen ingevoerde gegevens te verwerken.</li
  • Blok/Controle: In de rechterkolom kunt u de basisinstellingen voor uw blok instellen, zoals de naam, beschrijving en opties voor de actieve controle.

Aanmaken van een nieuw Gutenberg blok in WordPress

Geef het blok eerst een naam naar keuze in het Titel veld aan de rechterkant. Zorg er alleen voor dat u geen naam gebruikt die al gereserveerd is door de plug-in (zie documentatie).

Als u wilt, kunt u een geschikt Icon kiezen dat later zal worden weergegeven wanneer u het blok in de editor invoegt. Onder Categorie bepaalt u waar uw nieuwe blok in de editor moet verschijnen. Voor de duidelijkheid bevelen wij de Lazy Blocks categorie aan. Een beschrijving in het Omschrijving veld is optioneel.

Onder Ondersteunt kunt u kiezen uit verschillende opties. Het zou te lang zijn om ze allemaal te beschrijven. U kunt bijvoorbeeld de standaard spatiëring van de blokrand wijzigen, het blok tonen of verbergen afhankelijk van de schermgrootte van de gebruiker, en nog veel meer.


Cursus of training blokken maken en meer in WordPress

Tijdens een basiscursus leer je hoe je optimaal werkt met WordPress en Gutenberg:


Meer handleidingen over Gutenberg blokken in Gutenberg