FIRST LOOK: Bricks 1.12 Beta (Components & More)

More about this video

Let’s look through the new Bricks 1.12 beta release together!

Video Transcript

Howdy, howdy, howdy, friends.

What’s up, everybody?

Okay.

Well, I wasn’t planning on going live today or at all this week.

As you saw yesterday, we didn’t have a WDD live.

I’m very close to a decision on those, by the way.

I will give you guys an update probably the first week of January.

And I think it’s going to be okay.

Just maybe a minor adjustment.

Okay.

A minor adjustment.

But what we’re doing on today’s stream is we are looking at the brand new version of Bricks.

That’s the reason why I’m doing an impromptu live stream.

Nobody really knew when the update was going to drop, but the update has dropped.

It is Bricks 1.12 beta.

This brings components and some other goodies that we’re going to take a look at.

I’m going to go ahead and prep my screen.

Again, this is an impromptu live stream.

So bear with me.

We’re going to, oh, good.

The audio works.

Hey, that’s great.

That’s fantastic.

Yeah.

It, it, it, uh, my, my, my, my, I have a dummy battery in the camera.

Um, if you don’t know what that is, it’s like a simulated battery that actually plugs into the wall.

That way I don’t have to worry about batteries.

Uh, it, it like it, something was wrong with it.

The, the, the camera wasn’t detecting it a couple of days ago.

It was a whole situation, but I let it cool down for a little bit and I don’t know.

It just, it spontaneously came back to life.

So that’s, that’s good news.

That’s why we’re there.

We’re here today.

Uh, we got Mark in the house.

We got Andrew Tyree surprises are always the best.

So never plan the motto for 2025.

Yes.

Um, didn’t hear what you said at the beginning.

I don’t know why that would be the case.

Um, but it looks like everything is working for everyone else.

So what we’re going to do, we’re going to go over the change log.

We’re going to install the new version of bricks.

We’re going to go over together.

We’re specifically going to look at components.

Anybody that has followed this channel for a while now knows that I was talking about this kind of components back in the oxygen days, uh, as being necessary and needed.

Uh, I was highlighting builders that were bringing this kind of component functionality to the table, namely web flow.

Web flow was ahead of the game on this kind of component architecture quickly was ahead of the game on this kind of component architecture, rest in peace.

Um, bricks.

It’s, it’s been a while.

It’s taken a while, but I do want to applaud Thomas and team because it’s here.

And, uh, this is a beta version.

It seems like, uh, you know, some testing, some feedback in January, we will probably get some semblance of an official version, January, February, barring any other technical complications, but let’s go ahead and dive in and take a look at this.

So I’m going to go ahead and share my screen.

And this is the change log right here.

I’m going to go ahead and zip WP a site for us real quick.

Uh, let’s go create new blank website from blueprint.

Let’s go with bricks.

Uh, this won’t take long.

Yeah.

Pour one out for quickly.

Exactly.

Um, this won’t take long to spin up.

I also want to see, I’m just curious, you know, we have a new feature in automatic CSS, a quality of life feature using the bricks button UI.

We’ll get to take a peek at that and see if it still works in this new version.

Um, or we, if we have to immediately go address compatibility with, uh, with the next version of brick.

So let’s say bricks 1.12 beta.

Okay.

Let’s go ahead and open this bad boy and get it upgraded.

Uh, let’s go to appearance and themes and let’s add new theme.

Let’s upload theme.

Let’s choose files and bricks 1.12 beta.

Let’s see it.

Let’s see it happen.

Copy samurai.

What’s up.

Quickly died a second time after the founder disappears after saying he will go back to work on it.

Yeah.

I posted about that, uh, the other day.

Brendan says, not going to lie quickly has better components.

I hope bricks improves them as this is just the beta.

Yeah.

I’m interested in looking and seeing what we’ve got now and maybe what’s missing and what’s needed.

Uh, okay.

So, theme updated successfully.

Let’s go see.

I believe we have to turn these things on.

Right.

So, uh, we’re just going to look through here real quick.

I don’t even know where this would be found.

Uh, but hopefully it won’t take long.

Custom authentication page of password protection.

Okay.

Is it something related to the builder?

If anybody knows right off the bat, like where the switch is, um, otherwise, you know, we’ll have to go look in the documentation.

Nobody wants to do that.

Gross.

Um, who needs that?

Who needs documentation for things?

Apparently I do.

Cause I don’t know.

I don’t know where this toggle switch is.

Um, oh, wrap bricks, default styles in at layer.

Oh my Lord.

What?

Guys, I’ve been talking about this for a long time.

I’ve been asking for this for a long time.

Is this, is this brand new in this version right here?

We got to go through the change log.

This will solve so many specificity battles that we get into with bricks and ACSS.

Uh, man.

Okay.

I got it.

Let’s mental note, mental note.

I need to go check that.

Oh, it’s already activated.

There’s no setting for it.

Oh, oh, bold, bold, bold strategy.

Cotton.

Let’s see if that, see if that pays off.

Okay.

Uh, let’s head in to a page home edit with bricks.

All right.

Um, yeah, let’s, let’s get, well, first thing we can check easy stuff, right?

Let’s do, uh, what’s going on here?

What’s going on there?

Uh, let’s see 3.2.8.

You know what we want?

Uh, actually want to go, actually want to go 3.2.9 with this.

Um, okay.

Let’s, let’s go out.

And let’s go plug in.

So there’s one little quick.

Oh, there it is.

It’s an automatic update.

Let’s just do the auto update.

Okay.

Any idea if ZipWP is going to enable their AI builder to use bricks and ACSS to provide license keys by chance?

Could be interesting to get a starter going.

Um, well, oh yeah, we changed URLs here.

So we’re going to have to re-license us.

Okay.

All righty.

Um, I mean, what you do on Zip is you just create a blueprint.

That’s what I’ve done.

And you just spin up from your blueprint file seamlessly.

I don’t think there’s anything they need to do on their end.

Um, okay.

Let’s go back into the builder.

I’m, I’m very curious.

Something is definitely broken in the new version here.

Um, that’s very interesting.

I wonder if, uh, they changed some things related to what we are doing.

Bricks enhancements.

Let’s get rid of all bricks enhancements, except that buttons UI one, just to make sure we’re not interfering or to find out what is interfering.

Okay.

That definitely seems like it.

They’ve changed their CSS for, uh, yeah, probably with the addition of some of this stuff.

Okay.

We’re going to have to look into what’s going on there specifically.

Okay.

But in any case, in any case, let’s go ahead and refresh one more time.

Just make sure we have the latest in the browser.

Okay.

We add a button and it is styled correctly.

And we do have the option to switch styles.

This is the new feature in automatic CSS, a little quality of life action.

All of this is pulled dynamically from your available options in ACSS.

So you don’t have to use utility classes anymore on your buttons and you get primary out of the box.

Uh, really, really, really nice.

Really, really helpful.

That’s it’s good to see that that still works.

Okay.

Let’s go ahead and take a look at components.

I’m wondering if we can, maybe we’ll use a frame, uh, which is going to require a relicensing as well.

Let’s use a frame and try to take an existing frame and make it into a component.

Uh, that’ll be an interesting thing to look at.

Whoa, whoa, whoa, whoa, whoa.

Chill out.

Okay.

Uh, let’s go frames.

Let’s go license and relicense.

Who else we got in the chat?

I’m already skeptical based on where they put components.

Yeah.

Uh, we’re going to, we’re going to, we’re going to look at some of that and give some feedback for sure.

And this, this will be helpful for Thomas and team.

I’m sure maybe they’ll take, and I, I, you know, uh, Charof, uh, had liked the, uh, my post on Twitter.

Maybe he’s going to watch me, you know, this is all helpful, helpful stuff for them.

Okay.

Let’s go frames.

And let’s see if we can bring something in, uh, that we want to componentize.

Hmm, mm, mm, mm, mm, mm, mm.

Okay, that would be one that we could do, but that’s a very simple icon card.

Here’s something with a little bit more going on, you know?

Hmm, let’s go into feature.

It’s definitely gonna be a lot of feature cards that would work well for this.

Here’s one right here.

Let’s do feature section Dallas.

Let’s import images.

Ooh, oh, dear.

What’s, I’ve never seen this screen before.

Let’s review and organize all classes before importing them into your site.

Oh, oh, mm, button prime.

What is, what is, this is all brand new.

What is this?

A class with the same name, but different settings already exist on this site.

You must either over, oh, this is a real, I really hope you can turn this off.

Can we turn that, can you opt out of this?

This is not, this is not what we need.

Override, there’s no local, okay, all right.

Oh, look at this, it’s blocking me.

It’s blocking me from importing it.

All right, what, I mean, what happens if I discard?

What happens?

Skip class import.

Okay.

Oh, wait, did I, I skipped in, hold on.

This has got me all confused.

What, what are they trying to do?

What are they trying to do here?

Insert, dude, is it, it’s, I, that’s why I want to turn it off.

It’s going to alert you every single time.

I don’t want to be alerted every single time.

I don’t want to skip class import.

What do I do here?

Import classes.

Isn’t that what I hit last time?

Okay.

I guess not.

I guess I hit the wrong button last time.

All right.

Let’s get these to be, well, man, bricks, we’re not off to a good start.

We’re not off to a good start.

Let’s turn as much off as possible.

That might be impacting some of this and just see.

Okay.

All right.

We’re going to take this card right here.

Feature one, feature two, feature three.

The idea here is that you can globally control the HTML, but on independent instances, you can have unique content.

Okay.

And we’ll take a look at how this actually helps with maintainability, scalability, yada, yada, yada.

All right.

Where was that components tab?

I saw it earlier, but now I’m struggling to find it.

Where do we go?

All right.

What’s the first step?

Ah, well, save as component might be a good one.

All right.

We got to allow it to copy things.

Okay.

I’m going to allow right click.

Okay.

Save as component, save as template, save as global element.

I’m going to go save as component.

And we’re just going to say feature cart.

Let’s just keep the name the same.

How about we’ll just do cards.

So we’ll just do a category called cards and we’ll create.

Okay.

I’ve created a feature card Dallas.

Now, the one thing I said has to happen in order to really make this great.

It has to happen in line.

You cannot introduce a magic area.

And so I’m very happy to see that this is all you’re able to do this in line.

We don’t have to go to some special components area.

And that’s where the magic happens.

And then we got to bounce back and forth and all.

Nope.

We can do this in line, which is nice.

What’s going on?

There’s a little bit of a, okay.

All right.

That’s fine.

All right.

So we’ve created the component.

What do we want to do?

We want to, well, let’s test the component.

I got to get used to this.

Okay.

So we can go, this goes back to the instance.

You have a description, you have category, you have the component.

Okay.

That’s nice.

Now we’re on the component instance and feature card Dallas, which means, ah, okay.

We need to deploy the component two more times.

I’m guessing.

There we go.

Okay.

Good.

And now if I edit the component, let’s go ahead and edit.

And I change something like title.

Does it update everywhere?

Oh, okay.

All right.

Something.

Oh, hold on.

Edit component.

I know I haven’t assigned.

I’m not doing properties yet.

I don’t want to worry about properties right now.

What I want to do is just see how do you edit one instance of a component.

So, ah, there we go.

That’s what would be expected.

Okay.

That is what we expect.

So they can all globally update.

That is one option of components is that they, you have global control over everything, content, style, everything, right?

What about the actual styling of this?

So feature card, I want to edit the component.

I want to edit this class.

I mean, the class, the class would impact them.

I, if I style it the ID level, that should be the real test maybe.

So we just try to change the background color and you get it to change in all of them.

Okay.

So that’s all good.

That’s all working as you would expect it to work.

Now what we need to do is we need to figure out how to assign properties.

Let’s see.

Content wrappers.

Okay.

Hold on.

Feature card Dallas.

Oh, no, we don’t, we don’t edit.

Sorry.

I’m thinking you got to go into edit.

That’s where you don’t want to go.

You do it right here.

Even though I’m editing it, there’s a little bit, little bit tricky.

Even though I am editing it by doing properties and such, I don’t go into the edit screen.

So let’s just do a create right here.

And I’m guessing this is just where you organize your properties and then we have to link them somehow.

So let’s go text.

This is going to be the, we’ll just say this is the description.

Okay.

This is, this is one of your, yeah, okay.

Let’s just, let’s just steal this.

How easy is it to bounce back and forth?

But not so easy.

You lose a little, you lose a little bit of your work there.

Okay.

There’s my default.

This is going to be the, this was it.

We’ll say card description.

Okay.

How about that?

We’ll just add a little bit of extra there.

Let’s create another property.

This is going to be for sure an image property.

We’ll say card image and default, default, default.

What do we want to use as our default?

This one right here, I guess.

Okay.

That’s nice.

And we’ll just go ahead and create that.

So we’ve got a card image.

We’ve got a card description.

Let’s create another one.

This would be the card heading, card heading.

And we’ll say card heading.

Go ahead and create that.

Okay.

It’s pretty much all I need.

Is there anything else I need to do here?

Do I need to save my work?

Do I need to do, it doesn’t look like it.

Looks, looks good.

Okay.

What I don’t like is, okay.

Yeah.

Now I’m going to have to go into edit.

All right.

It’s just a lot of, this is a common, common UI thing.

It’s like you get lost in accordions and panels and trying to go back and forth between things.

Okay.

I’m going to click on card heading.

All right.

This is where we link things.

I can link that.

That looks, looks fairly easy.

Let’s go card heading.

Let’s go card description.

Let’s go card image.

Okay.

Safe.

Fantastic.

All right.

Now what I need to do, I need to, well, here we are.

Okay.

We’re already here.

So this is where your properties show up once you’ve selected your card.

And this is where I can make instance level changes to the component.

Okay.

So can I move these?

How do I edit?

Edit.

Ah, can I drag?

Oh, okay.

Card heading, description, image.

That’s a good order, right?

I’m stumped by like the, I feel like I need to save that or something, but it doesn’t, I guess it doesn’t need me to save it.

I guess it’s just good.

It just remembers.

Okay.

So card number one, and this is the description of card number one.

What else is there to say?

And then we will select an image and we’ll say, this is going to be an Apple watch.

Oh, well, that’s dark on dark.

Not so great.

All right.

Let’s do this one.

All right.

Good.

And card heading, this is going to be card number two.

We will check loops in a minute.

We will see if we can then loop, which I see the dynamic data tag.

It seems like it shouldn’t, shouldn’t be an issue.

This is the unique description for card number two.

Okay.

It’s two lines also.

Great.

If you watched my thing on content sculpting, sculpting, sculpting, sculpting, sculpting.

We did a, we’re doing a little bit of that.

I’m not sure I like how it refreshes all of them every single time, even though they’re not in a loop, but that’s okay.

Card number three.

Okay.

The unique description for the third card is right here.

All right.

And we will, there’s a lot of blinking going on.

Let’s put this in.

Okay.

There’s like a rendering, kind of a little bit of a rendering glitchiness going on maybe.

Let’s go ahead and save that.

Let’s check this on the front end.

Overall though, very simple, very easy.

I’m not seeing, not seeing any major limitations as of yet.

This is what we got.

Now, what, what, what power does this give us?

What power does this give us?

Let’s say we wanted, and, and this is really going to be the test.

This is really going to be the test.

Theoretically, we should be able to add something to this card and HTML element, like an icon and get it to appear everywhere.

Now we’re still going to have to make the instance level changes for that icon if they need to be unique, but what if they don’t need to be unique?

What if they, what if we’re just adding something that’s, that’s global?

Let’s just try.

Let’s just try that.

Uh, so we want to edit our component and we want to open it.

We want to go into the content wrapper and let’s just add an icon in here.

Okay.

Let’s put that in and see, we instantly get it added to every instance of the card.

That’s very, very powerful.

You can’t do that without this component functionality, right?

Um, let’s just make it a, I don’t have many icon options in here.

Let’s just make it a little Instagram icon.

Uh, and then let’s fill it or stroke it.

We don’t know which one we need.

Let’s go, uh, white.

Oh, it’s definitely not stroke unless it’s just not.

No, it is.

It is.

It’s just a little delay and rendering, but we get, um, yeah, we get, we get, look at that.

It’s just, it’s just there in all of our instances.

That’s fantastic.

Can’t do that with CSS.

My friends, that is an HTML change.

That’s nice.

Very nice to have.

Uh, question is, can we map it?

So if we create, uh, you can, there’s your icon.

Okay.

Um, default SVG.

Okay.

Let’s put a default in of X and fill and white.

No, it was stroke.

Wasn’t it?

It was stroke and white.

Okay.

Uh, let’s go ahead and try to loop these in just a second.

Let’s create.

Now, the only problem with this is, well, you are going to get your default in there.

And actually that’s interesting.

Okay.

Yeah.

Now we need to, now we need to connect.

These should turn into X’s, right?

Shouldn’t they turn into X logos?

Like technically speaking, because I, I said the default was X and I, I haven’t chosen.

I haven’t, that seems like that should be the case.

What is it on the front end?

Oh, it’s not even there on the front end.

Is it there and we just can’t see it or is it not there?

It’s not there.

It’s not there on the front end.

Okay.

Um, did we do something wrong?

Oh, maybe it’s because I haven’t chosen one.

So I’m seeing one in the builder.

Let’s refresh the builder.

I’m seeing one in the builder.

That’s not there in real life.

Okay.

It’s a rendering issue in the builder.

Now let’s, but it’s, why isn’t it using my default is the question.

Cause I did, didn’t I, didn’t I say, did I not select?

I thought I selected.

There’s the X.

There we go.

Okay.

Maybe it was just a little, little oversight.

All right.

Let’s hit save, save, maybe front end.

What do we get?

There we go.

Okay.

All is well in the world.

Let’s go here, not in editing and let’s just choose a unique icon.

So we’ll, I hate how they all disappear.

Let’s choose Facebook for this one.

Um, cause then I always worried you have to wait for it to render before.

Why isn’t it rendering?

I see it there.

I just, it’s not, it’s not white anymore.

Oh, this is the same.

This is the same icon problem that bricks has had since the beginning of time where they lose their, they, they’re not allowed to share styles.

Um, really aggravating.

Let’s do this.

Let’s go icons, icon framework, save.

And let’s just see if we can solve this problem with the icon framework.

Okay.

Uh, let’s go to the icon.

I need to, am I editing the component?

Edit component.

Okay.

Content wrapper.

Let’s grab the icon.

Let’s go attributes.

Add attribute.

Data icon.

That’s going to get at least some styling going.

And now I should be able to swap the icons without care for how they’re styled.

Uh, let’s choose a different one.

Let’s choose Insta.

And then for the third one, we will choose YouTube.

Okay.

Um, let’s, let’s, let’s, that’s nice.

All right.

Good.

Um, what will, let’s see.

I’m just playing around here.

Okay.

It’s a little, it’s a little, it’s, I keep thinking the style thing is going to be over here, but I have to, when you add, when you make these into a component, it adds a lot of extra layers for how you, how you have to style things.

I can instantly change all those icons.

I can instantly change all those icons to dark with a little utility class here.

I mean, I could do it, you know, uh, on the class level as well, but ain’t nobody got time for that right now.

We’re just in exploration mode.

Okay.

All right.

Pretty easy.

Um, should we, I just wanted to test that.

Let’s delete the icon and let’s just see if we can loop these real quick.

All right.

So how do we want to handle this?

Let me go back to chat as well.

Um, Pedro says, don’t forget to drop a like.

That’s always a good reminder.

Test nested components says Max.

Good idea, Max.

Good idea.

We will do that.

Okay.

Um, let’s go.

Do we have ACF?

We do have ACF.

Look at this.

Post types, add new.

Uh, we’ll just say features.

Okay.

So let’s go features, feature, features, uh, hierarchical, advanced configuration, permissions, URLs, front URL, prefix.

Nope.

Don’t need that.

Save.

Okay.

Let’s go features, add new feature.

Let’s go.

My first feature.

Great.

Um, you know what we need?

Cause I, I just add a principle.

I would use not the block editor for this.

We will go features, feed features, text area, feature description, feature description, feature description, assign a feature, save features, my first feature.

This is the, let’s just do this.

No, not that.

Website, ipsum.com.

Okay, grab.

Come here, back to here, save.

Okay, let’s go back, add a new feature.

You can’t, you know, it’s 2024 and you still can’t bulk add content into the content management system.

We don’t have to rag on that right now.

You know, we don’t have to mention that.

All right, let’s hit publish.

You just got to go, got to go one by one.

Feature number three.

Okay.

Placeholder text for feature three.

Okay.

Publish, publish.

Okay.

Let’s go.

Pages.

Why not use the block editor for description?

Because, um, uh, general rule of thumb.

If it’s going to be a very small amount of content, bypass the block editor because you don’t have a crystal ball.

You don’t know if you’re, if you may need the block editor for longer form content for that piece of content in the future, you’re SOL.

Um, and so if you’re, if it’s going to be a little snippet like this, make a custom field, put that content in a little snippet.

You preserve the block editor for whatever may come in the future.

Not to mention if you decide you don’t need the block editor at all, you can just turn off the block editor.

You can disable the block editor for a custom post type, leaving you only custom fields, which are very easy to label and give descriptions to.

And so if a client is coming in to do something like add a team member, remove a team member, the block editor being there when it actually shouldn’t be there or isn’t even being used is not a good idea.

So it just gives you a lot more flexibility in how you’re going to do these things.

So let’s delete both of those instances and let’s edit component.

Let’s query loop it.

Let’s query, let’s query features.

Um, we just need three of them.

Uh, that should be pretty easy.

Okay.

Card heading.

Um, now we got to get out of editing.

This is where we come to.

Um, so see, you’re gonna have to manage your dynamic data and your component.

Like the loop in this case in different area, kind of different areas, like different panels, right?

Uh, they don’t, they don’t live together.

And so it’s a little messy, but it works.

All right.

This is going to be post title.

This is going to be the card.

Just where is it?

Where is it?

Archive description.

Term description.

Did I not, what did I call it?

What did I, what did I, what did I call it?

What did I call it?

Did I call it something wrong?

Feature ACF groups.

There’s another project, uh, problem with magic areas.

I called it feature description.

Uh, you should not have to bounce back to the admin.

Like I ran into an issue and I have to completely abandon what I’m doing.

Does anybody know why that’s not showing up?

Is this a bricks issue?

Is this a, there’s feature description.

Hmm.

Edit field group.

Was I going too fast?

Did I do something wrong?

Post type is equal to feature.

Feature description.

Anybody see any problems with this?

Presentation.

There’s no logic.

It seems like, I mean, it’s, it’s, it’s absolutely showing on the thing.

Refresh builder.

Yeah.

Good idea.

Very good idea.

Uh, let’s reload.

Okay.

Uh, I thought I did that.

Maybe I didn’t.

It’s not helping.

I thought I did that.

It’s not helping.

Um, still a problem.

Still a problem.

Okay.

Let’s go back.

Is this something in the new one?

Input types aren’t the same.

Make it a text field.

Is text area not, not text?

There wasn’t a text area in bricks is the problem.

See, that’s that.

If that’s the case, that’s going to be, that’s going to be a problem.

Edit.

Create.

Oh, you do have rich text.

Uh, I don’t think that’s going to be the problem though.

Let’s just leave that as rich text.

Uh, create.

Um, assign this to, oh, edit.

Ooh.

No.

All right.

Hold on.

I’m getting lost in the, uh, infinite panels here.

Okay.

Let’s go here.

This is where we want to be.

How do you dis, there we go.

Disconnect.

Okay.

Let’s reconnect.

Oh gosh.

This is the inception is killing me.

Edit.

Hold on.

I created a new thing called rich text.

Yeah.

So where is it?

Let’s save.

Let’s refresh.

I’m not the, the thing I dislike the most is the inception aspect of like panel to panel to panel of this panel, that panel.

Go to all the panels.

Okay.

You got it.

Cause you got to be an edit mode.

Then you got to click this.

Then now we can reconnect.

Connect, but look, it’s not, it’s not bringing, it’s not bringing that option in that I had.

Okay.

Well, we’ll do it.

We’ll do it the other way.

We will go to ACF field groups.

This is going to unfortunately delete all of my features.

Cause you can’t, maybe you can.

Can I convert that to a text?

I don’t think this is the problem.

I really, I really don’t think that this, oh, did it not get, oh, it never generated the, dude, it’s supposed to do that automatically.

Okay.

All right.

Safe.

Maybe that was the problem the entire time.

All right.

Let’s refresh.

All right.

We have to edit.

We have to click.

We have to make sure card description is still there.

Okay.

We’re good.

In card description, we can now do feature description.

Jeez.

Okay.

Card image, dynamic data.

This would have to be the featured image.

Okay.

Which we don’t currently have.

So now we will go, but it’s, I’m already seeing the looping is, is working.

So that’s fine, but we will complete the task.

So let’s go one, two, three.

Let’s go set featured image.

I don’t really care which ones are which.

Save.

Feature two.

Set featured image goes here.

Save.

Three.

Set featured image goes here.

Save.

Delete.

Okay.

And preview.

Of course.

Of course one of them has to misbehave.

Right?

You can’t, they can’t just all work.

My first feature has a featured image.

Actually, hold on.

What, what is, no, hold on.

These are.

Yeah, no, they are.

They are.

Okay.

They are.

Dynamic data is empty for featured image.

I beg to differ, sir.

Now, they’re not getting the right titles.

It’s like looping with ACF.

You just link it up and boom.

This, you have to create components and attach properties.

Then link to ACF five steps instead of one.

I wouldn’t, I wouldn’t say that.

I think that this is, I mean, this is the preferred.

You don’t want to, you don’t want to loop through things necessarily with ACF.

In bricks, you lose a lot of, of options or you create a lot of chaos.

You want to kind of use the native looping features.

What I’m wondering right now is why it’s not working.

So we have the post title supposedly being pulled in dynamically.

We have the card description being pulled in dynamically.

We have the featured image being pulled in dynamically.

Featured image is working.

Kind of.

For two of them, it’s working.

But look at this.

The description is not working and the heading is not working.

Description field name is empty.

You removed it.

Description field name is empty.

Oh, okay.

Okay.

Let’s go back.

When I converted it, did it lose the data?

It’s one thing I do hate about ACF metabox.

You can’t, you can’t change things after the fact.

Yeah.

Okay.

This is card three.

Here’s a description.

All right.

So let’s save that.

And feature two.

Card two.

And we’ll do card one.

But this doesn’t explain the featured image missing from the first card.

Which is this card.

First feature.

Has a featured image.

Okay.

Still not working.

I do appreciate the help though.

Let’s go to.

It’s saying feature description right there.

Feature description.

No field name set in ACF.

Okay.

All right.

Let’s go.

Let’s go back.

We’ll check.

Field groups.

Features.

What do you mean it’s not set?

Somebody saying, look at this.

Come on, Steve.

No field name set in ACF.

Steve’s yelling at me.

I see a field name.

Do we all see a field name?

Can we agree that there’s a field name?

I see the field name.

There is a field name.

Anybody else have an idea?

Launcher preview window.

You’re using a timestamped window.

Hmm.

All these fancy suggestions.

Let’s go.

Okay.

Here’s the actual page.

Okay.

Need to loop outside the card, not inside the component.

I don’t think that’s possible.

I don’t think, look, there’s no, there’s no way to loop here.

You have to edit the component to, wait a minute.

Wait a minute.

Hold on.

I think I see the problem.

It lost.

Yeah.

It lost our loop.

Somewhere our loop was lost in the process.

Okay.

This should be an easy fix.

Let’s go ahead and loop now.

And go to features.

And let’s go to, that should be all we need actually.

Save.

Okay.

We can delete this.

And we can delete that.

Okay.

Let’s get our tabs under control.

Feature three, two, first feature, everything working.

This is one of your top, except the description.

Let’s check the description out.

Okay.

We can close the query.

Okay.

You can only click that instance.

I’m going to disconnect that.

Oh, it’s weird.

Cause you can do dynamic data here, or you can connect the property and do the dynamic data on the property.

Does that matter?

I wonder which one would be easier or if it works both ways.

Okay.

Let’s go back here.

Cause it’s, here’s the, okay.

Now it’s pulling in the description.

Just fine.

Let’s go check front end.

Oh, oh, oh.

Uh.

Feature description.

I see them in the builder.

I hit save.

Let’s go back to the front end.

Where are they?

Um.

H3.

I don’t see them at all.

Okay.

Well, it’s a good time to test, um, whether we can do this just.

Cause the thing is, if you’re, if you’re looping, I mean, there’s, there’s actually, well, it, you still would want to do it.

You still would want to do it.

I guess it doesn’t matter for loops.

But if you’re going to use the card outside of a loop, you wouldn’t want to do it here.

You wouldn’t want to do it inside.

Like you wouldn’t want to do this.

You’re going to disconnect and do this.

Assuming it were, I assume it works.

It does, but you wouldn’t want to do it.

You wouldn’t want to do it because then I think you’re, you’re forced into that.

Let me see.

How, how would we set this up for maximum flexibility?

You could still connect.

Cause once you connect, it’s going to default to using whatever is here.

This is very inception-y.

At least for a, um, dyslexic person, it’s not, it’s not easy.

I’m going to remove this just so that’s not possibly influencing anything that we’re doing.

And I’m going to go card description.

And then I’m going to go back here.

And then I’m going to make sure that that’s there.

And I, and I see it in the preview, but it is not rendering on the front end.

And I, I’m guessing that that’s just a problem with the components right now being in beta.

Um, timestamp question mark.

Yeah.

You can do the dynamic data without adding a property for event clients, breaking it.

Um, but that’s the thing that I was just talking about.

If you do it that way, which we verified it works, you’re stuck with it only ever being used for dynamic data.

What if I wanted to use this card outside of a loop in just a normal grid, same card design, all that, but I don’t want to loop it.

I just want to use it manually.

I have to have the property connected because the property is my gateway to having instance level content.

Um, so we have to do it this way.

Now, what you could do is card description.

You could make the default, like it would default to being looping to looping with dynamic data.

That’s an option.

I don’t want to save that.

I think, I think we found the first issue though, is that some forms of dynamic content have trouble rendering properly.

I, cause I don’t see anything else that I’m possibly doing wrong, given that that dynamic data is working the other way around.

So I think this is just a problem with it being in beta, but overall, like if I were to give feedback on this, we’re about to jump over to the change log and look and see what else is, is, uh, available in this update.

But if I were to give one criticism here is the inception nature of like, am I editing the component?

Am I not editing the component?

Am I, the properties are in a different place?

You know, it’s, and I understand from a workflow perspective, you want to be able to to click on it and just edit the content.

That’s fine and dandy.

I would almost prefer though, that this edit kind of thing is not in this kind of workflow up here, but maybe in another accordion panel right here.

Like I could collapse properties and go into edit the component down here and I can stay in line with what I’m doing versus like right now having to do this.

And then that, that thing I was just looking at disappears and I’m now here.

And then, but I also have to jump way across over here or, or click in here.

And now I’m in yet another panel.

It’s not style and style for this thing.

And then it just creates a bunch of layers, uh, to mentally track, like, where am I, where am I in the UI?

And I think a lot of it stems from this little situation right here that you can be editing a component inside of it, but you got to go back to do, to actually edit the content.

Like it’s a lot of, it’s a lot of bouncing.

It’s a lot of bad.

And I think when it’s a component, if you just had properties and styles for editing, I mean, I, it’s obviously the way bricks is structured.

I think they had to do it the way they did it, or at least to make it a lot easier for them.

Not necessarily easier for the user, but I imagine some UI stuff would have had to been heavily refactored to get it to work a different way.

It is what it is.

It’s just very inception-y.

It’s very inception-y.

But functionality is there.

It works.

Now, there’s a lot of people who, who have been saying things like, oh, we can abandon, uh, classes.

You, you could, I mean, if you have components, you can just style at the ID level, or you could use a utility first approach, or you could, I want you to see what we’ve done so far and understand that components are something that are very useful when you need them.

You would not want to be in the business of making every single thing on your website a component.

That would be craziness.

It would be, it would, it would take a lot of extra time, a lot of extra mapping, and a lot of extra, just a lot of extra labor and mental load when it’s just, it’s just not necessary.

You can use your classes to control global styling.

You don’t go to a utility first approach.

There’s no reason to.

You make things that are components that need to be components, and you do everything else the same way you’ve always done it.

You don’t make every single thing a component.

That’s going to be, it’s going to be crazy.

It’s going to be crazy.

So yeah, you still need classes.

You still need BIM.

You still need variables.

You still need all this stuff.

Even, even if you abandon classes, you still need variables.

It’s, this is not a replacement.

This is an additive approach for improving maintainability and scalability of your content and your, and your design and your layout and your, and your website in general.

You can use components without loops.

Yeah.

A hundred percent.

We need use cases and components versus templates.

The people are, are confuzzled.

Um, well, a, so if you think about atomic design, atomic design kind of explains it.

Right.

And actually I want to, I want to, I want to, Max had a great thing.

He said, you need to test components nested in other components, which the inception is already breaking my brain.

Max, I cannot imagine components inside of components.

Um, but, but we’re going to do it.

We’re going to do it right now.

Cause I, I don’t want to, I don’t want to forget it and I will absolutely forget it.

Uh, so let’s do this.

Let’s edit the component.

We have to come in here and we are going to, well, we can just do it like this.

We can actually steal one from frames.

You would do something like a share.

Okay.

Or social.

Well, yeah.

All right.

So imagine that.

Why can’t I scroll?

Dude, like, you know, one thing that’s gone downhill is there it is.

It finally woke up.

Look at that.

Uh, is this has gotten very, very, very laggy.

The, um, template template manager area has gotten insanely laggy.

Okay.

Let’s do social icons, Charlie.

So this is a, in atomic design, they would call this a molecule.

All right.

You have an atom, you have a molecule.

What’s the next one up?

Um, I forgot what the next one is called.

Then you have templates.

Okay.

Um, let me insert social icons.

Oh, gee, they’ve got it.

I’ve got to be able to opt out of this.

I do not want to do this every time I’m importing something.

All right.

Import classes.

All right.

And where the hell is the thing I just import?

Oh, it’s way up here.

Thank you.

Do you like how I was inside of a component when I imported?

And it was like, nah, you don’t need that in there.

Yeah.

We’ll just, we’ll just put it up here for you.

Um, so let’s, oh, this is going to be interesting.

How do I get that in a thing that I have to be in a special mode to edit?

Like, see this?

I can’t just, you can’t just drag it in.

Uh, if I edit.

Uh, see, see how the inception-y starts to bite you in the ass.

Uh, hmm.

So what we’re going to have to do is copy to the clipboard.

Uh, copy.

And then we’re going to delete.

And then we’re going to edit.

And then we’re going to paste.

Do you like the dance?

Okay.

We can get it in there.

All right.

I’m going to, I’m not, I’m not going to style them or anything like this.

We’re going to, we’re going to leave them alone.

Let’s just go look.

Did they render on the front end?

There you go.

Okay.

So we get icons.

Um, we want to make this thing a component.

And I actually don’t know if you can.

Now that I’m looking at it, let’s write, you can’t.

There’s no nested components, which would be absolutely very nice.

It’s, I would say it’s a must have feature.

Um, and here’s why you would want a nested component.

These social share icons are, need to be globally controlled. separately from this card.

Okay.

Yes, they live in this card, but they have the ability to live outside of the card.

And we need them to be able to have their own componentization so that they’re controllable independently.

And the only way to do that is with nested components.

And right now it does not support nested components.

It appears.

So we can’t do that.

Um, so I answered your question, Max, you, that’s just not possible.

But let’s go back and talk about atomic design principles and, uh, back to the atom molecule template kind of situation.

So a template is a collection of molecules and atoms.

Um, and forgetting the name is, I actually explained it on, uh, in the get frames docs, we explained it a bit.

Um, let’s go to fundamentals.

Let’s go to anatomy of frames.

Um, okay.

Uh, huh, huh, huh, huh, huh.

Uh, maybe it’s a different article.

Let’s go to, I thought it was anatomy of frames.

Oh yeah.

Here we go.

Atomic design principles.

Okay.

Uh huh.

I mean, we tweak it a little bit, but here’s the original, one of the original articles that I would recommend you read.

Okay.

Atom, molecules, organisms.

I don’t know why I couldn’t remember that name.

Organisms and then templates and pages.

So an atom would be like one icon.

Okay.

So one social icon in that group of icons, that would be an atom.

And then a molecule would be like the three things.

Okay.

And then you have an organism, which might be the card itself.

And then you have a template, which might be the whole layout of, uh, of a, of a thing.

Um, and then you have pages.

Okay.

So components are these, like this card is a perfect, you wouldn’t make this a template.

It doesn’t, there’s no card template.

There’s a card component.

And the card component is an organism that’s made up of other molecules and atoms.

Like the heading.

Okay.

Is an atom.

The, uh, description is an atom.

An icon is an atom.

Uh, this is the best way to understand templates.

Templates is a big thing.

It’s a big thing, right?

Like a whole landing page.

That’s a template.

Right.

And you’re going to, you’re going to use dynamic data to populate various landing pages.

That is a template situation.

But your template may have components like cards in them.

A card is a component.

It can live inside a template.

You see, these things all work together.

Uh, and they form the ecosystem of your website.

So the easiest one to understand is cards for sure.

Like almost every card you ever create.

Let’s go to, uh, just a website.

Almost every, any card you would ever create should be a component.

Almost certainly.

Like this testimonial card should be a component.

Okay.

We come down.

This icon feature card should be a component.

We, uh, you may say with components, your intro row with it contains your heading and your text, right?

These are the atoms.

There’s an atom.

There’s an atom inside of this hero section.

Um, let’s go down these feature rows component.

Okay.

Now, why would they be components?

Why would they be components?

Let’s look at something like this.

Um, easy, easy, easy example.

So we have these icon cards that have an icon and a heading and text.

You BIM them.

So you add BIM classes to everything and BIMing gives you global control over their style.

So if I ever wanted to come in and add a border to them all, let’s say Bev comes along and says, all those cards need a border.

And you’re like, Bev, I, there’s 400 of them, Bev.

What do you want me to do?

Well, if you BIM them, it’s very easy.

You go add a border to the class and all 400 instances have a border.

That is CSS.

And CSS has always had a global control system called classes, which is why I get so irritated when everybody tries to abandon classes, including page builders.

Uh, and people pretend that classes aren’t as it’s, that’s dumb.

That’s dumb.

That’s the R word version of dumb.

Okay.

Uh, for being politically correct.

Now, what you cannot do with CSS is manage HTML.

So if you need to put like adding a border to these cards, no problem whatsoever.

Adding a link inside the cards, big problem, big, big, big, big, big problem.

There is no way to do that without going card by card, by card, by card, by card through the entire website, all 400 of them.

And adding that link manually, unless they’re a component.

Now, if they’re a component, you can add that link.

Now, global components before where, yeah, you could make it a component, but there was no instance level mapping of content.

So you could add a link, but the link would have to be a dynamic data driven.

You could not go to this card and say, this link goes this way, this place.

And another card, this link goes to another place.

It would be the card has a link.

Yes or no.

And it goes to a place.

Yes or no.

There was no instance level control.

Now there’s instance level control.

All right.

So it is very, very powerful.

But again, you won’t make everything a component.

You can’t build a site and be like, well, this is going to be a component.

This section is going to be a component.

This, you would have nested components and nested, which you can’t even do right now.

So anybody that’s like, oh, you don’t need BIM.

You can use utility first.

You can, no, no, no.

Don’t listen to these people.

You still use BIM.

You turn things that need to be components into components and you live your life.

Okay.

You don’t, you don’t radically change your whole approach.

It’s simple.

Okay.

Let me get, let me get down to the chat.

Max is back.

What did I miss?

You missed nested components, not working.

That’s what you missed.

It’s not, it’s not, it’s not available.

Okay.

So Pedro says for a hero section, each page can use the template, but with dynamic data components fits well for that.

I think, yeah, there are some things people use templates for right now that should actually probably just be components.

In fact, if you’re familiar with how Gutenberg handles headers, that’s actually a component based approach rather than a template based approach.

The header is not a template.

The header is a component that could just be inserted anywhere.

And then controls.

Ideally you would have conditions applying to the components, which is not something we looked at yet either.

Like I would edit this component and I can do conditions.

There you go.

So now this condition that I’m creating actually applies to all instances of this card.

But here’s the thing that you get into a very messy world of, I actually may need instance level conditions, not global conditions.

Like this allows me to do global conditions, but what about instance level conditions?

That does not seem to be a thing yet.

And it needs to be ultimately to get there, to get, to get to where we need to be.

This is a very, very complicated architecture for doing this kind of thing.

There’s a lot of use cases to consider.

There’s a lot of gotchas.

As you saw, we ran into a couple of them already.

So this is not by any means easy to develop, which is why most page builders do not have this kind of functionality.

I use templates instead of components because they were not out.

That’s why.

Yeah.

And in fact, it was, I actually went over this in a couple of different videos.

That was the wrong, they were calling things templates and they were trying to make, it’s the wrong use of the word templates.

That’s, that’s the, yeah, faulty use.

And that, that’s really what confused people.

It’s like, hold on, hold on.

I got templates, but these things are kind of like components, but they’re called templates.

And I managed them in a templates area, but they also exist with my full page templates that I know is a template for sure.

Very confusing.

Very, this is why terminology is so important.

It’s why I hated the fact that they call things blocks in the block editor.

The dumb name.

That’s a dumb name.

Okay.

Because we already have things that are like block level elements and that means something.

And you can’t just take a word that means something and make it mean something else.

Let’s say that’s confusing.

That’s a bad approach.

So yeah, it’s, we, we, if it’s a component, we need to call it a component.

If it’s a template, we need to call it a template.

If we’re going to get rid of templates, cause we can componentize everything.

That’s what we need to do.

And I don’t, I don’t think you can ever do that because even if everything was a component, it needs a template maybe to control the display of all those things at once.

It’s like a container effectively.

There’s a lot of philosophy that goes into this.

There’s a lot of just racking your brain for various, you know, hurdles and challenges and roadblocks.

So we wouldn’t use templates for anything going forward or there’s a divider.

No, you, you would.

Like if I’m going to create a blog post template, that’s obviously clearly a template.

Now the hero that I use in that blog post template may very well be a component.

If I’m using that hero in a lot of different places and I want to componentize it.

That’s why like atomic design makes sense.

It’s because we understand the concept of an, I have, I have a cow and I have a horse.

A cow and a horse can exist on a farm.

The farm is like the container for the cow and the horse and the farm can control the cow and the horse.

But the cow and the horse can also control themselves or be controlled, right?

Or whatever.

I don’t know if that’s the dumbest analogy you’ve ever heard in your life, but that’s, it makes sense.

Like you can take components and they can live inside templates.

There’s nothing saying that that can’t happen.

And the template can control some aspect of that component, but the component can also be controlled independently from the template.

Or you can have, you know, a template with no components.

You can have that too.

It’s just, it adds a layer of functionality and flexibility to what we’re doing.

Let’s see. 10 pages, all services, same look, but different content without dynamic data.

Yeah.

Yeah, yeah, yeah.

For sure.

Um, so templates, we’re talking page level, which like you said, Bricks has confused everybody currently using them wrong for years.

Yes.

That is where the confusion is going to come from.

Not the confusion is not template versus components.

The confusion comes from, we didn’t have components.

So we took this word called templates and kind of used it this component kind of way, but didn’t bother changing the name.

Um, that’s where the confusion is going to come from.

So yes, you have to separate that in your mind.

Now I would say templates are now here’s where the other layer of confusion comes in.

And this has been confusion from the start.

A header is a component, but you have to use templates to do headers and bricks.

A footer is a footer is a component, but you have to use templates to do footers and bricks.

That’s still confusing.

I actually like the way Gutenberg, if I was going to give Gutenberg props for how they approached headers and footers, they use a component based approach.

The problem they have is that it’s a magic area approach.

You have to, you can’t, you can’t, I think if I’m, if I’m, you can correct me if I’m wrong, but I think you have to go to a special magic area to edit your header and your footer.

Still, that should all be done in line, which is, which is actually good here.

It just, we need, you, you have to be very careful with the UX for these things.

Um, I’m not really sold on this being, being the, the, the best UX.

Okay.

But at least they accomplished.

I, let’s say on the level of hate for what’s happening, I hate this a lot less than a magic area.

If they made me go to a magic area, my hate meter would be off the chart.

So if I have to deal with this to avoid a magic area, I’ll deal with this all day long.

Okay.

The magic area is the worst way to go.

So I’m glad that that’s not the case.

I’m glad that that did not happen.

Um, yes, it’s experimental in a first version.

Absolutely.

So this is all just for feedback for things for them to consider.

Yes.

You’re explaining one of the big confusions for me, header, footer, magic area to edit template component.

Yeah.

Like, like for example, um, and I know you can usually get to your header from right here, but it’s, it is still a magic area.

Uh, but let’s, let’s just go back and say, okay, let’s, let’s do this.

I can make this save as template, right?

Um, yeah.

Let’s just say this as a template.

Okay.

Here’s what this confuses the crap out of everybody.

I don’t know why that modal came up after I did that.

Let’s go out of here and let’s go back to bricks templates.

Cause we got to clear this confusion up.

I understand why everybody’s confused.

See, those two templates are in here.

They are not really templates.

Okay.

And see, in my mind, I was thinking like dynamic templates.

You guys were actually talking like, like patterns, right?

Patterns are not templates.

That’s the worst word in the world for a pattern.

Like, because there’s nothing dynamic in nature about this thing right here that I just saved.

There’s nothing, this is a completely static.

This is just like a, a carbon copy.

Uh, it has no functionality.

It’s literally just copying and pasting Jason.

That’s all it’s doing.

I, I, I need to, I wish we could all start saying Jason, like Jason, right?

I think the official pronunciation is Jason, but everybody want to know, like, why are you doing this to Jason?

What do you have against Jason?

When I say Jason, people are like, what do you, what do you have against that guy?

You’re always doing stuff to him.

Why would you copy and paste that man?

Like, right.

If I say Jason, everybody, Oh, Oh yeah.

The code.

I got, I get it.

Right.

Bad.

These things are just bad.

We had the GIF GIF controversy the other day, which we did decide as collectively, I think everybody finally got onto the same page that it’s GIF and not GIF.

I’m being facetious.

We’ll never all agree.

Um, you know, but enough people, enough people agreed, but yeah, this is not, these are not templates.

Here’s what bricks needs to do to fix this.

Okay.

You need templates, components, patterns.

Okay.

Stay with me here.

Templates, components, patterns.

So our patterns, frames, frames, layouts.

Okay.

Those are patterns.

They live in the pattern library.

Then there’s components, components.

The word components alludes to a special kind of functionality.

Okay.

And then templates also alludes to a different special kind of functionality.

So we should have templates.

We should have components.

We should have patterns.

Don’t be taking things with no functionality, like a generic hero layout and being like, that’s a template.

It’s not though.

It’s really not.

It doesn’t do anything special.

Okay.

It could be a template.

Not really though.

It should be a component.

If it’s going to be anything, you can make it into a component.

Okay.

But you got to have three names.

There’s three names at play here because there’s three different kinds of things at play here.

Coming from a Jason, it’s Jason.

I 100% agree with you.

I tried to sound like I was in, you know, with the Jason crowd.

And so I’d say Jason a lot.

I’m actually going to go backwards now.

I am going to, the same way I do with ARIA, ARIA labels.

They want me, get this, they want me to say area.

No.

Well, it’s clearly not spelled area.

And if I, if I try to say area, it’s a fucking who’s on first situation.

Is it?

I’m like, look at the area label.

They’re like area label.

That’s an area.

You’re labeling the area.

No, I’m talking about the area label, the area in the code label.

What are they trying to do to us?

Guys, it’s not hard.

It’s spelled ARIA.

Let’s just, I had a girl on my softball team.

You know what her name was?

ARIA.

You know how she spelled it?

A-R-I-A.

ARIA.

It was very clear.

I didn’t go, hey, ARIA, get the ball.

It’s ARIA.

It’s spelled, let’s just say it like it’s spelled.

Okay.

And we can avoid so many of these complications.

Why are you trying to bring area into this?

Okay.

If you want it to be area, spell it area.

But then you have that complication of, is it the area or the area?

You know what I’m saying?

Like, I don’t know.

We need new leadership.

We need new leadership in this industry.

There’s a lot of, a lot of very avoidable problems, right?

You can just avoid these things.

All right.

Oh gosh.

Let’s go to the change log.

Okay.

We got components experimental.

Where?

Here we go.

Okay.

Context menu, copy and paste classes.

Context menu.

What context menu are they talking?

Are they talking about the right click menu?

Okay.

Let’s go, let’s go into here.

We can get rid of this, get rid of this.

Okay.

All right.

So I can cop.

Oh, okay.

Oh, oh, oh, oh.

Here we go.

Copy classes.

Nice.

And I can go paste them onto something else.

What classes feature section, Dallas content wrapper.

Let’s just add a section and let’s paste, paste, paste.

Uh-oh.

Hmm.

Right click, copy classes.

Okay.

Paste.

Ah, there it is.

Oh, what was that?

Oh, I was looking at the copy thing again.

Okay.

There we go.

Nice.

Okay.

Very nice.

Uh, where were we?

Okay.

Can we delete this?

Yes, we can.

Can we delete this?

Yes, we can.

Okay.

Uh, query loop support ACF gallery.

Ooh.

Ooh, this is a big one.

This was a big one.

This was a big.

You had to do a lot of workarounds before because the gallery was not supported.

Should we do that?

Should we test this?

Or do you want to see what this means?

I’ll let you guys vote.

I’m going to keep reading.

If you want, type in ACF gallery.

If you want me to investigate this ACF gallery situation.

Okay.

Query loop more controls for ACF and Metabox relationship.

Ah, fuck.

I got to set up some bi-directional relationships to try this out.

Okay.

Where did you select the query loop?

Uh, the query loop was selected inside of the component.

So you have to edit the component and then you can do the query loop.

Okay.

Hmm.

Yeah, that’s, that’s boring.

Okay.

Um, copy paste attributes.

Ooh.

Oh.

Hmm.

Look at this though.

When I’m editing a component, if I click on some.

No.

Okay.

It did switch.

It didn’t do it the first time, but it did the second time.

Okay.

Watch this.

Watch this magic.

We had an icon.

And we’ll go SVG and we’ll just do this.

Okay.

All right.

And I’m just going to duplicate it a bunch of times.

That’s a, that’s a bunch.

Okay.

The only thing we still need here.

Why are they all selected?

I know you’re not really all selected.

Come on bricks.

Okay.

Uh, we’ll, we’ll disregard.

So if I go data icon, great works for that one.

But then I’m like, oh, do I really have to type that on all of them?

Well, apparently now I can copy attributes and I can just paste attributes and paste attributes, which is a little bit faster.

Yeah.

It’d be nice if I could multi-select them and then paste the attributes, but I don’t think, yeah, that’s not, that’s not possible yet.

But at least I can paste the attributes now.

I wonder if there’s a shortcut for pasting attributes.

That would be, it pastes an undefined.

So the normal paste does not work.

It’d be nice if they had a shortcut key for that, but it’s still, nevertheless, it’s better than typing the thing over and over and over again.

Especially since that exists in a long lost, far away accordion number 17.

Okay.

Could you create the socials component first, then copy to clipboard and paste it inside the other component to get nested to work?

Ah, well, look at you guys with your engineering.

Let’s, let’s go ahead and try.

Social icons, Charlie.

All right.

So we’ll take a social Charlie and save it as a component.

Social Charlie.

Oh my God.

What just happened?

Save as component.

Social Charlie.

Okay.

We’ll say a social.

Great.

Create.

Okay.

Fantastic.

Let’s get out of there.

Let’s copy this.

Copy.

Let’s go into our component here.

Edit.

And.

Content wrapper.

Oh, paste undefined.

Not great.

Okay.

Let’s try this again.

Copy.

Copied social Charlie.

Okay.

Or, or, or can we, is there an insert component?

Oh my God.

Is there an insert component that we can do?

Feature card Dallas.

Edit component.

Let’s try paste one more time.

Oh, hold on.

Got a little promise.

A little promise.

Can we?

Oh, you can.

Look at this.

You can do it here too.

I, that’s what I was wondering.

All right.

Let’s delete it from here and just go to here.

Social Charlie.

Edit.

Pen.

Export.

A component within a component is not supported.

Wah, wah, wah.

Okay.

Well, there’s your, there is your official answer.

Um, not supported.

Okay.

All right.

Um, yeah.

Components within components better become a feature real quick.

Yeah.

Okay.

Yeah.

That’s the components don’t work.

Um, I think you can multi-select at least for styling.

You can.

Uh, you sure?

You sure about that?

Is that a, is that a new feature?

How, how would you multi-select other than shift?

I think you, you may be an advanced themer user.

Isn’t that, that might be an advanced themer kind of thing.

Okay.

Uh, it’s not, it’s not native bricks.

Global classes resolve conflicts on import.

Please let us opt out of this.

Please let us opt out.

Uh, global classes manager, new filters for used, unused on this site.

Show outer post contents element type, single, whatever duplicate post brick settings.

Okay.

Accordion and tabs that default open items, small form image gallery, query loop, new infinite scroll delay.

Okay.

Brick settings, cascade layer accordion toggle bricks open class immediately.

Okay.

Uh, okay.

Add HTML tag description on basic text.

What does that mean?

Let’s delete this.

Delete this.

Okay.

Let’s go to section.

Let’s come.

Why is it putting things ahead of this?

Okay.

My gosh.

Text.

Basic tech.

Yo, yo.

It dude, it’s not putting things like where I’m already selected.

All right.

Link two words limit.

I really wait.

Why is this not?

It seems like this is the easiest feature on the planet.

It’s just allow me to default this to a paragraph tag.

I know it’s an AT feature.

I don’t want to hear it.

It should just be native.

It should be native thing.

I don’t know what they mean by this description text element.

Okay.

Everything else seems to be, yeah, just improvements.

Uh, we’ll, we don’t need to go through that entire list.

Um, the relationships, I assume that when you create a bidirectional relationship in your query loop, you just don’t lose all your controls anymore.

I’ll probably verify that at some point.

I don’t, we don’t need to do it now.

Uh, nobody seems to have voted for the gallery.

Mark, Mark says, didn’t you just paste it in there though?

I did paste it, but I don’t think it’s going to work.

Um, I mean, if you want to press the issue, okay.

We can see if we can force it to work.

I mean, I would guess that it’s going to break.

Um, so we’ll take social Charlie right here, which is a component.

We did make it a component.

We’re going to copy it.

We’re going to open feature card Dallas.

Dallas.

Uh, and we will, oh, it’s already in there, but let me paste a new version.

It’s, it’s just not rendering.

See, that’s our, it’s already broke.

Well, it’s rendering on the front end.

It’s not rendering on the back end.

So now what we have to do is make a change to social Charlie, uh, which requires editing this.

And we’re just going to go make this a different icon.

So this can be X, X and N.

Okay.

So we did two X’s.

Well, I, I mean, it appears to work.

What do you want me to tell you?

It appears to work.

Um, I’m sure, I’m sure there’s, I’m sure they tested it.

I’m sure they decided that they would put an error notice when you tried to do it.

There’s gotta be a reason.

Okay.

So let’s just say this.

Maybe it works.

It’s not officially supported.

So proceed with caution.

How about that?

No component variance either.

Yes, this is, um, component variance was in quickly.

Uh, it was, now this adds another layer of complexity for sure in how you’re building and managing components, but it is very, very, very powerful.

So you can have different variations of a component.

You could have a, um, now you wouldn’t want to do CSS really.

I would think you wouldn’t really do CSS related things because you already have technically component variations with regard to styling, just using modifier classes.

Um, so, uh, uh, header can be, here’s my header.

And then if I want it to be left, I can do header double dash left and everything goes left.

Um, CSS has already been able to do that since 1997.

Right.

So, uh, or whatever you would want to do HTML related things like a variant of a, uh, of an icon card would be, it has a button or doesn’t have a button.

So that’s an HTML control that you don’t have with CSS.

That would be a really good use for variants.

Um, then you could, you could, you wouldn’t need two different kinds of cards, whether, depending on whether you want a button or not have a button, you would have one card and it would have a variant that is button lists or buttonized.

Guten bricks has variants.

Yeah.

It’s good.

I thought there was going to have a HTML, CSS, JavaScript inside bricks.

I wonder what happened.

Uh, no AT.

Yeah.

I don’t, I don’t know.

Um, not sure back from the steam component variants could be done on a property level.

If we have display conditions based on property values.

Yes.

That too.

That brings in, uh, I mean, there’s, there’s so much complexity because it’s not just conditional logic that comes into play.

It’s how that conditional logic is set up.

Um, you already have conditional logic limitations in bricks.

Like what we’re thinking in terms of conditional logic in etch is different from how it was done in bricks, because I think the way it’s done in bricks has some architectural limitations.

Um, for example, it’s essentially like, um, you know, very standard logic, but you can’t do like, you can’t do like, you can’t do like if then this kind of stuff.

It’s, it’s really just like, you know, yes, no kind of basic logic.

Uh, we want, we want to expand that in etch, but then you bring interactions into the fold too.

And how those are set up and components having interactions because you have a UI for interactions that was all built before components.

You have a conditional logic UI that was all built before components.

I think some of this stuff is going to have to be remapped and reworked and refactored in order to fit into a world where components exist and are being heavily used.

Then you’re nesting all those things on top of all that.

I mean, this is very complex stuff.

Um, so kudos to bricks for tackling it.

But I think, I think it’s going to be a very long road.

I mean, you saw how long it took just to get here.

I think it’s going to be a very long road to get to nested components, to get to conditional logic that applies to instance level things.

Um, and then you have to figure out where you’re managing all of this.

Cause if we have a component, we would like to manage things at the component level.

But if you’re having to dig into atoms inside of those components to like the behavior is set at the atom level, man, you talk about inception.

It starts to get very, very, very dicey.

Um, especially with the 90 day rule and such, you know, you, you almost get to a point where you have to document how you’ve set up and created things on a website.

Uh, just like you would do in software where it’s like, I’m not going to remember why I did this or how we did this 90 days later.

I got to document it.

I got to explain it to myself now so that when I come back in 90 days, I still understand it.

Okay.

Um, that’s kind of the territory you’re moving into, which is also why I said, if you’re going to use components, you use them where necessary.

You don’t over component ties away.

Hey, we got components.

Let’s make everything a component.

Let’s have a big component party.

It’s not what you should be doing.

Components are used when necessary and you avoid them. when they’re not necessary, you stick to BIM, you stick to the tried and true, uh, methodology that we’ve used up to this point.

Really need conditions, visibility, like quickly had ability to add a button to your card with a toggle, et cetera.

Yeah.

That, that, that is the most basic level of variations that I think absolutely is a, is a must for sure.

Um, I guess I’ll keep using templates plus ACF until it gets better.

Yeah.

It’s definitely going to need to be improved for sure.

Uh, multi-select is still on the roadmap.

Okay.

Well, we’ve done enough here.

Let’s do Q and a, if let’s, I got a little more time.

I got about 20 minutes.

If anybody wants to do, uh, if you have questions, it can be about anything.

It doesn’t have to be about bricks.

It doesn’t have to be about, um, 1.12.

It can be about anything.

Uh, I did want to just direct everybody’s attention real quick.

I would go to automatic css.com slash blog and read this post that is up today.

Um, I can zoom out here.

Um, very important, very, very, very important post.

Um, and a very important milestone that we just hit and achieved and a very solid write up on what the way that we’re approaching ACSS in 2025, by the way, just quick shout out also to, let me go to, um, let me go to the change log.

We’ll just go here.

It’s a quick, quick little shortcut to the change log.

Um, I wonder if this query loop got, okay, it did.

Yeah.

This was fixed a while ago in bricks.

Uh, let me go back to, let me go back to what?

September-ish September, September.

Yeah, let’s keep going.

Damn, we’re five pages into this.

Let’s go.

Oh, there’s August, August, September 9th.

Okay.

Um, shout out to all the people.

I mean, remember back, if you remember, put your remembering caps on, uh, back to the etch launch when, when a bunch of people said, oh, he’s got etch now.

What a successful launch.

He’s going to abandon ACSS.

He’s going to abandon frames.

He’s going to have it.

Okay.

I just want you to, I mean, anybody could just go just check the change log.

How many, you know, how many commits have been put in since then?

How many, I mean, we have the advent of the card framework and the icon framework.

I think these are major, major development initiatives.

And then we achieve bug freedom, um, at least from what’s reported, right?

These are very important.

So just shout out to those people who, who knew nothing and still know nothing.

Um, and, uh, can’t predict a damn thing.

So just, yeah, just a quick shout out, uh, but go read this, this blog article.

Very, very important, uh, developments regarding ACSS in 2025.

Um, all right, let’s do Q and a, so I’m going to go to hashtag Q.

Okay.

Let’s start at the bottom and work our way to the top question.

Are the new docs ready?

Well, I don’t know what that means.

So if you go to the documentation, documentation for ACSS has been completed.

It was reworked.

Uh, all the screenshots are new.

If you happen to find an old screenshot, there might be one or two floating around somewhere.

Let me know.

I’ll go ahead and replace it.

All the docs are now up to date.

I also talked about in this blog article that we are certifying docs for a limited amount of time.

Essentially, I’m putting a timer on them.

And when the timer goes off, ding, I get a notification that says this doc needs to be re-reviewed.

And we go in and we re-review the doc for accuracy.

We update anything that needs to be updated.

And then we recertify it for another chunk of time.

And this ensures that none of the docs are getting stale, that all of the docs are being constantly looked at and verified for accuracy.

Um, but yeah, all the documentation is there.

It’s very detailed documentation.

Uh, the level of detail kind of matches the complexity of the feature.

Like if it’s more complex, we go into more detail.

If it’s a very simple, easy to understand, very intuitive thing, it’s got a little bit of documentation.

Um, but nothing else should really be necessary beyond that.

So yeah, documentation is done.

If you were talking about something else, let me know.

Um, but I think that’s what you were referring to.

What is your overall thought?

Now you had a play with the new updates.

Uh, I think it’s a very important thing.

I think it’s definitely in beta.

Uh, you should not use it on production.

I verified that today.

Uh, it’s got a long way to go still.

There’s a lot of stuff missing.

Uh, it’s a very technical thing.

I wouldn’t expect these things to happen anytime soon.

You’re going to have basic components.

Then you’re going to have another kind of layer added at some point and another layer added, hopefully at some point after that, those additional layers could take another six to 12 months before they arrive.

And I think a lot of it has to do with working around existing architecture.

Like this is actually something that we would most likely be able to do very quickly in etch.

Um, because we don’t have a lot of technical debt.

We don’t have a lot of stuff to work around and we’re building the UI as we, as we fit these pieces in, but it’s yet another advantage.

The secret weapon of etch is this.

Okay.

Aside from, aside from leadership, aside from the amazing team that’s working on it.

Okay.

The secret weapon is the question that we ask.

It’s the fundamental question of how etch is built.

And it is the question that no other builder bothered to ask.

In fact, they all wanted, they were all very excited about answering the completely opposite question.

The question they asked themselves repeatedly was, how can we take something complex like web design and make it so a monkey can do it?

And then the decisions they made to answer that question led them off into a jungle of absurdity and mediocrity and terribleness.

We choose to ask a different question.

We have this idea, this concept of a visual development environment, right?

It’s not like other page builders.

So it’s not fair to call it.

It has page building capabilities, but it goes well beyond a page builder, right?

And again, it asks a completely different question than page builders have asked in the past.

Our question is, how can we take a visual development environment and truly help the professional and people who understand the language of web design do their job more effectively, more efficiently, with more power, just, and more joy, right?

That’s the question we ask.

Not how do we dumb it down?

How do we make it easy for a beginner?

How do we make it?

How do we, how do we design this environment for somebody that doesn’t know what they’re doing?

We say, how do we take people who know what they’re doing and design an environment that they fucking love and they put tremendous unprecedented power at their fingertips and efficiency and speed.

It is a fundamentally different question.

Bricks didn’t ask that question.

Bricks lived in the world of, all right, we want to do some advanced things, but how do we make this approachable for a beginner?

That question automatically leads you into a path where your UI and your UI are in the UX are not ideal for, for like a professional use.

If you ask the question, how do we design something for professionals?

You would already be thinking about component like functionality.

It’s not, components are not new.

Okay.

The people who like JavaScript developers, other languages have had the concept of components for a very, very long time.

Page builders, why are you asking?

So here’s the question you ask yourself.

Why are page builders just now coming around to the idea of components and trying to backdoor them into the product?

Because they first thought about the beginner.

They didn’t first think about you.

They first thought about the beginner.

They did all the things that beginners wanted and needed.

And now they have to try to backdoor the advanced stuff in.

Now that people are like, by the way, this is kind of an underpowered builder.

We need more power.

Us professionals need more power.

And then they go, shit, you’re right.

And they got to backdoor it in.

Well, we don’t have to backdoor anything into etch.

Because we started with the right question, which is we got professionals who need and want to do professional level work in a new kind of environment.

How do we design that environment for them?

And we’re already thinking about all of the advanced things that professionals know about and care about.

In fact, we’re getting heat right now in criticism because if you’re a pro, you can actually use etch right now.

If you can write HTML, you can use etch right now.

You can drag and drop things, but the power is in your ability to access the code.

If you can write CSS, you can use etch right now.

And some beginners are going, whoa, wait, this doesn’t look like it’s for me.

And it’s because they’re having trouble understanding that you have to do the advanced things.

And then you backdoor in the ease for a beginner.

You don’t create it for a beginner and backdoor in the advanced things.

That is a nightmare.

That is an absolute nightmare.

And actually, I was interviewed two years ago.

I was saying this for anybody that wanted a heads up that people were asking me, well, what would, if you were going to design the tool, what would you do?

How would you fix this?

Because Gutenberg has the same problem worse than anybody.

Gutenberg was the like, how do you make it so ultra basic?

It almost looks like a text editor.

And now you know what they’re doing?

They’re scrambling to figure out how to backdoor in actual features that professionals need and care about.

And that, and it’s a, it’s a fucking nightmare.

It’s a disaster.

It is an absolute disaster.

And so I said two years ago in an interview, I said, you can dig it up.

I said, you take the tool and you make it for professionals.

And it’s way easier to find ways to scale that down and simplify it and make it more approachable for beginners than it is to do it the other way that everybody’s tried to do.

You can’t do everything for beginners and then suddenly try to just stuff professional stuff into it.

Okay.

Plus, plus you then have this major marketing problem and major user-based problem that the more stuff that a professional needs that you try to backdoor in, you have a user base of beginners going, hold on.

Whoa, I don’t know what that is.

I don’t understand that.

Oh, this tool is getting too complex.

You are now abandoning all the people you attracted with your initial design and concept and question.

That’s a, that’s a huge problem too.

When you put something new into etch that is for professionals, nobody backs an eye because they’re like, of course that would happen.

Of course that would be here.

Right.

It’s like we, when we add something into, uh, I guess admittedly, it’s a little bit of a problem with automatic CSS.

We’ll put in something new, like a card framework that’s technical that, you know, a professional should understand right out of the gate and be like, damn.

Oh yeah.

That’s, that is a hundred percent needed where other people go, man, I don’t know.

I can’t wrap my head around this.

It’s too complicated.

Right.

And so what do we have to do to overcome that?

A tremendous amount of education and like, Hey, it’s, it’s really not that scary.

Let me just show you a little bit.

Let me just get you into it.

And then when they get their feet wet, they’re like, ah, it like unlocks.

And then, but you have to be careful with that.

You have to be careful with that.

These builders that all marketed to beginners and sold the lie that anybody off the street can build a website.

They are going to, they, they really can’t backdoor all these professional features in without abandoning their user base.

Cause they’re a true beginner who, and actually I, you should read this article as well.

If you haven’t go to hwp.com, scroll down here, go to who is etch for.

It’s a short article.

It’s not too long.

Okay.

It says who is etch not for then.

Okay.

Let’s just read this together.

We’ll, we’ll zoom in.

Very important to understand people.

Cause there’s a bunch of different kinds of people in the world.

Okay.

In web design, there’s really two.

I identify two.

Now people will argue with this.

They’ll say there’s more than two.

I don’t know.

I, my argument is there’s two kinds of people.

Okay.

People who just want a one-off website with no regard for working within the industry of web design in the future will find etch difficult and frustrating.

Why?

Because etch demands an understanding of fundamentals, which come with a learning curve for users that don’t already possess the requisite knowledge.

And since this type of user doesn’t care to acquire said knowledge, they won’t have any patience for etch.

And this is the problem that Elementor has and Divi has.

And to some degree that Bricks has and every friendly builder all have this fundamental problem that if they try to backdoor in tools for professionals and features for professionals, their original user base will feel abandoned and will feel as if the tool is leaving them behind because they don’t have the patience.

Cause they’re not here for that.

They’re here for easy.

They’re here for quick.

They’re here for it makes sense to me and my brain.

I don’t care about the fundamentals of web design.

I don’t care about learning.

I’m trying to cut corners as if they’re doing work for clients.

It’s I’m trying to do as little as I possibly can and cash as many checks as I can before AI runs my shit out of the industry.

That is the right.

They are up against the clock.

Okay.

And by the way, this is you.

Let me, let me just warn you.

You’re up against the clock.

Your AI is running you out of the industry.

The people who are going to be left behind are the professionals.

No, there’s no more, um, you know, accountant by day, web designer by night.

There that’s not happening anymore.

You’re either deep into what you’re either knee deep in web design or you’re not in web design.

So when AI really arrives, you’re either in or you’re out.

All right.

So if you’re a beginner and you don’t know much about web design right now, and you’re like, should I choose a friendly builder or should I choose a professional tool like etch?

It is not even a question.

You should choose a professional tool like etch.

That speaks the language of web design that you can grow with, that you can learn with, that you can learn appropriately with.

That’s not a proprietary language like elementor and divi, etch.

With the understanding that those tools will never have the features that you need them to have when you are actually a professional because they can’t add them without abandoning their user base.

So it’s just, again, this is why I said, this is as big as we have to leave era three behind and we have to move into era four.

There is no other question.

AI is, era three will be obsolete just simply because of AI.

If you are an era three web designer, like you assemble in a proprietary page builder, you are fucksville.

AI is going to get rid of you very soon, very soon.

The people who are left are the people with actual skills who actually understand how things work under the hood and who can actually consult clients with their brain in terms of making all this stuff fit together and work together.

Okay.

Those are the people who are going to be left behind.

The idea of no code, easy, don’t need to know what I’m doing, anybody off the street, gone.

AI can just do that.

You don’t need any of these tools.

Okay.

So there’s going to be AI and there’s going to be professionals that if you want my prediction, that’s what’s going to exist.

So you can either decide now, do you want to go find a new line of work or do you want to buckle down and actually know and understand what you’re doing?

By the way, that’s more empowering.

We’ve had this conversation before.

I’ve gone on this rant before.

One of the most popular questions I get asked.

I get this mostly by email because people don’t want to ask this in public because of the nature of the question.

But they say, Kevin, I have a lot of imposter syndrome because I kind of assemble websites.

Like I’m using Elementor right now, I’m using Divi or I’m using Bricks.

I kind of assemble websites.

I can get the job done.

I don’t really know what’s going on under the hood.

I’m really struggling with this imposter syndrome.

What do you recommend?

And so my recommendation is always very blunt and it’s very honest.

And it is this.

A lot of imposter syndrome is not real.

I have a designer friend I’ve talked about before.

Amazing designer.

More talented and more technically knowledgeable than almost anybody I’ve ever met.

Charges bottom of the barrel prices because of imposter syndrome.

So his imposter syndrome is fake.

You have to sit him down in a chair and slap him a little bit and go, you are not an imposter.

Stop charging like an imposter.

You are charging $2,500 for branding.

You should be charging $25,000 for branding.

Smack him a couple more times and tell him to wake up.

That’s one kind of imposter syndrome.

Then there’s another kind of imposter syndrome where you feel imposter syndrome because you’re actually an imposter.

And if you’re assembling things in a page builder and you don’t really know HTML and you don’t really know CSS and you just kind of get there, right?

I’m not saying that’s bad.

I’m not saying that’s wrong.

I’m not saying there’s anything wrong with you.

I’m just saying if you feel imposter syndrome, that’s why.

Like it’s kind of like a, it is kind of a thing.

Like it’s a thing, right?

Now, how do you get rid of that?

You, education.

That’s it.

Education and practice.

So for Etch, if you don’t know what you’re doing and you’re going to come into Etch and we’re going to teach you page building 101 kind of stuff, right?

We teach you the fundamentals and you learn the fundamentals and you practice and you deploy these things in an actual professional tool.

You know what happens?

You stop being an imposter.

And you know what happens after that?

All your imposter syndrome goes away.

It’s like, it’s miraculous, right?

It’s not rocket science.

It’s education.

But there’s two kinds of people.

Let’s go back to the two kinds of people.

Person A doesn’t have the patience, doesn’t care, doesn’t aspire.

Okay.

My tool’s not for you.

Person B, it doesn’t matter whether you’re black belt, purple belt, blue belt, white belt.

Those aren’t buckets.

The bucket you’re in is I care.

I aspire.

I want to learn.

I want to practice.

I want to do professional work.

I want to be in this industry, right?

Those are the only two buckets I recognize and care about.

I don’t care if it’s black belt versus white belt.

I care if it’s you care or you don’t care.

If you don’t care, take your ass to Wix and Squarespace and all these other platforms that are built for people who don’t care.

If you do care, then learn and grow and use a professional tool.

That’s it.

Fairly simple, right?

And it’s better to use a tool that’s designed for you.

So those are the two buckets that I see.

And I think that if you identify with one of those buckets, you know what needs to be done.

It kind of like lets you know, oh, this is the path that I’m on.

This is the bucket I’m in.

This is how I should behave.

This is how I should do things.

Okay.

All right.

Let me hop over to the chat.

So we got to get a little feel for the comments.

Education.

Oh man, I like this.

Carlo.

I like this.

I like that.

We’re going to call this.

Hey, Carlo, you’re hired.

You’re hired, Carlo.

This is absolutely going to be the title of the section of the website where we put education.

It is going to be education.

Okay.

Let’s see.

Yeah.

Know your worth.

Exactly.

Page building 101 made the light come on for me.

Glad to hear that.

Can you speak for one hour and feel like you can speak for another 24?

Yes.

Let’s see.

I’m a believer, but I’m having trouble breaking away from Elementor.

Hey, I 100% understand.

This is a absolutely this.

It is a bite the bullet situation.

Okay.

You just have to be done with.

Just say no more.

And you have to be okay with, look, I know a learning curve is coming.

I know a struggle is coming.

I know some wasted time is coming.

And I’m okay with that because I have to get over this hump.

I have to get out of that ecosystem and I have to get into this new ecosystem.

And by the way, if you, there’s different levels.

Okay.

If you’re Elementor going to Etch, good luck.

Okay.

I mean, we, we make no mistake.

We will educate the shit out of you.

Okay.

We, we will get you there if you want to get there.

It’s just going to be a little harder than if you’re going from like Bricks to Etch.

So Bricks is like in the middle there.

Okay.

You’re, you’re probably more, more easily able to jump to something like Etch.

Um, and again, it depends on here’s the, you don’t have to know JavaScript.

You don’t have to know PHP.

We’re just talking about HTML and CSS.

This goes back to page building one-on-one, like one of the first videos where I said, what is the requisite knowledge of somebody doing work in a page builder?

You have to understand the HTML and you have to understand CSS.

You don’t, you can skip the JavaScript.

You can skip the PHP.

Why?

Because the builder can do so much of that for you.

By the way, AI is really fucking good at JavaScript.

I started doing a JavaScript, like learn JavaScript with Kevin and everything that I was doing, teaching.

AI can do it eight seconds.

And, and it’s not a situation where it’s like, oh, but I mean, you know, we’re not trying to build a fucking app.

Okay.

You still need a developer for that.

But if you’re like, I want to click this button and add a class to that thing over there.

And okay.

Like that’s an AI situation.

So I, I just was like, all right, this is not a super valuable thing anymore because it can just be done like with a prompt.

So that’s kind of what happened to, to that.

But let’s say you’re looping something.

Okay.

Is it nice if you understand the PHP involved in looping?

Yeah.

Yeah, obviously.

But if the builder can do it and your loop is completely functional and nothing’s wrong with it, and you can do all the things you want to do because the builder enabled that, you don’t really have to understand the PHP underneath, but you can’t do semantic.

Like the builder cannot do semantic HTML for you in every situation.

You have to understand what’s going on with the HTML.

If you want to work faster, it helps to understand what’s going on with the HTML.

The builder is not going to always be able to do ARIA for you.

The builder is not going to be able to do data attributes for you.

Those are things that have to be manually decided by the person doing the website.

There’s a lot of things the builder just can’t do for you in those regards.

There’s a lot of CSS stuff the builder cannot do because it is just a fundamental truth that the UI of a page builder cannot and will not keep up with CSS.

CSS evolves too quickly for UIs to keep up with.

This is why CSS grid came out like 2016 and Elementor didn’t get CSS grid until 2022 or something, right?

It’s fucking eight years behind or whatever that math comes out to.

That is a crazy gap.

Okay.

And so a professional cannot tolerate that gap.

A professional has to go, you know what?

I need layers.

So I just got to write my CSS because the builder doesn’t support layers.

I need, um, I need, uh, fuck.

What is the, uh, I have break points in my, my container queries.

I need container queries.

Is there a UI for container queries and bricks?

No.

Will there be anytime soon?

Probably not.

So what do I do?

Why have I write my CSS?

You have to be as a professional.

You have to win.

The builder can’t do the thing you need done.

You have to either hire somebody to do it, or you have to be able to take over and do it yourself.

That’s where the professionalism side comes in extra.

Okay.

Um, so I say HTML, CSS, that is the fundamental requisite knowledge of being in this industry.

Bonus points for JavaScript bonus points for PHP.

All right.

But if you don’t know HTML and CSS, like you haven’t done the requisite fundamental level, most basic parts of the work that you’re doing, you got to shore that up.

You got to shore that up ASAP.

Okay.

All right.

Framer DOM is not element or level.

Um, you must be, uh, having a converse side conversation or something.

Uh, we did, we did an analysis of framer.

If you, here’s actually what I say.

People get all, they get their panties in such a twist when I say this too.

Um, if you wrote code, like if an agent, if a real agency like the cared hired you and you wrote code the way, this is my fundamental argument.

If you wrote code the way Elementor wrote code, if you wrote code the way Divi writes code, if you write, if you write code the way framer writes code, you’d be fucking, you wouldn’t last fucking 48 hours.

They should fire you like that.

One look at the work you’re doing and go gone, gone, right?

It’s atrocious code.

Now Elementor is doing a lot to clean it up.

Okay.

Props to them.

Hey, anybody making moves to clean it up?

I think Beaver.

Beaver is making a lot of moves to clean it up.

But still, I mean, framer.

Framer is the worst I’ve ever seen.

Framer is atrocious.

Framer is like, what, what is happening, right?

Um, they have put zero thought into code output at, at framer.

So yeah, if you want to look at it, it is an absolute embarrassment.

The, uh, the, the, just it’s an, it’s insane.

The, the code that framer outputs.

Um, okay.

Let’s see.

Uh, yeah.

Don’t look in, don’t look into framer.

Don’t, first of all, framer, you want to talk about not speaking the language of web design.

Framer doesn’t speak a lick of it.

It’s like going to a different universe, a different planet.

Now, if you’re a designer that doesn’t know web design, like you’re just UI designer, you’ll probably feel like, Ooh, this is the greatest tool in the world.

It empowers me to do development.

And I don’t know anything about it.

No, it doesn’t.

It empowers you to build trash.

That’s what it empowers you to build.

Um, and nightmares, what nightmares are made of.

You hand over a framer site to a client with no scalability, no maintainability, absolutely yeti ass code, uh, that no other real developer wants to ever look at or touch.

All you’ve done is create a disaster.

That’s what you’ve done.

Congratulations.

You created a nightmare for other people.

Okay.

You checked the box and you felt so great about yourself and anybody that comes along later has an absolute nightmare on their hands.

Um, that’s not a win.

I don’t consider that to be a win.

Uh, okay.

Let’s go back to questions.

I said I had 20 minutes and it’s been 20, but you know, you know how it works around here.

Okay.

It’s like, it’s like one bite, you know, the rules.

All right.

You understand.

Uh, all right.

Well, I was starting at the bottom.

What’s the best way to master CSS at a raw level?

I actually was, I sat down and thought about this.

Like how would I structure a CSS course?

And I couldn’t get, there was, there’s eight different ways you could start.

I think what I’m going to do in January is I’m going to do some CSS live streams, maybe in the inner circle, most likely just exclusive to the inner circle.

Cause I actually think the best way is to get on a live stream with a bunch of people and cover a little bit of, here’s the fundamentals we’re going to cover today.

And then just open it up to, and like say it’s at a specific level.

Okay.

Um, but solve a problem, solve a challenge.

Like, Hey, I don’t, Kevin, I don’t understand pseudo elements.

Like how, how do you just break that down for me to where I can understand it?

Okay, great.

Let’s do this together.

Here’s how, and we just go through how a pseudo element works and we might do two or three different things on that live stream and then cut it off.

And then the next time we get on live, teach a couple of fundamentals, review, maybe a couple of things that are really important.

And then, Hey, what is blocking you?

What don’t you understand that you feel like I should understand this by now, but I don’t.

Explain it to me like I’m five.

And then we go, cool, let’s do it together.

And I explain it like you’re five and then it unlocks it for you.

And then everything in CSS that gets unlocked becomes part of your, your toolbox.

And the more tools you add to that toolbox, the faster it’s an exponential growth and confidence because suddenly it’s like, Oh my God, Oh, I can solve that problem.

Oh, Oh, I can do that.

I can do that.

And then you can do the next thing and the next thing.

And then you’re like, cause a lot of the block that people have with CSS.

And I imagine this is the same with JavaScript and probably PHP is in the very early stages.

You don’t know what you’re looking at.

You don’t feel comfortable with any part of it.

And so you just don’t want to open it and you don’t want to look at it.

And you’re like, Oh, come on.

Can’t the builder just do this for me?

Can’t like, there’s gotta be a shortcut for this.

Can’t AI write it for me.

And the more you live in that world, the more you’re never going to learn.

But if you get on the live stream where, Hey, we are, this is the whole purpose of this live stream is to open the CSS editor.

And you ask a question, we’ll explain it like you’re five, make sure you understand it.

And then you can actually go do this on your own.

And then as you gain confidence, a switch flips where you go, you know what?

I’m not scared of the style sheet.

I’m not scared of opening that CSS area.

I actually, I’m okay with that.

And I want to try to figure this out.

And the minute that happens, that’s the gateway to you actually being proficient and good and confident at CSS, right?

That’s all we need to happen.

We just need to get the switch to flip to where you’re not despising the style sheet.

You actually are like, I’m okay with that.

Like I’m okay with writing some stuff there, which I think frames is actually a really good gateway drug to this because we do a lot of stuff in the custom CSS box in, in bricks.

And so people that are willing to go in and look at that and kind of interpret it and go, oh, okay, I see what’s going on here.

All right.

I see how this was done.

Those people always accelerate faster because again, simple fact that they’re willing to look at it.

They’re not, they’re not afraid of it.

They’re not actively trying to avoid it.

All right.

Let’s see.

Is ARC dead now or not?

I do not understand the browser company.

I don’t understand their move either.

In all likelihood, it’s a money thing and it’s excuses and it’s bullshit.

And so I was like, you know what?

I’m going to go to Brave.

Especially now with the vertical tabs.

Look at the vertical tabs.

You can have them open or closed.

Very nice.

Very tidy.

Preserves real estate.

Really good.

Okay.

We’ve got some questions, a couple more questions to get to.

ACSS compatibility, BIM isn’t working within components.

Yeah, I would expect that it’s not.

We’ll have to take a look at that.

What would be best practice for what should be a component?

We kind of talked about that, but I’ll do more videos on this going forward.

What is the big difference between doing it this way and using one template inside a query?

I’m going to need more clarification on that question, I think.

How often do you have the same exact card and multiple loops on the same website?

It’s a really good question.

I think it depends on how you’re using cards for sure.

I’m trying to think of one.

It happens a lot on service-based websites.

Because you want to have features of the service.

And so, obviously, you’re going to end up with eight or ten service pages.

It happens a ton with testimonial cards.

So, we’re using this testimonial card on multiple different pages and want to be able to.

It’s also not a question of how many times is it happening right now.

It’s what is the likelihood that it would happen in the future.

So, if you have plans to expand a website out, we know for sure this little icon card is going to get used somewhere else.

We know for sure the testimonial card.

So, it’s not a, it needs to happen now because there’s more opportunities for it to happen.

It needs to happen now because it’s very likely that it’s going to happen in the future.

And you don’t want to come back and reverse, like, you know, you don’t want to work backwards.

You want to just do it right the first time.

And then it’s available for you when you need it in the future.

Which is, by the way, the whole principle of BIM as well.

There’s a lot of things that don’t need a BIM class.

But the idea, and rappers.

Okay.

Some people have been like, you don’t need a rapper for that.

Oh, okay.

Well, I’m glad you have your crystal ball because here’s the thing.

When there’s a thousand of them and you figure out you need a rapper, you’re Fuxville.

I don’t like being, I don’t like living in Fuxville.

It’s not a good place.

It’s not particularly nice.

It’s not comfortable.

And so, if you can avoid it, it’s like, what’s the cost to avoid it?

Oh, a BIM class and a rapper.

Well, I can, hold on, hold on.

I can completely avoid Fuxville with a BIM class and a rapper.

Well, why wouldn’t I do that?

Right?

So, people can be critical.

But you know what?

Those people are not going to rescue you when you find yourself in Fuxville.

They’re not going to just show up and be like, oh, I’ll do that for you.

Right?

So, don’t listen to them.

You analyze what is the cost and what is the cost of like solving the problem now versus what is the cost if we don’t solve the problem now and we end up with the problem later.

And you can see a dramatic mismatch.

Right?

And so, you go, oh, well, let’s just take the easy way out right now.

Add a rapper, add a BIM class.

We’re covered.

It’s insurance.

These are the same people that would probably tell you, you know, you don’t need car insurance.

How many times have you wrecked in the last five years?

You know?

And you go, well, I mean, I haven’t wrecked in the last five years.

And then you listen to them and you cancel your insurance and then fuck.

You’re in Fuxville, aren’t you?

Right?

You’re getting a wreck.

You’re not covered.

Okay.

It’s insurance.

BIM, certain BIM classes are insurance.

Certain rappers are insurance.

That’s it.

And the insurance is cheaper than the calamity later.

All right.

Let’s see.

Does it have a master component if you use to edit or do you directly on the instances and be updated across everything?

It’s in line.

It’s directly on the instances.

Are components similar to save as template than using the template shortcode?

You can change.

Yeah.

Just get the word template out of your mind.

Half the things in bricks that are templates are not actually templates.

I’m going to have to do more videos on this.

I can tell there’s just a lot of confusion.

That’s where the Grinch lives.

Yes.

Oh, look at Curtis.

See?

Win in doubt.

BIM it out.

Right?

Can’t go wrong.

Fuxville is the only place I can afford rent, sadly.

Yes.

Well, I mean, it is.

It is.

You know, costs have gone up lately.

Costs have gone up.

I’m totally up for a CSS training.

All right.

Here’s the final question before we get out.

Do you think that’s a good format?

So say, how can we decipher this between other people’s random comments in the chat?

Type CSS live stream in the chat right now.

If you think that’s a good format, let’s just all show up.

Let’s, you know, you can bring a drink.

You can bring wine.

You can bring coffee.

You can bring whatever.

You can bring a little donut.

You can bring whatever you want to bring.

It’s just casual, right?

We’ll just show up.

We’ll have a little chat, a little banter.

We’ll cover a couple little fundamentals.

And then we’ll just open it up to what’s blocking you in the land of CSS.

What doesn’t make sense to your brain?

What doesn’t compute?

If you think that that would be good, type CSS live stream in the chat.

And we’ll plan some of those starting in January.

Because honestly, the idea of me making a course on CSS, I would rather do a street food tour through like Wuhan, right?

Then I would create a CSS course.

That is craziness.

That’s a bar.

Shout out to Andy Mineo, though.

That’s not mine.

That’s not original.

Okay, that’s a good Andy Mineo bar.

Yeah, it’s another way of saying I don’t want to do it.

I would rather do a lot of different things.

Sounding worse things.

Okay?

But the idea of showing up on a live stream and just chatting it up and, hey, what’s blocking you?

Let me unblock that.

And there’s not a lot of structure.

And it’s just, but we could still document it.

Like, hey, here’s what we covered in this live stream.

Here’s what we covered in this live stream.

Very easy.

Very doable.

Even seems joyful.

Okay?

All right.

Let’s go down.

All right.

Good.

A lot of people are interested.

Beth is not invited.

Yes.

Bev.

Yeah.

If Bev gets in, that’s the thing.

We’re going to have to keep her up.

Because if she gets in, my gosh.

I mean, she will.

Next thing you know, she will be in the builder.

She’ll be trying to do stuff.

You’ll have pink headings.

It won’t be good.

All right.

Well, it sounds like that’s a good, it sounds like that’s something that people want.

All right.

I got to get out of here.

I love you guys.

Read the blog post on ACSS site.

Read the blog post on the Etch site.

And I’ll see you guys.

Well, I’ll probably see you again before 2025 for sure.

But it’ll be right here.

It’ll be right here.

ACSS 101 is wrapping up.

There’s only a few videos left of ACSS 101.

We’re starting a whole shorts series on ACSS 101.

So if you’re like, I don’t want to watch 45 minute videos.

I want bite size.

What’s the feature?

How you use it?

60 seconds.

There’s going to be a whole library of ACSS shorts coming.

And then by far, by far, the biggest thing to look forward to in 2025.

This channel, this channel right here, the tutorials that you know and love.

Okay.

Number one, they’re coming back.

Number two, a lot of them are going to be done in Etch.

And once the first one gets done in Etch, we will be exclusively doing videos in Etch going forwards.

And for those of you who haven’t seen Etch, you will start to get a glimpse of Etch.

And the education of the WordPress community will officially begin in early 2025.

That is by far the most exciting development.

But I love you guys.

Have a great holiday.

If we don’t talk before Christmas, Hanukkah, all that stuff, have a great holiday.

And I will see you again very soon.

I love you guys.

Peace.

Thank you.

Related Tools

Bricks Builder