2 0:00:00 Okay, so he just noticed that when you’re going through this, you can take the group block and add the section element to the markup.
With that said though, when you go through, he says right here, there’s no unique semantic element, so there’s no section element. There’s no section element, for example, so there’s no way to define global styling for a specific semantic context, is what he says in this blog article. However, we just watched him figure out that he can turn a group block, or make a group block a semantic section element.
But he just breezes right past it. He just blows right over it like that didn’t happen because it goes against the point that he’s trying to make. 1
0:00:58 Okay, let’s pause there. Yes, yes Rob.
I’m trying to pull the wool over everybody’s eyes. I want everybody to see that I didn’t just do that. Right?
Or, or, or, or there’s an alternate reality where a section element is actually a thing. Okay. Let me, let me, let’s just demonstrate.
Here’s what I was looking for inside of Elementor. So I’m going to go to edit with bricks. I’m going to go to, Oh, look, look, look with that.
Look at that right there. That’s a section element. This does not exist in Gutenberg.
Look what happens when I add it to the page. It’s actually a collection element. It’s more than one element.
It’s an outer wrapper. It’s got an inner container. That outer wrapper has a specific tag on it already by default that I don’t even have to worry about.
It’s got everything that I need ready to go for me to start building out my section. This is not possible in Gutenberg. It takes 10 clicks to achieve this in Gutenberg.
And if you have 10 sections on the page, that’s a hundred clicks. That’s a lot of clicks. That’s a lot of clicking.
I don’t have to do that much clicking and I just add it and it’s done right this is what I’m talking about when I say there’s no section element now I said here’s see this is how I respond right to to people when when they make arguments like this I took the time I sat down I was like well you know what maybe I didn’t do a good enough job explain I did a whole video on sections and how they work and how they’re structured, but maybe that wasn’t good enough. So what I’m going to do is I’m going to sit down and I’m going to spend another five hours detailing what an actual section looks like. Every website builder should have a proper semantic section element, but most don’t.
Here’s a, I built a whole custom visual of it. I did a whole another write up. I provided example code.
I threw a code pen in there so people can play around with it if they want to I talked about every builder that has it every builder that somewhat has it the builders that don’t have it at all I did a whole write-up on it because maybe maybe I didn’t do a good enough job the first time so I’ll just I’ll just take another stab at it I’ll just throw more education and information out there into the world so that less people are confused. That’s my approach, right? I will continue to make the argument.
Rob is saying basically, oh, he’s trying to pull the wool over everybody’s eyes because it defeats his argument that he, does he think that if I realize that something there had defeated my argument that I wouldn’t just go back and edit the article? Would I leave the bad argument in the article? and just hope that people miss the fact that I changed that to a section tag?
Or is the reality that if you have to change it to a section tag manually, number one, most people won’t, number two, it still doesn’t get you an accessible internal wrapper, it doesn’t get you anything else that you need with a section element, but Bricks gives that to me. Also, what it doesn’t give you is this ability right here. You go to theme styles, you go down here, you find the section element, element, section.
Oh, look at that. Bricks has the foresight to be like, well, users need a section element, but not only that, they’re going to need to apply default styling to the section element. Now, I have automatic CSS, which already does that for me, because automatic CSS also has something called foresight for its users.
But Bricks is phenomenal because Bricks shares that foresight, right? Bricks knows we need a section element. Bricks knows that section element needs a accessible internal container.
And Bricks also knows that that section element needs global styling control. Bricks knows all these things, making it very easy for us. What builder doesn’t know these things?
Well, actually most of them, including though the block editor. And this is what I was looking for. Hey, if there’s no section element, I got to do a lot of manual work to get to where I need to be.
And I’m going to have to go write custom CSS to style that section element globally to have at least a semblance of a logical starting point for using that section. That was the argument that I was trying to make. And Rob thinks that that argument is defeated by saying, well, you can change the semantic tag to section on the group block.
But that doesn’t meet any of the other requirements that I asked for. Right, so that’s not a rebuttal to there’s no section element. And it’s not like I didn’t even know that.
I obviously knew that because I did it, Rob. I changed it in the video demonstrating this is what I have to do to get to where I want to go. But it’s not easy.
The whole point was it’s not easy. It’s also not for everyone because somebody coming from Wix doesn’t even need you, doesn’t even know that you need to do that. That was the point.
2 0:05:48 Kevin, what gives man?
You say there’s no section element, no unique semantic elements. There’s no section element. You just made one.
We just watched you make a section element using the group block. 1 0:06:06
Okay, he’s about to say something else right here at 2027. And this is one of those, remember I talked about underhanded insults, I talked about like the assumption that I just don’t know what I’m doing by all these people. It says group block, okay I guess it’s just choosing a layout for that.
Let’s go ahead and add a block and we’re going to add a group inside. It wants me to again choose a layout. I’m going to call this intro.
2 0:06:35 Okay, so he goes on to build the rest of the block and then we’re going to pause when he starts going through the cards and all that stuff and I want to elaborate on that.
The rest of it is pretty straightforward. He creates the heading. He creates the paragraph thing.
He complains about how the alignment tools are difficult to find and how he can’t figure out how to make it full width. He eventually figures out that there is a full width setting in the toolbar up here. Listen, I agree it’s kind of weird that some of the stuff is off to the right and some of the stuff is in the toolbars.
I get it. I don’t know man, everything’s got a learning curve. If this is your first time using Gutenberg, and you figured it out on your own, it can’t be that hard.
Okay, sorry, this was a different the underhanded insult comes later. This was 1
0:07:23 the, the if you figured it out, it couldn’t be that hard thing, right. And and this is again, it’s like a, just a lapse in it’s like, let’s pretend the whole context of this discussion doesn’t exist, doesn’t matter.
Remember I told you context is very, very important to this discussion. What is the context of him telling me, hey, if you figured it out, it can’t be that hard. Rob, Rob, let’s remember, I’ve been doing this for 20 plus years.
I’m not, I made PageBuilding 101 to prove a point, that if you understand the fundamentals of page building 101 you can pick up any tool regardless of how dog shit it is and still get to where you need to go for the most part that was the whole point of page building 101 stop learning the language of a page builder and learn the language of web design and you will be empowered to get to the goal to get to the finish line regardless of how bad the tool is that you have to use ok and that was the point of this video let me show you how bad this is, but I’m still gonna fight my way to a working solution. That was the whole point of the video. And Rob’s response is, well, if you figured it out, then it couldn’t be that hard.
Which in itself is somewhat like of an underhanded insult because it’s like, if you’re a moron, you figured it out, anybody can do it. Or he’s just completely abandoned the whole context of we’re supposedly talking about everybody here. Like the person coming from Wix, well if Kevin figured it out, they can figure it out.
No, that doesn’t compute. I’ve been doing that for 20 years. They have not.
They won’t know how to do any of this stuff. And this is what I’ve said. Somebody sit me down.
I actually took an Elementor ad. And it could be Wix, it could be Elementor, it could be anybody, Divi, they all do the same thing. This ad of a nice blonde model, right, holding a laptop with a website on it, and it was like, look, I did this and anybody can do it.
And that’s the lie. That’s the lie of all these builders is anybody can do it. And I called them out and I put it on there and I was like, if anybody can do it, get rid of the model, get rid of the pretty blonde model and find, go get my mom.
Where’s my mom? Get my mom in here, sit her down in front of this builder, and turn on the video, and I wanna watch. If this is for everybody, show me.
If it’s easy, because I said she did it in less than 10 minutes, if it’s that easy, put it on film. You can’t, because it’s a fucking lie. It’s marketing bullshit.
No beginner coming from Wix is going to sit down in front of this block editor and know the slightest about how to get started. The slightest. It’s not even, it’ll take them an hour to figure out how to get one thing onto the page.
I’ve watched beginners do shit before. Guys, I’ve been on videos with people who’ve been using Bricks for a year, right? And they’re, they’re new to web design.
Okay. So I’m not calling them out or putting them down. They’re new to web design, relatively new to web design, but they’ve been using Bricks for a year, and I’ll be coaching them, because people pay for coaching to get better at doing this stuff, right?
So they’re paying me to watch them work and give them pointers and show them, okay, well, we could do this a little bit faster this way and that way and yada, yada, yada. It will take us an hour to build a basic hero section. And this is somebody that has experience.
And again I’m not calling them out. Why am I saying this? Because this shit is hard.
It’s not easy. And you can’t just snap your fingers and put a pretty blonde model on an ad and pretend that it is. Let’s just pretend that anybody can do it.
Let’s just pretend that it’s easy. And by the way that’s just one discipline. Like the actual development part, that’s just one discipline.
That’s not even the design part. That’s not even the copy part. That’s not even the offer part.
That’s not even the anything part. Like that’s like one little snippet of everything that has to be done to get to a working website. These ads are bullshit.
It’s all marketing. This idea of democratizing publishing that anybody can do. Yeah, anybody can do it after they spend hours of learning curve figuring out how to get it done.
That is the truth, that is the reality, and the sooner you tell people the truth the better off everybody’s going to be. And we can stop building tools for the lowest common denominator who still no matter how basic you make it still won’t know what the fuck to do when they open it on day one. They just will not know what to do, plain and simple.
And if you want me to prove it, I’ll get my mom. I’ll put her down in front of the computer. I’ll pull up the 2024 theme and I’ll say, get to work, mom.
And let’s just watch. And we’ll be there for fucking 12 hours and nothing will be done yet. Guaranteed.
That is the reality. That is the truth. 10
0:12:21 Okay? 1
0:12:22 I prefer to educate people with like, hey, let’s just tell you the reality. When someone’s like hey I want to I want to get into what you do I want to want to start an agency I want to do this and that how can I get started quick you can’t get started quick you can’t you’re gonna have to grind okay you’re gonna have to learn a bunch that’s the reality tell them that up front let them know okay let’s let’s keep going here let me go to the next timestamp okay 2148 is where we need to be we’re gonna have a little little interesting thing on the stack versus whatever else they call it row.
No idea why he’s making this a stack. He ends up undoing it. Why are you making this a stack?
So I made it a stack because the stack first row in Gutenberg All right, that’s good. So I made it a stack because stack first row in Gutenberg, from what I can tell, is basically the flex flow. It’s like, do you want it to flow in a row or do you want it to flow in a column?
And they’ve renamed them to stack instead of column for whatever reason. Again, because we’re building for the lowest common denominator user. Okay, so he’s like, why would you, I don’t even know why you would do that.
verse row was a thing in Gutenberg. He literally says I don’t I’ve never even used those controls. But he doesn’t know why I did it.
It’s like well because that’s the flex flow but the reason I undid it is because when you change it to a stack you lose controls in the side panel over here. So I go maybe they don’t want me to do that. I was confused.
I was lost. Why? Because it’s not a good experience.
That was the whole point of the video. It’s not a good experience. And he’s like, I don’t know why you’d be lost in this terrible editor that I don’t even know those controls exist, but why are you lost?
That’s like his, it just doesn’t make any sense to me. It’s going to be an H3 heading. I’m going to go ahead and set that right now.
So this is going to say card head and go. 2 0:14:21
try and build one of these cards with Gutenberg entirely. So he’s throwing together groups and headers and all this stuff. And he’s like, okay, big straw man argument incoming here.
1 0:14:33 Oh, this, this is, I think one of the biggest, there’s a, there’s a couple of just gigantic straw man arguments.
I think this is one of them coming up here. I’m going to build one of these and then I’m going to like duplicate it 2
0:14:43 across a bit essentially is what he’s doing. The thing that we have with these lists
1 0:14:51 is this is a list of features.
2 0:14:54 So again, I think this little, the design of what he has here is actually pretty slick.
I’m gonna give you a little credit, Kevin. Kevin, this is cool. 1
0:15:02 This is actually very important right here. This is gonna be one of just the most critical aspects of all of this.
It has nothing to do with the block editor, has nothing to do with this. Well, it has to do with this layout a little bit, but it has something very important to do with how my arguments are very often just like taken out of context and off into some different fairy tale land where things were said that I never said and yada yada yada. Well just watch this.
2 0:15:28 Cool, like the way that that UX is and the way the image hovers in and all that, I think it’s beautiful.
1 0:15:35 So good job on your design.
Or whatever it happens to be, a list of services, if these are service cards. Right now, there’s no context for what they actually are. But if it’s a list of features or a list of services or a list of people, we really prefer it to be a semantic list.
2 0:15:51 Okay, time out.
Time out. Okay, so let’s get into it, people. I really want to talk about this topic because I’ve had this conversation with a few people now and this really gets under my skin.
This is a huge topic that I wanted to cover in this video. We’re talking about lists in semantic HTML and accessibility is kind of what we’re talking about, right? And so he’s basically saying that he thinks all of these need to be in a list so that screen readers and people that leverage accessibility tools, basically so that you can not use a mouse and you can tab through the different elements in the section and interact with them.
So like if they link to other stuff, like it all needs to be able to do that. And his belief is that this can only be done with lists. 1
0:16:44 Wrong, wrong, fake argument, 100%, never anything I’ve ever said. He’s conflating two hugely different things.
Keyboard navigation, you could do keyboard navigation all day long without a semantic list. That is not why I propose a semantic list. I have never said, nor will I ever say, well, the only way to make a keyboard accessible is to put these things on a list.
Didn’t say that in the video, have never said that, never made that argument ever. This is a complete fairy tale fabrication. The reason it’s in a list is so when somebody on a screen reader is going through and they’re doing your services, right?
So they’re tab navigating through your services, it announces as a list and it tells them how many items are in the list. It gives them additional information and context. If you have 12 services, it’s gonna say, and they know they’re in the services section, right?
Cause you’re using section tags properly and headings properly. They know they’re in the services section. They’re now tab navigating through your services.
It’s gonna say list 12 items. It’s gonna let them know ahead of time, Hey, there’s 12 services coming up. You’re about to tab through them very helpful very helpful this has nothing to do with their ability to use the keyboard to go through those items nothing never said it did this is a complete fabrication fairy tale and he literally spend the next however long it’s 10 minutes I think he goes to chat GPT to fact check me he goes up and by the way I don’t think he even knows much about accessibility.
You can tell from his initial attempt at explaining this, right? But this is just a. .
. and this happens all the time. And people ask me why I get frustrated.
This is why I get frustrated. He’s countering an argument I never made. This is just complete fairy tale land.
2 0:18:45 And I think there’s a lot of other people out there like this that think that the only way that you can do this semantically is by using either the UL element or the OL element.
1 0:18:56 Now the reason we’re talking about this, remember the context, the reason we’re talking about this is because in the block editor you cannot make that a list.
That was the point that I was making in the video. I need to be able to make this a list but I can’t make it a list. And Rob’s saying, Rob’s argument is, you don’t need to make it a list.
And you don’t need to make it a list because people can still keyboard navigate through it when it’s not a list. That’s never why I said I was making it a list, right? So that’s the context.
2 0:19:26 Your list or an ordered list.
Do you think that’s the only way that we can semantically and accessibly? 1 0:19:33
Yeah, when I’m talking in the video, it’s gonna be like half as quiet because he didn’t have the volume up in his recording. I’ve maxed out the volume on his video so we’re just not gonna be able to hear me very well when he’s playing but most of this is just is him talking. Create stuff.
Now let’s be honest if you break down any page you this is fantastic he’s about to tell us what can be a list right right listen to this. You can 2
0:19:58 make you can say all kinds of things are lists, right? Like look at these video, these recommendations down here.
Is this a list of YouTube videos down here? Absolutely. What about these filters right here?
Are these a list of filters? Sure, right? I don’t know, like this is a list of stuff.
Like everything is lists in the world. Like if you just start looking at all kinds of things, here’s a list of different files in WordPress. This is a list of tabs that I have open in my browser.
Sure, you can look at all kinds of repeated patterns in the world and try to label them as a list. But let’s be 100% honest with ourselves. semantic markup, okay when we’re talking about lists a list is a bulleted list false or Lines or whatever whatever mark you’re like you’re basically like a grocery list a shopping list an ingredients list for a recipe That is the proper usage for the list element.
11 0:21:16 False.
2 0:21:17 Okay.
Creating. . .
1 0:21:19 True, yeah, if you, if it’s a grocery list, yeah, you use the list element.
That’s not the extent of it. He’s trying to argue that that’s the extent of it. Anything that doesn’t look like a grocery list or a task list, it doesn’t need to be
2 0:21:31 a list.
A bunch of cards, like four, a four column card layout, that essentially that’s more or less, that’s more of a menu than it is a list, okay? So I don’t think that thinking about this. 1
0:21:45 By the way, a semantic navigation menu, 4
0:21:49 it is, and I’m, 1
0:21:50 let me, I was gonna talk to Rob directly, but I understand that’s a little bit like, you know, talking down to somebody. But this is a huge disconnect because he’s like that’s more of a menu I can’t say this without sounding like I’m talking down to him Rob every navigation menu uses list structure it uses an unordered list structure that you look up the proper semantic way to build a navigation it uses lists and they don’t look like grocery lists every navigation that’s built properly on the internet is a list and it doesn’t look like a grocery list.
It doesn’t even have bullets. It’s inline. It’s styled completely different.
It has drop downs. It has fly outs. It has megas.
It has lots of stuff. Doesn’t look like a grocery list. He disproved his own point by even bringing up menus.
Every menu disproves the fact that every list doesn’t look like a grocery list. 2 0:22:49
As a list, is semantic at all? Like, as a matter of fact, I believe it’s the opposite of semantic, and actually, to confirm this, I was actually talking with ChatGPT earlier, and I wanted to see, hey, ChatGPT, what do you think about this? Okay, so, I asked ChatGPT earlier,
3 0:23:09 what did I ask?
2 0:23:10 I said, in HTML, is there a generally accessible and accessible approach to creating a set of interactive elements like buttons, cards, etc.
that the user can tab through or interact with using. . .
Notice he’s still on the tab through interact with thing. That’s a completely separate topic. It has nothing to do with the semantic use of lists.
1 0:23:24 or without a mouse without putting those elements in a UL or OL element with each one being its own LI element and it says yes you can create a set of interactive
2 0:23:36 elements like buttons or whatever yada yada yada without using this you can throw them in a div or section and this is how to do it okay see it’s answering him based on that information that he gave it that’s irrelevant to the
1 0:23:49 discussion and I’ll story I’ve got chat GPT pulled up and I will show you in just a second how, first of all, that chat GPT is not even a resource for this.
This is not even, you don’t really prove these things by going to chat GPT and I’ll show you why in just a second, but let’s keep going. 2 0:24:16
And it says you can put roles on divs and you could, there’s a tab index attribute. Notice that he’s saying you could put roles on things. 1
0:24:24 We’re going to get to the ARIA roles in just a minute, where we can make something a list, even though it’s not technically a list. I just want to pause and let’s bring back everybody to the context of, I was saying I need to make a list of cards in the block editor, and it is not possible because I can’t set the HTML tag on a group to UL or to LI the way that I can in something like Bricks.
I’ll show you right here. So if I have a block inside of here, we’ve all seen this happen over and over and over again. This container can be an unordered list.
See how easy that was? This block can be a list item. That’s all I wanted.
It’s not a big ask. That’s a softball. That’s all I was asking to do.
That’s not so that these things can be clickable, that has no or keyboard navigatable or focusable nothing that’s a side tangent okay we’re doing this for a specific reason that I’ve outlined in no less than like five hours of video okay I was saying this is not possible in the block editor and he’s saying well you can do this role thing you can do our real labels guess what guess what Rob you can’t do those either in the block editor. So if we have a situation where we need to create a list however you want to create it whether it’s ULLI or it’s ARIA role it you can’t do it in the block editor. That was my point.
It’s not so these alternatives that he’s giving us are still not doable in the 2 0:25:57
block editor period point-blank. So this doesn’t even matter. And you can do an on click on the div and everything.
Okay. And so then I say, I asked it, well, why do so many people still consider the list element approach to be the only option? And it basically goes to say, well, they think of semantic structure and its accessibility, styling, and then it goes
1 0:26:20 on to say, it goes on, it goes on to give him all of the benefits of doing it as a list, like ignoring it.
2 0:26:29 However, it’s important to note that using lists is not the only valid approach.
The key is to ensure. 1 0:26:34
Never said it’s the only valid approach. Sure that the HTML structure is semantic. 2
0:26:39 It is by the way, the only valid approach 1
0:26:41 to making something a list, right? Even the ARIA role, right?
It says specifically, if you can make it a list with UL and LI tags, that’s preferable. 2 0:26:54
. . .
be meaningful and that it provides a good user experience. The W3C HTML specification defines elements like nav, menu, and button to be used in certain contexts and it encourages the use of semantic elements to convey meaning. 1
0:27:15 These are fun facts. They have nothing to do with our discussion.
2 0:27:19 So then it says, in recent years, web development practices have evolved, and there’s a greater emphasis on using semantic HTML5 elements appropriately.
For example, a navigation menu could be wrapped in a nav element, and interactive elements can use button for better semantics. 1 0:27:38
Interactive elements, not links. We’re talking about links. These cards were links to different places.
A button element would be semantically wrong to use in that situation. This is all just like, we’re off in fairy tale land talking about stuff that has nothing to do with the card layout that I was just building. 3
0:27:55 Better. 2
0:27:56 Better semantics. So nav.
That would not be better semantics 1 0:28:01
for the layout that we are talking about. 100% would not be bad. This would be wrong, in fact, semantics.
He’s acting like Chad Chippity is somehow like correcting anything that I’ve said when this is literally we’re just off in Rob’s head talking about things that I never said, never advocated for, never even mentioned. 2 0:28:25
Button, button, button, button, button, okay? Ultimately, the choice is up to you. Depends on design and yada, yada, yada.
So I’m not knocking him for saying that like, he would prefer to do this with lists. Okay, I guess if you want to do it that way. But I’m here to tell you that that’s not the only modern semantic HTML practices have expanded beyond the strict requirement of using LI or OL elements to satisfy accessibility and its semantic concerns.
While lists remain valuable for certain types of content, such as ordered and unordered 1 0:29:00
sequences, HTML5 introduced new semantic elements that provide. . .
And this is ChadGBT just giving. . .
Because he’s asking a question that’s like, ChadGBT’s like, I don’t even really know what to tell this guy. I’m just going to give them a bunch of fun facts about semantic tags in HTML that have nothing to do with anything that we’re talking about. So anyway, let’s continue.
Let’s go forward as quickly as we can. So I pulled up ChatGPT. I said, if I want screen readers to announce a series of clickable cards as a list, should I build these cards in a UL and LI structure?
Yes. And by the way, again, I’m going to go back. This is not the be-all end-all.
ChatGPT I don’t think is a good argument. I’m using it because that’s what he tried to use, okay? To supposedly say that I’m wrong.
I’m just gonna get Chat GPT to say that what I was doing was exactly right. That still doesn’t mean it’s 100% true. We’d have to go to different sources and different people and talk to a bunch of people.
But if he’s gonna use Chat GPT, I’ll use Chat GPT. So it says, yes, using that structure for a series of clickable cards is a good practice for accessibility, particularly for screen reader users. The structure provides several benefits.
Okay, semantic HTML, screen reader friendly, improved navigation, custom styling. Then I go down and I say, is this the only way to get these cards announced as a list? And it says, well, it’s not the only way, but you can use ARIA roles.
Ensuring proper keyboard navigation. It says right here, regardless of the HTML structure that you can make it keyboard navigatable, which was never up for debate. So that’s irrelevant.
Basically it’s saying the only other way to do this properly is to use aria role equals list which I go back to my argument cannot be done in the block editor either so my original argument of this cannot be made a list still stands still stands okay then I go down now I because I’m fair I moved I tried to confuse chat GPT I tried to get it to say something I tried to get it to tell me that I was wrong. I was like, so, outside of rolled equals list, there’s really no way to get these items to announce as a list, is there? And would you say that just using UL and LI elements is the best way?
So first I tried to get it to confirm, okay? And it basically said all the same things over again. And then I said, I think you’re wrong though.
Isn’t it true that using UL and LI structures actually poor accessibility and semantic structure more often than not in the modern area of web design. Now why did I say this? Because chat GPT is often confusable.
You can get it to contradict itself almost immediately in various situations. So I wanted to test it. Can I get it to contradict itself or will it stand firm on what it just told me about ULLI list structure?
And in this case it actually stood very strong. It did not default to contradicting itself. It said, no, basically, UL and LI is the best way to go.
And then it said, here are some considerations against UL and LI. Design constraints. Well, that’s not, we know that’s not the case.
It’s so this is wrong. This is just chat GPT being wrong, which happens very, very often. Over-semanticization.
Okay, there’s an argument that not every group of items needs to be marked up as a list, true, true. For example, a set of unrelated call to action buttons or a group of icons may not semantically constitute a list. Fact, fun fact, because we haven’t tried to do that, but it’s a fact nonetheless.
Flexibility with ARIA, okay, changing web standards. Bunch of nonsense, basically. The decision to use ULLI should be based on that.
Now, it’s trying to like hedge its bets more or less. So, I challenged it again and I was like, well, you just told me that with CSS, there are no design constraints with lists. Now, you’re saying that list structure creates constraints.
It sounds like you’re confused. Then he goes, you’re correct to point out the inconsistency in my responses. Let me clarify.
Then it tries to clarify. Then I said, okay, so if I’m going to create a grid of service cards, it seems like it would constitute a list of services. So would using an unordered list structure here be appropriate, even though I’m not creating a boring bulleted list like a shopping list?
I even asked it like, hey, Rob said it has to be a shopping list. It has to have bullet points. And it was like, yes, an unordered list structure for a grid of services cards can indeed be appropriate, even if the visual representation is far from a traditional boring bulleted list.
The decision to use list elements in HTML is more about the semantic structure of the content than about its visual appearance. So I guess Rob didn’t even ask the tool that he was using to disprove this whole situation if he was wrong, right? Right?
Because he told us, no, it’s actually more about visual appearance. That if it doesn’t look like a shopping list, it probably shouldn’t be a list. And here’s Chad GPT saying, no, no, no, it has nothing to do with how the list looks.
It has to do with the semantic meaning of the items. Okay. So I just wanted to show, and again, I’m not saying Chad GPT is a great source, but if you’re going to use Chad GPT, well, let’s have some conversations with Chad GPT.
Okay, let’s do it. Well, let’s have the right conversations. All right, let’s go back to Rob’s video here.
I’m gonna check in with Chad in just a second. And this is gonna start going a little bit faster now because we’re getting past a lot of the most tedious stuff. And by the way, he’s also gonna show us some things in the block editor.
So if you’re ready for Rob to show us some stuff, get ready. Okay, so Chad GPT, we did that already. All right, 2940, let’s go 2940 and let’s play this.
It’s just, they don’t let you have a custom HTML element. I don’t think there’s any other way to do this other than custom code. There is a custom HTML block in WordPress
2 0:35:08 that maybe he’s not aware of.
We’ll talk about that a little later too, but like I don’t, he’s going into this group block and he’s saying there’s no custom, you can’t put a custom HTML element in there. That’s true, you can’t make the group block be whatever kind of element you want, but it really wouldn’t make sense for a group block to act as an ordered or unordered list. 1
0:35:35 Yeah, it wouldn’t, it would 100%. I do it all the time, I do it every day.
I do it a million times a day in BRICS. I just showed you how to do it, how easy it is. I’ve shown why you should do it in countless hours of training videos.
This is just wrong. And then if I went to the actual card that is in the list and went to advanced, same thing, we can’t really have an LI there either. So basically what I’m gathering is I have to just ditch that requirement if that’s a requirement.
You don’t have to ditch that requirement Which I feel it. I do have to ditch that requirement. I just have to abandon that because there’s you do not have to abandon that
2 0:36:13 It just means that you can’t build that layout with just this you have to create your own block.
Ah 1 0:36:20
There we have it so once again guys if you need something to be a semantic list, just crack out VS Code, right? Just get some React going, right? .
. . path to arriving there with these native controls.
2 0:36:40 Yeah, you came to the right conclusion.
With what’s native. . .
1 0:36:43 I know I did.
2 0:36:44 .
. . in Gutenberg today, you can’t build that.
Do you not know react? What is it that you don’t know? I’ll help you learn it
1 0:37:08 Okay, so I’m just gonna duplicate the card then Again, he’s the point to him.
And yes, Rob, Rob, I don’t know React. Yeah, that’s the point, Rob. Right, this is a for everyone editor, and it’s not for me.
It’s not even people who, like, imagine being me, right? 20 years of experience, all the things that I do, and all the things that I’ve shown, and all the things that I’ve taught and it still doesn’t work for me that’s the point Rob because someone coming from Wix it’s not even fucking close to working for them it’s not in any universe will it work for them if it doesn’t work for me that’s the whole point I for BIM methodology block L. So he fumbles around through the rest of this video.
10 0:38:02 I don’t even.
2 0:38:02 One image.
I would really like an answer for maintainability 1 0:38:06
without CSS classes, right? Without the funda. Okay, I really want to listen to this part.
2 0:38:13 If anybody in the comments for this video can elaborate on what the heck he’s getting at with the maintainability stuff, please enlighten me.
Even though Matt has told me it’s there, it’s just not there. 1 0:38:22
Until partially sync patterns arrives, then we have some semblance of maintainability. It’s still not going to be perfect. I would really like an answer for maintainability without CSS classes, right?
Without the fundamentals of web design. I’m so confused. You want maintainability without CSS classes?
2 0:38:44 Or you think it’s impossible to do it without, you can add custom classes to blocks today.
Any custom blocks you. . .
and when you create. . .
1 0:38:58 See, once again, I don’t know if he’s pretending to be confused or if he’s actually confused.
Does he think? And you’re about to, I think, see one of those areas where he just starts talking down. Let’s see.
2 0:39:11 When you turn those blocks into a reusable block or a block pattern or whatever, the classes stay on that block.
So you can add custom classes to reusable blocks, I’m sorry, to synced or unsynced block patterns, and they stay on there. So every time you add that block pattern, it has those custom classes that you added to the block. See, I don’t know why he’s telling me
1 0:39:33 that you can add classes to elements in the block editor when he watched me do that.
Instead of him thinking like, what is, there’s got to be some, something he means beyond the thing I watched him do in the video a hundred times. He’s got to be talking about something else. And this is where I go back to the idea.
And my team basically confirmed this when we had a discussion about it. People like Rob have never used bricks. They’ve never used a, a page builder that allows you to add classes and style the classes.
I’ve never understood why they never understand what I’m talking about. They always look at me like I’m an alien. And I’m like, this is what I mean.
The ability to go class, like I had a class, and then write a bunch of custom CSS for those classes and then when I say I can’t add classes to things he’s like I just watched you do it. I watched you do it. You can do it.
But Rob it’s not like this and so I even tried to clarify it. I said stylable classes but then they get confused at that too. They’re like no those classes can be styled.
What do you mean classes can’t be styled? You just write some CSS. And I’m like, but you can’t write CSS because there’s no way to write it.
I don’t know how to say this like politely. Guys, I’m 10 steps ahead of all of them, right? They, I’ve already thought through all this shit.
I’ve already gone to every roadblock and go, nah, that’s a roadblock, not this roadblock, not this roadblock, found a way around it, found a way around it. They act like when I bring up a problem, it’s because I don’t know what the fuck I’m doing. No I know what I’m doing.
I found the road everything they say they don’t even know that their answers to something have ten more roadblocks beyond it that they haven’t even thought about yet. Well I’ve already thought of those I’ve already experienced them. I live in this environment right.
That’s the disconnect goes back to I don’t think they’ve been on our side of the fence, ever. They live in their own land, which is VS Code and React, and they don’t live in the land that you and I live in. So they have no idea what Bricks is capable of, no idea how it works, no idea what the workflow looks like, none of this.
They don’t know any of that. And instead of them being like, curious about it, like, wow, it seems like you guys have a really powerful workflow thing going on over here let me look into that maybe we can take some of those ideas and put them in Blockland they don’t say that to themselves you know what they say those people don’t know the fuck they’re doing that’s that’s kind of like their attitude other people don’t know oh you just change the the tag to the section and you’re good to go nope nope you’re not you’re not good to go. You’re way away from where you need to go still.
Even when you do, they don’t even know because they haven’t thought to step three, four, five, six, seven yet. I’ve already thought through all those steps. Okay, that’s why I’ve come to the conclusions that I’ve come to.
2 0:42:41 Doesn’t take any custom anything, it’s just in the editor.
1 0:42:44 That’s it, it’s a fundamental part of web design.
All right, but we’re gonna continue on. So I’ve got my hover card. I’ve got my inner.
Now this needs to be position relative. Okay. So that does.
So let’s refresh. 3 0:42:59
Okay. 1 0:42:59
I don’t want that. He’s fast forwarding. 16
0:43:01 Not me. 1
0:43:01 So just hang with it for a second. Uh, I was pretty sure.
15 0:43:04 I didn’t want that.
1 0:43:05 So look, here we are at the 17 minute Mark.
2 0:43:08 Okay.
We’re at the 17 minute Mark for this video and this video goes for another 45 minutes roughly. The rest of the time he’s messing with these cards. He spends 45 minutes trying to build this out in core Gutenberg existing blocks and knowing that it doesn’t satisfy his requirements and knowing that it’s not going to be exactly what he wants in the end.
Why wouldn’t you stop right there? Why wouldn’t you stop and just say boom this is where I stop working in just with whatever it gives me and this is where I go make my own thing. I go make a custom block and then it ends up being exactly what I want in the end and then I can do.
3 0:44:02 Yeah.
1 0:44:03 So, so how I’ll set it right here.
45 minutes. That’s the point, right? And why wouldn’t I stop working?
Great question, Rob. I don’t know why you’re so confused. 14
0:44:11 Right. 1
0:44:11 I obviously didn’t stop working because I was trying to prove a point, but here’s the other side of the argument. If I was doing this for a client, I would have stopped working.
I would have said, I’m not going to use this environment, I’m not going to use this builder, I’m going to use a more capable more efficient tool. That is the conclusion that I would have come to. That is the conclusion I don’t think you want me to come to.
I don’t think Matt Mullenweg wants me to come to that conclusion, Rob. But since you brought it up that’s exactly the conclusion I would have come to if I was doing this for a client The reason that I didn’t give up the reason I slog through this for the next 45 minutes is to prove The point that it is not a capable builder It is not a capable environment at even at even getting softball layouts onto the page 2
0:45:10 Whatever I want with that block I can keep it for myself privately, I can put it on GitHub and contribute it to the rest of society or humanity rather. I could put it in.
. . 1
0:45:25 Okay, he gets back into like, why don’t you build blocks and sell them and yada yada yada. I’m going to go to, this is going to be, this is called Kevin’s misinformation segment.
Okay, so we’re going to go to 3850. 3850, this is Kevin’s misinformation. uh.
. . fifty thirty eight fifty
2 0:45:43 this is kevin’s misinformation another big section of of this is where we’re gonna go from here we’re gonna go over some of these other bullets that are in his blog post and i’m gonna talk about why some of this is wrong and it’s basically like misinformation uh.
. . and then we’re gonna go into how he like a little trick that he did in here uh.
. . where he essentially takes the anchor tag and makes it like as big
1 0:46:07 as the picture so that you can like tab and it like.
. . I know a few of you have asked for the link to the video don’t worry I’m going to post the link down below in the description as soon as this WDDLive is over I will put the link in the description you will find it actually I’ll pin it in the first comment so I’ll put a comment with the link and I’ll pin it and it’ll be easy for you to find.
2 0:46:31 I don’t know, it affects the whole, he basically wants it so that when you click on the whole background image, it also takes you to the link, but he, for whatever reason, doesn’t wanna wrap the whole image in an anchor tag.
In the video, his video, he says that wrapping the whole picture in an anchor tag, 1 0:46:50
not the whole picture, the whole card. 2 0:46:52
Is not best practice. 14 0:46:54
It’s not. 2 0:46:55
I got news for you. I asked Chad GPT about that too. It’s not a bad practice to wrap your whole button or your whole image.
We’re not talking about a button. Image or whatever. Not talking about an image.
In an anchor tag and link it. It’s not. Sorry, it’s not a bad practice.
In your video, you say it’s bad practice. It’s 100% not bad practice. Your way of doing it works.
The other way of doing it works. They both work. They’re both good practice.
Wrong, wrong. 1 0:47:23
I’ve demonstrated it. I’ve demonstrated how the links are announced when you wrap everything with a link. I’ve literally have video demonstrating it.
Is there any video rebuttal here? Is there Rob saying, no, look, I built a card, I wrapped the whole thing in a link, look how it announces, it’s perfectly fine. And did he magically get it to announce as a list without using any list tags?
Nope, nope, no demonstration, just take my word for it. That’s all these arguments are, is take my word for it, no demonstration. I’m demonstrating everything on video, hundreds of hours of demonstration.
And they think that they can defeat it, which is, ah, just take my word for it, type arguments. That’s super frustrating, super frustrating. For somebody to dedicate hundreds of hours of let me show you why I believe what I believe, and then they just come along, they’re like, nah, nah, nah, nah, nah, that’s wrong.
That’s wrong, just take my word for it, that’s wrong. That’s not the good way to do it super frustrating I 2
0:48:28 Mean, there’s there’s no bad practice in either approach 1
0:48:31 But there is there is people on a screen reader don’t want to have to read out the heading the paragraph The button text that everything else that’s in there when you wrap the whole thing. They don’t want to hear that
2 0:48:42 So let’s break down some of the stuff that’s in here.
Okay so issues I knew I’d run into. The first one, no styliable classes. The Gutenberg Project doesn’t seem to believe that.
1 0:49:00 Here’s the talk down, here’s the, he’s about to, he’s about to educate me right now because I don’t know what the fuck I’m talking about.
So Rob’s going to educate me on this class situation. 2 0:49:10
tools in web design classes are important. 1 0:49:19
Everybody knows the context of that statement that I made. Everybody with a brain and a little bit like you got two brain cells to rub together and you’re not purposefully taking everything out of context. You know exactly what I mean.
That in Gutenberg you cannot put a class on something like this and style it. Everybody knows that that’s what the context is. 4
0:49:42 What are you talking about, man? 2
0:49:44 Please tell me what on earth you’re talking about. If we inspect any core WordPress theme, you’re gonna find a slew of classes being used in here, and every block, inherently, whether it’s a custom block or a core block, it inherently gets its own custom class.
Look, you can see right here, WP block image. There you go, there’s a class, and guess what? The next time you put an image in, it also has that same class.
They all have the same class. So how, and that’s just the image. We can do that for anything, WP block group.
Like there’s classes everywhere in this. There’s a ton of them. A line full, the body has its own custom class.
You could tell if it’s the home page based on the class. You could tell if it’s a blog page based on the class. Like there’s a whole, essentially WordPress has its own custom CSS library built into it by default these days.
It’s just there. Every block has its own unique class and it’s the same class across every time you use the block. 1
0:50:57 Does he think I don’t know this? Does he, once again, it’s not, there’s a disconnect in his head and instead of him going, why is that disconnect there?
I know this guy knows that there’s classes, that Gutenberg uses classes on these elements. I know he knows that. So what is he talking about when he makes this statement?
What could it possibly be? What is the difference that he’s not getting? That’s what he could be thinking.
Instead he jumps right to, you don’t know there’s classes? Look at the class right here. Look at the class on this.
There’s classes everywhere. I’m not a moron Rob you watch me inspect the page you write you watch me write custom CSS on classes that I attach to the element you’re not talking to a moron so stop acting like you are you’re talking to somebody who knows who inspected the page and looked at a bunch of classes so ask yourself what could I possibly be talking about when I make a statement like that have you watched any of my videos and you claimed you did about when I make a statement like that. Have you watched any of my videos?
You claimed you did and so if you watch any of them you’ve seen me use classes and style those classes, you’ve seen how the BRICS workflow works. Why are we acting like this is so unfortunate? It’s so unfortunate and it happens every time someone tries to debate me.
It’s so unfortunate. Stop pretending I’m an idiot and think to step four five six and seven that I’ve already thought to that you actually haven’t thought to yet. Let me show you right here WP block group.
Rob that’s on every group block. Now what does that matter to you? What are you going to do with that class?
Can you do anything relevant? What does that class have to do with our card situation? That I want global styling control over all of these cars.
Does that class identify the card that I’m working on? Does that class identify one group from another group in a different context? Does that class differentiate anything relevant?
Think, think to the next step and the next step and the next step. No, these are irrelevant to the discussion. This is all, let’s just pretend Kevin’s a moron and Let’s just talk about a bunch of irrelevant Factoids right I call them fun facts Let’s just say things that are facts, but don’t actually matter to the context of the discussion.
It’s annoying It’s a waste of time. It’s it but it’s every it’s every video every video so please 2
0:53:32 Explain to us Kevin what on earth your very first bullet point here is referring to. 1
0:53:41 I’ve explained it in hundreds of hours of videos. I don’t know what else to do.
2 0:53:49 The Gutenberg Project doesn’t seem to believe that one of the most fundamental tools in web design, classes, are important.
4 0:53:59 What?
2 0:54:02 Anyway, there’s no unique semantic elements.
There’s no section element. We already talked about this one. Poor HTML flexibility.
Groups can’t be converted into unordered lists or list items, for example. This makes building with semantic HTML next to impossible. Next to impossible?
Really? Because you can’t. .
. 1 0:54:26
Sorry, it’s not next to impossible, Rob. It’s literally impossible. Make a group into a.
. . Just add a little edit there to the article.
It’s literally impossible. List. That makes semantic HTML impossible.
Again, what on earth are you talking about? Let’s go in here and put a group in here. Let’s do it, Rob.
We’re gonna put a group. Here we are with much this hilarious single whatever a column thing that that means yeah And you are going to go to group block select. Yeah, let’s go there go down to htML Yeah, let’s go there too, and we can turn not find a fucking list tag rob.
That’s what we cannot find there. Thank you Where I talk I don’t understand. I don’t understand.
I don’t understand somebody make it make sense makes sense into a bunch of different elements we can we can make them into a bunch of different elements as long as it’s not a list or anything else relevant beyond this simple selection of items 2 0:55:23
ok so why can’t we turn this into into a list great question Rob ordered or unordered list Kevin here he goes gonna repeat the same fallacy that he repeated Well, maybe that’s because there’s a whole other block just for lists. Oh, back to our grocery list. 13
0:55:42 And guess what? 2
0:55:43 It assumes you’re using lists for what lists are supposed to be for. 1
0:55:56 So you guys want to know why I like have an aggressive attitude right? This is aggressive as fuck right here This is aggressive as fuck what he’s doing with this with this thing right here, and he’s wrong at the same time And he’s wrong at the same time So yeah, I have trouble like okay, let’s just let’s respond like a little college professor And no I can’t I can’t do it I can’t do it that’s
2 0:56:30 what lists are for and we can also change what type of a list it is now
1 0:56:36 he’s going to give us fun facts about how you can make it an order or list if you wanted to be ordered look how easy it is okay let’s go on to let’s see 38 50 43 49 okay is there anything else in here change it go quick this is when is Flexbox in.
OK, here we go. Oh, this this one, this one, man. See, these are the ones that get me riled up, dude.
This this just wait, just wait for this one. Then show your set of features. It’s called a feature set.
2 0:57:03 Oh, wait, hold on.
Sorry, we just missed another one. 1 0:57:06
Hold on. I don’t care what you say. 2
0:57:08 I don’t I don’t care. You think this is a list of features?
Bro, that’s not a list of features. This is a set of cards, and those cards represent your features. Is it a set of features?
Absolutely, it’s certainly a set of features. If you want a list of features, then you’re representing them incorrectly by using cards. We already disproved that earlier.
If you just want to show a set of features in cards, then show your set of features. It’s called a feature set. He’s.
. . that’s made up.
1 0:57:48 He just made up that word.
Go into the documentation. . .
find me that in the documentation. It’s not called a feature list. 2
0:57:59 I digress. Let’s keep going.
1 0:58:05 I’m glad you digress.
Let’s move on. 2 0:58:09
Okay. No CSS grid. You’re forced to use.
. . 1
0:58:13 This one’s great right here. This one’s great.
2 0:58:15 You’re forced to use inferior Flexbox controls for all layouts unless you do what I did and write custom CSS.
First of all, since when is Flexbox inferior? 1 0:58:28
We’re going to get our dose of education because we’re morons. Ready? Ready?
He’s going to educate us because we don’t know what the hell we’re talking about. 2 0:58:36
The grid. I don’t know where this mentality comes from. I don’t know who invented this mentality or how this mind virus got spread.
Flexbox and CSS are not, or Flexbox and Grid are not in competition with each other. They’re just not. They are if you use them wrong.
1 0:58:56 There’s a lot of people who want them to be in competition with each other, saying that, hey, like he said earlier, I see four cards in a line.
Let’s just use Flexbox. Nope, nope, that’s an improper use of Flexbox. Let’s not do that.
I never said, see the thing about this sentence, and it’s all about context, and it’s all about this like, just, let’s willfully take everything somebody says out of context. I feel like that’s their entire goal. Is just, let’s just take everything out of context that we can possibly take out of context.
I’m talking about the layout, and layouts like the one that I was using in the example, that we’re forced to use Flexbox when grid is superior in that context. I’m not literally saying that Grid is always better than Flexbox. And I can prove that that’s not what I’ve ever said because I literally did a whole fucking video on Flex versus Grid.
I did a whole video on Flexbox, I did a whole video on Grid, I showed the pros and cons, I showed you that in this situation and not this situation. They act like none of this exists. They just act like none of this exists.
This guy’s a moron. He thinks that grid is always better than Flexbox. That’s clearly wrong.
Let me show him how wrong he is. But it’s only because they ignore all context, ignore all other content that I’ve ever created. Uh, and it’s just that, it’s just super frustrating.
Like, what are we even talking about? 2 1:00:19
Flexbox and grid are two totally different tools to be used in two totally different purposes. Yeah you 1
1:00:30 know what you don’t use them for? Putting four cards in a line when you
2 1:00:33 have grid available.
If you don’t trust me in saying let’s do it let’s do it 1 1:00:38
again let’s go ask Chad GPT. Hey Chad. He goes and has a conversation you can go watch his conversation with Chad GPT it’s it’s another it’s another awesome interaction where it confirms basically everything that I said, okay, let’s keep going to this one a different
2 1:00:54 Will prefer flexbox all times has been a go up
1 1:00:58 Your screen and okay.
He talks about this list view nonsense. That’s nothing that there is like important Okay, let’s go to 49 39 issue that surprises me 49 39 2
1:01:10 We’re getting down to the end. We’re almost done.
We’re gonna wrap this up only available in the site editor and The experience is atrocious. I Don’t understand how the custom CSS experience being atrocious is a surprise to you It was atrocious before and it’s still atrocious and guess what the fact that you’re trying to write custom CSS in the editor That whole concept is atrocious Altogether. I mean you don’t get any okay, you get some linting in there, but let’s be real, it’s like minimal level linting that’s happening in that CSS editor.
But if you did, if you use an actual editor to write your CSS, you’d get better linting. You’d get, you’d be able to use tabs. You’d be able to use a style lint would automatically fix all your linting problems for you.
So if you’re quickly writing a bunch of CSS super sloppy, you can right-click, do the style lint on the file, and it’ll go through and fix your whole file for you. You’d be able to minify your file, your CSS. You’d be able to transpile your CSS.
You can’t do any of that in WordPress. And you’d be able to version control your CSS. You
1 1:02:19 can’t do any of that.
Great ideas, Rob! Why aren’t you fighting for some of this to be included in a professional tool? That would be nice, wouldn’t it?
2 1:02:29 In core WordPress.
So don’t try to write custom CSS in WordPress, bro. 1 1:02:34
How do we come to that conclusion? How do we get, you cannot get there from where we just came from. 2
1:02:39 That’s a bad practice. 1
1:02:41 That’s bad practice, guys. Writing custom CSS for your sites is bad practice in WordPress.
2 1:02:46 No element-based custom CSS.
All custom CSS has to be global, it seems. You can’t attach CSS to specific elements on specific pages, and certainly can’t attach custom CSS to classes placed on elements. This is a tremendous limitation.
Okay, let’s break this down, because you’re saying like three different things here, and some of them are accurate, and some of them are far from accurate, okay? So, the fact that you can’t put custom CSS on any given element, okay, I’ll give you that one. You’re definitely right about that.
I do kind of wish that was there. However, a lot of people are glad it’s not there because people like me do not want to encourage people to write custom CSS into the database because that’s a bad practice. So why should we encourage bad practices?
We should not. With that said, there are plugins that provide this functionality for you. There is a plugin that lets you write custom CSS on a block by block basis and store it in the database.
You can install that plugin and use it if that is your desire. However, there is another option besides using the additional CSS. of all of this because again I’m thinking 10 steps ahead okay I want to
1 1:04:00 be able to create shareable patterns the way that I’ve done with frames I want to be able to package up a pattern and give it to somebody and they can install that pattern and it doesn’t break it works exactly on their installation as it works on my installation so guess what when you give me a solution like well it’s just a third part you’re a third party plug in away from being able to write that custom CSS on the element.
Sorry, that’s a breaking, that’s not a solution. That breaks the chain of what I’m trying to accomplish. Because now it requires the other person to have that plug in also.
He’s going to make a lot of these arguments where it’s like, well, just do this. And he doesn’t even realize it creates 10 more roadblocks that he hasn’t even thought of. That’s why I say I’m already, I’m 10 steps ahead.
We’re talking about surface level nonsense. I’m already gone all the way down that rabbit hole and came back up for air going, that’s a dead end. And then we go down another rabbit hole, come back up for air, that one’s a dead end.
I’ve already done all that work. It’s people like Rob who haven’t done any of that work. They haven’t encountered these roads.
They think that they’re little, like the first solution that pops into their head, because I’m a moron, that never popped into my head, right? But the first thing that pops into their head, that’s gotta be the solution to all these woes, right? Because it popped into their head, right?
But it didn’t pop into mine. Like I never would have considered that. I never would have considered adding a plugin to put some custom CSS.
In a video where I was testing native controls and not third-party tools right 2 1:05:39
never would have considered that in the full site editor that you did not explore and I want to point that out right now so if we click plus here and 1 1:05:47
we look he’s going to show us how to attach CSS to a custom pattern okay here 2 1:05:55
we go for custom HTML in case you weren’t aware the style tag is a custom HTML element. Now, let me rephrase what. .
. 1 1:06:10
And this is the. . .
Again, let’s talk down to Kevin. He probably doesn’t know that there’s a custom HTML box. He probably doesn’t know that you can write inline CSS.
And then that block can be exported with. . .
Rob, Rob, everybody, to everybody listening I already know there’s a custom HTML box I already know what inline CSS is I’ve already determined as you are about to admit in your own analysis that this is a terrible fucking way to do it and 2 1:06:43
that’s why I said earlier okay let me reiterate rather writing CSS in the WordPress editor is a bad idea we agree that it’s totally a bad idea bad idea right not do this I agree ever in some situations we are forced to do a little hacky workarounds or maybe it did like 1 1:07:08
no no no we’re not no we’re not no no in this situation because this is a bad editor we are forced to do it. Let’s go back to my initial argument. You use an inferior editing environment you are forced to do bad things.
That’s the point of the entire video. The return on investment to like go. .
. But he imagines that there is no better there is no better way that this is done there couldn’t possibly be a better way like the the fact that I can literally go in here and go my class and come down to style CSS and have a dynamic root selector that references my class name and I could even break off of this I can export it to somebody else’s site and they can import it and use it with all the custom CSS and it’s still editable and it’s still maintainable and then when Bricks releases component functionality it’s going to go from B level maintainability to A plus level maintainability. This blows anything Gutenberg is doing out of the water, what he’s saying is, oh, well, we have to have these terrible work.
It’s a bad editor. When you have a good editor, you don’t have to do bad things. In fact, you get to do really, really cool things, right?
This is a reimagined page building workflow that he has no idea about because he hasn’t taken 10 seconds to do any semblance of homework before recording a one hour and 15 minute video pretending like I’m a moron and I don’t know what I’m talking about. This is highly frustrating, highly frustrating. It’s not hard to do a little bit of homework.
And like when people, and that’s why I want to build the bridge, okay? And I’m having trouble because it’s, it’s Rob’s attitude gets me fired up, right? No reason for you to have an attitude when you don’t, you clearly don’t know what you’re talking about.
There’s no reason for you to like, make a video. Like, I’m not sure why Kevin says to do it this way. I’m a little confused.
Like I just, I just, in my workflow, this is how I, I see I’ve been in both worlds already. I know the world they’re thinking about. And I know most people don’t want to do that.
And I also know that Matt Mullenweg doesn’t want people to have to do that. He wants people to be able to come from Wix and enjoy their life. He wants people to come from Squarespace and enjoy their life.
I’m on team Matt, I want him to do that too. So don’t tell me we have to write React, create custom blocks and do all these other jumping through hoops and dances and clown shit to be able to get simple little layouts done. When we have environments like Bricks, like Oxygen, like Breakdance, like I’ll be on all team page builder right now, like Elementor, like Divi, okay?
Who have shown clearly way better workflows, way better workflows than what we’re being given with the block editor. This is, um, it’s just, it’s, it’s, it’s all right. Let’s just keep going.
Let’s just get, I don’t want to say anything about, about Rob. 2 1:10:34
And like write our own CSS file and put it into the theme or edit a theme or whatever, maybe, maybe for whatever reason you’re restricted and you don’t have access to the file. System itself, for instance, if you’re, I don’t know, say creating a WordCamp site and you can’t upload FTP, anything to the site and there’s no way to customize the theme or whatever. In those situations, we’ll do this right here.
This here and then it’s going to encourage specific pattern I made. While I can save the pattern I built to the pattern library, the fact that it required custom CSS in a separate style sheet makes it un-shareable. This defeats the purpose of the pattern library.
I build custom layouts in Britain. 1 1:11:16
I actually really love the idea, the concept of the pattern library in Gutenberg. I love it. 12
1:11:23 I love it. 1
1:11:24 The problem is I can’t build anything for it because of what I just showed. The native controls don’t give me what I need.
I can’t write custom CSS and attach that to the pattern so other people can use it without it breaking. I have to have third party add-ons. I have to, I have to, I have to, I have to, I have to.
All these I have to dos that I shouldn’t have to do makes it a problem. That’s why I don’t want it to be a problem. I wanna use the block editor.
I wanna use the pattern library. I love that it’s, that partially sync patterns are coming. I don’t like all these other fundamentals being missed and overlooked and ignored.
That’s what I don’t like. And so I create a simple video to demonstrate that, a very fair video, an unedited, basically an unedited video. And I was calm the entire time that I did it.
And I just said, this is not an experience for me. And it’s billed as an experience for everyone. 11
1:12:14 It’s not for me. 1
1:12:15 It’s not for people like me. It doesn’t do what we need it to do.
And again, Rob, the robs of the world, they come at me like I attacked their firstborn child. Instead of just being like, damn, you know, it’s kind of right. It does need to be a lot better than it is.
It does have a lot of limitations. I don’t, there should not be this disconnect. There should not be this disconnect.
2 1:12:39 .
. . bricks, add them to bricks pattern library and push them out to thousands of users without issue every single week.
This is not currently possible in Gutenberg. Again I’ll just say doing it this way would allow you to do that. 7
1:12:59 How awful, awful. 2
1:13:00 However, again I’m also not going to encourage that. Exactly.
At all. I don’t think that’s a good idea in the slightest. It says while I can save the pattern I built to the pattern library, the fact that it required custom CSS in a separate style sheet makes it unshareable.
That doesn’t make it unshareable. It doesn’t. You know what it means?
It means you’re doing it wrong. Here’s why it means you’re doing it wrong. This is why block patterns are a common part of themes now.
This is why all the full site editing themes come with their own block patterns. Because these styles should be part of your theme. Why should they be part of the theme?
The reason they are part of the theme is because they help change the look and feel of your website which is exactly what WordPress themes are. This breaks the whole concept of the pattern library. 1
1:13:57 A shareable public pattern library. WordPress has one.
We can’t create shareable patterns if we’re all required to use the same theme because that’s not how WordPress works. Again, five steps ahead, 10 steps ahead, however many steps you want to count. He’s not there, they’re not there yet.
They’re just not thinking down the road. They’re not thinking what this could be. We’ve seen like what Bricks did with their pattern library, right, is tremendous.
The remote template library concept. Poor. The ability to share these patterns across multiple sites, like flawlessly, and all the custom CSS is right there, comes with a dynamic root selector, all the controls that we need, all the functionality that we need, query loop compatibility.
They could query not just posts, but users, taxonomies. I brought that up the other day in the Gutenberg world. They looked at me again like I’m an alien.
Why would you ever want to query taxonomies? Why would you ever want to query users? They look at me like I’m an alien.
Interactions, conditions. The Gutenberg editor, it’s not, it’s five plus years in development. It doesn’t even have the bare minimum.
10 1:15:25 Bare minimum.
1 1:15:27 Like, and they think that that’s not a problem.
These problems are solved with React. These problems are solved with custom blocks. These problems are solved with third party yada yada yadas, theme styles and JSON files and oh my gosh, guys, guys, every time you say JSON, every time you say React, every time you say custom block, and by the way, I’m fine, I’m fine if that’s the answer.
If you want to tell me all that? I will accept that as an answer. And I will go down that path gladly.
But don’t also tell me at the same time that this is for everyone. Because that shit ain’t for everyone. Don’t gaslight me.
Don’t tell me you’re democratizing publishing and then tell me react custom blocks, theme. json, custom themes. Don’t do that.
You’re gaslighting me and everybody else. Don’t do that. If you’re gonna build this for everyone, BRICS is way more for everyone than Gutenberg could ever hope to be.
3 1:16:34 And BRICS is not for everyone.
1 1:16:36 And I’ve never tried to say that BRICS is for everyone.
But on the scale of for everyone and for not a lot of people, BRICS is way fucking closer to for everyone than Gutenberg is. Fact. So the fact that they spent five plus years building a for everyone environment that’s still way, way far away from being for everyone is the problem.
That nobody, and again, is this even debatable? They look at me like I’m an alien. They come at me like I’ve attacked their first born child.
I’m just tired of being gas lit. That’s it. And yeah, it’s frustrating to be gaslit for five plus years.
For you to say this is for everyone, it’s gonna be so easy, it’s gonna be so great for everyone and we’re five years down the line and I can’t build a softball layout without React, custom blocks, GitHub repositories, the list goes on. You’re failing the mission, which I can get on board with. Like, I would build bricks and then find ways to scale it down to make it easier for newbies and whatever, okay?
But don’t build to the lowest common denominator user, five plus years of development of an interface that doesn’t have anything near what we need and then tell me it’s fantastic and that it’s, that beginners love it and that if you want to do anything beyond like pushing a pixel around the screen, which you can barely do, that you need react and custom. But I mean, come on, this is absolute gaslighting. And then they want you to not get frustrated.
And they want you to just be all cheery all the time. And like, yes, sir. 7
1:18:16 Yes, ma’am. 1
1:18:17 Like, yeah, you’re right. 10
1:18:18 Yeah. 9
1:18:18 Yeah. 1
1:18:19 WordPress is the greatest. Like everybody, we don’t have to sing Kumbaya around the fire.
Like, you’re gaslighting me. So it needs to be called out. 3
1:18:31 Most of the controls are intuitive. Unintuitive.
Wait, what? 2 1:18:35
Yeah, you read it wrong. Okay, let’s keep going. The fact that most of the Gutenberg editor UX, I’m not going to argue with that.
1 1:18:41 You’re right.
They’re still there. 2 1:18:43
They’ll, they’re still tweaking some things are working on things things are constantly changing as we push out more updates again 1 1:18:57
we’re five plus years down the road and when I have a block spacing dial set to zero the block spacing is not zero and when I touch it I don’t even move it a notch it becomes zero without moving. This is a multi-billion dollar company behind this tool and we’re being told that’s just that’s just things that happen. That don’t happen in BRICS and BRICS is a year and a half under its belt and like one guy and like no money like so stop it stop it this is gaslighting, stop it.
Stop telling me that this is normal. This is not normal. 2
1:19:43 People are contributing their own time to this out of their own free will and not getting paid for it. A lot of people are.
1 1:19:51 Okay, I’m gonna fast forward so we can be done with this.
You can go watch the whole thing. I’m gonna go to 110. 110, 110, 110, 110, 110.
Just prove one last point. I’m just going to prove one last point. I’m going to go with Rob and just say, Okay Rob, we’ll use a third party library.
Let’s just do it. Okay, here we go. 2
1:20:12 Like there’s free block libraries out there. GetWidth, Spectra, like I’m not going to list them all off.
There’s other, there’s blog articles out there. Google a top 10 free. 1
1:20:22 Once again, remember this whole argument is made within the context of Kevin’s a moron. He couldn’t possibly have thought about this as a solution.
Okay, let’s just keep going. 2 1:20:30
Like Gutenberg block library, and you’ll find a bunch of them. I’ll bet you half of them have what you’re looking for. As a matter of fact, I was curious and I looked up GitWid and I looked up all of the blocks that come in GitWid.
Look at what they have here. Look at this. It’s a card that allows you to tab through and select things and click the enter button and go to a page.
It exists in GetWidd. It’s free. You just go to plugins, add new, look up GetWidd, install and activate the plugin and now the block is available in your block editor.
1 1:21:12 Okay, let’s do that.
Let’s do that. All right, so I’ve already done that. Here is the getwid block right here.
I’m going to open here. This is what he says is my solution. Okay, now keep in mind it’s not here’s your layout.
You should, you know, let’s put aside the fact that you couldn’t just build it. Okay, if you want something like that, it’s either custom block or go find a third party block library that has that thing in it. And then what, at the end of the day, Rob, I’m going to have 19 different block libraries installed because all these different things that I needed when I should have just been able to build it by myself.
But still, but still, let’s analyze for a minute because once again, once again, it’s just the first thing that pops into their head. Kevin’s a moron. He probably hasn’t thought about that yet.
Let me educate him on this solution that he should use, which is the third party block library called GetWid. Granted, I hadn’t even used GetWid, but I already know a philosophy, which is I don’t want 18 block libraries for every type of block that I need, number one. Two, all the block libraries that I’ve seen have tremendous limitations, so I don’t really want to be living in that world.
I would rather build it myself with no limitations, the way I can build it in bricks. I’m not talking about a fantasy land, I’m talking about the workflow that I use every day of my life in this other environment over here, okay? And so I went and I found the get with block that he’s talking about, it’s called the banner block.
And it does appear, if I go to the front end, okay? It does appear, here we are right here, that it’s mostly there. It’s not all the way there, because you can’t make the image disappear, but like it can’t do this, right?
Okay, there’s no option for that. You are very limited, but that’s not even the worst part of the suggestion that Rob has, because once again, this failure to think a few steps ahead. I’ve already done the work of thinking ahead.
I’ve already outlined this problem in BRICS. I’ve outlined this problem in Elementor, in Breakdance, in Divi, in all of them. Look at this.
Let’s say I use this getwid card, Rob’s solution, a thousand times. And then I need to add an icon to it because it doesn’t have an icon. Well, look at this, my friends.
It has the same limitation that every pre-built block I’ve ever seen has. You can’t put anything else in it. You can’t put an icon in it if you need an icon.
You can’t put another piece of text in it if you need another piece of text like this label right here. You can’t do a lot of things with it. It does what it’s designed to do and that’s it.
And if you are in a situation where you use blocks like this all throughout a website, you have created an absolute disaster. You better hope Bev does not ring your phone. You better hope that Fred doesn’t come up with a great fucking idea, the way we know clients do.
Because when they ask for something, you’re gonna have to break it to them. Sorry, I used this, so we use this block editor thing, and it doesn’t quite let me build what I need to build. So, what I did is I used this third party block library called GetWid, you don’t even need to know that, but I put those blocks in and long story short I can’t add the thing you need me to add.
It’s going to be very very expensive. That’s a conversation you’re going to have to have with your client and guess who’s not going to be on the phone with you to explain it? Rob.
Right? That’s why I said never ever ever ever ever use a custom block that doesn’t allow you to put things in it. Philosophy number one, base level principle.
Don’t do it. It’s a bad idea. Bad idea.
Well, Kevin’s a moron, because he didn’t know GitWit exists and that they have a block that does this. No, turns out Kevin’s not a moron once again. And that block has the same limitations that I’ve seen every other block have.
And I also know that I don’t need to have 19 block libraries installed to get very simple basic things onto my page Nobody should have to do that Matt Mullen wig doesn’t want that to be your experience Again we cannot we just pretend let’s all context gone all goals gone Let me just prove Kevin wrong in this one little tiny little situation and then still fucking fail at doing that And then they don’t want you to get frustrated and then still fucking fail at doing that. And then they don’t want you to get frustrated. They’re gonna gaslight you.
They’re gonna pretend like you’re a moron. They’re gonna pretend like you don’t know what you’re doing. They’re gonna pretend this is so easy.
They’re just gonna gaslight you over and over and over and over again, and then get upset and play the victim when you make a video like this and you get a little agitated. This is, if you want to talk about like a barrier to progress, this kind of stuff is the barrier to progress. You know what’s not a barrier to progress?
The way that, where’d my blog go? The way that the actual two Gutenberg contributors responded to my initial video. Hats off to them.
This is what the whole goal was. This is what was promising to see. Anne, hats off to you Anne.
Riyad, hats off to you Riyad. This is a productive conversation. This is what we need to continue with.
Truth be told, I want to use Gutenberg. I want to use Gutenberg. The people that make the argument of like it’s native WordPress, it’s like it’s better than having a this completely separate layer.
Well I mean it’s not better if it’s not better, but it has the potential to be better. If it had better direction, leadership. If it was great, I use tools that are great.
Like, that’s the one thing I should’ve proven by now, is if you make a great tool, I’m probably gonna use it, and I’m probably gonna promote the hell out of it. Even, get this, even if there’s no affiliate program. And you know what I’ll also do?
I’ll make a bunch of videos on YouTube and they won’t even have ads running on them because I don’t give a fuck about ad revenue and I don’t give a fuck about affiliate commissions I give a fuck about best tools good practices education quality of the industry you can see it play out and all the stuff I want more ands, I want more reods. We’re gonna build these bridges. Let me go back to the camera, now I’m gonna go back to chat.
We’ve gotta get the robs out of the way. We gotta get the distractions out of the way. We need more ands, we need more reods, we’re gonna build these bridges.
We are going to transform the landscape of front end development in WordPress. That is one of my core missions, like I said in the very beginning. We have to make the block editor better.
We need a good block editor. WordPress needs a good. .
. I’m calling it the block editor because that’s what they call it. There’s some good concepts coming to it.
Partially sync patterns, 100% needed. I don’t know if they’re going to execute on it correctly but it’s needed. Said it was needed in Bricks.
Quickly has it. Cornerstone has it, okay? All these builders need to get better.
We all need to get better with our practices. All of us can improve. Across the board, nobody’s perfect.
Never said anybody was perfect. I’m certainly not perfect. I’ve never said that I’m perfect.
I’m committed though. I’m committed. I’m not gonna gaslight you and tell you that accessibility doesn’t matter.
I’m not going to gaslight you and tell you that the block editor is fantastic, just use it. I’m not going to gaslight you and make video after video just for affiliate commissions and not care what happens to you after that. Those are the things I’m not going to do.
But still people want to attack and have this attitude and then pretend, oh Kevin I don’t know what he’s talking about. Please don’t be 10 steps behind and then claim, I don’t know what I’m doing. That’s a distraction.
That’s annoying. We need more ands, we need more re-odds. We got to build the bridges.
3 1:29:47 We got to make things better.
1 1:29:48 I’m going to the chat here.
And by the way, this gets people’s attention. It gets, it gets, this starts the conversation I could make a I can make a video like a fucking librarian over here like well you know it’d be a lot better if we just kind of did it this way maybe maybe if you guys have a spare 15 minutes you can you can just consider maybe this happens I could do that I could do two hours of that no nobody’s gonna care nobody’s gonna pay attention no nobody’s gonna share it nobody’s gonna comment on it. Everybody’s gonna ignore it.
You have to come out and just be, you just have to say it like it is. There’s too much back scratching, there’s too much like, oh, it’s a free project, oh, oh, real people are, why don’t you become a contributor? I didn’t ask for it to be free.
I didn’t ask for it to be built by committee. I just love it, and I love WordPress. I love the idea of the CMS.
I love what it allows me to do. I love that it’s open source. It’s the best thing available to me.
But don’t use that against me and say, oh, oh, but if you have any criticisms, you should be a contributor. You should just donate all your time to make this project better. No, I don’t want to join the committee.
If I can write a check and just have my problem solved, I would much rather do that. Wrote my check to BRICS, solved a bunch of my problems. Right?
Okay, that’s an example. All right, in the chat. 4
1:31:26 All right, what’s music want here? 1
1:31:29 Let me scroll back up. It’s a bunch of back and forth.
I saw it in the corner of my eye. Somebody, somebody upset. 3
1:31:43 Okay. 8
1:31:45 Um. .
. 6 1:31:47
Mm-hmm. 3 1:31:49
Sigh. Chuckles. Oh, gosh.
5 1:31:57 Uh, okay.
3 1:31:59 Okay.
8 1:31:59 Pretty sure I know who this is.
Pretty sure that this is a, 3 1:32:03
well, it’s mainly one person 8 1:32:04
with a bunch of fake profiles, 3 1:32:07
loves to follow me around the internet, 1 1:32:09
and literally, literally like stalker behavior. Most people have seen have seen the person it’s every profile is fake. It’s it’s it’s it’s Yeah, it doesn’t they should not even be given the time of day.
Okay. Yeah, we’re not we’re not even gonna talk about that. Yes, if you act like a, well, first of all, if you try to sell stuff to my inner circle without permission in people’s DMs, if you then try to get me to sell that thing to them for multi thousands of dollars sight unseen, if you act a fool, if you then act like a absolute psychopath, yeah, you’re gonna get kicked out of the inner circle.
Just like you’ll be kicked out of any group with any semblance of moderation, okay? But again, this person is not, talk about gaslighting, talk about, oh, yeah, yeah. Okay, so this doesn’t even need to be talked about.
There might be another block plugin that does have that one feature you might need. Easy peasy. Exactly.
I think that’s what they, I feel like they can’t be. That’s why I asked him, what am I missing? That’s why I made the video.
What am I missing here? Um, but yeah, they, they basically said you just need a block plugin, like a third party plugin for every little thing you need. And then you just have 19 little block editor plugins and I guess life will be fantastic.
Okay. Somebody said something about like their license being shared for ACSS and it got 3
1:34:02 disabled. Yeah, yeah.
If you are, if you’re just first, usually it’s you’re reselling the license. 1 1:34:07
You know, if it’s, if you’re using an ACSS license and you’re an agency and there’s 10 people in your agency or five people in your agency and those people are using your your license I don’t actually care all that much about that that’s fine like whatever but if you’re just taking the license I could give you the list of sites I just went down another list there’s a list of sites buy it for $4. 99 $4. 99 here’s here’s a license they’re just redistributing it trying to make a bunch of money.
Like, this is obviously against terms. And so, you know, we catch you doing that, your license is disabled. You know, there’s a few different ways.
And I will tell you the amount of, the number of licenses that have been disabled, I can count on one hand. Like, this is not something that happens often. I don’t even look for it all that often.
Usually it’s reported by somebody else. And by the way, we have a way to transfer your license. I don’t even know of any other product that’s doing that in this space.
If you bought ACSS and you just decided one day, I don’t like this anymore, or I’m not going to use this anymore, you could sell it to somebody else. You just have to go through our system. We built a whole process for you to transfer to somebody else I don’t know if anybody else if you don’t like automatic CSS I don’t I don’t want you to use it I want you to use it because you love it so anybody that’s complaining about this type of stuff trust me they did something really fucking wrong because the amount of people the amount of people that have been kicked out of the inner circle, I think it’s like two ever.
Everybody who pretty much is active in the inner circle like knows the culture of the inner circle. They’re awesome, they’re awesome. We rarely ever have problems in the inner circle.
And then it’s like two people total ever been kicked out of the inner circle, out of thousands. So that should tell you one thing right there. And then the number of ACSS license that I’ve disabled, five to 10, somewhere in there, I don’t know.
Like it’s really fucking small. If somebody’s gotten kicked out or had their license disabled, they did something really fucking wrong. Like really wrong.
Like I don’t look for, I don’t care about it all that much. It’s just, but they’ll be the loudest person. They’ll be the loudest person.
There’s people coming in multiple profiles all fake profiles this and that it’s just yeah. 3. 0 sneak peek not quite yet but if you’re in the ACSS group we’re getting we’re getting we’re marching we’re getting very close okay there will be an open call for testing 3.
0. It’s gonna be a small group of people. It’s gonna kind of be a first come first serve situation.
I’ve got like two, three people who I know I want in that group, who I’m just gonna invite into that group. But then, I don’t know, maybe 10 to 15 other people beyond that will keep it nice and tight. And I will say, if you’re active in the community, if you’re like, you know, known for helping people, if you’re known for posting and all that kind of stuff, you have more of a chance of hearing about it and getting selected for it.
So keep that in mind. 3 1:37:51
Okay. Yeah, exactly. As Martin says, people who want to harm your work
1 1:37:55 should be ignored because in the end there’s an equally big stick for everyone It’s um You know, we’re moving forwards like it’s I’m always thinking the next thing the next thing the next thing innovation How can we do this better?
How can we make this more efficient? you’re gonna see that in 3. 0 that the 3.
0 a CSS is a culmination of a bunch of different ideas and things I’ve learned over the course of using automatic CSS myself, watching other people use automatic CSS, you know, it’s it’s constant evolution. As Tyree says here, explain this etch announcement. So that is just, you’re gonna hear more about that soon.
I can’t give any more information right now. I want to, I always want to, I always have to fight myself. I have an internal, there’s like, one Kevin on this shoulder and another Kevin on this shoulder and they’re arguing with each other, but just tell them, just tell them, just tell them what it is.
And the other one’s like, don’t fucking say it, don’t do it, don’t say it. I just I’m always because I really there’s a part of me that really wants you to know. But it’s, it’s not if I release too much too early, it harms things.
Okay, I volunteer as tribute. There’s names that I see over and over again in WDD lives and all that stuff. These are the people that are more likely to be selected when we do like closed door kind of like, hey, test this thing out.
I do have Magic Grid coming. That’s going to be in 2. 8.
So next week will be a 2. 8 release. It’ll have hopefully hide classes in pro mode.
So for those of you who when you turn on pro mode you don’t want to see the classes anymore and the class suggestion that were turned off. Makes total sense. Total sense.
Makes total sense. 2. 8.
That should be yours. You have that now. We’ve transitioned almost every property that matters to using variables.
Hint, hint. I don’t know if that’ll give you much information about 3. 0, but hint, hint.
And it’ll have magic grid. And magic grid, I don’t even think I can, yeah, I don’t think I have the branch pulled up that has MagicGrid in it. I will do a MagicGrid video right before the 2.
8 release that kind of shows the concept of it. It’s a replacement for AutoGrid, number one. So if you’ve used AutoGrids in automatic CSS, this would ideally be a replacement for AutoGrid, but it would be much more than that as well.
It would be a replacement for almost every situation you’re using grid for currently. And so you know the, what I can show you is the difference in the workflow, even though I can’t show it to you working, right? So I don’t think I can show it to you working.
So normally you would have this container which is your grid, right? And let me go ahead and put zero padding on the left of this cause it had default padding. Okay.
So we’re going to come in here and you would go grid three as an example. And this is even easier with, now we go to two and we want two to happen at like the M break point or something. And then at S we want there to be one.
Okay. So what that’s done is it’s created a three column grid on desktop. At the M breakpoint it’ll go to two columns.
At the S breakpoint it’ll go to one column. And because we have contextual menus, you can do all that without writing any classes. Right?
Okay. So everybody is very familiar with this. Now, that’s still annoying.
It’s annoying because you have to. . .
And notice, notice for a minute. This is the initial concept, right? And I’m literally telling you that this part of my product is annoying.
Why am I saying that? Because it is. That’s the fact.
If I did have to do that, if there was a better way to do it, I would prefer the better way. We all would, right? So I’m constantly thinking, like, how do we make it better?
How do we make it better? How do we make it better? Well, there’s this concept of auto grid.
Now, first of all, before we get to auto grid, why is this annoying? Because I have to actively think about things. Like I made it three columns, which was obvious that I needed that at desktop, but it’s not obvious where this needs to break to two columns.
That’s not obvious. It happens to break right there, okay? Now I go to one, that’s where it’s gonna become one column because that’s what I chose but you have to like look at your design at every break point and really figure that out.
So you’re looking at multiple break points here making a manual kind of decision okay and so we add auto grids. So now I come in and we do which I don’t I hardly ever use but here’s like grid auto three okay let me put three blocks in here just so we can see actual blocks. So there’s three, right?
Now, look, it’s chosen to break it to two here. Why did it choose to break it to two here? Well, while this is nice, because I don’t have to think about how it’s going to break at different breakpoints.
Look, it’s stacked it to one column already. But the underlying logic here is not really based on anything super relevant. It’s only based on something that’s semi-relevant, which is your website’s content width.
It’s basically saying, okay, you chose three initially, so we’re going to figure out based on your content width when this needs to break to two, when this needs to break to one, that’s what it’s doing. But if you’ve used auto grids, you understand the limitation of you don’t get to control really where it breaks. Right?
It’s this arbitrary kind of decision that it makes with its own logic based on your content with of your website. Thank you for the super chat, Ruben. I don’t know what it’s for.
I’ll look at that in just a second. Okay, leave leave. Oh my god, damn it.
Okay. Okay. Okay.
Sorry. Sorry. Sorry.
Sorry. Thank you, Ruben. My gosh, Ruben to save the day.
I got to give you your money back Ruben hold on I gotta give I gotta give Ruben his money back. Okay. All right fantastic.
Let me let me Look, this is the best part of WDD live. It’s always the best part. Okay section We’re gonna do this really quick see I go to grid and I go three grid three and I go to M I go 1s and As I was saying, let me put some blocks in there, the fact that we have contextual menus makes that really easy, awesome, simple, fast, okay?
And for a long time, we were like, that’s just great, that’s just, I mean, this is just everything everybody could ask for. You get to control it at every break point. It’s so, like, I did that in seconds.
Man, that was so fantastic, that was so easy, right? But it still sucks, it still sucks, okay? I’m saying it’s still, why am I saying it sucks?
Because I think there’s a better way and so I’m not saying it sucks in general I’m saying it sucks relative to what I know might be a better way okay but then we came up with auto grid so let me just show you auto so everybody saw that so we go grid auto three bang just like that there it is okay oh my god that was so easy right and look at this I don’t even have to make any breakpoint decisions it’s just doing it for me. Man, oh man, a lot of people saw that and they were like, I’m sold, like I’m done here. But I’ll even tell you, that sucks.
Relative to what I might know is the real solution here or an even better solution. We’re never done innovating. So imagine this is grid auto three, but what did I say the downside of the auto grid is?
It doesn’t break at a super logical point. What it’s looking at is the content with the website, which isn’t nearly, nearly as important as the width of an element that happens to live in the grid. Because really what we want is to figure out when does that element look bad?
When does it get too squished by the current number of grid columns. Okay. So I might be able to use a frame as an example here.
So we don’t have to build anything from scratch. So just follow my logic pattern here, right? Hey, let’s use feature card Victor.
Does this look familiar? And then since my current install has these headings defaulting to a different color, we’ll just make that one white. Okay.
So let’s go ahead and let’s get rid of, actually let’s get rid of all this. Let me refresh. Bricks was pissing down its own leg there for a second.
Let’s go back here. All right, let’s open future section Victor. Okay, perfect, perfect, perfect.
Now, this grid is already done for me, but what I’m gonna do is I’m gonna take away grid, well, okay, this is, I guess, just this shows you, right? We had to do grid four here, and then we had to come down here, and we had to choose grid two here with the variable on the custom class, and this is just a decision that we made, and let me take this off. Why did we make this decision?
Because this is the point at which those cards look terrible. We can all agree, right? Those don’t fit.
So what do you have to do with normal grid? Well this is where you change your grid. So you say now it’s going to be two columns instead of four and now the problem is solved.
What is this decision based on? Is it based on the content width of the website like auto grids? No.
It’s based on what’s happening to this card right here. And then I go down here and I change it to one here because if it got to here It’d be too squished if it was still two. Okay, we understand how this works.
That’s kind of annoying So imagine for a second that I could just do this Okay, so I come in here Just take these out and I just say I’m at desktop level. Just imagine. This is the workflow There’s two different ways to do this.
Imagine. That’s the workflow. I just say grid.
That’s all I say. Then I do one other little thing that I’m not going to show you right now. This is the secret sauce.
But I effectively tell this grid what the minimum width of that actual like item in the grid is allowed to be and it’s all done. And every break in the grid from, let’s say, four to three columns, from three columns to two columns, from two columns to one column, is based on looking at that item and going, oh, you’re starting to get a little smaller than I was told you’re allowed to be, so I’m going to change the grid structure for you. And so with one variable and one little declaration, which actually makes sense because you’re declaring something that has to do with the element in the grid itself.
You have a fully responsive grid that will never break and makes all the decisions for you. And you can do the exact same thing by just adding a class called grid. And you can do this for cards, you can do this for hero section, side by side layouts.
In fact, you don’t even need that extra declaration if it’s a two column situation. So if it’s just something next to something else, you just put grid and move on to your life and it’s automatically responsive and it’s all good it’s all fine and dandy right it works if you want 12 items in the car now what’s the downside of it when would you not use this you’re not going to want to use this if you’re going to do a bunch of fancy like spans starts and ends things like that but if you’re doing a lot of the basic level stuff that we do like side by side content, two column content, four column content, three column content all day long. You’re now instead of going through a page and going, let me take this off, okay?
Instead of going, all right, I want to find my grid and I want to go, all right, it’s gonna be four there and then I’m gonna come down here and see, and let’s pretend that none of these are actually on here. So let’s get rid of that one. Let’s get rid of this one, okay?
So none of this work was done for you yet. So you know you want it to be four there, you come down and you’re like, yeah, it definitely needs to be like two there, okay? Grid two, okay, and then I’m gonna come down here and be like, that still looks all right, okay, maybe, oh, there it does not look good, okay, I’m gonna go to grid one here.
That’s a lot of different decisions and looking and analyzing that you need to do. You’re gonna be able to fly down the page going, grid, grid, grid, grid, grid, grid, grid, grid, and all the two columns are already taking care of themselves for you. Anything that’s three or more columns, you put one extra little declaration on it.
I’m gonna show you how to do a quick check, and then you just move on to the next one, the next one, the next one, the next one, and your whole layout, everything about your layout, automatically responsive. You never have to worry about any other breakpoint. I think it’s phenomenal.
I still haven’t built like full sites with it yet. So when it’s released in 2. 8, this is why it’s going to be released behind an experimental flag.
It’s going to basically be like, hey, this thing is available to you, but it’s an experiment and we want you to use it, probably not on a production website, hint, hint, wink, wink, Because it might go away if if we discover that there’s some massive limitation with it that I have not encountered yet Well, we got to pull it right we got it. All right, that didn’t work. Let’s do away with it But I think I think it’s gonna be pretty good And so I want a bunch of people to experiment with it.
And then if people are like dude, this is this is great This is phenomenal. Then we’ll include it It’ll go from experimental to a full feature and then you can use it safely in production But I don’t want to just make assumptions about it. I wanna test it out in the real world and I want people to see if they can find any uh-ohs, right?
And if they report some uh-ohs, maybe we can get around the uh-ohs, I don’t know. If we can’t get around the uh-ohs, then we’ll just take it out, which is why it’s an experimental feature. But just imagine you just go grid, grid, grid, grid,
7 1:52:22 grid, grid, grid, grid, grid,
1 1:52:24 and then in some places, it’s just one little extra little declaration very easy to add and I’m actually looking for easier ways to add it but it’s already fairly easy to add and it just whole things responsive automatically just works all your grid problems are solved I think it’s gonna be good okay I gotta get out of here in a minute I don’t even know how long we’ve been doing this through two o’clock 11 12 once you have my guy three hours okay all right let’s do one question or two and then we’ll get out of here.
Container queries, oh, by the way, this is AutoGrid, this new, I’m calling it MagicGrid. MagicGrid does not use container queries. So if you’re thinking, oh, Kevin, that’s gonna be the limitation, container queries aren’t supported, it does not use container queries, okay?
That’s what’s even better about it. Okay. So when container queries, somebody said it’s at 90 percent, is frames going to make use of this over breakpoints, hard-coded clamps?
Most likely yes, which will be even better with Bricks components functionality in it. Man, things in 2024 guys is going to get amazing. There’s just going to be, it’s going to be so fun.
2024 is going to be so fun. 3 1:53:40
Yeah. 1 1:53:41
Oh, okay. Very, very important point. Please.
Yeah. Please don’t inundate Rob with negative comments, messages. Do not.
If you want to make a comment on a video, on his video, make it productive. Find a way to do a better job than I do at sprinkling sugar on things. Okay.
I’m not the sprinkle sugar guy. And when I do sprinkle, I have to try really hard, okay? But if you can find it within yourself to sprinkle a little sugar on your comments to Rob, then please do that.
Do not DM Rob. Don’t private message Rob. Don’t make everything just out in public, okay?
If you have an anonymous profile or fake profile. Don’t comment on Rob stuff. Don’t message Rob.
Okay. Don’t talk about Rob. Don’t post Rob’s video.
Don’t post my video. I’m, I’m a big fan of like, I want people to be people online. 6
1:54:37 Right. 1
1:54:37 I don’t, I don’t like the, I I’m just not a fan of the full anonymity thing. And we see the problems that causes when people feel like they’re fully anonymous, they just are free to act a fucking fool.
5 1:54:48 Okay.
1 1:54:48 And it’s like, it’s a problem.
It’s a big problem. So be productive in your comments. Don’t send DMs, don’t harass him.
Don’t call him names, don’t insult him. Find really productive things to say. Try to have sound arguments.
Try to back up your arguments with examples. If I’ve shown the thing in a video, I’ve got, you can share mine, like I’ve got plenty of videos. If somebody’s like, that’s not how sections work, just show them the sections video.
Let them see it in action, okay? Like I said in the beginning, I want to build bridges. I don’t want to have all this drama.
The drama comes from being gaslit and like, people, the minute they talk down to me, like, I don’t know what I’m talking about. When I’ve clearly demonstrated it across hundreds of hours, like this is just stupid. It’s just that kind of drama is stupid.
We have to break through that to get to the actual productive side of all of this, which needs to happen. We all agree, Gutenberg needs to get better. We all agree these page builders need to get better.
And we all agree that we all need to get better at our jobs. We all are trying to improve, okay? So we gotta get through the drama, noise, nonsense.
They take it, when I’m direct about something, they take it as, like I said in the beginning, an attack on their first born child. I’m not, I’m not, I’m just, I don’t sprinkle, I just say what I see, okay? I just say what I see.
And a lot of people don’t see what happens behind the scenes with these people DMing me, right? All this trash and like, you know, attack stuff. Them blocking me, them talking shit, like literal, like talking shit, like literally threatening me with physical violence.
Like, I know you’re not gonna fucking do that in person, so don’t do it on the internet, okay? The keyboard does not help you in real life. Like, I just know they would not say that in real life.
So don’t say to me on the internet. Or I will get riled up and I will call you out, right? And I will be way more direct.
4 1:56:58 But that’s what happens.
1 1:56:59 We don’t even see it happen.
And then when I get into like a tussle with somebody, like in a group and they see it, and like, man, Kevin’s real aggressive with this person. Yeah, you know why? There’s history.
That person, I have DMs from that person, right? Or I have messages that they put in other groups from that person. You might not see what I’ve seen from that person and why they deserve to have that backseat.
I think it’s a John Bellion lyric. It’s a great John Bellion lyric. He’s actually talking about his girlfriend, but it really applies.
It’s kind of the philosophy I have. I don’t have a problem if there’s not one, right? That’s kind of what he said.
I don’t have a problem if there’s not one. But if people want there to be a problem, I don’t have a problem giving it back to them. And that’s what you’ll see every single time.
Like, no, I’m not just like, oh, yeah, yeah, I’m just going to like retreat into the bushes and the shadows. Like, if you want there to be a problem, you know, I’m fully sponsored, baby. I’ll give it right back to you.
3 1:58:03 Full stop.
1 1:58:04 Like so, if you don’t want there to be a problem, don’t start the problem in the first place.
And that’s what they always do. They start a problem, and then when they’re like, oh, he didn’t just disappear. Oh, he stood up for himself.
Then they want to act all victim-like. They’re like, oh my God, look at what he’s saying. Look at it.
Check the record, my friend. Check the record. I’m very let’s just facts logic reason the minute it’s like personal attack no it’s on now it’s on now I don’t stand for that shit I hate that shit all right we gotta get out of here man it’s music Still going at it.
Still going at it. John Bellion equals GOAT. I 100% agree.
You know what I’m gonna go next next co-working session with Kevin we’re going we’re going straight John Bellion in the background. That’s what we’re doing. Okay.
Alright guys it’s been fun. I gotta get out of here. Thank you for being here.
I mean we had a phenomenal phenomenal showing today. Yeah, this is just this is this is fantastic. Yeah, Tyree, let’s do a let’s do a work session this week.
Not today. Not today. You guys are trying to kill me.
Let me see, let’s see, what’s keep track of the days. Maybe tomorrow, I think I want to do one tomorrow. Let me get one in tomorrow.
We’ll do a co-working with Kevin tomorrow in the inner circle. Sponsored by John Bellion. It’ll be fantastic.
So if you guys want to join that, you can. It’ll be in the inner circle. And that’s it.
I gotta get out of here. I love you guys. Peace.
Peace. See you soon.