A developer’s overview of Twenty Twenty-Five, the next default WordPress theme
Based on the idea that simple things should be intuitive while complex things should be possible, Twenty Twenty-Five is a flexible and easily extendable default WordPress theme built to help people tell stories, thanks to its many patterns and styles.
Twenty Twenty-Five will be delivered with WordPress 6.7. It comes with a wide set of inspiring images from Openverse, the free repository of images shared by and for the WordPress community. These images are embedded in the block patterns of Twenty Twenty-Five and ready to be used to tell stories that evoke “ideas of impermanence, the passage of time, and continuous evolution.”
The central role of patterns in Twenty Twenty-Five is evidence of how block theme development is increasingly focusing on the site editor interface and less on writing PHP and JavaScript code.
Now, even users without advanced coding skills can create a theme. You just need to have a good smattering of how theme.json works and how to create block patterns.
The templates and template parts you will see in Twenty Twenty-Five are collections of nested blocks, patterns, and template parts that make up the structural elements of each type of layout.
Twenty Twenty-Five provides an excellent example of the philosophy of democratization of design, and this article will show you its structure in detail.
Twenty Twenty-Five provides an excellent example for you to learn everything about WordPress block themes, and if you have read our introduction to theme.json you will be able to create your own WordPress themes and share them with the entire ecosystem.
But let’s cut to the chase and start our journey through Twenty Twenty-Five, the next default WordPress theme.
Patterns and template parts
Twenty Twenty-Five provides a number of block patterns and template parts that help WordPress users build their posts and pages in minutes. Those patterns and template parts have been designed for several purposes, such as landing pages, products and services, events, calls to actions, about pages, and much more.
In the theme’s folder, you will find the corresponding files in the directories parts and patterns. When you open any template part file, you see that each template part only includes a link to a block pattern. Here is the code of the header.html template part:
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->Template parts also need to be registered, so you will find them listed in Twenty Twenty-Five’s theme.json under the templateParts property:
{
"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"
}
]
}The area prop determines the page section where a template part fits in and the corresponding category, name is the template part slug, and title is the text string using to create the label that identifies the template part on the screen.
The patterns folder of the Twenty Twenty-Five theme includes a good number of .php files. You can open any of these files and check the code to learn how block pattern are built.
These patterns provide excellent examples of powerful WordPress features recently added to the core. For example, the copyright.php file includes the following 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 -->You can see at a glance that this pattern uses the Block Bindings feature introduced with WordPress 6.5 to dynamically generate the Copyright text content.
Here, the content attribute of the Copyright pattern is connected to a source defined in the Twenty Twenty-Five theme.
If you are wondering where this text string is defined, check the functions.php file of Twenty Twenty-Five and find the following 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' generates the text string displayed on the page, while the twentytwentyfive_copyright_binding callback provides the formatted text string:
/**
* 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;If this all sounds a bit complicated, think about how easy it is for the user to create complex layouts simply by using elements available out of the box.
And also think about how easy it is for a developer to create templates and block patterns by generating their code directly in the Site editor. And the integration with the Block Bindings API opens the door to endless possibilities for integration with external data sources.
Twenty Twenty-Five provides other good examples of usage of block patterns. For example, you can build advanced layouts simply putting together existing patterns into other patterns.
When you browse patterns in the Site editor, you can see several landing page layouts in the Pages pattern category.
Those patterns are pre-built layouts and are ready for you to use in your pages. When you create a new page, the editor displays an overlay where you can pick a block pattern. You may want to start with a Landing page pattern and customize it based on your needs.
You can also change the default page template and use the one that fits best with your project.
Now let’s dive into the code of the Landing page for Book pattern. Head to the patterns folder of Twenty Twenty-Five and open page-landing-book.php. You should see the following code:
<?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"} /-->It’s just a collection of block patterns. This should demonstrate how easy it is to build complex layouts for both developers and users. Developers can create complex template parts and block patterns simply nesting pre-built patterns in other patterns with just few clicks. Building a landing page has never been so easy.
Styles
Twenty Twenty-Five features a variegated set of fonts supporting multiple languages and a good number of predefined color palettes bundled as style variations.
Fonts
Twenty Twenty-Five includes 9 fonts with many variants. You can select the fonts you want to use on your website in the Global styles interface, under Typography.
These font families are stored in Twenty Twenty-Five assets/fonts folder and registered in theme.json.
The fragment below registers five variants of the Fira Code font family:
{
"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/""
}
]
},
...
}
}
}The following image shows Fira Code font variants in the site editor.
Twenty Twenty-Five also comes with 8 typography typeset. You just need to pick one in the Typography section of the Global styles interface and it will be applied across your entire website.
If you select the typography typeset number 7, “Platypi & Literata,” these two fonts are automatically applied to all elements of your website: Literata is applied to the generality of text elements and Platypi is applied to Site title, Heading, and Button blocks.
This preset is registered in the typography-preset-6.json file under 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"
}
}
}
}
}Colors
Twenty Twenty-Five provides a default palette with 8 colors. These colors are defined in theme.json as follows:
{
"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 also provides 8 additional color palettes defined as style variations. You can find them in the theme’s styles/colors folder.
The image below shows the Sunrise color palette.
Templates
Twenty Twenty-Five also provides a considerable set of templates for you to build any kind of blog. You can build personal blogs with consistent amount of text, photo blogs and portfolios with various layout structures, and more structured blogs aimed at a variety of purposes.
The following images show previews of Twenty Twenty-Five blog templates from Figma. Here are some of the personal blog templates.
And here are some of the photoblog templates.
Twenty Twenty-Five templates are minimalist and designed to provide a simple and clear interface. Like template parts, templates are heavily based on block patterns. To have a clue, open one of the .html files you can find in the templates folder of the Twenty Twenty-Five theme and check the code. Below is the source code for the archive.html file:
<!-- 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"} /-->The content of the archive page is generated by the Query title and Term description blocks and the List of posts, 1 column (posts-personal-blog) and More posts (more-posts) patterns.
Based on this code, you can easily create a custom template for your website. As an example, if you want to replace the list of posts with a photo blog layout, you can easily do that by changing the pattern used in this template.
In the Site editor, navigate to the Templates section and click on Add New template. You will be prompted to select the kind of content your template should apply to. In this example, we selected Category Archives.
Next, you must decide if the template will be used for all categories or a specific category. Finally, you will be displayed one or more patterns to start with and make your edits.
But you can also build everything from scratch. In this example, we are making a small change to the code from the archive.html file and using twentytwentyfive/photo-blog-posts pattern instead of twentytwentyfive/posts-personal-blog. The WordPress category archive page now displays a photo gallery.
Summary
Twenty Twenty-Five, the next default theme to be released with WordPress 6.7, is designed with a philosophy of simplicity for users and flexibility for developers. Thanks to its diverse and versatile block patterns and styles, this theme is all about helping users tell compelling stories. It includes many inspiring images from Openverse that are seamlessly integrated into the theme’s block patterns.
The theme’s structure revolves around collections of nested blocks, patterns, and template parts, making it easier than ever to design complex layouts without advanced coding knowledge.
Twenty Twenty-Five is another step to democratizing design. Whether you’re a seasoned developer or a beginner, Twenty Twenty-Five provides a solid foundation to explore block themes, and with the right know-how, you can even create your own theme to share with the WordPress community.
It’s your turn. Have you already tested Twenty Twenty-Five in a development environment? Share your feelings with us in the comments below.
The post A developer’s overview of Twenty Twenty-Five, the next default WordPress theme appeared first on Kinsta®.
共有 0 条评论