Zo bouw je blokpatronen in WordPress

WordPress is een krachtig hulpmiddel waarmee je online kan publiceren en waarmee iedereen gemakkelijk tekstuele en/of multimedia-inhoud kan maken en delen. Maar daarnaast is het ook een geweldig professioneel hulpmiddel voor ontwerpers, marketeers en ontwikkelaars, ongeacht hun achtergrond en vaardigheden.

WordPress kan je meest waardevolle teamgenoot zijn en je helpen succesvol te zijn in verschillende beroepen.

Met dat in gedachten hebben we op deze blog een reeks artikelen gepubliceerd om je te helpen de vaardigheden te verwerven die nodig zijn om een WordPress developer te worden:

• Zo bouw je custom Gutenberg blokken
• Zo maak je dynamische blokken voor Gutenberg
• Zo voeg je metaboxen en custom velden toe aan berichten in Gutenberg

En voor degenen die de voorkeur geven aan videocontent, hebben we ook een gratis videocursus: Custom blokken ontwikkelen voor Gutenberg.

En ja, je kunt je carrièreverwachtingen een boost geven met Gutenberg ontwikkelingsvaardigheden, maar je hoeft niet per se een ontwikkelaar te zijn om geavanceerde layouts te maken op je WordPress website.

WordPress gebruikers kunnen profiteren van krachtige features waarmee ze eenvoudig geavanceerde bloklayouts kunnen maken zonder gedoe. In dit artikel richten we onze aandacht op blokpatterns.

Wat zijn blokpatterns

Blokpatterns zijn vooraf samengestelde groepen blokken die je kunt toevoegen aan je content en kunt aanpassen met dezelfde ontwerptools die beschikbaar zijn voor de meegeleverde blokken.

Ze werden voor het eerst geïntroduceerd met WordPress 5.5 om sitebeheerders en makers van content in staat te stellen complexe kant-en-klare structuren van nested blokken in hun inhoud op te nemen met slechts een paar klikken.

Blokkenthema’s bieden meestal een paar blokpatterns die je direct vanuit de blokinserter aan je inhoud kunt toevoegen. Het nieuwe standaardthema dat wordt meegeleverd met WordPress 6.7, Twenty Twenty-Five, bevat +70 blokpatterns.

En je bent niet beperkt tot de patterns die je thema biedt.

Ten eerste vind je tonnen kant-en-klare blokpatterns in de officiële WordPress Pattern Gallery.

Daarnaast kun je een onbeperkt aantal patterns maken met behulp van de Patterns API of de bewerkingstools die beschikbaar zijn in de blokkeneditor. Je kunt custom patterns intern op je website gebruiken, ze exporteren naar andere websites of ze openbaar delen op de Patterns galerij.

Sinds WordPress 6.3 maakt een gloednieuw patternsysteem het aanmaken van patterns flexibeler en eenvoudiger. Nu is het duidelijker wat voor soort layout je aan het bouwen bent en welk effect je aanpassingen hebben op je hele website.

Er zijn twee hoofdsoorten blokpatterns:

• Gesynchroniseerde blokpatterns
• Standaard (niet gesynchroniseerde) blokpatterns

Het belangrijkste verschil tussen de twee soorten is dat alle wijzigingen aan een gesynchroniseerde pattern van toepassing zijn op elke pattern op je hele website. Daarentegen hebben wijzigingen aan een standaard blokpattern alleen invloed op een specifieke pattern.

Maar er valt nog veel meer te zeggen over blokpatterns. Vraag je je af hoe dit systeem werkt en hoe je kunt profiteren van de nieuwe bewerkingsfuncties die zijn toegevoegd aan de meest recente versies van WordPress? Laten we er eens naar kijken.

Kant-en-klare blokpatterns

Prebuilt patterns zijn “niet gesynchroniseerde” blokpatterns, wat betekent dat wijzigingen die je aanbrengt in een blokpattern alleen invloed hebben op de specifieke instantie die je aan het bewerken bent en niet worden toegepast op andere instanties die je hebt toegevoegd aan andere berichten of pagina’s van je website.

Je kunt vooraf gemaakte patterns gebruiken om bloklayouts op te nemen die je ter plekke kunt aanpassen door afbeeldingen, tekst, stijlen of het toevoegen/verwijderen van elementen te wijzigen.

Als je eenmaal een aangepast blokpattern hebt gemaakt, kun je het overal op je website toevoegen en het met een paar klikken aanpassen met de ingebouwde regelaars van de editor.

Je kunt vooraf gemaakte blokpatterns doorbladeren en invoegen via het tabblad Patterns in de Block Inserter of navigeren naar de Patterns beheersectie in de Site Editor. Je kunt ook nieuwe patterns ontdekken in de Pattern Gallery.

In de galerij kun je een pattern kiezen, op de knop Copy pattern klikken en het direct in je inhoud plakken.

Je bent vrij om de groep blokken in de pattern aan te passen zonder dat dit invloed heeft op het geregistreerde pattern of een extra instantie op je website.

Gesynchroniseerde en niet gesynchroniseerde blokpatterns

Zoals hierboven vermeld, is met WordPress 6.3 de patternsysteem gestroomlijnd en consistenter geworden.

Het is nu eenvoudiger voor de gebruiker om je eigen patterns direct vanuit de blokeditor te maken en ze te beheren vanuit het WordPress dashboard zonder zich bezig te hoeven houden met code. Tegenwoordig kun je het volgende bouwen:

• Gesynchroniseerde blokpatterns
• Niet gesynchroniseerde blokpatterns

Het verschil tussen de twee soorten patterns is dat alle wijzigingen die je aanbrengt in een gesynchroniseerde pattern worden toegepast op elke instantie van dat blok op je hele website.

Andersom zullen wijzigingen in een niet gesynchroniseerd blokpattern alleen van invloed zijn op die specifieke instantie van de pattern en niet worden toegepast op andere instanties die je hebt toegevoegd aan andere berichten of pagina’s van je website.

Vanuit het oogpunt van een ontwikkelaar worden custom blokpatterns geregistreerd in de WordPress database als wp_block custom berichttypes, en een wp_pattern_sync_status metaveld slaat de synchronisatiestatus van een pattern op.

Dankzij het nieuwe patternbeheersysteem kun je nu gesynchroniseerde en niet gesynchroniseerde blokpatterns rechtstreeks vanuit de site- of berichteditor maken. Je hoeft alleen maar je bloklayout te ontwerpen, de blokken te selecteren en op het pictogram met de drie puntjes in de werkbalk voor blokken te klikken. Kies vervolgens Create pattern in het vervolgkeuzemenu.

In het onderstaande voorbeeld maken we een gesynchroniseerd pattern van een groepsblok, een kop, een alinea en een knop.

Als je op Create pattern klikt, wordt je gevraagd de naam en categorieën voor je pattern in te vullen en te bepalen of het gesynchroniseerd is of niet.

En dat was het. Je gesynchroniseerde pattern staat nu in het gedeelte Pattern management van de site-editor onder My patterns.

Hier kun je een voorbeeld van je patterns bekijken en de synchronisatiestatus controleren.

Vervolgens kun je de Pattern Editor starten en je blokpattern aanpassen.

Nogmaals, wijzigingen in gesynchroniseerde patterns zijn van invloed op elke keer dat de pattern op je website voorkomt. Wijzigingen in standaardpatterns hebben alleen invloed op toekomstige exemplaren van de pattern.

Dit is mogelijk omdat WordPress de twee soorten patterns anders behandelt. Om het verschil te begrijpen, maak je een niet gesynchroniseerde kopie van je custom pattern, maak je een nieuw bericht of pagina en voeg je de twee patterns toe. Zodra je klaar bent, ga je naar de code editor en controleer je de code.

Het gesynchroniseerde blok wordt gegenereerd door de volgende code:

<!-- wp:block {"ref":512} /-->

Dit betekent dat WordPress het bericht met ID 512 ophaalt om de HTML te genereren die op het scherm wordt weergegeven.

Het tweede blok wordt niet geïdentificeerd met een ID. De code-editor bevat de volledige opmaak waaruit de pattern bestaat. Gesynchroniseerde patterns zijn vooral handig voor het maken van elementen die je op meerdere pagina’s van je website en/of op verschillende websites wilt gebruiken.

Denk aan oproepen tot actie, promotiebanners, prijstabellen, enzovoort. Zoals we al zeiden, beschouwt WordPress custom blokpatterns als wp_block posttypes en slaat ze als zodanig op in de wp_posts tabel.

Als je eenmaal je patterns hebt gemaakt, kun je ze beheren vanuit het beheerscherm Patronen. Je kunt die pagina op verschillende manieren openen:

• Het toevoegen van /wp-admin/edit.php?post_type=wp_block aan de WordPress URL van je website.
• Klikken op de knop Discover all patterns in de Block inserter.
• Klikken op de knop My patterns in de site-editor.

In het scherm Patronen kun je

• Je pattern bewerken, weggooien of exporteren als JSON,
• Patronen importeren vanuit JSON,
• Nieuwe patterns maken.

In de Site editor kun je ook je patterns dupliceren en hernoemen.

Gesynchroniseerde patternomleidingen

Synced Pattern Overrides, geïntroduceerd met WordPress 6.6, is een derde type pattern dat gebruik maakt van de Block Bindings API om de eigenschappen van beide typen patterns te krijgen.

Met gesynchroniseerde patternoverschrijven kun je blokpatterns maken die overal op je website dezelfde structuur behouden en synchroon veranderen met de aanpassingen die je maakt aan de patternstructuur en -stijl in de site-editor. In dit opzicht zijn pattern overrides vergelijkbaar met gesynchroniseerde patterns.

Patroonoverrides zijn echter ook vergelijkbaar met niet gesynchroniseerde patterns, omdat je de inhoud van specifieke blokken in de pattern kunt wijzigen zonder andere instanties van hetzelfde pattern op de site te beïnvloeden.

Patroonovergangen zijndus gesynchroniseerde patterns met individuele niet gesynchroniseerde elementen.

Laten we eens kijken hoe je een pattern override maakt.

Stap 1: Ga naar Patronen en dupliceer een van de bestaande patterns, zoals de pattern Prijzen, 2 kolommen van het Twenty Twenty-Five standaardthema. Voeg een naam toe en zet de kopie op Gesynchroniseerd pattern.

Stap 2: Open Mijn patterns en zoek je nieuwe gesynchroniseerde pattern. Open het en selecteer een van de blokken die je moet overschrijven, zoals het kopblok.

Ga naar de zijbalk met blokinstellingen en scroll naar beneden naar het gedeelte Geavanceerd. Hier vind je Overschrijven inschakelen.

Als je op de knop klikt, wordt je gevraagd om een naam toe te voegen voor de overschrijding.

Stap 3: Herhaal hetzelfde proces voor elk blok dat je wilt overschrijven. Als je klaar bent, maak je een nieuw bericht of pagina en voeg je je custom pattern toe.

Stap 4: Wijzig in de bericht-editor de inhoud van de blokken die je wilt overschrijven, sla het bericht op en controleer het resultaat aan de front-end.

Het is je misschien opgevallen dat wanneer je een instantie van een patternoverschrijving bewerkt in de bericht-editor, de zijbalk met blokinstellingen de velden weergeeft die kunnen worden bewerkt. In het bovenstaande voorbeeld hebben we de koptekst en enkele alinea’s overridebaar gemaakt.

Je kunt overal op je website een willekeurig aantal pattern overrides toevoegen, en elke instantie zal dezelfde oorspronkelijke structuur weergeven, maar is klaar voor jouw aanpassingen.

Open nu je pattern in de site-editor en schakel over naar de code-editor. De code zou er ongeveer zo uit moeten zien:

<!-- wp:heading 
{
	"textAlign":"center",
	"metadata":{
		"name":"Heading",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	},
	"align":"wide"
} 
-->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph 
{
	"align":"center",
	"metadata":{
		"name":"Subtitle",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	}
} 
-->
<p class="has-text-align-center">Cancel or pause anytime.</p>
<!-- /wp:paragraph -->

In het scheidingsteken van het blok zie je de property metadata.bindings. Dit maakt de blokken Headers en Paragraphs bewerkbaar. De eigenschap __default instrueert WordPress om alle ondersteunde attributen te koppelen aan een specifieke bron, namelijk "core/pattern-overrides".

Ga nu in de Post editor naar Code editor. De code zou er ongeveer zo uit moeten zien als hieronder:

<!-- wp:block 
{
	"ref":518,
	"content":{
		"Heading":{
			"content":"Choose your plan"
		},
		"Subtitle":{
			"content":"Try our services with no risk thanks to our 30-day guarantee"
		},
		"Plan 1 title":{
			"content":"Starter"
		},
		"Plan 2 title":{
			"content":"Business"
		}
	}
} 
/-->

Hier zie je een verwijzing naar de blokpattern en een set eigenschappen voor elk blok dat als bewerkbaar is ingesteld.

Merk op dat, omdat patternoverschrijven een implementatie is van de Block Bindings API, je alleen ondersteunde blokken kunt overschrijven. Op het moment van schrijven ondersteunen Patroonoverschrijven de blokken Header, Paragraph, Image en Buttons.

Template parts

Vóór het Gutenberg tijdperk werden WordPress thema’s en templates voornamelijk in PHP gebouwd. Gedegen kennis van child thema’s, template hiërarchie en de belangrijkste front-end ontwikkelingstalen waren basisvereisten om templates te maken of aan te passen. Maar dingen veranderden met de introductie van blokthema’s.

In blokthema’s en klassieke thema’s die voor deze functie hebben gekozen, kun je eenvoudig een template of template part maken of aanpassen in de interface van de site-editor. Je hebt geen ontwikkelingsvaardigheden nodig, tenzij je natuurlijk besluit om thema-ontwikkelaar te worden.

Een bloktemplate is een lijst met template parts. Voorbeelden van blok parts zijn de sitetitel, het logo en de navigatie.

Template parts zijn specifieke secties van een pagina die op verschillende plaatsen kunnen worden gevisualiseerd, zoals een header en een footer, en die op elke pagina van je WordPress website kunnen worden weergegeven.

Je kunt template parts maken en bewerken via de interface van de site-editor, waar je alle bewerkingstools kunt gebruiken die beschikbaar zijn voor blokken.

In tegenstelling tot blokpatterns zijn template parts echter bedoeld voor delen van de site die niet vaak veranderen.

Verschillen tussen patterns en template parts

Samengevat zijn dit de belangrijkste verschillen tussen de drie:

Vooraf gebouwde blokpatterns

• Vooraf gebouwde blokpatterns zijn voorgedefinieerde bloklayouts die je kunt toevoegen aan je inhoud en kunt aanpassen met dezelfde gereedschappen als de meegeleverde blokken. Veranderingen aan een blokpattern hebben alleen invloed op dat ene exemplaar van de blokpattern.
• Je kunt kant-en-klare patterns kopiëren en plakken vanuit de map Pattern.
• Je kunt nieuwe patterns maken en publiceren in de map Pattern.

Custom blokpatterns

• Custom blokpatterns zijn gesynchroniseerde of niet gesynchroniseerde groepen blokken die je kunt gebruiken op elke post of pagina van je website.
• Custom blokpatterns worden opgeslagen in de wp_posts tabel als wp_block berichttype.
• Je kunt custom blokpatterns importeren en exporteren van en naar andere websites.

Template parts

• Template parts zijn specifieke delen van een pagina die kunnen worden weergegeven op verschillende locaties, waaronder de Header, Footer en Zijbalk, die terugkomen op verschillende pagina’s van je WordPress website.
• Je kunt template parts maken en bewerken via de interface van de site-editor.
• Template parts zijn bedoeld voor delen van de site die niet vaak veranderen.

Hoe maak je blokpatterns voor thema’s en plugins?

Zoals we al eerder zeiden, introduceerde WordPress 6.3 een nieuw systeem voor het beheer van blokpatterns. Het is nu gemakkelijker om gesynchroniseerde of niet gesynchroniseerde blokpatterns te maken zonder de editor interface te verlaten. En je kunt ook custom patterns importeren en exporteren met een paar klikken vanuit je WordPress dashboard.

WordPress biedt echter ook andere manieren om blokpatterns te maken voor thema- en plugin-ontwikkelaars.

Samen met de functie voor blokpatterns introduceerde WordPress 5.5 een nieuwe API voor ontwikkelaars om “vooraf ontworpen blokken met inhoud te maken die eenvoudig kunnen worden ingevoegd in berichten, pagina’s, custom berichttypen en templates” De nieuwe API biedt de functies register_block_pattern en register_block_pattern_category om blokpatterns en patterncategorieën te registreren.

Vanaf WordPress 6.0 kun je ook blokpatterns registreren met een PHP-bestand.

Op het moment van dit schrijven heb je dus twee manieren om een blokpattern aan te maken.

• Met behulp van de register_block_pattern helper functie,
• Een PHP bestand toevoegen aan je thema in een map met patterns.

Een blokpattern maken met een plugin

De eerste methode is vooral bedoeld voor WordPress ontwikkelaars, maar is eenvoudig genoeg om ook door niet-gevorderde ontwikkelaars te worden gebruikt.

Als je voor de eerste methode kiest, kun je een blokpattern maken met de twee nieuwe functies register_block_pattern en register_block_pattern_category in het PHP bestand van een plugin of de functions.php van je thema.

Selecteer of registreer een patterncategorie

Kies eerst een categorie voor je pattern. Met de nieuwste WordPress versies zijn er nieuwe patterncategorieën toegevoegd en zijn sommige bestaande categorieën aangepast.

Om de lijst met alle geregistreerde categorieën te krijgen, open je de bericht-editor en plak je de volgende code in de console van de browser:

wp.data.select('core').getBlockPatternCategories()

In WordPress 6.7 met het thema Twenty Twenty-Five actief, krijg je de volgende lijst met patterncategorieën:

Als je blokpattern niet in een van de standaardcategorieën valt, kun je ook een nieuwe categorie registreren met de functieregister_block_pattern_category . Deze functie accepteert twee argumenten:

• $category_name: Patrooncategorienaam inclusief namespace.
• $category_properties: Een array van categorie-properties.

Een voorbeeld helpt je beter te begrijpen hoe je een nieuwe patterncategorie registreert:

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

Een blokpattern registreren

Nadat de patterncategorie is geregistreerd, is de volgende stap het registreren van de blokpattern zelf. Je registreert de blokpattern als volgt met de helperfunctieregister_block_pattern:

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

Deze functie neemt twee argumenten:

• $pattern_name: Een machineleesbare naam in de vorm van namespace/pattern-name.
• $pattern_properties: Een array met properties voor de pattern.

Hier is een lijst van de momenteel beschikbare pattern properties:

• title (verplicht): Een menselijk leesbare titel voor de pattern.
• content (verplicht): De HTML opmaak voor de pattern.
• description: Een tekst die de pattern in de inserter beschrijft. Een beschrijving is optioneel maar wordt aanbevolen omdat het gebruikers helpt de pattern te vinden.
• categories: Een array van een of meer geregistreerde patterncategorieën. Je moet een categorie registreren voordat je hem hier kunt gebruiken (zie de vorige paragraaf).
• keywords: Een array van trefwoorden die gebruikers helpen de pattern te vinden.
• viewportWidth: Een geheel getal dat de breedte van de pattern in de voorvertoning aangeeft.
• blockTypes: Een optionele array van bloktypes die gebruikt worden met de pattern.
• postTypes: Een array van berichttypen die de pattern mogen gebruiken.
• templateTypes: Een matrix van sjabloontypes waar de pattern zinvol is (beschikbaar sinds WordPress 6.2).
• inserter: Een booleaan om te bepalen of de pattern zichtbaar moet zijn in de block inserter. Stel de waarde in op false om de pattern te verbergen. Standaard zullen alle patterns verschijnen in de blok inserter.
• source (optioneel): Een string die de bron van de pattern identificeert. Geef de string plugin door als je de pattern van een plugin registreert. Geef voor een thema de string theme door.

Hier is een voorbeeld van het gebruik van register_block_pattern:

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<p>My awesome block pattern</p>'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

In deze code hebben we de property postTypes gebruikt om de beschikbaarheid van de pattern te beperken tot gewone blogberichten. Je hebt echter de flexibiliteit om een andere waarde in te stellen voor postTypes om het toegankelijk te maken voor verschillende berichttypes. Als je bijvoorbeeld een berichttype product hebt en je wilt de beschikbaarheid van de pattern beperken tot alleen dat specifieke type, dan schrijf je simpelweg:

'postTypes' => array( 'product' ),

Maak nu een nieuw bericht (of aangepast berichttype), open de blok inserter en klik op het label Patterns. Je zou een nieuwe patterncategorie (My Pattern Category) moeten vinden met je custom blokpattern. Speel gerust met pattern properties om je blokpatterns aan te passen.

Laten we nu wat dieper duiken en proberen een echt blokpattern te maken.

Een praktijkvoorbeeld van een blokpattern

Stel dat je een blokpattern wilt maken met een kop, een afbeelding, een alinea en een knop.

Maak in de editor de layout voor je blokpattern, schakel dan over naar de code-editor en kopieer de opmaak.

In ons voorbeeld hebben we de volgende code:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Je kunt deze code nu optimaliseren. Als je de blokpattern met een plugin registreert, moet je de URL van de afbeelding als volgt wijzigen:

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

Op deze manier zoekt WordPress de afbeelding niet in de uploads, maar in de images map van je plugin.

Je kunt dan de property viewportWidth gebruiken om een betere voorvertoning van de pattern te geven in de blok inserter:

'viewportWidth' => 800,

Je kunt ook een reeks trefwoorden toevoegen om gebruikers te helpen je blokpattern te vinden:

'keywords' => array( 'cta', 'demo', 'kinsta' ),

Een andere optie om gebruikers te helpen het blok te vinden in zoekopdrachten is het toevoegen van een array van bloktypes:

'blockTypes' => array( 'core/button' ),

Op deze manier zal de blokpattern verschijnen in suggesties wanneer een gebruiker zoekt naar een van de opgegeven blokken.

Met de property postTypes kun je de blokpattern alleen beschikbaar maken voor specifieke berichttypen. Je kunt de pattern bijvoorbeeld alleen zichtbaar maken voor het berichttype product:

'postTypes' => array( 'product' ),

Tot slot kun je een CSS class toevoegen aan de wrapper van je blokpattern.

Om dat te doen, moet je een nieuwe groep maken met het className attribuut:

<div class="wp-block-group my-css-class">
	
</div>

Merk op dat je dezelfde klassenaam moet toevoegen aan het volgende div element.

Voor een beter beeld van blokpatterns en meer codevoorbeelden, zie ook Block Patterns in het WordPress.org Theme Handbook.

Een blokpattern maken met een bestand

Zoals hierboven vermeld, heeft WordPress 6.0 een nieuwe en eenvoudigere om blokpatterns toe te voegen aan je WordPress thema’s. Je kunt nu impliciet blokpatterns registreren door ze als PHP-bestanden te declareren in een map /patterns in de root van je thema.

Stel dat je impliciet hetzelfde blokpattern wilt registreren als in de vorige paragraaf in je blokthema. In dit voorbeeld gebruiken we het thema Twenty Twenty-Three.

Je kunt dezelfde parameters instellen als bij de vorige methode, maar ze opnemen in een opmerking in de header van het bestand. In plaats van parameternamen in camelCase te gebruiken, scheid je de woorden met een spatie en in plaats van arrays gebruik je door komma’s gescheiden lijstitems.

Deactiveer eerst de plugin die je in het vorige voorbeeld hebt gebruikt om de pattern te registreren. Maak dan een nieuw my-block-pattern.php bestand en voeg de volgende header toe:

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, Kinsta
 * Block Types: core/buttons
 */
?>

Vervolgens voeg je de inhoud toe aan je blokpattern. Je kunt dezelfde opmaak gebruiken als in ons vorige voorbeeld, maar eerst moet je het een beetje veranderen:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

De opmaak is in wezen ongewijzigd ten opzichte van het vorige voorbeeld. We hebben slechts twee wijzigingen aangebracht. De URL van de placeholder afbeelding wordt nu gegenereerd door de functieget_theme_file_uri:

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

Natuurlijk moet je eerst de placeholder.jpg afbeelding in de map /assets/images van je thema plaatsen.

De volgende instructie genereert de tekst die je wilt vertalen.

<?php echo __( 'View plans', 'text-domain' ); ?>

Sla nu je bestand op en maak een nieuw bericht aan. Je blokpattern zou moeten verschijnen in de categorieën Featured en Banners.

Ondersteuning verwijderen, afmelden en blokpatterns verbergen

In sommige scenario’s wil je speciale acties uitvoeren op blokpatterns. Je wilt bijvoorbeeld een core blokpattern vervangen door een eigen blokpattern of een categorie onder bepaalde voorwaarden uitschrijven. Dit zijn de bewerkingen die je kunt uitvoeren.

1. Ondersteuning voor alle core blokpatterns verwijderen

Ten eerste kunnen thema-ontwikkelaars de ondersteuning voor core blokpatterns verwijderen en hun eigen set patterns aanbieden. Om ondersteuning voor core patterns te verwijderen, kun je de functieremove_theme_support op deze manier gebruiken:

remove_theme_support( 'core-block-patterns' );

Het wordt aanbevolen om de remove_theme_support functie te koppelen aan de after_setup_theme haak.

2. Een los blokpattern uitschrijven

Je kunt ook een specifiek blokpattern uitschrijven als je een aangepast alternatief wilt bieden of niet wilt dat het wordt gebruikt met je thema.

De Patronen API biedt daarvoor de functieunregister_block_pattern:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

In het geval dat je ook een core blokpattern kunt afmelden, gebruik je het volgende:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Je gebruikt unregister_block_pattern met de init hook.

3. Een blokpatterncategorie uitschrijven

Je kunt ook een patterncategorie uitschrijven door de unregister_block_pattern_category functie in de hook init:

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

Blokpatterns maken en delen met de Pattern Creator

Je kunt ook patterns maken en delen met de gemeenschap met een gratis online tool: The Pattern Creator.

Als je een WordPress.org account hebt, kun je de Pattern Creator openen vanuit de Pattern directory.

Klik daar op Create new pattern. Dit start een patternspecifieke versie van de block editor die je kunt gebruiken om je blokkenpatterns te maken.

Je kunt ook gratis afbeeldingen gebruiken die worden gehost door de Openverse bibliotheek.

Als je tevreden bent met je wijzigingen, kun je het ontwerp opslaan of de pattern opsturen voor revisie.

Je kunt dan teruggaan naar de map Patronen en Mijn patterns selecteren. Daar vind je al je patterns in drie tabbladen: All, Concepts en Awaiting review.

Als je klaar bent met je bewerkingen, kun je je pattern delen met de community. Klik op de knop Submit in de rechterbovenhoek van de editor om de pattern in te dienen voor revisie (zorg ervoor dat je de patternrichtlijnen volgt voordat je je pattern indient).

Samenvatting WordPress

WordPress is 20 jaar geworden en de statistieken vertellen ons dat het nog steeds het meest gebruikte CMS ter wereld is, met een marktaandeel van 63,3% in mei 2023.

Deze cijfers bewijzen dat WordPress een uitstekende publicatietool is die wordt gebruikt door duizenden professionals, ontwikkelaars en eenvoudige bloggers over de hele wereld.

Tijd en middelen besteden aan het verwerven van nieuwe vaardigheden in WordPress ontwikkeling en het leren over geavanceerde functies zoals custom blokken en blokpatterns kan een uitstekende investering zijn voor je carrière als marketeer, webdesigner of uitgever.

En nu is het aan jou. Heb jij al blokpatterns gemaakt? Heb je er al een gedeeld met de gemeenschap? We zouden het leuk vinden om je creaties te zien. Laat een reactie achter met een link of je gedachten over blokpatterns.