Block Themes From Scratch: Part 1 - Block Theme Essentials
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 2024
- In this video series, I show you what Full Site Editing is about and how to build a block theme. This video, Part 1, covers the series overview and demonstrates creating a block theme in its simplest form.
🧰 Resources:
• wordpress.org/documentation/a...
• fullsiteediting.com/
• pinegrow.com/
• Block Themes From Scratch Series Playlist: • Block Themes From Scra...
• Block Themes From Scratch - Part 2 Theme Templates: • Block Themes From Scra...
🌐 My Websites:
• adamlowe.io
• peakperformancedigital.com
✅ Connect with Me:
• Facebook: / peakperformancedigital
• LinkedIn: / adamshawnlowe
• TH-cam: / @adamloweio
• Twitter: / @adamslowe
⚙️Tools I Use:
• WordPress.org: wordpress.org/
• Pinegrow Website Editor: pinegrow.com/
⌚ Timestamps:
00:00 Introduction
00:35 What we'll cover
01:06 Classic themes & page builders
02:52 Building an ugly theme
03:43 The Development site
04:54 Create Block Theme plugin
07:25 Peeking under the hood
11:45 WordPress template hierarchy
13:07 The Index template
15:22 Post Template
18:21 Page Template
20:25 Front Page Template
21:30 Archive Template
23:14 Blog & Search Results Templates
23:50 Outro
Excellent video. I honestly thought block themes were terrible since I had tried them when they first came out and didn't like them. But now I'm seeing a lot they have a lot potential, thanks to your video. I've watched several videos on the subject but no one I have seen has explained them as well as you have.
They do have a lot of potential, but they are also a massive PITA and some things about them make little sense. Just like anything else though, once you understand the hacks and workarounds you can use them pretty effectively.
Excellent! Thank you - can't wait for Part 2.
Thanks for sharing this!
Great Video Adam! Thank you very much!
Thanks Adam! Helpful as usual. I'm already very excited about the next episodes, especially about theme.json
Thanks Adam for making this video. It is really a great video to start building block themes. Keep up the good works.
Great Video! Thanks for sharing your experience.
Suddenly block themes make sense - so glad to have found this video after scratching my head reading the WP documentation
Thank you so much for this ... I've been building custom themes for over 10 years and was reluctant to take the plunge... Very well paced and informative tutorial
Amazing series..
The best part is that you have planned the series and the content for it. which we don't see with others mostly.
Thanks for this
Thank you so much! I'd love to have the talent to "wing it" like some people do, but that would end up being a rambling mess if I tried it :)
Great walk-through. Thank you for your presentation! I appreciate your structured approach.
Excellent! Thank you
Great video! Looking forward for the next one.
Thanks, man. I'm aiming for next week. (I know I'm going to regret giving that timeframe out loud)
How did you know this was EXACTLY what I needed, Adam!?! So pumped for this series!
Thanks, dude. I’ve been brewing this one for a while and just needed to fully wrap my head around it before trying to explain it to anyone else. There is so much planned for WP 6.5 that I would like to have included, but I couldn’t justify putting this series off any longer.
By far, the best tutorial about Block Themes in 2024!!!! You're helping me a lot!
Thank you so much, and don't hesitate to reach out if you have any questions?
Nice intro video. I want to like FSE and Gut but the UX still kills my vibe :) Thank you and I can't wait for the next one.
I’m with you on the UX bit. And if you think the Block Editor is bad, just wait until you see the hoops you have to jump through to wrangle theme.json and block patterns.
I look at Gutenberg (the project) and think it’s a brilliant concept that keeps getting derailed by horribly planned and communicated execution.
Congratulations for this awesome video @AdamLoweIO , It exudes experience and provides exactly what is needed to gain a better understanding of the current state of WordPress with what appears to be an excellent workflow. I am eagerly looking forward to the upcoming parts!
Thanks, Emmanuel! And don’t worry, I’m going to cover Pinegrow (and other custom
Block options) in the last lesson.
@@AdamLoweIO What brings me here today is primarily my need to regain a sense of mojo towards what WordPress is becoming by following the masterclass of a true professional who creates serious websites for a living :)
WP is losing it's mojo for me. So many bad decisions are being made by WP leadership. It's still the best option for a lot of my projects, but it doesn't excite me the way other tools, like Astro, Strapi, et. al. do.
Still very confused by block themes, but extremely grateful for this video - I’m finally starting to grasp the concept a little.
It still seems very involved to get into. I don’t have much actual experience building classic themes from scratch, but I know the theory and regularly customize themes for clients. I can also create pretty much any website with a classic theme like GP or Blocksy, or a theme builder like Bricks. Somehow, this seems more daunting to me.
But I can’t wait for the next episodes, I hope I can get to a point where I’m at the same level of fluency in all those approaches 🙌
Thanks for the feedback. Block themes are weird… building a super simple one or making minor modifications to an existing theme is much easier than dealing with classic (PHP) themes. The process of building something that’s actually usable feels a lot more complex to me. When you consider the near-necessity of custom blocks in a block theme, it makes things even harder.
Of course, everyone’s experience and comfort level is different. I find classic themes with PHP templates very straightforward and almost second nature, but I know that they are overwhelming for a lot of people who aren’t used to doing everything with code. Maybe the semi-browser-based workflow of block themes will be easier for some people to grasp, and I’m just struggling to do things in a new/different way.
@@AdamLoweIO My pleasure, Adam! Reading this reply, I was sort of suprised: I got the feeling that you had a few more gripes with block themes than I had initially imagined while watching the video. I have since watched “WordPress is designed for everyone… Just not for us”, and got a better understanding of where you stand.
And I must say… I feel sort of better knowing I'm not the only one struggling with this change. Is that too selfish? lol 😅
@@bluetheredpanda Misery loves company! My gripes are mostly about the sloppy way WordPress is moving to FSE and the fact that they ignore the needs of their largest audience in favor of catoring to the "average joe" and trying to push into the enterprise. I'll be honest, if it wasn't for the fact that Pinegrow makes creating custom blocks dead-simple, I'd probably be building everything with Generate Blocks, Kadence, or Bricks (in that order).
Thanks for the video. A year ago I gave the Create Block Theme plugin a try and wanted to see if I could recreate my classic theme as a block theme. I ended up giving up in frustration. I am trying a similar experiment now, this time just customizing Twenty Twenty Four and I have to say the tools really have come a long way in this past year.
From what I can see it seems like the biggest thing missing now is the ability to add responsive settings from within the FSE environment. The site I have been playing with starts to fall apart on mobile and so far as I can tell the only way to say make the logo smaller on mobile with to start writing custom CSS which kind of defeats the purpose.
All in all I am upbeat about the state of WordPress. For as much crap as people give the block editor and Gutenberg this is necessary step to ensure the long term future of the platform.
Looking forward to your next video.
It really has come a long way, but it still has a long way left to go. As for the responsive breakpoints, it seems like that's a hill WordPress wants to die on. They keep refusing to admit that breakpoints are needed and lean harder and harder into "intrinsic design." It's baffling! My guess is that they are trying to keep the core blocks as minimalist as possible, while still being usable for 80% of the use cases, knowing that people are going to create custom blocks (React or ACF) for more complicated layouts.
@@AdamLoweIO I am hoping they come around on it. I mean they have to a some point.
Are there any plugins available that address the problem and add breakpoints settings? Or do I need to do it the old fashioned way and write some CSS?
Nearly all 3rd party blocks allow you to set properties at desktop, tablet, and mobile breakpoints. If you want to do that with the core blocks, you will need to use CSS.
Nice one Adam. Been a little weary of FSE up to now, but decided to take a closer look at the beginning of this year, and I must admit, I'm seeing great potential. Great video and look forward to your next lessons. If I could kindly suggest maybe incorporating some WooCommerce lessons as well. Thanks again.
Thanks for the feedback. And yes, there is great potential once you get past the quirks and resistance to a different workflow than classic themes had.
As for WooCommerce, it’s still one of the weakest parts of FSE. I also generally avoid it in favor of more purpose-built e-commerce platforms, but I’ll try to pull together a video or two after this main 6 part series.
@@AdamLoweIO So you're saying you generally avoid WooCommerce in favour of Shopify, Magento etc?
@@antware I don't do much eCommerce in general, but when I do it's mostly Shopify, Ecwid, or BigCommerce. I have nothing against Magento, it's just not a platform I've worked with yet. WooCommerce has always been a bit too finicky and resource intensive for me, and frankly letting a Saas company handle all the the eCommerce logistics makes more sense to me than dealing with it on a site-by-site basis.
@@AdamLoweIO Thanks for your thoughts Adam, yeah WooCommerce can be very frustrating and resource intensive. Looking forward to your other videos. All the best and here's to you having a great 2024.
@@antware I've found Cube Cart to be a very good ecommerce system. I know a lot of people prefer Open Cart, but I couldn't get on with it.
Great, great tutorial. I’ve been following along, creating my own theme. When it came to selecting a built in pattern the library was empty. So, I switched to the 2024 theme and copied Image to left pattern into the my new Archive page. I don’t know if anyone else encountered the same problem. Probably just a bug in my set up!
Thanks! Patterns are stored in two places; the /patterns directory in your theme, and in the block pattern directory.
It makes sense that a custom theme wouldn’t have the former if you haven’t added them yet.
As for the directory, I’ve seen instances where it doesn’t show up for some reason. I haven’t spent much time troubleshooting it, though. You may want to go through your code snippets to make sure none of them are removing it inadvertently.
fullsiteediting.com/lessons/introduction-to-block-patterns/#h-how-to-remove-block-patterns
Good info Adam! I'm getting good with WordPress, but I still need to know how the back end works.
Thanks, Sonya. Once you start diving into it you’ll realize that it’s more powerful than you ever knew. You’ll probably also have more “wtf were they thinking” moments than you ever imagined.
wordpress have two types of theme Block theme and classic theme If you go with classic theme its better as a new developer
It’s so counterintuitive to me that classic themes, which require some level of php knowledge, are so much easier to create than Block Themes. By trying to abstract away so much of the code, WordPress has unintentionally created a more complicated theming system.
Hi! Do they use block themes for complex frontends? e.g carousel with external library and a lot of custom styling, animations and sections that are more advanced than a simple two-column layout?
I am kinda new to Wordpress, currently using classic theme with ACF and you can do pretty much anything with that setup. Is it possible to have that kind of flexibility with block theme?
Yes. With custom blocks you can make the layouts as complex as you want. I don’t go into it in this series since I’m just focusing on the core blocks, but there are lots of options open to you when you start making your own blocks using React, ACF, Pinegrow, or other block-building solutions. Check out some my other Pinegrow videos for an overview of how it makes building custom blocks nearly as easy as writing vanilla html and css.
@@AdamLoweIO thanks for the answer! I've tried creating custom blocks with React for the learning purpose, and honestly it looks like overhead and much more boilerplate. Maybe I was doing it wrong though😅
Will try another options, thanks
@olga_c making blocks with react can be a huge hurdle if you aren’t already a React developer. A lot of people like using ACF blocks, which are much easier to build. I prefer creating them with Pinegrow since I get all the benefits of a hand-crafted React block without the hassles. Of course, learning Pinegrow is its own hurdle, but I thought it was worth it for me and my team.
@@AdamLoweIO I do React as well, that's why I was kinda enthusiastic about custom Gutenberg blocks at the beginning, but it turned out to be so messy comparing to React itself and took more effort to do the same work comparing to Wordpress classic theme.
ACF blocks would be likely the way to go as we already use it for our projects.
Pinegrow looks as an interesting modern option based on your video, I'll probably give it a chance for personal project, not sure I'm gonna convince my senior dev who still insists on using jQuery and gulp, lol
Block theme are less dynamic as it is possible in hybrid themes with the power of php array, mysql database combined with the $wpdb class
That's true. For now. Block themes are improving with each version, though, so I think it'll reach feature parity in the next 18'ish months.
could you please share link how did u connect VS to wordpress
It’s not connected. I’m doing local development using LocalWP, so I can access the files directly through VS code or any other editor.
Where do you get your demo data?
I build the demo projects before I record so I know the process, build an outline, have all the assets on hand. Then I record the video and do it all over again with the demo data I've already created.
For text and images, I use a lot of Chat GPT these days.
I watched the video .. i still dont understand whats the benfint of Block Themes ... it looks honestly like more work then using a pagebuilder. :( can you make a longer video of the Pro and Cons ? pls
The benefits are mostly for people who are trying to build themes with no coding knowledge at all, clients who need to be able to make small tweaks to themes, or developers who want to dive into the guts of WordPress. In fact, I can think of tons of reasons why you WOULDN'T want to use a block theme but only a few where it makes more sense.
The biggest reason, in my mind, is compatibility. Since the block editor is built into WordPress, it provides a standard platform for plugin developers to integrate with, unlike page builders where they need to create custom functionality for each individual builder. For big page builders like Elementor, this isn't a problem, but for smaller ones like Bricks if can sometimes lead to issues where other products may not support it very well, if at all.
For 90% of "regular" WordPress developers, though, a page builder is probably an easier option. For people building enterprise-level sites, with the skills and resources to do so, classic themes (and increasingly block themes) are the way to go.
Maybe WP will come out on top, they certainly have the marketshare when it comes to websites. I stopped following them because I actually prefer coding over page builders, even though I come from a design background. I wish you could prevent clients from accessing the page builder entirely. Giving designers and developers a way to simplifying the WP dashboard and customize it to specific client needs would be a huge plus. Right now a major drawback to WP seems that there's little choice but to hand over the finished site to clients with way too many options that they don't need, confusion results. Anyway, keeping my eye on WP lately. Thanks for the series.
That's pretty much the way it worked with Classic themes (PHP with defined content areas and controls) before the Block Editor (Gutenberg) was introduced. Now, WordPress is moving more and more in the other directions.
@@AdamLoweIO
Hi Adam, can you elaborate what do you mean by WP move more to other direction?
I suspend my journey on WP Dev. The block feature I thought would be the ease for non Dev who want to develop a site without a code back then.
But, after seeing you did this how a block WP theme slayed down, my mind kinda taking a consideration to come back on it man.
By “the other direction” I meant that WordPress blocks give users far more control over the page layout and design than they typically need. The upcoming partially synced patterns feature may help with some of that, but I suspect it’s going to be half-baked for quite a while.
WordPress has an identity problem. It started off as a blogging platform. Then it morphed into a CMS. The CMS features were passable but nowhere near as robust as platforms like Drupal, however the ubiquity of WP made it a good all-around choice. Then they introduce the block editor, which I think is finally a relatively decent interface for content editing. Now they are pushing into page and site-builder space, which is a bit of a disaster so far.
As for ease of use, I actually find block themes more complex than classic themes. The upside is that, when designed correctly, they can give website owners more flexibility than they had before. The downside is that it takes a React developer to do most of the work now instead of a designer with a bit of php knowledge. Either that, or you end up with a hodgepodge of 3rd party blocks which give site owners way more ability to F* things up then they should have.
@@AdamLoweIO thanks for the sentences. Man, i spotted the site-bulder part as the elementor/divi and related pluggins come out. I thought the wp Devs will do the same way mecanism by themself in the next updates to come. And now yes, its true mate. Its totally what you've dicribed earlier also.
Then I decided to move on JS frameworks. But nowadays, I found WP theme developers try to use react on it. The way they use this approach is boggling my mind! Why do they need to do this. I mean, tailwind, regular CSS, or bootstrap/ similar to this framework. Still can give the best result and eficiency to get the job done.
If they want a high scalable site why not just use pure JS frameworks as its stack.
@learnteguh4456 there are a lot of benefits to using Rect, but the same could be said for a lot of modern JS frameworks. A big reason for the complexity, which is lost on a lot of people who are just designing for the front end, is that the block editor gives developers the ability to encapsulate both the front-end design and back-end logic/controls into a single Block. It’s overkill for people who are making small sites that they manage themselves, but it gives developers tremendous power to build enterprise-grade sites (at the expense of development time).