Skatepark Is a Bold and Vibrant Block Theme for Events and Organizations

Automattic’s Skatepark landed in the WordPress.org theme directory on Monday. It was designed for modern events and organizations, but it should work well for many sites with a small amount of customization.

For those keeping count, it is number 52 on the long path toward the 3,000 themes project lead Matt Mullenweg hopes for before the Collaboration phase of the Gutenberg project. The pace has picked up in the past few months, but the lower-cited number of 300 seems more realistic.

One thing seems inevitable. The Automattic Theme Team will continue pushing new block themes out. Skatepark is now its 10th contribution, nearly a full 1/5 of the total available on WordPress.org.

With the release of the Blockbase theme last year, I expected that most of Automattic’s theme releases would just become child themes of it. They would be slight variations on that same design, never really pushing the envelope. After all, that is how most of their block themes seemed to be rolling out. However, the Theme Team’s last three releases have been standalone. Skatepark graduated from child theme status a mere eight days ago.

I like seeing this approach. Child theming can have its limits, often tucking designers into unnecessary boxes. The team’s latest theme needed to be let loose to do its own thing.

If there was ever a theme design that marched to the beat of its own drum, it would be Skatepark.

The color scheme is…how do I describe this? THERE. IS. SO. MUCH. GREEN. Blindingly so.

Demo site homepage with title, tagline, and navigation in the header.  There is a full-width post title and image below.  Everything is covered in a vibrant green color.
Default Skatepark theme homepage.

I love the experimentation. We need more of that in the WordPress community. As much as I dislike the default color scheme, it is likely perfect for someone else.

I would have instantly deactivated and deleted the theme in the classic era. But, the site editor and global styles system let users modify colors with relative ease these days.

The first order of business was changing things so that I could explore this theme properly:

WordPress global styles interface with the site preview on the left.  On the right, a white background color has been selected from the options.
Changing the theme’s background color.

Once my eyes readjusted, I enjoyed tinkering with this Skatepark. There is a lot to like about it from just a general-usage standpoint. The bold typography choices and generous use of whitespace give users the freedom to experiment.

However, the theme provides a helping hand for those who need it. Skatepark includes 10 block patterns out of the box.

My favorite is also the simplest. The “Columns in container” pattern is a Group block that wraps a few other elements:

A layout section contained inside of a box with a black border.  At the top are two text columns, followed by a wide image and a paragraph.
Simple-but-handy layout pattern.

It does not seem to be trying too hard, merely creating a functional and handy layout. Often, that is just what users need.

One of its unique patterns is “Full width image with aside caption.” It places an Image block in the content, followed by a Columns block. The “caption” in this case is not a caption at all. Instead, it is a Separator and Paragraph.

A full-width image with two columns underneath it.  The left column is empty, and the right column contains a caption for the image.
Columns block to create an aside caption.

I love this concept, but I question the implementation. The design itself could have been accomplished with a custom block style on the Image block and a few lines of CSS targeting the caption element. Perhaps the team wanted to provide users more customizability.

Captions are not currently self-contained blocks. However, there is an open ticket to separate them from their parent containers. The change would give theme authors and users more design freedom.

I am generally not a fan of the offset-column patterns that seem to be a signature of the Automattic’s themes these days. There is definitely a bit of that mixed in. However, the “Paragraph with quote” pattern fits well with the overall design, the primary column aligning with the text above it.

Paragraph, followed by two columns.  The left column aligns under the text above and the right column is spills out of the layout.
Columns create a quote that sits to the right of the content.

Technically, this is a three-column design. The left column is empty, and the other two columns hold the content. It gives the illusion that the Quote block is the only thing moved outside the container.

I have seen this technique employed to align blocks in the past. At best, it works as a quick hack, but it has a shaky foundation that crumbles at various screen sizes. It also shows that the block system still lacks a robust set of layout tools. In 2022, there are so many ways to accomplish this design with CSS instead of column hacks. However, theme authors use the tools they have on hand. Until the core design tools mature, they will continue experimenting and innovating in their own way.

I welcome the experimentation in the Skatepark theme. The default green may never be my cup of tea, but that is OK. I want to see theme authors pushing boundaries and trying new things. Plus, underneath it all, the theme includes one thing that Automattic almost always gets right: legible typography.

8 responses to “Skatepark Is a Bold and Vibrant Block Theme for Events and Organizations”

  1. Hi there, Justin,

    I’ve been reading your posts for years whether it’s at a Theme Hybrid, here at the Tavern or your own personal blog, I’m subscribed to all of them.

    I have (what I hope it’s) a simple request: could you make a list of simple blog themes for personal non commercial blogs? I’m struggling at finding one for a new blog I want to create. I like the old fashioned bluff styles, like in the early days of blogging, nowadays the themes come with too many fancy stuff I don’t need. That’s why I’m asking for your help.

    Thanks a lot and my regards from Spain… Keep it up 👍

    • That would be a list of all block themes!

      You can take any block theme, edit the templates, and remove most of the blocks to get just the parts you want without the cruft.

      E.g. if you don’t like the sidebar, find the column block and delete the sidebar column. Or if the footer is too busy, open the footer template and remove everything until it’s just what you wanted. You could simplify the skateboard theme by removing the post featured image block, taking the site description and socials blocks out of the header. You could also replace Skateboards homepage blocks with just a plain list of posts like the old Kubrick theme ( query block, then inside that post title block, post excerpt, and post read more blocks )

      Unlike normal themes, if you don’t like something in a block theme you can just edit it out with the site editor using a mouse click. Likewise all block themes can have sidebars if you add one using columns.

    • Thanks for chiming in, Frank. I have been thinking about your question over the weekend.

      Automattic’s Livro, which I recently reviewed falls under that “simple blog theme” category. Wabi by Rich Tabor, also recently reviewed, has a few more options but is still pretty simple.

      Those are just two of my recent favorites. However, most current block themes are relatively simple designs right now. Since it’s a new system, not many developers have extended it with a ton of complexities just yet. With the 53 current themes, there’s a decent variety to play around with.

      If you are not quite ready to dive into a theme that relies on WordPress 5.9’s site editor, Eksell by Anders Norén is still one of my go-to recommendations. Its design is a lot more modern, and if you’re looking for something with more of an old-fashioned feel, it might not be what you’re after.

      There is one part of your question I didn’t quite understand. What do you mean by “old-fashioned bluff styles”? That might help me or someone else find something more suitable to you.

      If there are any other specifics about what you’re after, I’d be happy to do some extra digging. The description of simple blog themes can mean different things to different people.

  2. “Vibrant” would be one word. As in, wow, that color vibrates in my eyes enough to make me worry about migraines. Fortunately, modifying those things is what theme.json is for.

      • I managed to enter a css code to remove it on the final site but there is no way to remove it when I edit which is super annoying…It appears on any image type, gallery, slideshow, columns etc. I clear the duotone effect but the green tint or image filter is still there…dont know what to do

  3. Im using the Tiled Columns feature, but in this block I cant seem to click on the individual images to modify the duotone – theres only one option to select all (the image filter is set to original)

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: