Gebaseerd op het idee dat eenvoudige dingen intuïtief moeten zijn terwijl complexe dingen nog steeds mogelijk moeten zijn, is Twenty Twenty-Five een flexibel en eenvoudig uitbreidbaar standaard WordPress thema dat is gebouwd om mensen te helpen hun verhaal te vertellen, dankzij de vele patterns en stijlen.

Twenty Twenty-Five wordt geleverd met WordPress 6.7. Je vindt hierbij een uitgebreide set inspirerende afbeeldingen van Openverse, de gratis opslagplaats van afbeeldingen die wordt beheerd door en voor de WordPress gemeenschap. Deze afbeeldingen zijn ingebed in de blokpatterns van Twenty Twenty-Five en klaar om gebruikt te worden om verhalen te vertellen die “ideeën van vergankelijkheid, het verstrijken van de tijd en voortdurende evolutie” oproepen.

De centrale rol van patterns in Twenty Twenty-Five is het bewijs dat de ontwikkeling van blokkenthema’s zich steeds meer richt op de interface van de Site Editor en minder op het schrijven van PHP- en JavaScript-code.

Nu kunnen zelfs gebruikers zonder geavanceerde codeervaardigheden een thema maken. Je hoeft alleen maar te weten hoe theme.json werkt en hoe je blokpatterns maakt.

De templates en template parts die je ziet in Twenty Twenty-Five zijn verzamelingen geneste blokken, patterns en template parts die de structurele elementen vormen van elk type layout.

Twenty Twenty-Five is een uitstekend voorbeeld van de filosofie van de democratisering van het ontwerp en dit artikel laat je de structuur ervan in detail zien.

Twenty Twenty-Five is een uitstekend voorbeeld om alles te leren over WordPress blokthema’s, en als je onze inleiding over theme.json hebt gelezen, ben je in staat om je eigen WordPress thema’s te maken en ze te delen met het hele ecosysteem.

Maar laten we ter zake komen en onze reis beginnen met Twenty Twenty-Five, het volgende standaard WordPress thema.

Patterns en template parts

Twenty Twenty-Five biedt een aantal blokpatterns en template parts die WordPress gebruikers helpen om hun berichten en pagina’s in enkele minuten op te bouwen. Deze patterns en template parts zijn ontworpen voor verschillende doeleinden, zoals landingspagina’s, producten en diensten, evenementen, call to actions, “About” pagina’s en nog veel meer.

In de themamap vind je de bijbehorende bestanden in de mappen parts en patterns. Als je een template partt bestand opent, zie je dat elk template part alleen een link naar een blokpattern bevat. Hier is de code van het template part header.html:

<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->

Template parts moeten ook worden geregistreerd, dus je vindt ze in de lijst van Twenty Twenty-Five’s theme.json onder de property templateParts:

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "footer",
			"name": "footer-newsletter",
			"title": "Footer Newsletter"
		},
		{
			"area": "uncategorized",
			"name": "right-aligned-sidebar",
			"title": "Right Aligned Sidebar"
		},
		{
			"area": "uncategorized",
			"name": "sidebar",
			"title": "Sidebar"
		}
	]
}

De property area bepaalt de paginasectie waar een template part in past en de bijbehorende categorie, name is de slug van het template part en title is de tekststring die wordt gebruikt om het label te maken dat het template part identificeert op het scherm.

De map patterns van het Twenty Twenty-Five thema bevat een flink aantal .php bestanden. Je kunt elk van deze bestanden openen en de code bekijken om te leren hoe blokpatterns worden opgebouwd.

Deze patterns bieden uitstekende voorbeelden van krachtige WordPress features die onlangs zijn toegevoegd aan de kern. Het bestand copyright.php bevat bijvoorbeeld de volgende code:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

Je kunt in één oogopslag zien dat dit pattern de Block Bindings functie gebruikt die in WordPress 6.5 is geïntroduceerd om de Copyright tekst dynamisch te genereren.

Hier is het content attribuut van het Copyright pattern verbonden met een bron die is gedefinieerd in het Twenty Twenty-Five thema.

Als je je afvraagt waar deze tekststring is gedefinieerd, bekijk dan het functions.php bestand van Twenty Twenty-Five en vind de volgende code:

/**
 * Register block binding sources.
 */
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Register the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'					=> _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback'	=> 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

'© YEAR' genereert de tekststring die op de pagina wordt weergegeven, terwijl de callback twentytwentyfive_copyright_binding de opgemaakte tekststring levert:

/**
 * Register block binding callback function for the copyright.
 */
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' ),
		);

		return $copyright_text;
	}
endif;

Als dit allemaal een beetje ingewikkeld klinkt, bedenk dan eens hoe eenvoudig het voor de gebruiker is om complexe layouts te maken door simpelweg gebruik te maken van elementen die direct beschikbaar zijn.

En bedenk ook hoe eenvoudig het is voor een ontwikkelaar om templates en blokpatterns te maken door hun code direct in de Site Editor te genereren. En de integratie met de Block Bindings API opent de deur naar eindeloze mogelijkheden voor integratie met externe gegevensbronnen.

Twenty Twenty-Five biedt andere goede voorbeelden van het gebruik van blokpatterns. Je kunt bijvoorbeeld geavanceerde layouts bouwen door simpelweg bestaande patterns samen te voegen in andere patterns.

Als je door patterns bladert in de Site Editor, zie je verschillende landingspagina layouts in de patterncategorie Pages.

Deze patterns zijn kant-en-klare layouts die je in je pagina’s kunt gebruiken. Als je een nieuwe pagina maakt, toont de editor een overlay waar je een blokpattern kunt kiezen. Je kunt beginnen met een Landing page pattern en dit aanpassen aan je behoeften.

Je kunt ook het standaard paginatemplate wijzigen en het template gebruiken dat het beste bij je project past.

Laten we nu in de code duiken van het pattern Landing page for Book. Ga naar de map patterns van Twenty Twenty-Five en open page-landing-book.php. Je zou de volgende code moeten zien:

<?php
/**
 * Title: Landing page for Book
 * Slug: twentytwentyfive/page-landing-book
 * Categories: twentytwentyfive_page, featured
 * Keywords: starter
 * Block Types: core/post-content
 * Post Types: page, wp_template
 * Viewport width: 1400
 * Description: A landing page for the book with a hero section, pre-order links, locations, FAQs and newsletter signup.
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_Five
 * @since Twenty Twenty-Five 1.0
 */

?>

<!-- wp:pattern {"slug":"twentytwentyfive/hero-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-links"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/banner-about-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-locations"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/text-faqs"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/newsletter-sign-up"} /-->

Het is eigenlijk gewoon een verzameling blokpatterns. Dit zou moeten aantonen hoe eenvoudig het is om complexe lay outs te maken voor zowel ontwikkelaars als gebruikers. Ontwikkelaars kunnen complexe template parts en blokpatterns maken door vooraf gemaakte patterns met slechts een paar klikken in andere patterns te nesten. Het bouwen van een landingspagina is dus nog nooit zo eenvoudig geweest.