WDD LIVE 065: Breakdown of the DigitalGravy Rapid Website Rebuild + Open Q&A

Good morning, good morning, good morning.

Hello, hello, hello.

Chance, welcome.

Ross is here, Klaus is here, Toby and Dima and Erica.

Erica says, looking forward to this one.

Yeah, I think people are always interested and excited to see the inner workings of any new website.

This one was very, very, very simple and it was done in very little amount of time, just really thrown together.

And we’re going to talk about it.

We’re going to look at it.

We’re going to go in, we’re going to see the admin, we’re going to see how different things were set up and done on the website.

This is just an example of leaning heavily on your stack.

And, you know, no, no design work, no, no, nothing, no, nothing.

Mark says all aboard the digital gravy train.

Yes, absolutely.

Okay.

People are pouring in.

This is already good.

We’re almost over a hundred.

YouTube has not even sent out, is my thing.

Oh, the thing I’m trying today is, yeah.

Why does it say it’s still waiting?

YouTube’s weird like this.

I’m trying to pull up the chat on my phone, which is like right in front of me.

DD65 breakdown of the digital gravy.

Okay.

It won’t even let me open it.

Actually, this is so nice.

All right.

What if I click the live button?

That works.

That works.

Okay.

Let’s, let’s kill the volume.

So, you know, when I go to questions, cause we’ll do some Q and a stuff.

And if you have a question, you can put in questions right now, actually.

Uh, just make sure you use a hashtag hashtag Q or hashtag question.

Uh, but when I go to the questions area, I can’t see the chat and it really has been driving me nuts.

Uh, cause I like to monitor the chat while we, uh, do the questions.

And so somebody said, why don’t you pull the question, the chat up on your phone or, or whatever.

And that way you have it over there while you’re doing the questions thing.

So I’m trying that today.

I’m trying that today.

We’ll see how it works, but thank you for coming.

Um, this is a weekly live stream every single Tuesday at 11 a.m.

Eastern time.

I turn on the camera and we do things together.

And that could be looking at websites and doing critiques, uh, talking about all the things that make a website successful.

It might be talking about some of the latest stuff that’s happening in WordPress.

It might be some controversial ranty type stuff.

It could be like what we’re doing today, which is looking at a breakdown of a redesign of a website and going into the backend and looking at all of the things that have to do with custom post types and templates and stuff that people ask about all the time.

Dynamic data, you know, it’s very, uh, it’s very educational every single week.

Let’s put it that way.

If you’re, if you’re working in the field of web design and development and WordPress, there’s not really anywhere else where you can get the value that you get on these live streams, especially when we get into Q and a, and you have the ability to ask burning questions, uh, that, you know, to you, when you get an answer to it provides a lot of value.

And then when other people listen, it provides value to them as well.

Uh, we’re not going to, we’re not going to do, there’s not much in the way of news or anything else.

Like we’re just going to dive right into our main topic and main agenda today.

But like I said, if you have questions, go ahead, ask them with a hashtag Q or a hashtag question.

I can pretty much guarantee that if you don’t use the hashtag, your question is not going to get answered.

Okay.

Let’s go ahead and share our screen.

Okay.

So I, and I got to move this extra Ecamm window here.

All right.

So this is the new digital gravy.co site.

If you’re not familiar with digital gravy, that’s actually our parent company.

It’s the parent company of automatic CSS parent company of frames.

Uh, and it also, also for a very long time was an agency where we did a lot of work for clients for small, small, medium size service-based businesses.

We didn’t do any e-commerce, just service-based businesses, a lot of local businesses, most of them local to us, but some that were not local to us, some regional businesses, uh, and some international businesses actually, but, um, more, more so on the local side of things.

Now over the past year and a half, and really I’ve been thinking about this for two and a half years.

Uh, but over the last year and a half, we’ve been actively phasing out client work.

Okay.

So it started with, we’re not going to take every project that comes in the door that meets our minimum requirements.

We’re going to start being picky and choosy about our projects.

And then it got to the point where we’re only taking really interesting projects, like projects that we’re actually super interested in, in doing.

And then it became, we’re not really taking any new projects at all.

We’re just going to maintain the clients that we already have.

And we’re just shutting the doors to any new work.

And then it really became, uh, we want to start phasing out as many existing, like we, we don’t really want to do, we, we want to foot and we have to, it’s not really a want actually, we have to focus full time, all of our energy now on automatic CSS and frames and where we’re going in the future with these different products.

Number one, because so many people rely on them now.

So many people rely on them now.

And if you polled people, I think if you asked them and you said, Hey, should we do something like build automatic CSS 3.0, which by the way, we, I mean, I, I invested tens of thousands of dollars into rebuilding automatic CSS 3.0.

Um, why?

Because we’re on a mission.

Okay.

We haven’t, we’ll talk more about the mission, but we’re on a mission.

And when you’re on a mission, you got to do what needs to be done to realize the mission.

Okay.

And in that case, it, it required tens of thousands of dollars and countless hours and countless hours of time.

Now, if I polled people and said, we can do that, we can pursue this mission and do the things that need to be done to achieve the mission, or I can do client work and you don’t care about any of these clients.

You’ve never met any of these clients and you’re not affected by any of these clients’ businesses.

Which one would you rather have me do?

When you get to a tipping point where there’s thousands and thousands and thousands of people relying on your product, they don’t give a fuck that you’re working on client work.

Okay.

They don’t, they would rather you not be doing that.

They would rather you put your time and attention into the product that they rely on to do their work.

That’s what they would rather have you do.

And it’s, it came down simply to like fairness to the people that we’ve sold products to in the sense that I started to feel bad every time I’m over here doing something for a client.

I’m not doing it for my actual clients of, of the products that we’ve sold and the promises that we’ve made and the mission that we’re on.

That doesn’t, it doesn’t feel good to be in that situation.

And so, uh, plus the potential of what we can do towards the mission of changing.

So the mission, it says it right there.

Like we’re on a mission to change the landscape of front end development, right?

We’ve done a lot of that with automatic CSS.

We’ve done that in a big way with frames.

We still have so much more to do.

We still have so much, we’re not even close.

We still have so much more to do.

This is just the warmup phase.

We haven’t, we haven’t even taken the sweats off yet.

Okay.

We’re still in the warmup phase.

Um, but in order to do that, we can’t have the dead weight of all these clients hanging around, right?

They’re, they’re holding us back from doing what we need to do toward that mission.

So this was a natural progression.

We said, like I said, a year and a half we’ve spent just slowly.

Cause you can’t, you can’t wake up one morning and just write them all a letter and be like, sorry, you know, give them the middle finger and boot them out.

Right?

So, you know, we slowly make the transition and now we’re at a point finally where we can just take the website and say, all right, out with the old in with the new, and we can be very clear about what digital gravy is now and going forwards.

And so it’s a software company.

That’s what it is.

It’s a software company.

Um, but we make products that are very different and we make products for the WordPress ecosystem specifically that are very different from, from the other products that are available.

Uh, okay.

And so how do you represent this?

Well, I, I will tell you that it’s, um, there’s something freeing about design simplicity and not putting a ton of effort into design.

Now, mind you, I don’t, it’s how you categorize design.

I would say that this site is, um, designed.

Like it has design.

It follows design patterns.

It follows design principles and best practices.

It’s not like you just, it’s not like a five-year-old just threw shit on a page.

Okay.

So this is like when you’re doing something minimal, there’s actually a design aspect to minimalism.

Right.

Um, but there’s something freeing about not going balls to the wall with like, you know, just craziness.

The craziness you see on all these like award-winning websites.

Right.

And, and you also come to a realization after some point, like for example, uh, let’s, let’s go down and look, you know, I looked at, um, I looked at apples cause I was like, you know, what did Apple do for, let me, let me get out of, let me put this into responsive mode.

Okay.

So I can just do, do this.

Um, now ignore the admin bar.

The WP admin bar is always an annoying thing.

This looks fine on a normal, on an actual device.

Right.

Um, we’re not accounting for the height of the admin bar, but no visitors actually see the admin bar.

Uh, but if you go to apple.com and you look at what they’ve done, like what, what did they do, uh, with their mobile menu?

Right.

And it’s just, it’s, it’s like just the facts.

It’s like, there’s nothing, there’s nothing special or flashy or crazy about that.

Um, and it actually makes it very, very just, it’s simple.

It’s elegant.

It’s easy.

Right.

And we don’t have to do something spectacular.

You don’t have to do something over the top.

And so kind of the same thing with, with the digital gravy side.

It’s like, why?

Because you start to ask yourself, do any of these things, these over the top things, these award-winning websites, it’s all of this stuff.

Does it, it takes a lot of mental energy.

It takes a lot of emotional energy.

It takes a lot to not just design it and conceptualize it, but also to build it.

Right.

It puts a lot of, um, overhead.

It puts a lot of technical overhead on the developer.

Okay.

But you ask like, what did that, what does that do for the bottom line?

Does that, I’m sorry.

Again, does that, um, does that, did that get us more leads?

Um, did it get us more sales?

Did it help tell the story better?

What, what, what actually did that thing do?

And there’s never really any good answers for that.

It’s not, there’s no, there’s nobody that can really point to and be like, yeah, for sure.

All that flashy shit that I did, all that super awesome, intricate stuff that I did definitely makes this company and website way more successful than it otherwise would have been.

Actually, it’s the, in my experience, a lot of times it’s the opposite.

When you have simplicity and elegance and you put the focus on the content and the content actually says something and means something, then it’s actually better to not, to not distract the visitor from the thing that actually means something.

Right.

Which is, which is the content.

And so this website kind of reflects that it’s kind of like a, Hey, let’s, you know, we, we’re doing something important and all we have to do are, is show the important things and talk about the important things.

And let’s just get rid of all of the other things.

Um, so my team, you know, we have a designer, we have a lead designer.

Uh, we’ll get down to the about section.

Um, nobody on my team knew that, that I was doing this, that this site, right?

Um, I just sat down on a, it was Sunday or Saturday.

I can’t remember what the day was.

Uh, they all bleed together these days, but I just had, I had, I had a chunk of time and I was like, you know, I think it’s time.

I think it’s time.

We get rid of the old digital gravy site.

I mean, I literally went in and, um, I think it was live while I was doing it.

I just started deleting shit.

I just, it was like, imagine me in the closet, just throwing shit out.

Like I just went in there and I just cleaned it.

And then I just started building.

Um, and you know, I decided I don’t, I don’t want to, I don’t want to, I just want to be simple.

I just want it to be easy.

I just want it to be fast.

I just want to put the focus on the content.

And here’s a tip for you.

Okay.

The best way to help with simplicity is to limit the amount of space that you have to work with.

And so if you notice the entire website is very narrow and this actually helps it like limits the amount of options.

It limits the amount of decisions that need to be made and it, and, and it naturally makes the design easy to follow and easy to, we’ve talked about readability.

We’ve talked about eye scanning.

Okay.

Maybe if you’re not in the inner circle, you haven’t talked about these things, but in the inner circle, we’ve talked about this.

Um, you know, it’s very laborious to scan left to right across big screens and people are using big screens these days.

Yeah.

A lot of people are on mobile, but the people that are on desktop, especially in our industry, they have big screens.

Okay.

That’s a lot of real estate for your eyes to cover.

It’s a lot of real estate for your brain to digest.

Um, and the more complication that there is from a design perspective, from a development perspective, but suddenly if you just take all that space away and you have a lot less space to work with, naturally things come together easier.

It’s easier to build upon and it’s easier for the visitor to actually digest and interpret.

Um, and so that’s kind of the first decision that I made.

Now, how do we make that decision?

So in automatic.

So in that, I’m going to make that decision.

So in that, I’m going to make that decision.

So in that decision, I’m going to make that decision.

So in that decision, I’m going to make that decision.

So in that decision, I’m going to make that decision.

So in that decision, I’m going to make that decision.

Sound test, sound check, sound check.

Okay.

Question is, do I, do I end this stream and start a new one or do we keep going with this stream?

I don’t know what the protocol is.

Uh, the internet went out that that’s, that’s what happened.

Um, I got a notice in my browser that says your IP address has changed.

I was like, what?

And everything shut off.

And then when I rebooted it the first time, uh, I started trying to go to websites and it was like, your connection is not secure.

Every website I went to, it wouldn’t.

It wouldn’t.

So then I went up and checked the modem again and it was red on the service light.

And I was like, what, what, what’s going on?

So I rebooted it again.

Finally, we finally, we’re back.

Um, yeah.

Okay.

Numbers, numbers have bounced back.

So it looks like, it looks like we’re all right.

Okay.

All right.

We’ll just continue.

Um, my internet goes out once every, uh, like nine months.

Okay.

Okay.

Of course, if you just picked a random time, like, would it be, you know, would it be, uh, in the middle of the night?

Would it be on a Sunday while we’re doing family?

No, no, no, no.

It would be in the window of a weekly live stream.

That’s, that’s when it would be.

That’s when it would go out, uh, for sure.

Okay.

Uh, numbers are back.

That’s fantastic.

Let’s keep going.

Where were we?

We were talking about, we were talking about website dimensions.

We’ll just pick back up like nothing ever happened.

Uh, website dimensions, content width.

So I set it at 768.

Go into the breakpoints.

You can customize your breakpoints in automatic CSS.

I’ve got stuff on me from digging around in the modem box.

Um, okay.

And then of course we have to map these to the breakpoints in brick.

So I’m going to show you where that is done.

We’re just kind of starting from the beginning here, uh, going through all the setup.

So right here, these little three dots are where you can customize the breakpoints in bricks.

So you just want to make sure your breakpoints in bricks match the breakpoints in automatic CSS and you’re good to go.

Of course, under theme styles, uh, there is a variable for your website’s content width.

So when you change your content width in automatic CSS, bricks is already informed of that update.

Um, there’s a lot of stuff like that.

You know, typography, the root font size is the same exact way.

Okay.

Um, all right.

I’m getting texts that say all good now.

Okay.

Okay.

Uh, so breakpoints, very small website content width, very, very small.

Uh, let’s go back to the front end here.

Okay.

So the first thing is getting your kind of narrative on the page.

So I knew that obviously we want a hero is a very simple hero.

Uh, we wanted to talk about or highlight the products.

So I created a little products grid, which we’ll inspect in just a moment.

And then I wanted to highlight the team, create a little team grid.

Again, we will inspect this in just a moment and then created a very, very simple footer.

Okay.

Also with the header wanted to create a very, very simple header.

We talked about the nav menu.

Uh, we’ll just cover that real quick.

So this is the native, even though I don’t really like it all that much.

This is the native bricks, mobile menu, the native bricks menu element.

Okay.

Again, just keeping things nice and simple.

I added the toggle switch, which is a frames toggle switch for color scheme.

And we’ll talk about how that works, uh, in just a moment as well.

That’s kind of the general, uh, we have the work with us.

Uh, we have the let’s talk page.

So it’s kind of a one page website in the sense that, you know, if you, if you do products, it’s going to move you down to products.

If you do team, it’s going to move you down to team.

We’ll talk about how that works for those of you who are unsure on that side of things.

But then there are a couple of pages, right?

There’s a work with us page.

There’s a let’s talk page.

There’s a form right here.

There’s a different form right here.

Those forms are styled with automatic CSS.

Those forms have a little bit of conditional logic in them, which we’ll talk about.

Uh, that is essentially, oh, there’s a, what you can’t see is there’s a blog.

Uh, there’s no blog page yet.

So I’m still going to work on that, but there is a blog post template.

Uh, so if I go, we can, here’s the blog post template right here.

Um, this all uses smart spacing.

This all uses the new line height calculation that we’ll talk about.

Uh, found a great new way to manage line height on websites.

Definitely need to talk about that.

So there’s a lot to talk about here.

I’m, I’m rambling a little bit to let the numbers come back.

As you can see, they’re still growing.

We’re, we were almost over 200.

So we’re not back to where we didn’t fully recover, but we are, we are recovering.

Okay.

Again, if you have questions about any of this stuff, hashtag Q or hashtag question, and, uh, we will dive into additional details.

Let’s talk about the general homepage first.

So I’m going to hit edit with bricks.

So one thing you notice is there’s not any dividers, visual division between sections of content.

There are in fact sections.

This is the hero section.

This is the first section.

This is the team section.

And then we have the footer down here.

So what I did, because there’s no visual dividers, if you have a visual divider, you need a lot of padding in your sections so that everything doesn’t look squished together.

But when there’s no visual division between the sections, what you actually need is a lot less padding between the sections.

So if we open automatic CSS and go to spacing section spacing, you can see these values are very low.

Um, this is normally like a three on here.

Okay.

And you’ll see what that does for your spacing normally, which if you’re using background colors or background images or background videos, like I said, you want that block spacing.

You want that extra block spacing.

But in this case, I did not want the extra block spacing.

I wanted very minimal spacing so that when you see in the builder, you can see the visual division between the sections.

But if you go to the front end, you can’t see any visual division.

So we don’t want a ton of space in between the sections.

But again, this is very easy to manage in automatic CSS, where we have the ability to control our section spacing separately from all of the other spacing on the website.

Uh, we have our gutter here.

That’s, I didn’t even touch that.

That’s just set, uh, still at the default.

Okay.

So that’s one kind of interesting and important change that I made.

The second is I wanted a bunch of space here on our hero sections.

Um, now I could have opted to use automatic CSS to do this automatically, but just to keep things simple, I actually didn’t do it on this main homepage section.

Uh, but I can just add this class.

So I just did it with a little hero class.

Uh, I just made the section spacing section space XL.

So I just chose XL spacing for the padding top, uh, in anything that is a hero.

Now, because I’m not doing it automatically, uh, when you go to something like the accessibility statement or it’s, it’s not going to have that extra because this isn’t really, you know, it doesn’t really need it.

It’s just a boring, stupid little legal page.

Right.

Um, but I also don’t have to worry about what the automatic spacing is doing on, on those kinds of pages.

I’m just kind of manually picking and choosing where I want that extra little bit of padding.

Uh, and I’m doing it with the hero class.

So all of my heroes have the hero class.

Therefore they all have that same little bit of extra spacing.

And if I want to get rid of it at any point in time, I can just zero it out on the hero class.

We’re good to go.

Okay.

So very simple there.

Uh, let’s talk about this highlight.

How’s this highlight done?

Um, little stuff like this.

When you’re, when you’re using a variable library, there’s already a color library.

There’s already a variable library available to you.

Like in the past you would have to like manage.

Yeah.

First you’d find a yellow color that you like.

Right.

And then, and then you have to have a text color that’s darker than that.

So now you have two colors that you have to tokenize.

And then you use it.

Well, you know, in automatic CS, yeah, it’s already available to you.

It’s kind of what I’m, what I’m getting at.

It’s already at your fingertips.

Um, every website has these contextual colors.

So if I go to color palette, they’re called semantic colors.

And I just turned on warning because by default warning is a yellow color.

Right.

Uh, and so I just turned on warning.

And then if we look at how this is done, I just add a little span tag with a class that says highlight.

Okay.

So I’m just spanning.

I’m just wrapping this text in a span and saying class equals highlight.

And then where is it getting the styling from?

If we go into global CSS, you can see right here, I just styled the class.

So I just created it on my own.

And the background is warning light.

Cause the shade is already made for me.

Okay.

And then the color is just warning dark, which is, that’s already made for me.

Uh, and then I added a little inline padding to it and voila, we have a little highlight that I didn’t really have to think about.

Didn’t have to create my own tokens.

Didn’t have to, it was just, I just hijacked the warning color and, uh, we’re good to go.

Okay.

So that’s that section.

Very, very simple.

Uh, oh, the, the H1.

Let’s talk about the H1 again, you know, something that you would normally have to manage at, um, multiple break points.

If you want to do a very big heading like this, uh, but an automatic CSS, I just went to the H1 and did a heading override.

So every, every other heading is based on this math scale, 1.333 and the base heading size, which I jacked up the base heading size a little bit.

Normally it’s 20.

I put it at 24 and then I just overrode the H1.

Cause I wanted to be the H1 to be way bigger than all the others.

And so I just set a, uh, a value, a static value of 80 pixels and then 24 on mobile.

And it scales between those two automatically.

And I don’t have to worry about it.

So I just went in 80, save, move on with my life.

And I don’t have to worry about break points or anything else.

So that was nice and handy.

Uh, products here.

You can see that we have what’s called a feature grid.

Um, now I could call this a product grid.

You could call this a product card, but my vision for the website is simplicity, which means that if I wanted to feature things, I would probably use the same exact card.

I wouldn’t change the style of the card.

So I just call it a feature card and we’re just going to use that for whether it’s a product or a feature, it doesn’t matter.

Um, again, just keeping things as simple as, as we possibly can.

And then inside of this, you see this thing called, obviously the ribbon doesn’t come with the frame.

This was a frame.

So I can’t remember which one it was cause I renamed it, but I just took a feature card frame and, uh, essentially changed the grid.

So this is a two column grid.

And then if we look at the first one, well, this is a loop.

It’s being looped.

There’s actually nothing to click on.

There’s only one element in here.

Uh, but if we go to the CSS area, is that where I put it?

Can’t remember where I put it.

Um, I’m essentially using, uh, just some targeting to target the first element.

Maybe it’s on the feature card itself.

Let’s go in here style CSS.

Okay.

Uh, yeah, I don’t know where I put it.

Uh, but I’m telling the first one in the loop to just span two.

And then the others can just be normal in the grid.

And you end up with something like this.

And if we add more, we can keep the same pattern going, or I can just make it a normal grid.

I can do whatever I want to, but it’s very simple.

The one thing that doesn’t come out of the box is this ribbon.

And so we have a product that is coming soon.

These two products are live, you know, good.

They don’t need a ribbon.

The one that needs a ribbon is the coming soon one.

So let’s spend a little bit of time talking about this whole section.

Cause it actually looks very simple.

Uh, but because I looped it and because it’s dynamic, uh, it adds a little bit of complexity.

Okay.

So, and not everybody knows how to do it.

So it’s a good thing to stop and pause and talk about.

Okay.

So first things first, you need to make a custom post type.

Let’s go back and look at what I’ve done with the custom post types.

So you can see right here, there’s something called products.

And if we go to all products, you’re going to see etch frames, automatic CSS.

So they’re all, there’s where my products get to live.

It’s nice and organized.

Again, as I’ve talked about many times, this is a content management system.

It is important that you manage your content.

Okay.

So we’re managing our content in the content management system by going to ACF post types and creating one called products.

Now I don’t want these products to have a URL.

These products go to an external URL.

They take people to the website of the product.

Right?

So very important thing, cause you don’t want blank URLs to show up.

So under URLs in automatic CSS, if you turn off publicly queryable, it will remove the URLs from those items.

So essentially I have a custom post type, but these posts do not have URLs.

They’re just objects in a database that I can then display.

Right?

Okay.

So I created a etch frames, automatic CSS.

Let’s click on automatic CSS.

There’s no editor.

As you see, like the block editor is gone.

Let’s go.

Let’s talk about that.

Cause I think even that people may not know how to do.

Okay.

So let’s go back to dashboard here and let’s go to ACF and let’s go to post types and let’s go to products and let’s go to, what is it?

Visibility, permissions, general, it’s under, here it is.

General advanced settings.

Okay.

So normally this is checked right here.

This little editor checkbox.

If you uncheck it, guess what?

On all those posts, the editor vanishes.

It disappears.

So if you’re ever wanting to remove the editor, it’s very easy.

And then you end up with just nothing.

And then you need to obviously put some fields in for content.

I needed the URL of the product and I needed a little product description.

So the way those were created field groups under ACF, go to products.

Okay.

We create it right here.

Product URL is a URL field.

And then product description is just a little text area.

And then we’re assigning these to the post type of product.

So these fields are not going to show up on your blog posts or reviews or your team members or anything else.

They’re only going to show up if that post type is product.

Another thing that I did, interestingly, is I went to taxonomies and I created this taxonomy called visibility.

And I assigned it to the product post type.

And so if we go under products and we go under visibility, which, by the way, it could be assigned to blog posts.

It could be assigned to team members.

This is a what I call like a shared taxonomy.

It’s a taxonomy that can be shared by multiple post types, pages even.

Well, actually not pages because pages don’t support taxonomies.

They should really just get rid of the pages thing.

Let’s be honest.

Like the page, the pages is dumb.

Okay.

There are three categories that something can live in.

It can live in coming soon.

Hmm.

Aha.

It can live in public.

It can live in hidden.

It actually doesn’t have to like coming soon right now is really the only relevant one of these.

Okay.

So let’s go to products and let’s go to etch as an example.

And then we look, ah, it’s in the category of coming soon.

That might come in, that might come in handy a little bit later.

Okay.

So we know we created this custom post type called products.

We have three objects inside of our products, custom post type posts.

Right.

And then what we do is we go to the builder.

So once you’ve done that, you’ve set that up on the back end, you’re ready to go into the builder.

So let’s go into the builder.

Go edit with bricks.

And you create your card.

What do you want your card to look like?

Well, you create your card.

Call it, call it what you will.

Add your classes to it.

But then you need to turn on the query loop.

Right.

So you hit this little toggle that says query loop, which is going to dynamically pull objects from the database, pull data from the database.

Right.

And so we tell it it’s a post.

What do we want to pull?

We want to pull our products.

What order do we want to pull them in?

We’ll do the ascending date order.

There’s many, many, many ways to manage this.

And then how many do you want to display in this particular loop?

Before we have to do pages or load more or something like that.

And I think 10 is the default.

I don’t know.

It doesn’t really matter.

We only have three.

If we get to 10, then we’ll make a decision on what to do when we get there.

But let’s just load in 10.

Okay.

And obviously, if there’s not 10, it’s not going to cause an error or anything like that.

It’s going to be perfectly fine.

Okay.

So that results in this loop, which then you have to, because you’re looping, if you want to span cards in the grid, you’ve got to do that a little bit manually with your CSS.

No problem, though.

We’ve covered that many, many times in various different videos.

What about the ribbon?

What about the ribbon?

Okay.

So we go down and you’ll see this little element called ribbon.

This is actually, so if we go to automaticcss.com slash docs and we search for ribbon.

Okay.

Go to ribbon.

And we choose ribbons.

Okay.

Because this is a very common element, right?

Very common element.

And it’ll say, hey, adding your first ribbon.

Here’s how you do it.

Well, look, you add the class ribbon to an element.

You can position the ribbon.

There’s a bunch of stuff you can do.

Okay.

There’s a lot of stuff you can do with ribbons.

I didn’t really need to do all that much with it.

I put it in.

I gave it the tag of the class of ribbon.

And I gave it the class of ribbon top right, which positions it in the top right-hand corner.

There was one other thing that I had to do to this ribbon.

And you will see this in the documentation.

Let me zoom in a little bit here.

But the offset of how the ribbon is actually positioned is done with a variable called ribbon offset.

That’s already part of the ribbon.

And so you can just override ribbon offset to dial in exactly how you want that ribbon to be positioned.

And then all you have to do is style the ribbon, right?

So I added my primary background color to it.

Font weight I changed.

Yada, yada, yada.

You just style it like you’re styling anything else.

But the class of ribbon and the class of ribbon top right and that little offset variable are literally all you need to get a ribbon like that.

Okay.

Something that this, a ribbon, if you don’t know how to create a ribbon, you would probably spend an hour or more on that.

Right?

And you’d be typing your butt off in chat GPT.

How the fuck do I do a ribbon?

Like, it’s just, but in ACSS, it’s just already thought through for you.

It’s already done.

And you just slap a class called ribbon and ribbon top right.

And then you move on with your life.

It’s really, really fantastic.

Right?

Now, notice this is highlighted.

This little conditions area up here.

Because if you put that ribbon in the card in a loop, I mean, you’ve probably already, in your mind, you’re like, Kevin, all the cards are going to get the ribbon.

My guy.

They’re not all supposed to have a ribbon.

Right?

So that’s where conditions come into play.

So you open the conditions.

And we’re seeing that we’re checking dynamic data.

And what are we checking?

Oh, we’re checking that category.

Right?

Because remember, all these posts are in categories.

Or at least one of them is.

One of them is in a category called coming soon.

Okay?

And so you check the category.

And by the way, Bricks gives you.

This is just phenomenal.

Phenomenal.

Because normally, if you do post terms visibility, I think what it does is it returns the category IDs.

And I don’t give a fuck about category IDs.

Nor do I want to go look it up.

I don’t want to look it up.

But there’s a little magic that if you just write colon plane, it actually just returns the names of the categories.

And then you could just say, if the name is coming soon, then that’s when I want to show the ribbon.

And so if it’s not coming soon, obviously I don’t want to show it because it’s a coming soon ribbon.

And so, you know, just a little bit of bricks, a little bit of, you know, bricks magic helps us out in that regard.

It makes us very easy.

So that’s how we result in a grid where every card has a ribbon, but not really.

Because they’re only shown when it needs to be shown based on that category matching.

Okay?

All right.

Let’s see what everybody’s saying here.

I’m just going to check on the chat before we move on here.

A lot of people talking about etch.

This is not like, this is not, people are like, they’ll post all, they’ll be like, Kevin’s the master of teasing, the master of marketing.

No, I don’t, I’m not, I mean, I do, I am, I am decent at it.

I am decent at it.

But it’s weird because some things I’m just doing because they have to be done.

Like literally it has to be done this way.

I mean, I could just not, I could just not say the product is coming, but that would just be, wouldn’t that be dumb?

That would just be dumb to not say the product’s coming.

So it’s not, and I, the site had to be redesigned.

But people are like, this is the master of teasing.

I’m like, no, I’ve just, it’s just a natural, it’s a natural part of like, I’m just doing work that has to be done.

You’re seeing something that’s coming soon.

It’s not some grand conspiracy or like marketing stunt or anything like that.

Okay.

Let’s keep, let’s keep going.

That’s neither here nor there.

I will get to questions.

Don’t worry.

Make sure you change the condition.

If you ever change the category name though.

Yes, correct.

But it’s a very literal category name.

So I can’t imagine that it would, it would change all that much.

And editing a category is already a little bit sketchy.

I try not to do that unless it’s very early, early on in the process.

Super interesting learning about these ACSS functions.

Where can I pre-order?

You can’t pre-order.

Okay.

Okay.

All right.

There doesn’t look like there’s much in the way.

In dark mode, the first time I visit your pull down selector for contact reason, the option text is black on black.

So you cannot see it.

Okay.

We’ll check that in just a second.

That’s another thing.

You know, if you’re going to opt into dark mode, you are opting into a few additional headaches that you otherwise would not have.

Right?

So anytime a client asks you for dark mode or a dark light version of the website or you decide to just know, know you’re signing up for some extra work, some extra headaches, some extra debugging, some extra testing.

Okay.

Okay.

Now, automatic CSS makes so much of this stuff very easy, but you’re still signing up for additional work and additional thinking.

Okay.

Just price accordingly.

Price accordingly.

Right?

All right.

So I think that’s all we need to look at in terms of this product section right here.

Other than a notice, I changed the ID of the entire section to products and that’s required for doing the hash linking that we already talked about earlier before the internet went out and the live stream crashed.

But I’ll go back to the front end here.

So when I click on products, it takes me to products.

How does that happen?

That happens because I’m linking to an ID on the page.

Right?

So if we go look, let’s zoom in, come up here.

The link is to forward slash hashtag or pound sign products.

Okay.

That is an ID on the homepage.

Okay.

So it’s like, hey, go here and go to that ID.

And that’s all that’s happening there.

Okay.

All right.

There’s a lot of people that don’t know how to do that.

They don’t know how to do hash linking.

Okay.

So that’s, that’s how you do it.

You change the ID, which in bricks is this little pencil.

You give it a custom name.

You don’t have to like, you could use the auto generated name, but that would be dumb because you can’t remember what they are.

So give it a memorable name and it’s much easier to manage.

Okay.

So we go down and we have our team.

Okay.

Oh, by the way, this link just exists underneath the grid.

It’s not part of the grid.

So it’s not part of the loop.

It’s just static.

It’s fine.

It’s easy.

Okay.

All right.

Team.

How do we manage the team?

If you notice, it’s the, it’s literally the exact same thing.

Copy and paste.

So I made a simple, I didn’t even make it.

I just, this is a frames card.

Okay.

I believe it’s the circle ones.

Um, so I just hijacked it.

Like if we go to, maybe it’s under profile.

Uh, it’s this one right here.

Profile grid delta.

Notice there are circular images.

All the content is centered.

I started out that way.

And then I was like, I don’t really like it.

And so I’ll just make everything a line left and circles don’t actually fit because everything on this side is square.

So I’ll just make it square.

And then I’m done.

Okay.

So I started with a frame, but I ended up with something very different, but the structure was there.

The structure that I needed to, to get to this end result was already there and done for me.

And the classes were already done for me.

And I just renamed them to team card.

And then I moved on with my life.

Um, so we ended up with this, but again, there’s one instance.

And then we, um, let’s take a look at the loop.

Cause I think everybody likes to see how the loop is done because in this case, I did something different.

I said, menu order.

I didn’t say we’re going to order this by date.

I said, menu order so that I can manually order how people show up in the grid.

Right.

And then if we look at order, it is descending from highest value to lowest value.

Now, why would I do that?

When you create a post in WordPress by default, its order is zero.

Okay.

A zero is a low number.

If you have other posts at a thousand or 900 or whatever, and we’ll talk about the ordering in just a second.

So you can see a kind of a good practice for how to do this.

A new post, which like people you hire new typically would be lower.

Right.

So naturally, if it’s descending, all zeros would just start collecting at the end.

And then you don’t really have to worry.

You just order it every now and then as those people move up and yada, yada, yada.

Right.

So, okay.

Got it.

Let’s go look at how the ordering works.

Let’s go back here.

Oh, we’ll look at that second team card in just a second too.

So let’s go out of here and let’s go over and look at our team.

See content management system, manage your content.

Look at all my team members live in a separate area.

All my products live in a separate area.

All my blog posts live in a separate area.

And then when it comes to pages, very minimal.

You don’t even see the legal pages.

Why?

Because those exist in a separate area called legal where I manage all of those separately.

I don’t want things in pages.

I try to avoid pages as much as possible.

Okay.

All right.

So let’s, let’s go back to where we were.

So let’s go to team.

Notice this looks even different.

Okay.

So if we look at the stack, again, a plugin that I’ve advocated for, I’m not an affiliate of it.

I don’t know if, I don’t know if I’m an affiliate of it.

I don’t care if I’m just telling you that this is a, it’s a good plugin for backend management.

It’s called admin columns pro.

And what it allows you to do is it allows you to customize the backend.

I’m sorry.

I want to be on team of the information, the data that you’re looking at.

And it also allows you to inline edit.

Like for example, if I need to change somebody’s title.

Okay.

I don’t have to open the post and find the field and all that.

I, it’s the fields right here.

I can hit the thing and I can say this and I hit the check mark and then I’m done.

And it updates everywhere on the website.

Right.

So I can do that from this area right here.

I can choose for the order value to be one of the primary columns, which then I can just put in order numbers.

And what I just do is big jumps.

So I do like a thousand, 900, 800, 700, 600, 500, 400, 300.

And then it gives you a lot of variables in between because you can do a nine 50, you could do a nine 75, then a nine 74 nights.

I’m, we’re never going to have a thousand employees.

I don’t think.

Um, I mean, maybe we will, maybe we will, you never know, but I mean, I got a lot of breathing room, don’t I?

I got a lot of breathing room and it’s very easy to order people without conflicts because you don’t want to be in a situation.

Let’s say you went 10, nine, eight, seven, six, five.

Whoa, whoa.

Well, you never got more than 10 people.

And then you got like two nines.

And then what are you doing?

What are you doing?

What are you doing?

Right.

That’s not the life you want to live.

Just give yourself a lot of room and, uh, use these giant gaps between the order values and you’re good to go.

And then of course, like take the relevant manageable information and make that displayed in your backend columns because it makes the website so much easier to manage.

It makes data so much easier to see and digest.

Right.

Uh, and, and, and edit and change.

Okay.

Uh, isn’t that a core feature called quick edit or something like that?

No, it’s not.

That’s not nearly as good.

Yeah.

You can do quick edit.

Look, what’s not here.

Order, order value.

Not here.

Thumbnail featured image.

Not here.

There’s a lot of stuff.

Not here in the quick edit screen.

Now, of course, there’s probably a way to hook in and choose what’s in quick edit.

Oh my God.

I don’t, I don’t, I’m not pulling WordPress apart.

Okay.

Admin columns pro does everything I need, has a nice UI.

I’ll show you, by the way, if I click, uh, this one right here, this is where you edit your columns.

One cool thing.

Uh, let’s go to products.

Let’s go to products.

Note.

Okay.

Let’s just do this.

Let’s do this together because I’m showing nothing relevant.

I’m showing the name of the product and the date that I published the post.

Is the date that I published the post of a product, uh, valuable to me at all?

No, absolutely not.

Okay.

So what I’m going to do, and this is where I say, uh, WordPress, like this should all be native CMS functionality.

Like if you’re literally going to say, if you’re going to say, we have a good CMS, we have a great CMS, we have the best CMS in the world.

It has to do these things natively.

And WordPress doesn’t do these things natively.

You have to have plugins to do it.

So it’s dumb.

It’s really dumb.

But I hit edit columns and then I go in and I say, all right, I don’t want the date.

So I’m going to remove the date.

What do I want?

I’m going to add a column and then you can choose type.

Oh, look at this.

It’s pulling in my advanced custom fields.

It already knows that there are custom fields attached to these things.

And it’s like offering them.

Well, I can bring in the product description.

Look at all the options that I have with regard to the product description field.

I can then come in and I can say add column.

And I can say product URL.

Okay.

Those are the two relevant pieces of information for me.

So I’m going to go ahead and save.

And then we’re going to go to products and look at what I have.

And then if I hit inline editing, I can actually inline edit my product description for these things.

I can manage the URL and I can also see at a glance what the URL is.

Okay.

Great.

Fantastic.

Perfect.

Perfect.

That URL won’t work, by the way.

Don’t try to go to it.

It’s going to give you a 404 error because I shut off URLs for this post type.

So none of the URLs for the post type work.

Okay.

So that is how all of this content like is managed in the backend and notice how clean it is.

Notice how organized it is.

This is what you’re looking for when you’re working on a project.

If you’ve got everything tossed into pages.

Okay.

Nothing is categorized.

There’s no custom fields.

It’s just, and everything’s statically done in the builder.

You are, you are doing 2009 web development.

Okay.

We’ve got to come into the modern era.

This is an era of custom post types, an era of custom fields, an era of dynamic data, an era of looping content, an era of conditions, conditional logic and interactions and yada, yada, yada.

These are the things that you have to learn and focus on.

All of which, by the way, is taught in page building 101, which is a hundred percent free.

Nothing, nothing is being sold to you on this live stream.

This is what people come here to look at the work and see how the work gets done.

That’s it.

Let’s see.

I found this plugin as an alternate to admin columns pro.

If you’re using ACF, uh, admin columns for ACF fields.

Yeah.

There are a couple alternatives.

Okay.

Let’s see.

Just want to spend a little time with the chat here.

Uh, once the block editor is done, can’t wait for them to get to things that we actually could use like this.

I mean, they, they should already be doing it.

This should be the, the CMS should be the priority.

Uh, not the block editor.

Um, you can’t do that with happy files.

There are plugins to sort in the backend by drag and drop later.

You can query by menu order.

Yes.

Uh, that is correct.

I noticed some engine X plugins and of course perf matters.

What do you do to optimize the speed?

Great question.

We will, we will definitely dive into speed optimization.

Um, okay.

All right.

All right.

Let’s, let’s do, let’s, let’s keep rocking and rolling.

Cause we’ve got more stuff to look at.

Okay.

So back into bricks because there’s one extra thing.

Uh, people are asking all the time how to get static things like this to show up in a loop and you actually don’t need to.

Like I did not create a post called you, um, with this featured image.

Okay.

What I did, one thing you have to understand about grids, right?

And loops in grids.

So let’s go to the team card.

Uh, let me collapse this stuff so you guys can actually see it.

So here’s the team section right here, which look ID edited to team.

Okay.

Because that’s an anchor link.

Also we look in there’s, Oh, intro echo.

That doesn’t look like intro echo.

I didn’t care.

I chose intro echo.

I deleted what I didn’t need.

And there it is.

Like it’s, it was just faster than coming up with something from scratch.

Okay.

Then we have profile grid Delta and then we have the team cards inside.

I didn’t even rename profile grid Delta, but we could do that right now.

So we’ll just call this.

Let’s, uh, cancel that.

Let’s edit this and just call this team grid right there.

Okay.

Now, now we’re good.

And I could just say team grid.

Okay.

See easy stuff.

All right.

So look two team cards.

One is a loop.

So this one generates all the cards.

And then this is just a static version of the same thing sitting at the end.

Okay.

So this one generates nine items.

The 10th item is a literal static item.

Just sitting there at the end of the grid.

It comes after the loop and it’s all exactly the same.

You can’t, you can’t tell the difference whatsoever.

Okay.

So just made a little static card, threw it in there.

Good to go.

Okay.

Um, and then that links to the, you know, inquiry page or whatever.

Okay.

Let’s go look at templating.

Cause we have a header.

We have a footer.

Uh, we have a blog post template.

Let’s go look at our templates in the backend.

So we’re going to go to bricks and we’re going to go to templates and we’re going to see our templates.

Let’s start at the bottom with our header.

Do we have a header?

We have a footer.

We have a 404.

We have a legal single, which actually I think we can delete that.

I don’t think we need it anymore.

And then we have a blog single.

Okay.

So let’s look at header.

I started out trying actually, maybe we know we do.

We do need the legal.

Uh, that’s interesting.

Okay.

I went back and forth on that and I was almost pulled the plug on it, but then I found a way to stick with it.

Okay.

So I’m going to show you that in just a second.

Okay.

So here’s our header template.

Uh, it was header alpha.

Didn’t even bother renaming it.

Don’t really care.

Uh, put in a simple, simple menu nav menu alpha.

Okay.

Again, frame, whatever did a little bit of work for me.

No biggie.

Put in this, uh, frames color scheme switcher right here, which handles the logic of, uh, local storage, checking local storage to see what the user’s preferences.

Uh, the actual framework of automatic CSS checks operating system preference.

And just to explain how this works, if you’re wondering about color scheme, there’s two things you have to manage.

The first thing that you have to manage is the user’s operating system preference.

So that is kind of like a global preference for whether they like dark or light, but then there’s something what we call, or I call a local preference.

The local preference is like, for example, if I normally like dark sites, then we want to initially display a dark site to the user.

But the user may come to the conclusion that on this particular website, they don’t like the dark version.

They prefer the light version.

That’s where they toggle.

And the minute they toggle, we now have to ignore their operating system preferences and always serve them the, the version based on their local preference.

Okay.

This is done with, um, local storage.

So we go into inspect.

Uh, I, I want to, you know, teach people how to look at these things, how to find these things.

These are very important.

Mainly also because I, a lot of the education that I’ve decided to start doing is like, how can we cut down on support requests where the user can answer the question themselves?

If the user just knew how to inspect things and where to look for that, they could answer the question themselves.

That would help us tremendously, but it would also empower the user.

It’s kind of a win-win.

So that’s why we’re talking about these things.

And it’s stuff that most people, like most YouTube channels, you’re, they’re not going to get into this kind of stuff.

You’re not, you’re, these are always going to be questions in your mind.

How the fuck does this stuff work?

Well, you get your answers here at, uh, giri.co.

All right.

So we’re going to go to application and you’re going to see this area called local storage.

And you’ll actually notice that there’s a bunch of stuff stored in here, right?

Uh, there’s stuff that the builder might be doing stuff that if you’re going to you’re using automatic CSS, that automatic, like the ACSS dashboard position is in here.

Um, you can get, uh, the dashboard.

It is possible to force the dashboard off screen.

Or sometimes when you resize crazy amounts and maybe you lose the dashboard, um, you can just delete the dashboard position and then it will reset to its default position and voila, it’s back.

Right.

That’s an example of something that could be inspected and solved by the user.

If you know that that’s how this stuff is, is working.

Look at this ACSS color scheme light, right?

So when we switch it to dark with the switch, that’s going to now become dark.

And when the website loads, the website is going to check this preference right here.

It’s going to check this line item in the local storage.

And if it reads light, it’s going to serve light.

If it reads dark, it’s going to serve dark.

Now we can get into the details of how the color, how the style sheet actually switches, but maybe that’s a little bit too deep for this, uh, for this video.

Okay.

Or this, this live stream, I should say.

Um, yes, that’s how the switch works.

Uh, so the switch overrides the, there’s actually a different way to check for operating system preference.

And we just made the switch and that local storage line override the operating system preference.

Okay, great.

Fantastic.

Uh, what else?

Oh, let’s go back into our header.

Okay.

Um, mobile menu.

This is all very standard stuff.

There was nothing spectacular done here.

Uh, you literally go into mobile menu.

You tell it what break point you want to show the mobile menu at you style the mobile menu.

There’s not a lot you can do with it.

Honestly, this is the unstyled desktop version.

If we go down here, you’ll see this is the styled version at the break point.

It actually shows up at, I just made the links bold, spaced them out.

Didn’t really care.

It comes with an X to close it.

It’s, it’s kind of all done for you.

So if you don’t want anything fancy and I didn’t want anything fancy, this does the job, right?

But if you do want something fancy, this won’t do anything for you.

You have to abandon this very fast and, uh, go to a different solution.

I use the frames modal sometimes to do custom solutions.

There’s a bunch of different approaches that you can take.

Uh, but this is very, very native, very, very native to bricks.

Okay.

Let’s go to footer.

See what our footer is doing.

Oh, by the way, a header, uh, template settings.

Okay.

That’s actually just set as the header.

So that’s good.

Um, okay.

Let’s look at the footer.

Footer.

Very simple.

Got a top and a bottom.

These are, this was just a, I believe this was a frame.

Uh, yeah.

Footer golf did the whole thing for me.

I just added footer golf.

This is what footer golf looks like.

I moved on with my life, including the legal links, which by the way, if we look at this, we go into this nav.

You notice that it has proper navigation structure.

This is technically an additional navigation.

You’re navigating the legal area of the website.

Okay.

And so with that comes certain things like attributes and an ARIA label that says this is a legal nav.

This will announce, uh, on screen readers as the legal navigation for the website.

Um, this is the kind of the attention of detail or attention to detail that you get with frames that you’re not going to get with other design sets, like the improvements and accessibility in having actual proper HTML five structure.

That’s why I love using it because it’s, there’s so many boxes that we have to check in our jobs.

There’s, it’s actually, there’s too many boxes.

That’s why you need multiple people to check things.

That’s why you need a whole checklist of shit to remember.

Um, like when you’re launching a website for a client, you should have a whole like out the door checklist.

Like, did we do this?

Did we do this?

Did we do that?

It’s too much to just remember off the top of your head and not miss something.

Right.

Um, so the fact that frames checks so many boxes for me, like if we go back to, um, the, the front end.

Okay.

Let’s go back here.

Uh, let’s just check on this real quick.

And again, I’m going back into inspections, right?

Like you got to get comfortable inspecting things in your job as a web designer.

Look, this is an unordered list.

Okay.

With list items inside them.

Oh, that’s another thing we can talk about.

The hoverable nature, the clickable nature of the entire cards and how that is even accomplished and how that’s done with respect to accessibility.

The fact that when I focus on them, I get proper focus on the entire card, not the actual link, because the card is not the link.

The card is not the link, but the card is what gets focused on.

That might shuffle your brain up a little bit.

Let’s, let’s talk about that.

Okay.

So this right here, there’s a heading wrapper.

Why is there a heading wrapper?

And the heading wrapper, by the way, is the link.

Okay.

And we are linking to the value of the custom field, which is called product URL, right?

You do dynamic data and product URL.

It’s right there and you choose it.

And that’s where your URL comes from for this link.

Now I linked a wrapper.

Why did I link a wrapper?

Because if we look in here, I need the heading and the icon to both be part of the link.

So I wrap the heading and the icon.

And then I make the wrapper the link.

And this is okay because the link is inconsequential to what we’re doing here.

Okay.

It’s just an SVG.

It doesn’t really mean anything for accessibility purposes.

We really just want to ignore it.

So take this heading wrapper.

Because this is the link, this is what would normally be focused.

And this would be the only clickable part of this card.

You would not be able to just click on the entire card because the card is not an actual link.

And what we have to do is we have to extend the clickable area of this wrapper to the entire card.

And there’s a very special technique to do that.

And it’s a very technical technique.

And so you either know how to do it or you don’t.

Or the third option is you’re an automatic CSS user.

And so you just put a class on this heading called clickable parent.

And it just does it for you magically.

Right.

If I remove the class, the card won’t be clickable.

If I add the class, the card will be clickable.

That is the first problem solved.

Okay.

Now we have to solve the problem of focus.

And we have to solve the problem of hover.

Okay.

Because we want certain things to happen when we hover.

This is actually a very basic beginner concept that we’re going to talk about is when I hover over a parent, how do I change the styles of its children?

Because normal hover states only change the style of the thing you’re hovering.

They don’t change the style of the children of the thing that you’re hovering.

Right.

So we’ll talk about that as well.

Let’s talk about focus first.

Okay.

So I want the card obviously is clickable, which means the card needs to be focusable as well.

Again, you have to turn off the focus style of the actual link.

We have to turn that off because we don’t want the focus to be on the link.

And then we have to apply the focus styles to the actual parent itself.

Again, very technical and very complicated.

Or with automatic CSS, you just use a class called focus parent.

And you’re just saying focus, put the focus on the parent.

That’s why it’s named the way that it is.

This is called clickable parent because I’m taking the link and I’m saying clickable parent, which means I want its parent to be clickable.

And so the link just does that.

And then I go to the parent and I say focus parent.

And that’s saying, I want the parent to be focusable and nothing else.

And so automatic CSS does all of that for you.

And so on the front end with those two classes, you get a clickable parent.

Okay.

The parent is clickable and you get a focusable parent.

And by the way, you don’t have like notice.

I didn’t tell it.

Well, what do I want the focus to look like?

The focus is already controlled by automatic CSS.

So if you go into, oh, I’ve got to, what do I have to relicense this shit now?

My internet crashes and now we can’t get to the thing.

Okay.

We probably introduced some sort of other issue because it’s, yeah, because we’re live streaming.

We’re not allowed, we’re not allowed to do things the right way anymore because we’re live streaming.

We’ve already determined that this session is fucksville.

Okay.

Yeah.

It’s not going to let me right now.

Okay.

Going to have to debug that situation.

My internet went out.

And now everything’s haywire.

Thankfully, I have this right here, which we’ll pull up.

Let’s go to July, 2024.

I have a current, I like to do my dev environment by the month.

Okay.

So July lasts for July and InstaWP can set the expiration of these and then it just implodes.

And then I have an August and a September and it’s every month I start a new one.

Very nice.

Okay.

So let’s go in here.

Let’s get to the dashboard and let’s take a look.

Okay.

So if we go to additional styling, we have accessibility and you could choose, do you want to use outline or shadow for your focus styling?

What color do you want your focus to be?

How thick do you want your focus to be?

How much of an offset do you want?

Okay.

That’s globally controlled by automatic CSS.

It’s done.

And so when I use focus parent, there’s actually, I can even say with the class, if I want it to be, I can do focus parent outline or focus parent shadow and it’ll use the different, whichever one I want is the one I can choose.

Or if you just say focus parent, it’ll use your website’s default focus styling.

Okay.

So that’s how that works.

Let’s talk about the hover.

All right.

So let’s go in and I got to edit this with bricks.

Let’s go ahead and click on the card and let’s go feature card, feature card and see what’s going on in our CSS.

Okay.

So what we want to look at right here, let’s go zoomy, zoomy.

Notice that when we hover the parent, we’re going to set the border color.

So the cards have a border.

We’re going to change the border color to primary when we hover over the card.

Now, root hover.

Remember what root does if you’re new here.

Root is just selecting the class that I have active.

So feature card, that’s my whole card.

My whole card is root.

Okay.

So when I hover over feature card, I want the heading and I want the heading icon to both change to color primary.

So this is how you do.

We go to, let’s go to code pin just real quick.

So you can see this without the distraction of, of all of this.

Okay.

Of all the builder and all of that stuff.

So let’s say I have a card, right?

And I have a card heading in there as well.

We’re not actually going to put any HTML in, but you have your card here.

Here can be the styles for the card, right?

And then you might have a card double underscore heading, right?

And you put the styles in there.

Well, when you want to go do your hover states, you do card hover, and then you just do card heading.

So this is how you change heading styles when the card is hovered.

So when the card is hovered, I want to do something to this element right here.

All right.

And by the way, there’s ways to group things.

So you don’t have to, you would have to, if you wanted to do a link, right?

Now you have multiple lines like, ah, shit, there’s something else I got to do, right?

Maybe it’s the text.

I want to do, I want to do something to the text as well.

You end up with all these lines, right?

Is there a way to avoid that?

Yes.

That’s where something like is comes in, okay?

So now you can do like card heading, card text, card double underscore, whatever.

So you’re saying when I hover over the card, is one of these things true?

Like, are these things, do they exist?

Is they there?

The CSS is like, you know, it’s, it’s, it’s a little hood.

It’s a little, if we’re being honest, like, is these things here?

Yeah.

It doesn’t always make logical sense when you read it out, but that’s kind of what’s going on here, right?

So you’re saying, is these things here?

Let’s go ahead and style those.

It’s, it’s very simple, but again, a lot of, a lot of beginners don’t exactly know how to approach that.

Okay.

So I just changed the color to primary.

And then when I hover over the root, I change the lead to black.

All right.

Fantastic.

So, um, that’s how you do the hovers on the cards.

So we did the loops.

We did the hovers.

We did the focus.

There is, you know, there’s a lot of technical stuff going on, but ACSS actually alleviates the need.

This was probably the most technical thing that I had to do on my own, right?

Uh, either bricks was helping me out, like with the conditions thing, with the looping thing or automatic CSS was helping me out with clickable parent and focus parent.

This was the extent of what I had to kind of manage on my own simply because I wanted some custom thing to happen.

And, um, you know, frames and they, they can’t, you know, know what you want ahead of time with all your custom ideas.

So that’s where you come in.

Like at some point I tell people this with frames and ACSS all the time, because they’ll ask questions.

Well, can it do this?

Can it do?

And I’m like, you know, at some point, uh, you do have to do your job.

Like, you know, we’ll try to do as much as we possibly can, but you’re going to have to take over.

Like the autopilot can’t take off, fly the whole thing land.

And especially if you like, you know, have a custom destination in mind.

So yeah, you do have to do a little bit of work on your end.

Okay.

Um, I think I’ve done, let’s look at the forms and then we’ll just take questions.

Cause I think at that point I’ve kind of just gone over everything randomly that I know to go over.

Notice also, I did not install rank math in the stack.

I went with simplicity.

I went with free.

If you are wanting a really good free SEO plugin, I use it on a few different sites.

Uh, it’s called SEO framework.

Uh, the SEO framework right here.

Again, free, simple out of the box, very performant.

Oh, which reminds me performant.

Somebody wanted to talk about performance optimization.

So we’ll, we’ll do that as well.

And if I forget, please remind me performance, performance, performance.

Let’s talk about it.

Okay.

Um, what was I about to do?

Forms, WS form.

Okay.

I’ve got two forms.

I have an inquiry form and I have a plugin application form.

Let’s take a look at the inquiry form first.

I’m fairly certain.

I just use the normal default form.

Okay.

Uh, full name, email, phone, contact reason.

Uh, they do choose a product and I believe there’s some conditional logic.

Okay.

Which I didn’t even bother naming.

Um, let’s do product logic.

Okay.

Or we’ll say product field.

Okay.

Let’s zoom in.

And see how WS form helps us.

Again, this is, you’re relying on your stack.

I needed some conditional logic.

Let’s see how WS form handles this.

Right?

So it says if the contact reason, so I have a, it may help to actually look at the form.

Let’s go to let’s talk.

So this is what we’re looking at right here.

So there’s a contact reason.

What is the reason you’re contacting us?

Do you have a product question?

Do you have a general question?

Uh, do you, is it a public relations thing?

Do you want to be employed here?

Okay.

Which by the way, let’s go back.

I just, I just had a thought in my mind.

Um, we can actually go, let’s go back to the, it’s hard to do this when you’re zoomed in.

Uh, this right here, you join the team.

Did you know when somebody clicks on that, we can actually make employment selected automatically as the reason that’s very possible to do in WS form.

So maybe I’ll do a separate, you know, a little, little thing on that.

I don’t know if we’ll get into that right now, but it just popped in my mind.

That’s probably what should happen.

Um, okay, let’s go back.

So if you choose product question, guess what?

You get a new field.

So there’s a new field.

This is product.

I’m, I’m tailoring this to like beginners.

I don’t want anybody to feel left behind.

I know some of this is obvious to most of you.

Uh, but we don’t want the beginners to feel left behind so they can choose the product.

But this is actually a really cool part right here.

If you’re intermediate, maybe even advanced, you may not even realize what’s going on here.

I think most of you would go in and you would just add a select field and you would say, I want option one to be automatic CSS and I want option two to be etch and I want option three to be frames or however.

But the problem with that is when you launch new products, somebody on the team has to remember to go update the product selection field in the form.

Don’t they?

Don’t they?

Yeah, they do.

Right.

Um, let’s look at how this is done.

So let’s go into, here’s the form.

Uh, we’ll do the logic.

Then we’ll do this other thing.

So contact reason row selected product question.

This is a big if statement.

If the row selected is product question, then I want to set the product field.

The product dropdown set the visibility to visible and then let’s just do this from scratch.

Okay.

So you can see I’ll just delete it.

There you go.

If select.

Okay.

Come down here.

Look how it gives you.

Hey, buddy.

Here’s all the fields in your form.

Which one would you like to do logic on?

Well, thank you very much.

Mr.

WS form.

I think I want to do some logic on the contact reason.

I want you to watch this because actually it, you know, it’s, I’m always impressed with the, um, fluidity of WS form.

Uh, and then, so I’m going to say, all right, if a specific row is selected, well, it’s like, Hey, Hey, Mr.

Mr.

Geary, here’s all the options in that particular field that you just, which one would you like to do, uh, some logic with?

And I’ll just say, well, uh, product question.

Okay, great.

So then I come down to then then.

All right.

Hey buddy, here’s all the fields.

What would you like to do next?

Well, I want to take this product field and I want to set the visibility to visible and look what it already did.

It already went to the else.

Okay.

Cause I made a then that says, I want to set the visibility to visible.

If this thing is true, else it already knows.

Oh, let’s just set it to hidden.

I didn’t have to go set that field to hidden.

When I make the logic, the logic is if else.

So the logic will handle the visibility of the field for me.

And it built the else logic for me based on the then logic.

That’s super helpful.

When you’re building a very complex, large, the, like the ability to do that for you, like it’s just kind of knows you want to do the next thing.

Um, it’s fantastic.

Like it really, really, really comes in healthy.

Uh, can I say healthy, helpful, helpful.

Okay.

Save.

Uh, so that logic is done.

So that’s, that’s as easy as it gets.

Like it’s not, there’s not a lot to it.

Uh, let’s go up to routing.

We save the submission when the form is done.

So that saves at the database.

We send an email, uh, from hello at digital gravy.co.

We send it to hello at digital gravy.co.

We reply to the person’s email address, right?

It says field four, but you really, you just change, you just choose it from the dropdown right here.

Uh, and then we choose a subject and we can inject things into the subject and we can naturally it’s going to send the entire, like all the results of the, of the form.

I mean, there’s so much here that we can do, but most of it is done for you.

It’s very, very easy to manage.

Uh, that is the basics of that form.

Okay.

We were going to look at, oh, product, product, product, product, product.

Okay.

So here’s my little select field, right?

I’m going to go to options.

This is where you would put in the options for the select field.

Um, Ooh, look at this data source posts.

What’s going on here?

Filter by post type product filter by post status published filter by term.

Remember that category that I assigned that taxonomy where I said it can be public.

It could be coming soon.

It could be hidden.

It could be hidden, right?

If I put something in a hidden category, guess what I can do?

I can hide it from loops.

Guess what I can also do?

I can hide it from select fields in forms because this select field is, I didn’t just put the products in there as options.

I queried them into the field as options.

Just like I did on the homepage with Bricks’ query loop.

WS form lets you query objects from the database into select fields as options.

And then you can use the same exact visibility logic on them.

If it’s not a published thing, I don’t want to show it as an option in my form.

If it’s not part of these categories, I don’t want to show it in my form.

Right?

So now when I add a new product, if I add that product as a draft, it’s not going to show up in my form as an option.

But if I publish it, it’ll show up in my form as an option.

If I add it to the hidden category, though, it’ll get removed then from the form and from the loops.

And like, so from the back end, literally from right here, let’s try to understand and wrap our mind around what this means.

Again, from a content management and architecture perspective.

Right?

If I add a new post, add title.

Okay?

New product.

Give it a URL.

Give it a description.

Is it one of these?

I want it to be public.

Okay?

And then I publish it.

Guess what?

It shows up in all the loops.

All the product loops.

It shows up.

It shows up in all my forms that are querying products into select fields.

Okay?

And then if I say, oh, no, no, that actually needs to be hidden from all those areas.

I just switch it to hidden, hit publish, done.

And it gets removed from all.

I’m managing the existence of this thing across an entire website from this one page. right here.

I’m managing its content.

I’m managing its visibility.

Not just visibility on web pages, but visibility in select fields in forms.

Okay?

This is content management in the modern era.

This is what we should be striving for in our projects and thinking through this kind of logic, which, by the way, this all stems from the very fact that we decided to use a custom post type for this.

The custom post type is the key, the gateway to being able to do all of these things that we’re talking about right now.

And again, very, very simple website.

Right?

This stuff might seem complicated to you.

When you’ve done it one time, it just clicks in your mind.

And you’re like, ah, okay.

I can easily do that going forward.

When I was building the form, do you think, let’s just ask a question.

Do you think it took me additional time to query the products into that select field versus manually entering them?

The answer is no.

Now, the first time you do it, it’s going to take longer.

But when you know how to do it, it doesn’t take longer.

It literally is it.

It’s three drop downs versus typing three manual things.

Okay.

And then for sure, if you had more than, let’s say you had 30 products.

My gosh, manually entering them would actually take much longer than querying them into the form.

Okay.

So you either have a negligible, like there’s no time addition involved.

Possibly it saves you time to do it.

But then all the time for managing in the future is also saved.

So it’s just the best way to do it.

It’s like objectively, it’s the best way to do it.

Not to mention you don’t end up with errors.

So you don’t end up in a situation where you removed a product, but the product is still selectable in a form on your website.

That’s dumb.

So this, not only does it save time, not only is it more efficient, but it’s reactive.

It reacts to what’s happening with your data.

The entire website reacts to what’s happening with your data.

That is the best way to, that’s objectively the best way.

And for people that’d be like, I can’t do this for my clients.

They don’t pay enough.

I can’t put this much attention.

This should be the standard that you work at.

This doesn’t, and it shouldn’t really cost extra.

Why would it cost extra?

It’s, we’re not doing more work to do it.

We’re just working differently, right?

And when you’ve practiced it a few times and you’re good at it, it doesn’t take any longer time.

It just results in a better outcome.

You’re building better, less breakable websites for your clients.

Okay.

Yeah.

And the CPT drives everything.

Somebody said that.

David Wall says, really like how the CPTs are driving everything.

Yeah.

It’s not just, oh, that’s nice.

It’s a little compartment where I can organize some content.

No, no, no, no, no, no.

Functionality is dependent on that.

It drives loops.

It drives logic.

It drives conditions.

It drives visibility.

It drives forms.

It drives so much of the rest of the website from that simple act, that simple decision of saying, I’m going to create a custom post type.

Okay.

All right.

Great.

There’s, and there’s other stuff that we, you know, haven’t even talked about as well.

That is a benefit.

I’m not going to add a new product to the website.

The responsiveness of the website.

And then we’ll talk about performance.

Okay.

So let’s go down here.

I mean, I build it with frames.

Frames are responsive out of the box.

The typography is responsive out of the box.

The spacing is responsive out of the box.

There just wasn’t much to do.

Like I just did it.

Looked at the break points.

This grid I made a decision on to change its column number at a certain break point.

It’s literally it.

Okay.

Like it’s just, it’s done.

It’s done.

Let’s go look at the color scheme.

Bang, bang.

Okay.

That is man.

I think we still have to do this on our other little site here.

Okay.

So you go to color palette and I’m only using primary and base and neutral and auto color scheme.

This, this switch down here.

So let’s go to primary alternate color on alternate color.

Choose whatever you want.

Okay.

Make it completely different.

All you know, do whatever you want with the shades.

And then auto color scheme is the toggle that looks at the person’s operating system preferences.

You don’t have to do that.

You can turn it off.

So I don’t, I don’t care what the person’s operating system preferences are, but if you do care, you can toggle it on.

And then you come down to scheme protections.

Actually, I really want, if Andrea or maybe Wadgie is on the stream, I’m trying to think what could be causing us to, it’s, I think it’s not doing its license check is when we lost internet connection, whatever blew up has interfered with the site.

As we look at it and I don’t know if there’s a quick way to let’s, let’s go in here for a second.

Let’s just, let’s clear all local storage.

Okay.

Make sure nothing.

And let’s clear all session storage.

Let’s refresh.

Okay.

All right.

See, now we’re back.

All right.

Guess, look who didn’t have to put in a support request.

Okay.

All right.

Let’s, let’s go through this color palette.

Um, so primary, I’m not changing on this website.

I do want to zoom.

I do want to zoom in.

Okay.

I know a lot of y’all complain, like it’s too small.

Some of y’all are watching the stream on your little, uh, your little iPod.

Uh, okay.

We’ll zoom in as much as we possibly can.

So alternate color for primary is off.

I’ve turned secondary off, tertiary off, accent off.

My base color is black.

But so is neutral.

Why am I using base?

If base is the same as neutral.

Really good question.

Okay.

Let’s just ponder this for a minute.

My base represents most of my backgrounds and my text.

Yes.

Yes.

Yes.

Yes.

At, as we speak right now, this is a black and white website for the most part, but it may not always be that way in the future.

So I’m actually choosing context over the actual static value, right?

Base gives me a context of this is the base color scheme of the website.

Yeah.

Right now it’s blacks and whites.

So I could use neutral, but if I use neutral for everything, like neutral for the text, neutral for the headings, neutral colors for the back, I’m locked into neutral.

Be neutral, guys.

You can’t just come out of the woodwork and be like, well, today my neutral is purple.

That’s not, that can’t work.

That’s not going to work.

But base does not have that problem.

Does it?

Base can be anything I want it to be.

And so even though base is black and white, same as neutral, I’m using base everywhere so that if in the future, when I decide I’m a little bored with black and white, I’m going to put a little pop of color in here.

I can just come in and put a little pop of color.

I don’t have to go rework how everything is done on the website.

Does that make sense?

So this might seem redundant.

You’re like, you’re using two different blacks in your palette.

Yeah.

Because one has context and the other is locked into always being black and white.

So I’m choosing to use the one with context, even though it’s the same actual value right now, because I don’t live in a static world.

I don’t have a crystal ball.

Things may change.

And when those things change, I am now free to change them.

I’m not locked in to a specific outcome.

Okay.

So that’s why I’m using base, even though it’s redundant.

So now we look at the alt and all you see with the alt, watch this little bar right here, the shade values flip-flop.

Okay.

And so that’s how it knows.

Okay.

We’re just going to use opposites.

And I dialed a couple of them in for contrast purposes.

But that’s, you know, fairly simple to do.

There’s an ACSS 101 video on exactly how to do that.

I have auto color scheme on, but let’s look at a little, let’s look at a little, I have to close the dashboard for this proper looking here.

Let’s look at one problem that I did run into.

A couple of problems, actually.

This ribbon right here is using the primary color.

Remember, we’re not swapping the primary color, but what are we swapping?

Blacks and whites.

So whites become black and blacks become white.

Well, this is a white label.

Okay.

Let’s go back to our light mode, white label.

I do not want this to be a black label because if it turns black, the contrast ratios are going to be off and it’s also not going to look good.

Okay.

So that ribbon cannot change.

We have to make sure that ribbon does not swap.

Right.

Let’s go down.

Let’s find another problem.

Let’s go ahead and toggle this and figure out, oh, these buttons are in kind of the same situation.

Okay.

So if we open ACSS, we go to buttons and we go to primary.

Notice we have primary background, white text color.

Well, what is white going to do when we swap the color scheme?

It’s going to turn to black.

I don’t want that to happen.

Right.

If this was primary ultra light like that, it would not change.

Okay.

On its own because primary is not a color.

That’s part of the color scheme.

We already told it that.

Okay.

We said, don’t change primary colors.

So this out of the box would be fantastic situation.

But you know what problem I ran into?

That doesn’t, visually, it looks like it should.

That actually fails color contrast for accessibility.

Barely.

Fucking barely.

It barely failed.

And so I was like, what’s going to pass?

Well, guess what passes?

White passes.

So I changed it to white.

Look how easy that is to do.

In ACSS, all my primary buttons, the text just became white.

Right?

So all of my buttons now pass color contrast.

But now I run into a new problem, which is, ah, but the white is going to become black.

When we, remember I said in the beginning, I said, if you’re going to opt into color scheme, you are going to opt into some headaches and some challenges.

Thankfully, ACSS helps solve these challenges.

So let’s go look at what I had to do.

By the way, my form buttons, same situation.

Okay?

So let’s go to color palette.

Let’s go to scheme protections.

Let me actually, I know you guys probably can’t see that.

Let’s zoom out.

Okay?

Let’s unpin this.

Let’s bring this over here.

And let’s zoom back in so you guys can actually see better what’s going on.

Because I know my head, my head gets in the way.

Okay?

Let’s go down to scheme protections.

So we have this thing called lock specific selectors.

By the way, ACSS, this is not, this does not exist in web design.

Okay?

This only exists in ACSS land of web design.

These are kind of the features that we’re like very proud about.

Right?

Because they’re very forward thinking.

They’re, they’re insanely, insanely helpful.

Okay?

You’re essentially able to lock any selector, any valid CSS selector to the main scheme, which means the alt scheme will not affect it at all.

And so what have I locked?

Anything that is button primary, anything that is WSF button, and then ribbons.

Now I grouped these two things together in an is statement because they live together.

Like form buttons and my normal buttons are, they’re all buttons.

So I, I made them live together in an is statement, but you could absolutely put these things in individually.

This is just me doing a little bit extra, you know, being a little extra, doing too much as they say.

But for me, it’s not too much because it keeps it mentally organized.

Um, so in that, like that, um, it doesn’t matter if this website is one page or 7,000 pages.

This little section right here, just fixed every button, every form button, and every ribbon that exists on this website is now fixed.

It will not, the whites in those buttons and those, and those, uh, ribbons will not change to black when the color scheme switches.

This one little area right here, done.

This area actually, see when you’re doing a color scheme website, light black, um, or dark, dark light, whatever.

It’s very, very helpful to know ahead of time that you’re going to do that and then build accordingly.

Right.

But this little area right here, I actually took a client site.

The entire thing was built, not a simple site, not a simple site by any stretch of the imagination, probably 40, 50 pages.

Okay.

Now a lot was templated.

A lot was looped.

A lot.

It’s, of course, it’s all class-based.

It’s like, and that goes to show like all of that helps tremendously.

Right.

But they, at the very end, it was, it was a little bevy.

Okay.

It was a little bevy.

They were like, we really, really, you know, it’s, it was a dark website by default.

And they’re like, we really, really, really want it to be light.

And I was like, well, you know, what I would do probably instead of just changing the entire thing is let’s just give the user the option.

Okay.

And they agreed to that.

And then I had the problem of, but this whole thing is built.

Like, what are we going to do?

And at the time we didn’t have this feature, right?

This feature didn’t exist.

And I started going in, we have this utility class called color scheme main.

So if you add color scheme main to any element, it’ll protect that element from switching.

You’re good to go.

But that requires you to go through every page of the website and add that class in random areas.

And that’s just seemed messy to me.

I did that for all of eight seconds.

And I was like, fuck this.

We’re not doing this.

This is dumb.

There’s got to be a way that I can just control parts of the website from a central area.

And that’s where I came up with color scheme protection, right?

And locking selectors to the main scheme.

And so I built it as a feature and then immediately released it and then immediately used it and mapped the entire website in about eight minutes, okay?

Which would have taken me hours of time to go through manually and do everything.

In about eight minutes, I went through the website.

I wrote down the selectors for the different things that needed to not switch.

And then I came and added them to this input, hit save, and moved on with my life.

And I was like, here you go.

Here’s a light dark scheme website after the fact, after the fact.

Which is nearly impossible.

So that is an extremely powerful, powerful feature.

Okay.

How are we doing?

I think we need to get to questions.

That’s what we should do.

We should do questions.

So hashtag Q, hashtag question.

We’ll get the job done.

Let’s go through it.

All right.

Charlie Sasser says, I think those of us that are left should get a free month of Inner Circle for sticking around, right?

I do thank you for, if you weren’t here earlier, we had an internet outage.

It was very embarrassing.

The whole live stream froze.

I had to go up and reset my modem three times.

I was sweating a little bit, trying to race to get back to you guys.

Ultimately, we did.

Now, should you get a free month of Inner Circle for that?

I don’t know.

Probably not.

What was it?

Downtime?

15 minutes of downtime?

I think we’re good.

Okay.

You were talking about Etch.

That’s not a question, Mr.

Grant.

That is not a question.

Why is content broken on the Etch page?

That’s supposed to be, because there is none.

We will announce Etch in September.

What I will say, this is going to be the largest launch that’s probably happened in the history of WordPress.

Specifically because WordPress doesn’t usually work like this.

It should.

It should.

I don’t know why it doesn’t.

Developers don’t typically work like this.

I don’t know why, because they should.

But in September, this will most likely, it will be the largest launch in the history of WordPress, which is a 20-year history.

So you’re going to want to be around for it.

You’re going to want to be around for it.

But yeah, that’s what it’s going to end up being.

Okay.

Tell us more about the new line height calc, please.

Yes.

Yes.

I’m loving this.

I’m loving this.

Okay.

All right.

So we go to ACSS, and we go to typography.

Okay.

Now, I’ve already found another bug.

It’s when I change tabs.

It likes to not float my screen anymore.

So I will be putting in a Jira ticket.

And we will be wet noodling Wajib after the live stream.

Okay.

So if I go down here.

Now, if you are upgrading your existing install, you will not see this.

You will see whatever value you previously had.

Probably something like for headings, probably something like 1.2, 1.1, something in there.

If you go to the text area right here, you’ll see something like 1.5, 1.6, 1.7, 1.8.

Those are very common values for line height.

This is how line height has been done since probably the beginning of time.

But it’s not a good way to do line height.

Okay.

There is, in fact, a better way.

But CSS had to evolve in order for this way to be available to us.

And then it takes people to recognize that, oh, this thing called line height that we’ve just considered to be a basic value this entire time, we can actually do it differently.

And now, what would alert you to that?

Have you ever been in the situation where you set line height?

Let me go close this for a second.

You set line height on your text, but then you have these utility classes like text large, text extra large, text extra, extra large.

Well, guess what?

As fonts get bigger, you actually want less line height between the lines.

Okay.

Because otherwise they get too spaced out.

It doesn’t look good.

It doesn’t look good.

And as fonts get smaller, because everything starts to visually, blend together, you actually want more line height between the lines.

Okay.

And so the 1.8, 1.7, 1.6, these values don’t account for this.

They’re kind of dumb values.

So if you use 1.8 for your body text and then your XXL text, that needs to be like 1.2 probably.

Right?

That’s a huge jump.

So you have to manually make all these decisions.

Well, guess what?

Guess what?

Now with this new way to do this, this is what I mean by all the zooming.

All the zooming fucks with the dashboard.

You know why?

Because the dashboard is based on it knowing the load size of your canvas.

Okay.

So it looks at the body of your site when it loads and it positions itself accordingly.

But then you’re like, you start doing all this kind of stuff.

Well, guess what?

You’re changing all those values.

And yeah, the dashboard can, you know, keep up in a lot of circumstances, but sometimes it gets a little lost.

It gets a little confused.

If you’re not doing all this zooming and stuff, it’s not a problem.

I’m doing a bunch of zooming to help you guys out.

Okay.

So this line height, two pixels plus 1.9 EX.

Let’s talk about what exactly is going on here.

Okay.

So there’s a static value and a relative value.

A lot of people have never even heard of the EX value before.

An X value, it’s called an X value, not an EX.

Like if you’re just saying it, you just say X value.

It’s the X value.

What is it?

It is literally the calculated value of the X height of a font, a typeface.

Okay.

What is the X value?

Like literally the letter X.

Okay.

So the X, because an X, it turns out, if you write an X, is about half of the height of the font face.

Okay.

So it is like a, what’s the other one that’s based on the O character?

CH.

You do CH, right?

CH is based on the letter O, I believe, or zero.

My dyslexic mind gets them confused, but it’s either based on the O character or the zero character of a font.

And that’s how it determines width.

It’s calculating width based on a specific chosen character.

This, the X value is based on the letter X in any given typeface.

And it’s taking the X.

That’s one.

One EX is equal to one X, right?

And if an X is typically half of the height of a typeface, then doubling the X value gets you the actual value of the typeface or very, very, very, very close.

Okay.

So what line height often is, right?

Is we can, we never really want it to be less than the height of the typeface because then all your lines bleed together.

So we want to take the X value times two, which is the height of your typeface and then add statically whatever line height you want.

So as the type scale changes, like the text gets smaller, guess what gets smaller?

The X value.

And so it’s always calculating itself based on the actual height of the characters and the typeface and then adding whatever offset you want to add.

So the pixel value is the static offset.

And then the X value is literally matching the height of the font.

Okay.

And so what happens is you set one value for all sizes and you don’t have to manage all sizes independently.

This calculation, this formula is actually managing the line height itself.

It’s looking.

And if you change typefaces, same thing, you often change typefaces.

1.5 looks great with a typeface.

You change typeface.

1.5 looks crazy.

Looks insane.

EX much less likely for that to happen because it’s actually calculating itself based on the size of the typeface.

Okay.

So that’s the best way I can explain it.

But anyway, if you start using this approach, I think you’ll find that it’s actually fantastic.

I’ve found it to be really, really, really, really good.

Let me go down to, I want to see what chat’s saying about this.

Just see if we are making sense.

Yeah. 97% support.

Are you talking about the EX value?

Yeah, for sure.

Okay.

Okay.

Okay.

Okay.

Okay.

Automatically get rid of Goodberg.

Okay.

Nobody else seems to be confused.

Okay.

So we’re good to go.

Next question.

Let’s go to it.

All right.

Hashtag Q.

Let’s get back to where we were.

Dark mode.

The first time I visit your pulldown selector in contact reason, the options text is black on black.

So you cannot see it.

Okay.

So let’s go.

Are you going to the page first?

Let’s get rid of this.

And you’re saying contact reason right here.

Okay.

So let’s switch to dark mode.

Yes.

Okay.

It’s actually not the value.

Okay.

I probably know why.

I probably know why.

Okay.

So in WS form, this probably, is it blank?

No, that default value, that like little first value probably is set to a static color rather than the text dark variable.

Let’s go into automatic CSS and go to forms, form, light styles.

Here’s where you style your forms, right?

So we’ll go to option input.

Okay.

I don’t know if we have a control for that part of the text.

Only the actual options.

I bet WS forms controlling that statically.

Actually, these are, these are defaults from when I upgraded.

This was an upgraded install.

This needs to be a text color.

It can actually just be text dark, text dark there and active text color.

We’ll just keep that text dark there.

And then this can be neutral.

Dark trans 80 is fine.

And this can be, we don’t want any shade values because we’re not, we’re not using shade anymore.

Neutral ultra light.

I’m wondering if maybe that’s caused by, maybe there’s some lingering shade values in here.

Primary.

This is all neutrals.

That’s all good.

Oh, look at these.

Primary.

See, we were using action on the old version and I disabled it just to make my life even harder than it needed to be.

Progress.

Base ultra light.

But this is how easy it is to come in and just look and just see what are my values.

See these shade light.

I can actually just reset these two because they’ll go to the neutral version of shade and we should be good to go.

We’ll just reset those.

Reset.

Yeah.

All these shade references.

Now to be clear, I could have, these would work out of the box on upgrade, but I opted into getting rid of the shade color because I didn’t want it.

I didn’t want anything that was deprecated.

So I removed it.

So I have to go reset these values so that they’re not referencing a color that no longer exists.

Okay.

Let’s go in and go to submit button.

White, white.

We want that.

That is good.

We want that.

We want that.

We want that.

That’s all good.

Help.

We want that.

That’s all good.

Text dark muted.

All good.

Text dark muted.

All good.

Save.

Okay.

Let’s just see if that fixed it.

If that did not fix it, that means there’s probably something static going on with WS form.

And okay.

So Andrea is on the live stream.

So Andrea, just make a ticket for that for us on the, it’s the dropdown default selection.

Cause if you notice that normal selections are fine, it’s just the default selection.

There’s some probably static color reference there that we have to get rid of.

Okay.

So D123, shout out to you for seeing that and catching that.

We will get it fixed.

Will there be recipes for ribbons?

Will there be recipes for ribbons?

See now in my mind, I’m like, is there already?

Let’s see.

It’s so hard to keep track of everything that we’ve, that we’ve built.

Now one, well, one way you could check, you could go to, um, let’s talk automatically.

It says, okay, let’s go to cheat sheet and let’s go to recipes and can we type in ribbon?

No, not going to be in there.

Okay.

Maybe there’s not, uh, we could.

Yeah.

I think I should write that down.

Andrea, make a note.

Let’s look into recipes for ribbons.

Um, probably a good, probably a good thing to have.

Cause I can think of, I can, I can think of some custom classes, like some BIM situations where you don’t want to use a utility class to create the ribbon.

You would rather use a custom class.

And at that point, if you don’t know how to make the ribbon, you’re a little stuck.

So a recipe would come in very handy at that point.

So Andrea, make a note about that.

Let’s look into a ribbon recipe.

All right.

The Hunzi, the Hunzi, we will ship that out, uh, to you very soon.

Can you give an example of a card using the clickable parent recipe?

I think the CSS of the recipe is different than the class.

I think the CSS of the recipe is different from the class.

Uh, let’s take a look.

I actually don’t like dark mode all that much.

Uh, so I’m just going to switch back to light.

Uh, let’s go to edit with bricks.

Uh, we should probably change to like the homepage.

Okay.

So if I was going to do clickable parent without the class.

So one other approach you could do is you could go to the heading wrapper, which is the link, right?

Go to CSS and type at clickable parent and voila, you have a recipe for clickable parent.

Okay.

Um, let’s take a look at what’s going on here.

So configure your selector.

If you have more than one link.

All right.

Route a after content position, absolute inset zero Z index 10 position relative on your.

Okay.

So, Oh.

Okay.

Yeah, yeah, yeah, yeah.

This.

Okay.

So the difference is this recipe is not designed to be used on the actual link.

Okay.

Uh, so if you go to the actual card, um, cause you can do clickable parent and focus parent in the same place.

So if we remove, let’s just check our recipe real quick.

Cause a lot of things have changed.

Let’s just scroll down here and we’ll go at clickable parent.

And then it does help to read the little comments.

Okay.

Ensure this is placed on the clickable parent element, right?

Um, so root has a, so it’s saying if this feature card has a link, we’re going to position it relative.

So that’s doing the position relative thing for you.

Configure your selector.

If you have more than one link, we actually do.

So we have a heading wrapper that is our link.

So we want to actually do root underscore heading wrapper.

And that is the link.

So I don’t think we even have to target the a there.

Maybe we do.

We’ll see in a minute.

And then remove effect and builder set target bricks equals bricks area.

So this removes clickable parent from affecting the actual builder interface.

And let’s see what is going on here.

Automatic CSS.

Uh, no.

Okay.

Let’s see.

Root has a, let’s try putting it on.

If it’s meant to go on the, hold on.

Heading wrapper.

A.

Okay.

You do have to, you do have to target the a.

You do have to target the a.

Okay.

I believe that my hover style is still working.

Okay.

So content position.

Absolutely.

It’s dependent on your structure of your card.

So you have to know your structure.

Then you have to map the structure over to the recipe.

It’s by the class, by the way, is a lot easier.

The class does it all for you.

The recipe you have to interpret.

And then based on how you built the card, you have to make sure it matches the way you built the card.

All right.

Uh, this you don’t need.

It’s not, unless you, you know, want to protect the builder, which I think is a good idea, but it should be fine.

Uh, but it says remove effect and builder set target bricks equals bricks area.

So you would change target to bricks area.

And now this effect is not going to show up in the builder.

Then you can come down here and you can write, uh, should be focus parent.

And you get the whole recipe for making the focus parent thing happen.

Now, here’s the thing.

Let’s go over all of this.

Do you want to do this level of work?

Okay.

What I would say is for my use case, no one.

I’m looping, which means there’s only one instance of the card.

Right.

Okay.

So I would come up here and for me much better, and this is why I did it this way to do focus parent, come down here to the wrapper and do clickable parent.

My problems are solved.

And now you’re asking, is it maintainable?

Yeah, because this is a loop.

And what I would actually do with my products is I would take this feature grid right here and I would call it product grid, but I would right click it and I would save it as a global element.

And because I want this, if I, if I’m going to have this thing show up anywhere else on the website, I just want it to always be the same.

Right.

And so I’m going to save it as a global element.

And whenever I deploy it again and again and again and again, maybe on other pages, I deploy the global element.

I still have one single source of truth, even though I’m using utility classes, one single source of truth for where this grid is managed and all instances of it.

So for speed reasons and efficiency, I do the utility class of focus parent, clickable parent, save as global element, deploy the global elements, and I’m good to go.

And I don’t have to mess with the recipes.

The recipe is if you’re in a situation where maybe you’re not looping, you’re not able to loop the thing for some reason or another, right?

Or you’re not going to be using global elements for one reason or another.

Then you’ve got to attach these instructions to the BIM classes.

That’s when the recipes come in.

I wouldn’t go to the recipe because the recipe is a little bit more involved.

It takes a little bit more reading, seeing how it’s built, mapping that to the structure of your thing.

Does it do a lot of the work for you?

Yes.

But it’s not a slap it on, move on with your life kind of thing like the utility classes.

So it’s not my go-to.

It’s there if I need it.

It’s not my go-to, okay?

My go-to would be this and then looping and then global elements.

And when components come out in 2.0, two years from now, probably, based on progress for Bricks, we will have the whole component thing, which is going to change the situation again.

So we’ll have that conversation when we get there.

Why did you go with taxonomies instead of, say, a toggle?

The taxonomies are more performant.

We went over this after a video I did on doing dropdowns for the logic and meta queries versus taxonomies.

Taxonomies are more scalable and more performant.

And they actually tend to be easier to configure the loops.

Taxonomies are better, okay?

Taxonomies are better.

Let’s see.

I just want to see if Kevin notices this comment later, hence the question.

Looking forward to re-watching.

Yes.

I see the question.

How much input did Bev have in the new site?

Nobody had any input.

I just did it in the dark of night and I released it and I did it very quickly.

Can we in action the latest recipe you posted in the inner circle about parent and children if it could be tied to the current topic?

I’m not sure which one you’re talking about.

Tell me the name of it specifically and we can look at it.

More of a newbie question, but can you give a quick overview of why you avoid using pages as much as possible?

Your approach of even having your legal pages as CPT is very interesting.

It’s a very easy question to answer.

Let’s get out of here.

Don’t save anything.

We’ve been dibble-dabbling.

All right.

Let’s go back here.

Okay.

So pages have inherent flaws in them.

Number one, you can’t taxonomize them.

So I can’t remember that visibility thing I did where it’s like, is it hidden?

Is it, you know, coming soon?

Is it this or that?

You’re up a creek without a paddle.

Okay.

There’s no taxonomy stuff going on here.

You’re also limited in other different ways.

Not to mention, topically, this is essentially a junk drawer.

It’s not, it’s just called pages.

And so the idea that you would have services in here and also have products in here and also have team members in here and also, and also, and also, and also.

After a while, and anybody who’s opened up a website that’s been built this way, where the person’s like, can you take over managing my website?

And I open it and I go, oh my God, no.

Unsubscribe.

It’s insane.

It’s, it’s, it’s like going into a hoarder’s house.

It’s like if a hoarder was like, can you be my house cleaner?

You walk in and you’re like, fuck no.

It’s like that meme, that kid that comes around the corner.

He’s like, oh, and he, and he turns, goes the other way.

That’s the situation we’re talking about.

Right?

Unmanageable.

It’s unmanageable.

The things are unloopable.

It’s, there’s no, it’s just terrible.

It’s absolutely terrible.

So that’s the answer.

You want to avoid this.

And let’s talk about CMS.

If WordPress actually had thought leaders handling the CMS side of things, this would have come up a long time ago.

What do we have on a website?

Let’s take a trip to the front end.

Okay.

Take a trip to the front end.

And this is actually where a, a Bev, you know, a total newbie actually would, you would want to talk to them about this.

Okay.

Um, websites have URLs and let’s look on Google too, because people ask this question all the time.

If I use a custom post type, will it still rank on Google?

Yes.

Because this, this, this, this like concept of a custom post type or a page or a post or a whatever Google doesn’t, that’s WordPress terminology.

Google doesn’t care about any of that shit.

Google cares about URLs.

And at the end of the day, all these things do custom post type, post page, whatever it outputs a URL.

That’s all it does.

Okay.

And a URL is a URL is a URL.

But what WordPress does is WordPress says, well, we have these things called pages.

That’s a URL with limitations.

That’s a URL that you can’t categorize.

Okay.

And you say, why does it have that limitation?

And it turns out there’s no fucking good answer.

I don’t, I don’t know.

Cause, cause, cause, cause this, cause the CMS was built in 2005 and nobody has come along to have any thought leadership going, you know, I don’t think we have to do things in 2024 the way we did them in 2025.

This area of WordPress hasn’t fucking changed a lick since 2005.

In 2005, we were all blogging.

We weren’t doing intricate websites.

We weren’t using conditional logic and advanced CSS and loops and interactions and all this other stuff.

We weren’t doing, we weren’t doing tokens.

We weren’t doing recipes and man, we weren’t doing any of this stuff.

Right?

So we did things very simply.

Well, there’s these things called pages.

If you need pages on your website, and then there’s these things called posts.

If you need posts on your website and since posts are for blog posts, you know, you might want to categorize those.

We don’t think you need to categorize pages at all.

Sites aren’t that intricate.

It’s just a personal blog.

This is the situation we’re dealing with.

That was the thinking at the time.

Well, now we’re in a completely different era where we actually have things like WS form, which can query, query objects from a database into a select field in a form.

My God, and do it in a split second.

That would have taken you hours and thousands of dollars in the old days.

Right?

With a PHP expert and all this other stuff you would have needed.

Now we don’t need all that stuff.

We can do it in seconds, but not from the pages area.

You can’t.

Right?

So we have this archaic CMS, which is like pages, posts, custom post types, custom.

Oh my God.

It just keeps going.

It keeps going.

And it’s like, what are all those things at the end of the day?

All of those things at the end of the day are URLs.

That’s all they are.

And then WordPress has decided that one of them has to be created manually.

Custom post types.

You have to, you have to have an add-on for that, or you have to go into the code to add those things.

They’re not even natively part of the UI.

Like the most helpful, try to wrap your brain around this.

Okay?

Does it help if I shake y’all?

Try to wrap your brain around this.

The most helpful part of the content management system in WordPress, custom post types, is not native.

Is not, you can’t natively make it with the UI.

That’s fucking insane.

It’s insane that in 2024, you have to have a plugin to easily make custom post types, unless you know PHP.

That’s insane.

That is the most valuable part of the CMS.

And they’re like, no, we’ll just hide it.

We’ll just hide that from everybody.

And you have to know what you’re doing if you want to show it.

Right?

Fucking insane.

Okay?

And the fact that pages are still there.

And it shouldn’t even be called custom post types.

That name doesn’t even make sense.

Okay?

It’s URLs.

And then we need a way to organize our URLs.

I need a bucket for URLs called team.

I need a bucket for URLs called products.

I need a bucket of URLs called posts.

That’s fine.

I need a UI to make new buckets and manage my buckets.

I need to taxonomize my buckets.

Maybe I share taxonomies between buckets.

Okay?

None of that is native.

You can’t natively make new taxonomies in WordPress.

You can’t natively share taxonomies in WordPress.

Nobody, there’s been no thought leadership on the CMS side of WordPress in decades.

Okay?

Yeah, little, little things here and there.

You can’t natively create columns of data.

What are we doing?

Hello?

What are we doing?

Okay?

I don’t know how else to act because it doesn’t make any sense to my brain.

If this was a corporation, if this was a company, if this was Google or Apple or anything, else that actually does things logically and consistently, everybody would have been fired.

Everyone would be fired.

Who is managing the CMS?

You all have to go.

I’m sure you’re very talented and you have a great future ahead of you, just not with us.

Okay?

This is a fireable offense.

It’s a fireable offense that this hasn’t been touched.

And the things that are the most important, we can’t easily get to.

And we need add-on after add-on after add-on.

And then they go, well, we want to appeal to beginners.

How?

How are you going to appeal to beginners?

When my mom installs WordPress and I go, mom, you’re going to need 17 plugins to do whatever you want to do.

And she’s like, what’s a plugin?

And now we have a whole conversation about plugins.

Then I have to inform my mom.

Mom, you’re going to need a forms plugin for that.

And once she knows what a form is and a forms plugin, we’re going to go, mom, she’ll go, which one?

And I go, I know.

I know, mom.

There’s 7,000 of them.

Okay?

So let’s spend a day.

I’ll come down for a day.

We’ll have some coffee, some tea, whatever.

Probably a lot of alcohol.

And we’ll have a deep conversation about pros and cons of forms plugins.

You think my mom wants it?

You think any beginner wants to do that?

Now, by the way, you have to do that at every step of the way.

Mom, you need a theme.

What’s a theme?

Oh, well, maybe she’ll guess.

Is that like the look and feel of the website?

Well, kind of.

It’s kind of that.

But it’s actually tied very heavily to whatever that theme developer decided should be the architecture of your entire website.

And so it’s not an inconsequential decision, mom.

We’re going to have to talk about pros and cons of which theme you choose.

And maybe you should do the builder route.

And then she’s like, well, what builder?

And I’m like, you’re right, mom.

There’s a lot of different builders.

And they’re all very different.

And so now we have to talk about different workflows, a building of what?

Every fucking step of the process is 8,000 decisions and 8,000 pros and cons lists.

Never in a million years.

I just did a podcast interview on the WP Minute.

I’m a little bit more animated here than I was there, but I kind of outlined the exact same thing.

The idea that any beginner is going to come into the WordPress.org ecosystem and have a fucking clue of where to start is an insane premise.

It is just on its face.

It’s an insane premise.

Okay.

WordPress.com needs to be for beginners.

Make it like Wix.

Make it super easy.

No decisions.

It’s all native tools.

WordPress.org can be the wild, wild west.

Okay.

Because there are advantages to the wild, wild west.

But the idea that we’re going to take the wild, wild west and make it palatable to a random beginner is, that’s lunacy.

It’s absolute lunacy.

Okay.

The technical nature of all these tools and what we do and how they all tie together, the learning curve is fucking Mount Everest.

Okay.

Like, and they’re like, well, no, we’re going to appeal to everybody.

We’re going to appeal to, this is, it’s nonsensical.

It’s a failed mission.

Erase it.

Start over.

Okay.

There’s my Gutenberg rant for the day and my WordPress rant.

Let’s go back to the chat.

Let’s go back to the chat.

Oh my God.

The internet going out had an effect on me.

Okay.

So true.

It is offensive to have to work in this ecosystem, but I’m not keen on web flow right now.

But WP is laying out red carpets to move away.

I would, I said, you can listen to my podcast.

It comes out tomorrow.

Okay.

I was, I was trying to, I was keeping my cool.

I was taking deep breaths.

Okay.

But I, I said, if WordPress was not open source, which means, okay.

You own your data on WordPress.

That is the number one important factor in how, where you build on the internet.

Do you own your data or do you not own your data?

Webflow?

You don’t own your data.

Shopify?

You don’t own your data.

Wix?

You don’t own your data.

Squarespace?

You don’t.

The, the only major place where you own your data is WordPress.

Okay.

Now there’s some other places, but the major one, the elephant, the big one, right.

Is WordPress.

You own your data.

That that’s actually so important that I put up with this bullshit.

Okay.

But what I said, very, I think this is objectively true.

If WordPress was not open source, if there wasn’t data ownership, it would have died years ago.

Years ago, it would be done and gone and forgotten because technically it’s not keeping up from a UI.

It’s not keeping up from a workflow.

It’s not keeping up from a CMS standpoint.

It’s not keeping up.

It’s not, it’s not, it’s, it’s, it’s, it’s very weak in all of those areas.

Literally the one thing clinging it to life, right?

It’s on life support right now.

And the one thing pumping air into its lungs is the fact that you own your data and that it’s open source.

Okay.

And that it, and that it’s, the ecosystem is so big.

And if you know how to navigate the wild, wild west, it’s actually not that, it’s not that bad.

Right.

Cause I have plugins.

I can put it.

I know, I know my stack.

I know how to do the things I want to do, but getting to this point is not, this is not, this is why there’s a decline in new sites being built with WordPress.

That’s the problem, right?

They, they like to say 43% of the internet’s on WordPress.

Not, not 10 years from now, my, my friend, because the percent of new sites being built with WordPress is insanely low relative to where it used to be.

That used to be dominating too, but now it’s not dominating anymore.

Why?

Because they’ve, they, they’ve, they should be fired.

They’ve not done their job for the last decade.

They, they, they let the CMS completely go.

And then they’ve dicked around with this block editor thing that eight years is not anywhere where it needs to be.

And it’s complete, it’s a complete experiment.

It’s a total experiment and workflow in, in everything.

It’s just, it’s one big experiment and the experiment is failing.

Okay.

And that’s why the number of new sites created with WordPress is dramatically declining.

And that’s a damn shame.

It’s a damn shame.

Uh, and it’s why I point these things out.

Go, and you could solve it in one day.

Take that Gutenberg project and put it in wordpress.com.

If you believe in it so much, put it in wordpress.com, delete it from .org and start working on the CMS.

Let us, if I get bricks or whatever page builder I love to use tied into a phenomenal CMS, I don’t need anything else, Jack.

I don’t need, and I didn’t ask for Gutenberg.

I didn’t ask for an experiment.

I didn’t ask for the block editor.

I didn’t ask for our world to be turned upside down with FSC.

Nobody asked for any of that.

That was put on us.

Okay.

We were all fine and dandy with our page builder hooked into the CMS.

That’s it.

It’s all we need to live life.

Now, the big core mistake was give them something they’re not asking for.

And while we’re giving them something they didn’t ask for, neglect the core product for 10 straight years.

That was a horrible mistake.

A horrific, maybe unrecoverable mistake if it doesn’t change soon.

Okay.

You cannot abandon the core product, which is the CMS.

And you certainly can’t abandon the core product to build something nobody asked for that is dramatically different and amounts to a failed experiment at this point.

We need a powerful CMS.

We already have the tools for visually building a website.

Okay.

That’s it.

Give us the CMS we deserve.

Give us the CMS that we need in 2024.

Don’t force us to work with this 2005 CMS.

Okay.

Yes.

Gutenberg has been under development for eight solid straight years.

And it still does less than Microsoft fucking word.

Okay.

Jail time.

Jail time.

Okay.

I’m just saying, look, I’m just saying, I don’t want to call anybody out personally, but you best believe if this was Apple, if this was Microsoft, if this was any legitimate company, heads would have rolled long ago.

Long ago, heads would have rolled.

Looking at the direction of, of this, of this project and what’s been done and what, and they’ll always fall back.

I know the, it’s open source, it’s volunteers, it’s this and that.

I’m sorry.

I’m sorry.

Uh, we all bought into an ecosystem and a tool that powers 43% of the internet or did at one time.

Our families and our businesses and our clients rely on this.

So you can take your, it’s all volunteers.

It’s all, we’re doing the best we can.

I’m sorry.

This project is too big and too important now to fall back, fall back on bullshit excuses.

Uh, because there’s also volunteer projects that are run extremely well and actually have vision and leadership and meet deadlines and meet goals and do very, very important and awesome things.

Okay.

So it’s just excuses and I’m tired of the excuses because I’ve never been able to pay a single bill with an excuse.

You know, I’ve walked into the bank multiple times.

Not a single fucking teller will accept any of the excuses that I hand them.

They only accept actual money.

They only accept actual results.

I’ve also never had clients that accepted any of the excuses that I’ve given them.

Even when those excuses come from WordPress leadership, uh, they only accept results.

Okay.

And so this is the world that we live in.

So we need to stop making the excuses.

We need to figure out how to get the leadership in order to turn this thing around.

If we want it to survive because it’s not going to survive.

It is, it’s, it’s literally a quarter mile.

It’s a quarter mile from the cliff.

Okay.

And it’s, it’s, it’s, it’s rolling.

It’s rolling.

And if somebody doesn’t stop it, it’s going to go off the cliff.

It is.

It’s, you can’t anybody who knows anything about product development, look at the product.

You, it’s not going anywhere.

Okay.

It’s, it’s going to a bad place.

It’s going to a bad, we should be able to see this.

It doesn’t take a genius.

We can see that there’s too many things that don’t make sense.

It’s too many.

And it’s too hard for new users.

You can’t take a product where so many things don’t make sense.

And it’s really hard for new users and think that it has a bright future.

Okay.

It doesn’t take a, it’s not rocket science.

So we got to fix it.

If we love WordPress, we got to fix it.

It’s got to be fixed and it’s got to be fixed very, very, very soon, which is why I like to shout about it because somebody’s attention has to be gotten right.

We got to get people’s attention.

All right.

I’m going to do two more questions.

Then we got to get out of here.

I stayed a little longer because of the internet issue.

You’re explaining of why owning your data is important.

Yeah.

It’s the most important thing.

It’s the most, because we live in a world of lunatics, um, lunatics that like you wake up and you know, they’ve decided now, granted, some people say very horrible things and some people do very horrible things, but some people’s measuring sticks are broken.

And so there are some people that get offended by anything and everything.

And some of those people happen to be in leadership positions at companies and you wake up one morning and you have, or you’re just in an industry.

For example, for example, uh, finance, health and fitness.

Okay.

These are Google knows these industries as a, what is their stupid acronym for them?

Uh, Y M Y L your money, your life.

Okay.

This is a, uh, description of a, of a group of industries that affect people personally.

They affect your health.

They affect your finances, whatever.

Okay.

And so Google, the sensitive people that they are, uh, decided that, uh, and we’ll, we’ll see this on YouTube and we can get into all this shit because it, it, it, one, I hate it.

I absolutely hate it.

Okay.

Um, it, it’s antithetical to free human behavior.

Um, and two, it doesn’t make any fucking sense.

So it’s, it’s, it’s an actual, it’s a, it’s a, it’s a mental condition.

Okay.

It’s a diagnosable mental illness.

Um, which is bad.

You never want to entertain, entertain like a diagnosable mental illness.

You want to, you want to treat it and you want to be empathetic to it, but you don’t want it managing your life.

Right.

Which consequently, Y M Y L Google your Y M Y Y M Y L L.

And me, that’s hard for dyslexic to say.

Um, okay.

So they’ve decided, let’s say, um, let’s say you are, you have a new system of budgeting.

Let’s say like maybe you develop a system called profit first, where you like to do accounting differently than other people do accounting.

And so you build your website and you, your website is dedicated to videos and blog articles about your method of accounting, which is, you know, that’s free.

Like we talk about democratizing publishing.

Anybody should be able to publish their ideas.

Right.

Just like I should be able to go outside and speak my opinions and I’m not going to get thrown in prison or nothing else bad is going to happen to me.

If I just speak my opinions and I’m not hurting anybody, if I’m not harming anybody.

Right.

Okay.

Well, there’s people who don’t understand words and what actual harm is versus not actual harm.

So you might have an opinion about accounting and Google comes along and they’re like, Hmm, what are your, uh, what are your credentials again?

Um, are you an, are you a professional accountant?

And it’s like, no, uh, I just have an opinion about how I manage business finances a little bit differently from how others have done it.

And it’s worked really good.

And they’re like, shh, shh, stop talking.

You’re not allowed to talk.

You’re not allowed to be here.

We’re not, you’re not allowed to be published.

Okay.

And what they, they, what they literally did in health and finance, anybody who doesn’t now, and now you best believe anybody with actual fucking money.

Okay.

Uh, any, any big global accounting type people start writing checks.

Yeah.

Get these fucking people out of here.

They don’t say what we’re saying.

And in health, health line, all the web MD, all the corporations that have websites and they all tow whatever the government says, right.

They all get to rank number one.

Now all the corporations win and all the government agencies win, but the little guy, anybody who has an opinion, fuck you.

You’re written out now.

You don’t rank anymore.

Right.

That’s so we have data ownership, but we don’t have ranking ownership because there’s a corporation called Google that said, we, we determine which opinions are valid and invalid.

We determine who gets to see your content and who doesn’t get to see your content.

We don’t care if you own your data or not.

You do get to own your data.

We just won’t show your data to anybody else.

That’s, that’s the decision that Google made in 2018.

You can look it up.

Y-M-Y-L read about the algorithm update that absolutely crushed alternative voices.

Now, mind you, mind you, this is a government.

Let’s just talk about the U S government that gave us a food pyramid.

Okay.

The government gave us a food pyramid and they said, you should eat fucking all grains and all sugar.

You should avoid healthy fats and proteins.

Okay.

That’s literally what they told us for decades.

Now you come along and you’re like, Hmm, I don’t think that’s right.

Okay.

And you start writing about things like maybe, um, the primal diet or the keto diet or just natural foods or veganism or whatever.

Doesn’t really matter what you believe in.

You just want to publish your ideas and you want to say, Hey, I’ve been trying this by the way, and it’s been working for me.

Well, guess what?

That used to rank in Google back in the day.

There was a day where those blogs ranked really, really, really well.

And people could actually come and hear alternative voices and opinions and see results from lots of different people.

Oh, you’re doing this.

That’s very interesting.

Oh, look what’s happened to you.

Maybe I decide I want to try that.

Oh, you’re doing something different over here.

Look at this.

And now, and now you look it up.

No, it’s all corporations.

And they’re all saying the exact same fucking thing.

And if you don’t say what they’re saying, you don’t get published.

You don’t get ranked.

You can’t play on that field.

Google decided you don’t get to be at the show.

Okay.

And, and again, who gets to be there?

People who are, who are, who are parroting government approved advice.

The same government that has essentially murdered every American’s health for the last 40 years.

So it’s backwards.

It doesn’t make any sense and it’s not fair and it’s not democracy.

It’s not freedom.

It’s not anything else that humans actually care about.

Okay.

Now take that to a platform specific level.

There are people at Shopify best believe there’s probably a guy at web flow, right?

Um, same people that tried to get Joe Rogan taken off the air.

Oh my God.

Joe Rogan saying something that I don’t agree with about COVID.

Oh, we should shut down his entire podcast.

We should kill his whole ecosystem.

We should cancel him.

These people exist at companies.

Okay.

In leadership positions.

And what will often happen is they’ll decide.

Yeah.

I think we should do that.

I think we should just delete all that data.

We should just get rid of it.

You know, you know what?

Well, I mean, we liked him.

We liked him three years ago, but we don’t like him now.

And so they wake up and they just decide, they just decide that your data, your business, your website is gone today.

Right.

That can’t happen on WordPress.

Okay.

And people will be like, well, I mean, my legitimate e-commerce website is not going to get, it’s not, it’s not.

I mean, let’s say at the early days of vaping, I know vaping is not healthy for you and that’s not great.

Okay.

But what I do believe is that if human beings make a choice for themselves to vape, who the fuck am I to try to stop them?

Okay.

I’m not about imposing my opinions on everybody else in society.

So let’s say you built a vape store in the very early days.

And oh my gosh, you’ve got employees.

These employees have families.

You’re doing so great.

This is fantastic.

And then Shopify goes, you know, three years down the line, Shopify is like, we don’t allow that.

Delete.

Gone.

Your whole business.

Poof.

Gone.

Overnight.

Well, guess what?

That can’t happen on WordPress.

Can it?

Okay.

That is why data ownership is so, because there are lunatics.

There are lunatics in charge of these platforms who do not believe fundamentally that people should be able to have their own opinions.

That people should be able to sell the products that they want to sell.

Okay.

Are there limits on those things?

For sure.

For sure.

Right.

But I don’t want arbitrary limits.

I don’t want nonsensical limits.

I don’t want lunatic level limits.

Right.

So data ownership is key.

Data ownership is number one.

I’m terrified of building legitimate businesses on Webflow.

Terrified of building legitimate businesses on Shopify.

Because I don’t, you never know.

You never know.

It’s a closed system.

They’re in control of the data.

You’re electing for them to have control of the data.

Right.

And so you could.

We don’t know the reason yet.

Right.

And you might think ahead.

What could be the reason?

Doesn’t matter.

You’re trying to predict the behavior of lunatics.

Okay.

This is not possible.

You don’t know what the reason is going to be.

Every day there’s a new reason.

There’s something new to be offended about, to be outraged about, and to want to cancel.

And the lunatics in charge, we don’t know what’s going to set them off.

Okay.

So tomorrow we could wake up to an email.

Sorry, Mr.

Geary.

We don’t agree with what you’re saying or doing online.

Therefore, we’ve removed your website and your whole business is poof.

Okay.

I don’t want to get that email.

So I’m on WordPress.

Data ownership.

Number one important thing.

Did I explain it clearly?

Was that clear enough?

Okay.

Let’s go down.

Hmm.

Okay.

I’m fucking sweating.

First of all, it’s 94 degrees outside my window.

It’s 8,700% humidity.

I forgot to turn my fan on.

These lights are hot.

All right?

I’ve got to go.

We will be back next week.

I hope this was entertaining.

I hope it was valuable to some degree.

If you had questions that were unanswered, ask them again on next week’s stream.

I hope to get to them.

But yeah, we got to get out of here.

It’s been too long.

I love you guys.

I thank you for the support.

And that’s it.

Take care.

Peace. Thank you.