Block Themes From Scratch: Part 3 - Settings and Styles

WordPress Block Theme settings and global styling are the focus of this video, where we cover theme.json and Global Style Variations.
🧰 Resources:
• Block Themes From Scratch Series Playlist: • Block Themes From Scra...
• Introduction to theme.json - Theme Handbook: developer.wordpress.org/theme...
• FullSiteEditing.com: fullsiteediting.com/
🌐 My Websites:
• adamlowe.io
• peakperformancedigital.com
✅ Connect with Me:
• Facebook: / peakperformancedigital
• LinkedIn: / adamshawnlowe
• CZcams: / @adamloweio
• Twitter: / @adamslowe
⚙️Tools I Use:
• WordPress.org: wordpress.org/
• Pinegrow Website Editor: pinegrow.com/
⌚ Timestamps:
00:00 Intro
00:19 What is theme.json
00:47 Theme.json structure
01:39 A barebones theme.json
04:32 Creating your theme.json file
06:16 Layout Widths
09:27 Settings in the Database vs Theme.json
10:28 Finding your way around FullSiteEditing
11:43 Every setting you can remove
13:04 Color Settings
13:55 Custom color palette
15:53 Spacing Settings and Sizes
17:37 Spacing requires full clamp syntax
19:03 Typography Settings
20:21 Defining Font Families
22:00 Font Sizes
23:13 Font Size Clamp Syntax
24:16 WordPress CSS Variable Names
25:08 Theme Settings Wrap-Up
26:07 Styles in theme.json and the site editor
26:44 Setting background and text colors
27:10 Referencing variables
28:38 Default Font Family, Size, Line Height
29:24 Styling buttons with the site editor
31:32 Exporting changes to theme.json
33:38 Style precidence
34:17 Setting Pseudo Styles
35:15 Template Parts Section
37:27 Custom templates and patterns
37:59 Global Style Variations
38:56 Creating light and dark styles
40:36 Outro

[@boopfer387]

great stuff Adam! - can you post a repo of this theme?

[@leandrocstr]

Hey, Adam. Great series! Thank you so much.

[@ontheruntonowhere]

Hey Adam, this is a great series so far, thank you for putting it together for us. I have a bit of feedback, which is that your playlist "WordPress" is out of order. I was trying to change the heading color as shown in Part 4, but kept getting a JS error until I finally figured out I had missed Part 3 and needed a theme.json first.

[@AdamLoweIO]

Thanks for letting me know. I’ll get right on that!

[@56k-web]

Thank you very much for this series!

[@carolway3674]

Thanks for sharing your experience.

[@techbyfinne]

You forgot to add this video to the playlist :) Great content

[@AdamLoweIO]

Thanks! I’ll get on it!

[@bradleymoore175]

Will any of these resources you have developed be in a repository where we could pick them up? Thanks for the series. Great work.

[@AdamLoweIO]

Yes, I’m trying to wrap the last video of the series and I’ll include a link to the repo with the final project files.

[@acaciadigitalagency]

This series has been super helpful! Any tips on adding hover styles for the Outline button variation?

[@AdamLoweIO]

You could extend the block to add the options. That’s fairly complicated and will be the subject of its own fairly large video. I’d personally just enqueue a css file and manually write the css. I find it hard to believe that WordPress overlooked this common task!

[@acaciadigitalagency]

@@AdamLoweIO Oh wow that's nuts that it isn't part of the theme, no wonder I couldn't make it work! Thanks!

[@Glow_Machine]

Hey Adam, Thanks for this great series. I am really looking forward to a video from you on creating a custom block theme from scratch in Pinegrow! (Rather than converting an existing theme.)

[@AdamLoweIO]

Thanks! It’s going to be much more high level than most of the Pinegrow videos I’ve made. It’ll show Pinegrow briefly, but will mostly be about the pros and cons of extending core blocks, creating custom blocks, or using 3rd party blocks.
Give this video a shot if you want a more in-depth tutorial.
Custom WordPress Blocks with Pinegrow Web Editor
czcams.com/video/7vHzjLGnK0c/video.html

[@Glow_Machine]

@@AdamLoweIO I am trying to move my workflow from Webflow to Wordpress. And I think Pinegrow is the bridge. As much as I am trying, I can't give up the complete design control of Webflow. It just works really well for me. I know I could do the same in Pinegrow if I took the time to learn it. But in the mean time, my goal is to build components in Webflow and convert them to blocks with Pinegrow. Pinegrow has a series of videos for going from Webflow to Pinegrow that I have not yet worked through. They are 4 years old but hopefully they will still get me where I need to go. I love Webflow for building, but for a lot of clients $400 (CAD) to host is just not worth it. And of course a lot of them are just more familiar with Wordpress.

[@BobbyMcGivney]

​@@AdamLoweIO I look forward to your insight about extending core blocks. I've been diving deep into all things blocks this past week since the Cwicly announcement, and while other block editor plugins are very exciting (Greenshift, Generateblocks, etc), I still do have concerns about being locked into these blocks - and have been wondering why more dev companies aren't extending core blocks instead of building their own. From my understanding, this would be a lower level of lock-in with block plugins, but admittedly I haven't done much research behind the scenes of native block codes.

[@AdamLoweIO]

@BobbyMcGivney I’ll be covering that in the past part of the series. I meant to have it published this week, but the Cwicly stuff and getting the other course moved to CZcams got me a bit sidetracked.

[@BobbyMcGivney]

Excellent, can't wait!@@AdamLoweIO