Gutenberg Hub heeft afgelopen week een collectie van 100 block templates gelanceerd. Het project streeft ernaar om gebruikers te helpen om complexe layouts te creëren door simpelweg block code te kopiëren en in de editor te plakken. Het mooiste is dat de templates helemaal gratis zijn!
Over Gutenberg Hub
Munir Kamal, de oprichter van CakeWP, creëerde Gutenberg Hub in 2017 na de eerste aankondiging over het Gutenberg project. “Ik was al sinds het begin enthousiast, en dat dreef me ertoe om een blog op te zetten waar ik Gutenberg-gerelateerde dingen kan delen,” schreef hij. Het begon met het cureren van de laatste updates betreffende het Gutenberg project, en de dingen waar anderen aan werkten met betrekking tot Gutenberg. Later begon Kamal met het schrijven van een aantal tutorials om beginners te helpen met Gutenberg aan de slag te gaan. Vervolgens bouwde hij een block directory, wat nu dus wordt aangevuld met het templates directory. “Het doel is om van Gutenberg Hub een uitstekende informatiebron voor Gutenberg gebruikers te maken,” zei hij.
Idee
Het idee voor de templatebibliotheek ontstond toen Kamal homepagina’s van WordPress page builders in Gutenberg probeerde na te maken. “Het lukte me om zonder extra plugins populaire page builders in Gutenberg na te maken. Maar het kostte me veel moeite, en ik besefte dat er veel mogelijk was met de core van Gutenberg.” Hij begon na te denken over hoe sectie-templates hem zouden kunnen helpen om sneller pagina’s te bouwen. “Dus ik begon met het bouwen van secties, en dat groeide uit tot het idee voor een templatebibliotheek.”
Samen met een van zijn teamleden wist Kamal er in een maand tijd 100 custom templates uit te persen. Hij geeft toe dat dit een hoop tijd een beslag nam. “Ik zal zeker zelf meer templates toevoegen. Maar het mooiste zou zijn als andere webdesigners, ontwikkelaars en gebruikers een bijdrage leveren en ook templates aan deze bibliotheek gaan toevoegen.”
Kamal werkt momenteel aan het bouwen van een systeem waarmee anderen hun custom templates aan Gutenberg Hub kunnen toevoegen. Uiteindelijk is het de bedoeling dat het project grotendeels door de WordPress community zelf wordt gerund. In dat opzicht is Gutenberg Hub vergelijkbaar met ShareABlock, alleen dan met een focus op templates.
Een collectie van templates
De templates in de bibliotheek zijn in feite secties van een pagina. Gebruikers kunnen meerdere secties importeren en zo oneindig veel complexe layouts te creëren.
Anders dan andere templatecollecties, waarbij gebruikers bijvoorbeeld een JSON bestand moeten importeren, zijn de templates van Gutenberg Hub stuk voor stuk copy-paste. De website heeft een eenvoudige ‘Copy Code’ knop. Zodra je daarop klikt wordt de betreffende block code naar je clipboard gekopieerd, waarna je dit rechtstreeks in de block editor kunt plakken.
Een aantal blocks zijn uitgerust met custom CSS om bepaalde designaspecten mogelijk te maken, maar ook de CSS is een kwestie van kopiëren en plakken. Kamal beveelt de Blocks CSS plugin van ThemeIsle aan, waarmee gebruikers CSS direct aan de block editor kunnen toevoegen. Een andere manier is om de CSS code via de WordPress customizer toe te voegen.
Template categorieën
Om te zorgen dat gebruikers snel kunnen vinden wat ze zoeken, zijn de block templates onderverdeeld in 12 categorieën:
- Hero
- Testimonial
- Team
- Stats
- Pricing
- Logos
- Gallery
- Features
- FAQ
- Content
- Contact
- Card
De contactformulier templates vereisen het gebruik van de Gutenberg Forms plugin, die ontwikkeld is door Kamal zelf. Dit is vereist omdat WordPress geen ingebouwd formuliersysteem heeft. De overige templates vereisen verder geen plugins.
Tot slot
Kamal heeft geen favoriet template en benadrukt dat hij niet als designer is opgeleid. “Ik heb mijn best gedaan om templates samen te stellen die goed en handig zijn in meerdere situaties. Ik hoop dat anderen de templates kunnen waarderen.” De templates zijn in elk geval een goed beginpunt om een mooie layout in Gutenberg te creëren!
