Tag: Blocks

Introducing Seedlet

A typography-led theme, built for the future of block-based theming.

This week the Automattic theme team launched a brand new theme called Seedlet. Seedlet is a simple, typography-driven foundation for folks to build their websites on. Its styles are opinionated, but generic enough that the theme can apply to a wide variety of different use cases.

This is a particularly exciting launch for us, because not only is Seedlet a lovely theme on the front end, but its backend was crafted with the future of theming in mind.

It ships with block patterns

As we’ve written before, block patterns are an incredible new tool for theme authors. We anticipate building these into every one of our themes going forward, giving users easy shortcuts to creating some of what they see in the theme demo.

Seedlet ships with a few patterns. Two of them leverage some creative use of gradient background presets, and the other makes your posts appear to snake down the page like a vine.

It’s built to be flexible

Behind the scenes, Seedlet has been built with a comprehensive system of CSS variables. If you’ve seen our Varia theme, you’ll be somewhat familiar with the system. Essentially, it’s a tiered system of variables inspired by modular CSS. In effect, everything from the site’s color palette to its spacing and structure is hooked into CSS variables.

Seedlet uses CSS variables as design tokens, instead of the SASS variables used in Varia. By relying on CSS variables for all of the core style attributes, we’re able to bridge the gap between the front end and the editor styles. If we change the value of Seedlet’s --global--color--background variable, the background of the site will update in both the front end and the editor immediately, with no compiling necessary.

CSS variables are also easily manipulated in the Customizer (as in Seedlet’s custom colors implementation), or in child themes. In the tests we’ve done, you can easily create a drastically different child theme by modifying only Seedlet’s CSS variables. Stay tuned for more to come on this, as we build out the first round of child themes based on Seedlet.

It’s ready for our block-based future

Seedlet’s extensive use of CSS variables also sets it up nicely to integrate with the block editor’s upcoming Global Styles functionality. CSS variables are what make Global Styles work, and Seedlet is full of them.

To demonstrate this transition, we put together a child theme that maps a number of Seedlet’s CSS variables to Global Styles values defined in experimental-theme.json. That, plus a few block templates, results in a fully functional, block-based version of Seedlet. You can explore this today by visiting Seedlet’s GitHub repository:

https://github.com/Automattic/themes/tree/master/seedlet-blocks

We plan to iterate on (and eventually launch!) this block-based version alongside the standard version of Seedlet.

We’re excited to see how Seedlet evolves as we continue moving towards block-based themes. In the meantime, give Seedlet a try, and feel free to contribute on GitHub if you’re so inclined.

Visit Seedlet on:

WordPress.com
WordPress.org
GitHub

For more block-based exploration using Seedlet, check out this demo using Seedlet on the Gutenberg Times livestream:

Adding Block Patterns to Your Theme

Block patterns are unique, predefined combinations of blocks you can use and tweak to create stunningly designed sections of your website.

From global styles, to entirely block-based themes, the WordPress block editor is aiming high. Amongst the newest experimental features are block patterns. Block patterns are unique, predefined combinations of blocks you can use and tweak to create stunningly designed sections of your website.

The possibilities for block patterns are extremely exciting, especially for those of us providing tools to help people create their own websites. Patterns start to tackle the user question of, “How do I make my website look like this theme demo?”

By providing our users with predefined portions of layout, they can build and customize their own unique pages with a click — no coding or advanced block building knowledge required.

The Patterns API

Gutenberg 7.8 introduced a new, experimental API we can now use to register custom block patterns:

register_pattern(
    'my-plugin/hello-world',
    array(
        'title'   => __( 'Hello World', 'my-plugin' ),
        'content' => "<!-- wp:paragraph -->\n<p>Hello World</p>\n<!-- /wp:paragraph -->",
    )
);

View Documentation

The API really only contains two things: a name for your pattern, and the raw HTML output that you can copy and paste from the Code editor view. This means you can design your patterns straight in the editor, no coding knowledge required.

When you add a new pattern to your theme, it shows up in a new sidebar in the editor, along with any other pattern you might have installed:

Note: The new Block Pattern sidebar is a temporary proof-of-concept and is subject to change.

Using this API, we can start to introduce block patterns into our themes.

Adding Block Patterns to Twenty Twenty

Let’s take a look at adding a block pattern to the Twenty Twenty theme.

The Twenty Twenty demo site showcases content that highlights the strengths of the theme. We can grab some of that content, and make it into a pattern that can be included with the theme. Now, rather than trying to replicate the site demo by hand, people using Twenty Twenty can insert the pattern directly into their own sites.

On the homepage, one of the sections that catches my eye is the exhibitions list, which is a mix of images and text displayed in a grid. Not only does it look great, the combination of content is generic enough to be used for many different purposes, making it an ideal pattern to abstract out for reuse.

The Twenty Twenty theme demo, showing a section of the page in which four items are arranged in a 2 column grid. The top two are fully visible, and each column contains an abstract red image, a heading, a large paragraph, and then a button that says "Read More."

Let’s break this content down into its basic blocks:

__ Columns
____ Column
________ Image
________ Heading
________ Paragraph
________ Button
____ Column
________ Image
________ Heading
________ Paragraph
________ Button

The Columns block here acts as a wrapper for the exhibitions content, and provides a structure for it to collapse down into one column on smaller screens.

The single Columns block is the smallest atomic unit we can include to make this a complete pattern. Even if the demo shows multiple rows of exhibitions, we’ll stick to just this single row of two items. If someone wanted to add a bunch of exhibitions on their own website, they could reuse this pattern multiple times.

In order to convert this into a block pattern, we’ll need to grab the HTML output from the block in the Code view of the editor:

The WordPress editor, open to the Code editor view. The settings menu is open to show where you can toggle on the Code editor.

We need to copy this HTML, escape it, and add it to a register_pattern function inside of Twenty Twenty’s functions.php file.

(I’ve used onlinestringtools.com to escape the raw html output, but there are also code editor tools that can do this.)

/**
 * Register Block Patterns.
 */
 
register_pattern (
    'twentytwenty/exhibitions-pattern',
    array (
        'title'   => __( 'Two columns of mixed content', 'twentytwenty' ),
        'content' => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://2020.wordpress.net/wp-content/uploads/2019/10/2020-three-quarters-1.png\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Works and Days</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-larger-font-size\">August 1 – December 1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\">Read More</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://2020.wordpress.net/wp-content/uploads/2019/10/2020-three-quarters-2.png\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>The Life I Deserve</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-larger-font-size\">August 1 – December 1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\">Read More</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    )
);

When we go over and create a new page or post, we now see this pattern listed in the Block Patterns sidebar:

The WordPress editor, with the Block Patterns sidebar open. The newly registered two-column pattern is highlighted within the sidebar.

Voilà! Twenty Twenty now comes with a pattern.

You can view these changes in the Theme Experiments GitHub repo.

You can add any number of patterns to your theme, and even unregister core patterns if you only want your patterns to be available to people using your theme. Create some great patterns that show off just what your theme is capable of! The only limitation is your imagination.

Have you added patterns to your theme already? Tell us about it 👇