Getting Frosty with a New Block Theme

My personal site had taken a bit of a beating after being used for a number of video tutorials I recorded for WordPress.com. I have been eyeballing some of the new block themes that WP Engine has been shipping and I finally decided to give Frost a spin.

Things I appreciate about this WordPress block theme

• The use of color palettes across style variations and patterns makes it easier to switch things up without “breaking” the design. They used consistent naming conventions across the variations which means that the elements you expect to change will change when switching between the options they provide.
• On that same note, the theme.json file uses a consistent structure across the variations so it’s relatively easy to spin up your own interchangeable style. I might steal some of the colors from the Powder theme or even try it out on a different site. Kudos to Brian Gardner and team for this one as well.
• The patterns are really flexible and they provide a good mix of full page patterns aka layouts, patterns as sections of a page, and patterns that are more component-like.
• They used layout blocks to package all of the patterns consistently. This makes editing and navigating between them infinitely easier.

Things I would like to see in future updates

• The default theme spacing is pretty much non existent so all of my existing content ended up looking really weird when I made the switch. I built the site before all of the layout blocks were available or considered “best practices” so I don’t think this will be an issue for anyone who consistently uses them. As a theme for builders, it’s probably not a big issue.
• More patterns. I love the patterns that are already included in the theme but I would love to see more.

Note: I noticed that pattern browsing is messy in its current state. This doesn’t have anything to do with the theme itself but is a mix of WP core and WP.com.

Transcript

• 0:00 Hello there. So this is my, well maybe not my first, but one of my first videos outside of WordPress.com, but I wanted to keep these going.
• 0:08 I think it’s a good habit to just look at different products and different things that are coming out and kind of explore them out.
• 0:15 So. WP Engine recently launched a block theme for WordPress called Frost, and I had been on my list to check it out.
• 0:24 And I saw a video last night of some of the styles that are built into it. So I wanted to do that today.
• 0:30 I’m going to start with just kind of going through this. So I wanted to show you what my site looks like, and then I’m going to put it all down.
• 0:33 But I’m going to go over to my site that shows you what it looks like, some of the patterns and things that come with it.
• 0:36 And then I’m going to show you what my site looks like. And then we’re going to nuke my site, and switch to this theme over, and then see how long it takes me to rebuild it with some of the patterns and things that they they already have in there, and play around with the styles a little bit.
• 0:49 If that goes well, after that we might get out maybe local and maybe sublime, and edit some of the style sheets, and create our own color schemes, and things like that.
• 0:59 But for now I’m just going to play around with this theme. So let’s showcase it first, let’s see what they’re kind of, Presenting on their site, and then I’ll show you what my site looks like before we activate it, and we’ll dive into that.
• 1:12 So, it’s a nice clean design, these patterns are sharp, and even the placeholders they use have a good level of contrast in here.
• 1:20 Now, they don’t show you, In this marking site is kind of the color that’s built into it, which we’ll see with styles later on. 1:28 But you can see they have individual patterns for different parts of the pages. These are nice, clean, easy to use, like you wouldn’t really need to mess with any of them.
• 1:37 I think I just broke the marking site. So there’s a footer. Footer options, I guess. They’re called actions are nice.
• 1:46 Maybe full width, partial width, so you can play some and everything. So if we go into layouts, we get full, page layouts, which are kinda nice.
• 1:55 You can actually see they have the entire page already ready for you. And I like that they’re using the language layout versus in WordPress Core, it’s patterns or it’s a full page pattern, or there’s a bunch of different terms floating around for it.
• 2:08 So it makes, It makes more sense to have an entire page layout called the layout and then patterns being different sections that you can drop in.
• 2:15 They even have like a link and bio page. They have an about page, they have pricing. These pricing tables are pretty cool.
• 2:24 A lot of people spend a lot of time trying to, trying to get these clean and looking nice inside of the editor.
• 2:29 So these are all pretty cool. There’s also some style variations in here. This is the color showcasing I was talking about before.
• 2:36 And these are all pretty nice. The color accent is pretty subtle overall, but it’s consistent. It’s an across the design and it doesn’t distract from the design.
• 2:45 So we’ll play around with some of those in a bit. So now let’s take a look at what my site looks like right now.
• 2:51 And if you’ve seen any of my other videos, I tend to use my personal sites for experimentation. I don’t remember the name of this theme.
• 2:58 Right now, but it’s, it’s got some nice font and design styles to it. My screen is probably looking real, real wide because I’m on a bigger monitor.
• 3:07 We can shrink it down so things don’t look as far apart. But ultimately, it’s kind of the same general style, right?
• 3:13 There’s a lot of black and white too. But I put a duatone on just gonna blog post thing and I’ve got a gallery up here.
• 3:21 I’ve got like a resume style page in here. And I’ve got a blog that you can get to. That’s pretty blank right now in a lot of open.
• 3:33 And this was actually the result of a different theme switch that I had done previously and I didn’t really come back to put a ton of time into it.
• 3:40 So what we’re gonna do next is I’m actually gonna switch recording software so you can follow along with kind of the interactions in the theme a little bit closer.
• 3:47 And then, And we’re going to switch the theme and rebuild a lot of the pages that I have in here and see what the site looks like when we’re done.
• 0:00 Alright, so I got my theme switched over to Frost. I think I got most little styling things iron out. It took me a few hours overall to go through this.
• 0:12 I created some kind of some unique patterns that weren’t packaged in there. I used to, I used some of the patterns that were in the theme itself, and I played around with some of them and kind of morphed into my needs.
• 0:23 So I used a lot of what was there. I kind of used this I don’t know what’s called shadow box border on a lot of elements across the site.
• 0:32 You can, see them at buttons and things like that too. This is a simple personal site. There’s only three pages plus a blog here.
• 0:39 So this is the homepage. This is where I landed on it. Pretty basic. There’s a work with me. Page. I really liked this pattern right here.
• 0:51 I used it for what I look for when people are asking me about consulting opportunities or, or board member opportunities or whatever kind of, what kind of things are worth my time because I’m generally pretty protected with my time.
• 1:05 Things that I helped in terms of results that I’ve driven and kind of proven and I’ll play around with some of this later too.
• 1:11 And then the different kind of types of roles and things I’d want. So these are patterns that were built in, which were really nice.
• 1:21 It was easy. See to switch things around. They’re structured with the group block. These columns inside of that. So it’s easy to move the content from one side to the other.
• 1:28 It didn’t have any issues organizing that at all. The one big thing I ran into, which you’ll see here is that if you don’t wrap.
• 1:38 Your content or your blocks in a layout block by default, it’s going to set it. If you align left is going to go all the way left.
• 1:45 So the theme doesn’t have a lot of spacing built into it. That’s something that could probably be cleaned up. So it doesn’t look really weird when you make the switch.
• 1:52 Cause everything right away. It was kind of spread out a little too much. So if it’s in the layout block, it’s centered nicely and kind of optimized for mobile.
• 2:00 If it’s not a layout block and it’s kind of defaulting to the edge, you end up with weird things that are, are there.
• 2:04 So you need to have everything in a layout block and kind of mess with your spacing and padding that way.
• 2:10 That’s an easy fix they can do in an update to the theme. I updated kind of my my background page.
• 2:18 So it’s less like a resume and has again, these kind of portfolio style patterns in there. And I played with some of the.
• 2:26 Those things. So it’s, I’m doing the black and white alternating, like Frost has in it, which is cool. I’m using that teal color as an accent, which kind of shows through in multiple places.
• 2:35 And the nice thing about that is when I change the style everything will change with it. So this overlay color will change with it.
• 2:42 The. Orders will change with it. This is pretty slick overall. The patterns are good. Like I said, the style variations are nice.
• 2:50 So it was pretty easy to pull together. I’d like to see more patterns in the future for different use cases.
• 2:56 I’d like to see. Maybe some style variations that are less uniform, like less about changing the color and more about changing the look and feel the site, but it’s a really easy theme to work with.
• 3:11 You wouldn’t, I mean, you can do pretty much everything you want from within the editor. Anyway, so if you’re looking for a WordPress theme to kind of build a basic site that kind of has a clean aesthetic and you can want to do some kind of color accents to it.
• 3:23 This is a great starting point. I think from a builder standpoint, it’s not so opinionated that what we’d be. Hard to change anything about it. 3:32 So you want to change your fonts. You want to change your spacing rules. You want to change everything like that.
• 3:36 Like it’s a really good starting point for a new site. Even if you totally change the aesthetic afterwards, like it’s a really good building building block to get a new site going.