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.
Stijlen
Twenty Twenty-Five beschikt over een gevarieerde set lettertypen die meerdere talen ondersteunen en een flink aantal vooraf gedefinieerde kleurenpaletten gebundeld als stijlvariaties.
Lettertypen
Twenty Twenty-Five bevat 9 lettertypen met veel varianten. Je kunt de lettertypen die je op je website wilt gebruiken selecteren in de interface Globale stijlen, onder Typography.
Deze lettertypefamilies zijn opgeslagen in de Twenty Twenty-Five assets/fonts map en geregistreerd in theme.json.
Het onderstaande fragment registreert vijf varianten van de lettertypefamilie Fira Code:
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Light.woff2"
],
"fontWeight": "300",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Regular.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Medium.woff2"
],
"fontWeight": "500",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-SemiBold.woff2"
],
"fontWeight": "600",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Bold.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
...
}
}
}De volgende afbeelding toont de lettertypevarianten van Fira Code in de Site Editor.
Twenty Twenty-Five wordt ook geleverd met 8 typografie typeset. Je hoeft er alleen maar een te kiezen in de sectie Typography van de interface Globale stijlen en het wordt toegepast op je hele website.
Als je de typografie typeset nummer 7, “Platypi & Literata”, selecteert, worden deze twee lettertypes automatisch toegepast op alle elementen van je website: Literata wordt toegepast op de algemene tekstelementen en Platypi wordt toegepast op Site title, Heading en Button blokken.
Deze voorinstelling is geregistreerd in het bestand typography-preset-6.json onder styles/typography:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Platypi & Literata",
"slug": "typography-preset-6",
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|literata",
"fontSize": "var:preset|font-size|large",
"fontStyle": "normal",
"fontWeight": "300",
"letterSpacing": "-0.24px",
"lineHeight": "1.3"
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800",
"letterSpacing": "-0.6px"
}
},
"core/post-title": {
"typography": {
"fontWeight": "800",
"letterSpacing": "-0.96px"
}
},
"core/query-title": {
"typography": {
"fontWeight": "800"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
},
"button": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
}
}
}
}Kleuren
Twenty Twenty-Five levert een standaard palet met 8 kleuren. Deze kleuren zijn als volgt gedefinieerd in theme.json:
{
"settings": {
"color": {
"palette": [
{
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFEE58",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F6CFF4",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#503AA8",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#686868",
"name": "Primary",
"slug": "primary"
},
{
"color": "#FBFAF3",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#11111133",
"name": "Opacity 20%",
"slug": "opacity-20"
}
]
},
...
}
Twenty Twenty-Five biedt ook 8 extra kleurenpaletten die zijn gedefinieerd als stijlvariaties. Je vindt ze in de map styles/colors van het thema.
De afbeelding hieronder toont het Sunrise kleurenpalet.
Templates
Twenty Twenty-Five biedt ook een aanzienlijke set templates waarmee je elk soort blog kunt bouwen. Je kunt persoonlijke blogs bouwen met een consistente hoeveelheid tekst, fotoblogs en portfolio’s met verschillende layoutstructuren en meer gestructureerde blogs gericht op verschillende doeleinden.
De volgende afbeeldingen tonen previews van Twenty Twenty-Five blogtemplates van Figma. Hier zijn enkele van de persoonlijke blogtemplates.
En hier zijn enkele van de fotoblogtemplates.
Twenty Twenty-Five templates zijn minimalistisch en ontworpen om een eenvoudige en duidelijke interface te bieden. Net als template parts zijn templates sterk gebaseerd op blokpatterns. Om een idee te krijgen, open je een van de .html bestanden die je kunt vinden in de templates map van het Twenty Twenty-Five thema en bekijk je de code. Hieronder staat de broncode van het bestand archive.html:
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:pattern {"slug":"twentytwentyfive/posts-personal-blog"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/more-posts"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->De inhoud van de archiefpagina wordt gegenereerd door de blokken Query title en Term description en de patterns List of posts, 1 column (posts-personal-blog) en More posts (more-posts).
Op basis van deze code kun je eenvoudig een aangepaste template voor je website maken. Als je bijvoorbeeld de lijst met berichten wilt vervangen door een fotobloglayout, kun je dat eenvoudig doen door het pattern in deze template te wijzigen.
Navigeer in de Site Editor naar de sectie Templates en klik op Add new template. Je wordt gevraagd om het soort inhoud te selecteren waarop je template van toepassing moet zijn. In dit voorbeeld hebben we Category Archives geselecteerd.
Vervolgens moet je beslissen of het template gebruikt gaat worden voor alle categorieën of voor een specifieke categorie. Tot slot krijg je een of meer patterns te zien om mee te beginnen en je wijzigingen aan te brengen.
Maar je kunt ook alles vanaf nul opbouwen. In dit voorbeeld maken we een kleine wijziging in de code van het archive.html bestand en gebruiken we het twentytwentyfive/photo-blog-posts pattern in plaats van twentytwentyfive/posts-personal-blog. De WordPress categorie archief pagina toont nu een fotogalerij.
Samenvatting
Twenty Twenty-Five, het nieuwe standaardthema dat wordt uitgebracht met WordPress 6.7, is ontworpen met een filosofie van eenvoud voor gebruikers en flexibiliteit voor ontwikkelaars. Dankzij de diverse en veelzijdige blokpatterns en stijlen is dit thema er helemaal op gericht om gebruikers te helpen boeiende verhalen te vertellen. Het bevat veel inspirerende afbeeldingen van Openverse die naadloos zijn geïntegreerd in de blokpatterns van het thema.
De structuur van het thema draait om verzamelingen van geneste blokken, patterns en template parts, waardoor het eenvoudiger dan ooit is om complexe layouts te ontwerpen zonder geavanceerde kennis van codering.
Twenty Twenty-Five is een volgende stap in het democratiseren van ontwerpen. Of je nu een doorgewinterde ontwikkelaar of een beginner bent, Twenty Twenty-Five biedt een solide basis om blokkenthema’s te verkennen, en met de juiste kennis kun je zelfs je eigen thema maken om te delen met de WordPress gemeenschap.
Nu is het jouw beurt. Heb jij Twenty Twenty-Five al getest in een ontwikkelomgeving? Deel je ervaringen met ons in de comments hieronder.
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
Laat een reactie achter