Video

That makes sense. I actually use Alpine.js for my menu interactions and I have a video showing how it’s done. I’m on my mobile and with my family at the moment, so I can’t find the exact video or timestamp. Just look for a VERY long video that I made about building a menu. There should be a timestamp about 3/4 through where I set up the logic.

@@AdamLoweIO oh that's cool! Found the video and I'll take a look. Love your intro ("..one of the things that you either copy from someone or do it wrong!..") 🙂

Don’t try to do anything in part 1, it’s just a demo and overview. The hands on stuff starts in part 2. As for the manage theme fonts setting, that is part of WordPress’ “create block themes” plugin that I introduce in a later video.

I've had wrestling with some mobility issues which have delayed the last video a lot more than I expected. I wasn't planning to go in depth on creating custom blocks though, since that's a massive rabbit hole. Instead, I was going to show some options and alternatives such as fully hand-coded blocks, Pinegrow, ACF blocks, block studio, and 3rd party block sets. Pinegrow is what I use almost all the time. I have a ton of videos about it, so here is a good intro to what it does and how it works. czcams.com/video/oZRZYaLzEw4/video.htmlsi=6L35tQJyk7ci9NA- Things are starting to turn around a bit, so I’m hoping that I can get part 7 done by mid-July.

This can be a little tricky since the WP hierarchy (developer.wordpress.org/themes/basics/template-hierarchy/) only has template files for category archives, not page/post templates. To show a different layout in pages/posts you want to create a partial with the category's content section, then stick it in a conditional inside your template. For example, take a look at the single page template from the _s theme (github.com/Automattic/_s/blob/master/page.php). Inside the main loop, they call a partial to show the page content. It would be easy enough to wrap that in a conditional so that a different content template is called if the category matches your category name or ID. Take a look at this stack exchange answer for the easy way (wordpress.stackexchange.com/a/169937) or the one above it for a slightly more complete method.

Thanks, James. If you are using Pinegrow with WordPress, I recommend using Pinegrow to build the theme and blocks, then managing the content using the WP editor (either the block editor or go old-school with the classic editor with ACF repeater fields). If you are doing a very basic site and don’t need WordPress, then Pinegrow has some great CMS-like features to let you build vanilla HTML/CSS/JS sites. I actually find myself doing these a lot for smaller informational sites these days.

It’s not a separate plugin, it’s part of the “create block theme” plugin (wordpress.org/plugins/create-block-theme/)

@@AdamLoweIO I see....thanks, Adam.

Thanks for the feedback. I've had wrestling with some mobility issues which have delayed the last video a lot more than I expected. I wasn't planning to go in depth on creating custom blocks though, since that's a massive rabbit hole. Instead, I was going to show some options and alternatives such as fully hand-coded blocks, Pinegrow, ACF blocks, block studio, and 3rd party block sets. Pinegrow is what I use almost all the time. I have a ton of videos about it, so here is a good intro to what it does and how it works. czcams.com/video/oZRZYaLzEw4/video.htmlsi=6L35tQJyk7ci9NA-

12:06 12:06 ​@@AdamLoweIO

The navigation block is one of the weakest blocks WordPress offers. I almost always end up creating a custom block for navigation or using a 3rd party block.

I get it. Life was a lot simpler with php themes, and in most cases there still isn’t a compelling reason to go the block theme route. More and more though, new WP features like the font manager are only being enabled for block themes so they are pushing us that way kicking and screaming. (Unless of course you go the page builder route) As for complex themes, you are right that custom blocks are the key to making them work. If you aren’t a react developer, there are some great tools like Pinegrow, ACF, MetaBox, and block studio that makes creating them fairly simple. I personally use Pinegrow and make a metric crap-ton of custom blocks since I hate wrestling with the limitations of the Core WP blocks.

@@AdamLoweIO Yea, modern front-end devs learn React, as PHP has very little job opportunities compared. So it makes sense Wordpress is going a React route.

Some backup plugins like updraft can be used with WP-cli. By itself, WP-cli can export the WordPress database using the “wp db export” command. That, and an archive of your file system should do the trick nicely. Here is an article with steps blog.sucuri.net/2022/12/wp-cli-how-to-backup-wordpress.html

It’s batshit until you get the hang of it. Then it’s just annoying like a bad toothache. (I’m really selling this, aren’t I?)

Michael, It might be worth posting in the Pinegrow forums. I can’t think of any reason why it wouldn’t work with a block plugin, but you might need to enqueue the framework’s css differently. Unfortunately, I’m away from my computer all day today so it’s hard to help you when I’m flying blind.

​@@AdamLoweIO Thank you.. I already posted there. I've tried so many things that I'm feeling lost. It's probably something simple that I'm missing because I can get the preview of global smart actions like the site title, description, and logo. It's just the CSS framework that isn't syncing.

I'm right there with you! Some of the decisions WordPress have been making lately are straight-up baffling. Of course, they are switching from a traditional PHP/HTML/CSS workflow to more of a component-based React workflow, so some things are naturally going to look odd. Still, it all feel like a strip of duct tape slapped over some super glue.

Ahh, I think that’s your issue. The PG plugin doesn’t support custom tailwind configurations or build processes. It only supports their built-in tailwind compiler. And for that, you need to tell it to use Tailwind at the start of your project. Connecting to a separate TW build process could get tricky since the theme files aren’t written in real-time and your compiler won’t know which TW classes to add.

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.

It is. I’ve been unable to use my hands for the last few weeks, so that sort of put things on pause. I’m hoping that this eases up and I can work normally again soon. Voice control and dictation only lets me do so much.

@@AdamLoweIO oh dang. Wishing you the best, and definitely picked up a few workflow tips watching these.

Yes, blank canvas is fine. I just wanted to show all the steps behind the scenes.

@@AdamLoweIO Awesome! Subscribed. 🙂 Your channel is like a hidden gem when it comes to WordPress Blocks 😀 A really great job!

Thanks for the suggestion. I cover it in other videos, but you are right they are standalone video explaining how and why to use a local workflow (LocalWP or other solutions) would be beneficial.

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

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.

Disabling editor styles opens up a whole other can of worms, so I try to avoid it if possible. Unfortunately, the block editor is just a weird beast so there really aren’t any good solutions that work 100% of the time.

@@AdamLoweIO I totally agree that knocking out editor-styles isn't the best solution. Hopefully Matjaz and his team of actual geniuses can dream up a fix for this. It's mostly just an annoyance that the styles don't exactly match, but it can be a critical UX issue. To wit: I'm using Tailwind grid classes at larger breakpoints, but .editor-styles-wrapper .flex { display: flex; } overrides @media (min-width: 1024px) { .lg\:grid { display: grid; } } As such, my grid layout rendered as a stacked column in the editor, so the user couldn't easily tell where the cells appeared in the grid. This made it difficult to determine the appropriate content for each.

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 :)

Wow. It surprises me how poorly they treat this plugin considering how important it is for theme developers.

@@AdamLoweIO It's a huge timesaver but it's definitely got a few quirks.

I've run into some personal issues and the last video is taking a LOT longer than I had hoped it would, so I'm probably going to pare it down to some essential things and do standalone videos for certain topics like that. Custom fields, in particular, can be tricky since they usually require creating custom blocks or using the new Block Bindings API.

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

It’s even easier than that, actually. As soon as you add a templates/[templatename].html file into your child theme WordPress sees that you want to make a block theme template and enables the site editor for you. From there you can just convert the templates one at a time at your own pace.

...and the child theme was a custom by others. I don't think it will play nice.

There could be a few things going on, but it sounds like the main loop is showing rather than the search query. I'd start by installing query monitor. That will let you see which template you are using when you get to a search results page. Once you have verified that the search template is being used, you'll need to make sure you are using the Query Loop block to show the results, and you probably want to have the "inherit query from template" setting toggled on.

@@AdamLoweIO Good advice, i'll check that and let you know.

I get the same - the category archives are listing every post in every category. I think it's because, following Adam's guidance, we copied the named query loop from the index page. I deleted that loop from the archive page, then added a new default query loop, and it works OK.

@martintaylor5949 interesting. I know it works on the site I built from the videos, so I may need to go back to see what I didn’t explain properly or just plain screwed up.

@@martintaylor5949 That's exactly what I've done. I made my first query loop a pattern and put it on my archives page, and it all got messed up from there. I still haven't got around to sorting it out, as i'm erecting a fence and it's taking up all my time.

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.

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.

Thank you so much, and don't hesitate to reach out if you have any questions?