I Tried Building a Layout With the WordPress Block Editor & It Didn’t Go Well

0:00:00 Today, my friends, we are going to do something a little bit different. Actually, we’re going to do something a lot different.

We are going to use the native WordPress block editor and the 2024 theme to see if we can build a relatively simple, we’ll call it an intermediate level section of a page, not even a full page, just an intermediate section of a page. Let me go ahead and show you the example section. So you see what we’re going to build.

Then I’ll talk about a little bit of the background and the approach that we’re going to take today and why we’re doing this. This is a section that we built for our frames library at getframes. io.

It was built in Bricks Builder. It looks relatively simple. The intermediate part about it is that it has a image reveal on hover.

So that image zooms in a little bit, the opacity animates a little bit. It also has the exact same effect on focus. And so it’s not a basic section by any means, it’s not an advanced section by any means.

It’s truly an intermediate level section. And I want to see if I can build this with native blocks. Very recently on Twitter I asked, and you know, kind of jokingly, but when, you know, I was talking about the recent updates to WordPress and how the block editor is evolving.

And I said, when are we going to be able to build a scalable, maintainable website with the block editor? And Matt Mullenweg actually responded and he said, you can already do that as of the last update. And I believe he was talking about the release of the 2024 theme.

And so I’m going to put that to the test. And my background a little bit, I’ve been using WordPress since 2005 I’m not new to WordPress I’m not new to development I have hundreds of published hours of trainings and tutorials demonstrating development I put a lot of focus on best practices and scalability and maintainability of websites and so I’m not a new developer but I am new to the block editor I have not done a lot of work in the block editor. So prior to this video, I did my best to familiarize myself.

I actually still have not built anything in the block editor, especially with native blocks. I’ve used generate blocks for one project and that was it. I don’t have any other experience in the block editor and certainly not with native blocks.

So this is a video where I’m truly a new block editor user. So let’s just go ahead and get started. I have a blank install.

You can see that there is the default pages. I’m gonna go to plugins. There are none.

Remember our goal, my real goal with this is can we do this without any additional plugins? And I’ll tell you why in just a second. And without any special, you know, craziness going on.

Because again the WordPress block editor is built as an environment that’s for everyone, right? And WordPress is for everyone and we’re democratizing publishing. There’s a lot of these catchphrases floating around and I wanna see how that plays out in real life.

How does that actually impact my experience as a developer? So no plugins, appearance themes, default 2024 theme. I’m pretending almost that I am a new WordPress user, right?

If I’m just a developer, I have developer experience, but I’m coming into WordPress as a new user, what is this experience going to be like? So default 2024 theme was already installed for me. I have no plugins, I have no pages, I have no posts except for all the dummy data that comes in WordPress.

So let’s go ahead and get started. I’m going to go ahead and I’m going to trash the sample page. I’m gonna add a new page.

This is gonna be called. . .

Alright, so first thing that’s new. It wants me to choose a pattern. Now I am building what I believe, you know, I see this as a custom pattern.

This is like, and really I would want this to be a pattern that’s almost shareable with people. At least shareable between my projects and my sites. So that’s kind of the approach that we’re gonna take.

I don’t think I want this thing to happen because I don’t want any presets, right? I don’t want anything done for me already. I wanna build my own thing.

So we’ll get rid of that. And I’m gonna go ahead and open up the block panel and list view and things like this. So I do know that the group block is, I’ve watched a video or two, okay?

I think the group block is the thing that I wanna go for. I was trying to get all of my ducks in a row before doing this. I did a little bit of pre-homework.

I’m also timing us, by the way. I’ve noted our time that we started at. We’ll just call it 10.

45 a. m. Eastern, and we’re gonna go from there.

So I’m gonna add a group block. Remember, I want basically a section. That’s what we’re gonna start with, is a section on the page.

I want that to be a semantic section, so it’s gotta have a section tag. I’m gonna have an intro. That’s like a group of content right there, an intro.

And then this grid right here, pretty sure the block editor does not have CSS grid control, so we’re gonna see how that plays out. And then I just need a button that’s down here. So let’s go ahead and start with our group.

Let’s go back to the list view. I know from videos that these can be renamed now. So I’m just gonna rename this section.

I think under the advanced tab, we can change this to a section tag. That sounds good. And now what I wanna do is 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. Perfect. And then I’m just going to duplicate that.

All right. And I’ve checked the keyboard shortcuts and all that. Like I said, I’ve gotten my ducks in a row.

How does this generally go? Because I don’t want to just be fumbling through here the entire time, right? So it did a little bit of homework.

Let’s go ahead and rename this. We’re gonna rename this as, let’s say, grid, just for now. And I guess we’ll choose that layout for that.

Okay, so we’re off to the races. Next thing I want is a heading inside of here. I wanna add another block.

I know you can add, I think you can add blocks over here. Let’s put in a heading, let’s do intro heading, something like that. We do want it to be an H2.

I’m a little confused on where, sometimes I have the plus sign to add another block and sometimes I don’t, and I’m a little confused on that. Like I can do that down here, but that’s not really where I want to add it. So I’m gonna open this up, intro, I’m gonna open that up, there’s intro heading.

Okay, now I can add a block. Well, this is adding it in the grid. Okay.

I don’t know, I just want to add a paragraph, right? Let’s add a paragraph, there we go. Let’s add another paragraph.

Hopefully that added too. The one thing I really, really don’t like is that I have to, like, anytime I go to this, it gets rid of my list view. And that’s just, I don’t, I really don’t care for that.

So this is gonna be our accent heading and I’m gonna duplicate that and then that’s gonna be our lead paragraph. So I’m gonna go ahead and copy our lead text. I’m gonna paste that in.

Okay, now what I wanna do is I want to center all this stuff and I believe that’s where we’re gonna need to, like I’ve looked at these row and stack kind of options. We’re gonna need to go with a stack. We can justify everything to the center.

What I’d like to do is also text align everything to the center on this intro block so that we can use inheritance. But I don’t know if that’s even possible. And it does not look like it is.

So I think what we’re going to have to do is just center this individual paragraph, which is kind of not great because if there were multiple paragraphs in here, like this accent heading actually, I would have to do this individually to every single one. That’s not fantastic. Okay, so I’ve got that done.

Let’s go into our grid now. And of course, the one thing I’m seeing that’s really bothering me right now is the page width, like the content width of this page that I’m editing. I don’t even know how to get a full width template going yet.

We’re gonna have to look into that in just a second. But I wanna get at least some of the general structure going here. So I’m gonna add another group block inside of this.

This is gonna be my card. So I’m gonna rename this, and we’re gonna call this Hover Card, something like that. And then inside, okay, I’ll choose that layout.

Let’s choose a stack. It is actually going to be a stack. And then inside of that, we are going to build.

So I’m really gonna need like a, basically an inner. That’s gonna have my content inside of it. And then we’re gonna have to figure out what we’re gonna do.

Probably just an image outside of that. Okay, so let’s do another group block inside of our hover card and we’ll call this inner. So we’re gonna rename this to inner.

And then I want inside of the inner, that’s gonna be a stack as well. Okay, so I’m gonna click there and I think I have to click here to make a stack. All right, we’re gonna go in here and we are going to add our heading for our card.

All right, that’s gonna be an H3 heading. I’m gonna go ahead and set that right now. So this is gonna say card heading.

My list view disappeared again. All right, is there, I don’t know if there’s a keyboard shortcut to add elements. If there is, that would be fantastic.

Okay, I don’t, yeah, I don’t know. I’m not gonna look for that right now. Oh, that needs to be inside my inner.

Okay, so I have my card heading and then I need to add a paragraph. All right, this is gonna be the description. It’s like a very short description short.

I’ll just I’ll just write it short description goes here The other thing about this is these cards use clickable parent So the heading is actually the link and then we extend that link To the entire card like the clickable area of that link to the entire card this helps Enhance accessibility as well because it actually gives a you know valid a valid anchor text for the link. Instead of trying to wrap the entire card in a link, not best practice, we use the link and extend the clickable area to the entire card. So we’re gonna have to see how we’re gonna approach that.

So we do have a short description here. Let’s bring ListView back in, okay, and then we need the accent. So I’m gonna just duplicate this, that label.

So there’s a little label floating up here. All right, so there’s my label. Now I’m putting the heading first, same thing I did up here.

Even though like this label comes first visually, I don’t, I really want the heading to be first in the DOM. So I’m gonna use the order property somehow, some way, I don’t even know how we’re gonna do that yet. I don’t know really how custom CSS is supposed to work in default WordPress land and native WordPress land.

I did phone a few friends like, hey, where, because I was trying to get my ducks in a row and I’m like, I don’t really see a custom CSS area. They told me one place to look. So that’s where we’re going to look first.

And then we’re just gonna have to problem solve if that doesn’t get the job done for us. All right, so I’ve got a hover card right here. I’m going to duplicate that hover card.

Actually what I want to do, the other thing that we have with these lists is, this is a list of features, 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, so a ULLI list structure.

One thing I wanted to look at is, you know, is that even possible here? So the grid would actually be the unordered list in this situation. So I’m going to go down to the HTML element, and this is kind of what I was afraid of.

It’s just, it’s, 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. 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, which I feel it is, I just have to abandon that because there’s just no path to arriving there with these native controls. Okay, so I’m just going to duplicate the card then and let’s just duplicate it one more time.

And let’s go to the grid, and I prefer to use CSS Grid for this. That’s really what grid is designed for. They want us to use Flexbox in this situation.

I don’t think that this is a fantastic use, because it’s not gonna, if I need it to wrap, the wrapping thing is gonna be a little bit difficult. See, if I allow it to wrap multiple lines, it’s already wrapping, but I don’t want it to wrap yet, and then we’re going to have to set widths on everything, and then the gaps come into play. Flexbox is not the ideal thing to use for this kind of layout.

But I want to try to use the controls they want us to use, because that’s what they want us to use. I want to see what the workflow is like. All right.

So the next thing we need, actually, I should not have duplicated these yet. I’m going to go ahead and delete and delete. Inside of my hover cart, outside of the inner, I want to put an image.

Let’s go with that. There’s an image and we’re going to go to the media library. I’ve got one image in the media library.

We’re just going to use the same image for everything. I want this to be a stack, that’s correct. The other thing I’m concerned about here is, there’s no such thing yet as partially synced patterns.

And Gutenberg does not have a class-first workflow. I would have put CSS classes on all of these elements. I prefer BIM methodology block element modifier for maximum maintainability.

But none of that exists in Blockland, right? And partially synced patterns doesn’t exist. So when I build this section, I think automatically when we’re talking about maintainability, it’s just not there.

Even though Matt has told me it’s there, it’s just not there. 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. It’s a fundamental part of web design.

All right, but we’re going to continue on. So I’ve got my hover card, I’ve got my inner. Now, this needs to be positioned relative, okay?

So relative is not an option. We’re going to go. .

. Man, okay. I don’t know, was there any other options on here?

No, no other options. Because I know that there’s these things where you can like add hidden controls in certain places, but I don’t think position relative is gonna be an option here. We’re gonna have to go into custom CSS land at some point, right?

So what I’m gonna do right now is in hover card advanced, I’m gonna go down to additional CSS classes and I’m gonna say that this is a hover card. All right, and then that would make this the, I’ll just put some BIM classes on there, right? I mean, this is what my normal workflow would be.

So we have hover card inner and then here we have hover card heading Hover card you guys can’t even see this right? Let me Can I move myself? Let me move myself over here for a minute.

So there’s hover card Heading and then this would be hover card. And I think this is the description. And then this is going to be the label.

Hover card label and then we have hover card image advanced additional hover card image. I’m going to go ahead and save our work. We don’t want to get too far without saving.

I think everything now has a custom class on it. Alright, that’s fantastic. I still don’t know how we’re gonna style those classes, but we’re making progress.

That’s all that matters. Now that I, okay, the image is not in my card. Let’s go put the image in my card.

There we go, and I want it to be last. That’s fantastic. Now, let’s duplicate that a couple times.

Let’s go back to the grid. Let’s make sure we’re not allowing to wrap multiple lines. Okay, there we go.

Okay, it changed the orientation on me. I thought we already had the orientation set, it had changed it on me. Let’s go ahead and publish this.

Let’s see what we’re working with on the front end. So let’s view page. Oh, the page has no title.

Let’s just call this home. Okay, and we’re gonna refresh. The other thing that I’m not even sure of yet is how we’re going to get to a like full width section and get rid of Well, I don’t know.

I guess we can keep the header and footer that doesn’t really matter I don’t really want to inspect it. Let’s let’s get the full width thing settled right now, so I see over here I have pages. I’ve got a default template.

I’ve got a page with a sidebar. Let’s see what that does so let’s refresh Okay, I don’t want that Was pretty sure I didn’t want that, but I just wanted to see it. Page with no title.

What does this do? Okay, so it’s the same template, it just doesn’t have a default title. And then page with wide image, update.

Not what I want. Okay, so what we’re gonna have to do is make our own template, I suppose. So we’re gonna go into, I know this has to be done in FSE land now, so we’re gonna go over to the editor here and All right, I see that templates.

I’m just gonna take a guess Here’s the ones I was seeing What is here pages display all static pages unless a custom template has been added? Okay, oh, that’s the actual pages on the website. I guess I don’t know I don’t know I I’m in templates I don’t know, I’m in templates, I don’t know why I’m seeing pages.

Where can I, here we go, add a template. What do I wanna do? I wanna add a custom template, yes, I do.

I wanna say full width, I guess that’s a good name. Good a name as any. I’m a little confused that it wants me to choose a pattern

0:18:40 for the template, it wanted me to do this 0:18:42

when I was first editing it, I’m just gonna say no, how about that? Okay, so full width page. Let’s go ahead and see, oh, okay, now this is different.

Okay, there’s a pattern library, I don’t want that. I want custom blocks. Now in OxygenLand, BricsLand, I believe, QuicklyLand, you would use, there’s a dynamic block that pulls Gutenberg content automatically.

And literally, I think if I just put that on the page and nothing else then we should be good to go. I just need to find it and so I’m pretty I’m pretty sure there is one. Is it under theme, site logo, okay this looks promising.

Featured image, post, post, post, comment form, comments. Let’s search, like content. There’s a content, what is this?

Display the contents of a post or page. That sounds promising. I’m gonna insert that.

Save, save, okay. Enter blocks used content with. I don’t want that to happen, no.

0:19:53 I don’t want anything. 0:19:54

I just want, just pull my content into a blank page, more or less. Okay. Let’s go, let’s stay there, but let’s edit this page.

And let’s pull width. Look at that. Okay.

Let’s go. Hey, we might be in, we might be in business. Now what I need to look for is where the content width of my website is set.

Because right now that’s clearly way too narrow and I and we’re definitely not gonna set that on a Section by section basis that needs to be something that’s just set by default So I’m gonna go to the style book area that I’ve heard about and we’re gonna go I I guess to layout And we do have a content width and a and a wide width Hmm. Well 620 is what if I’m eyeballing it, I feel like that’s like 620. 1366, that’s what I wanna go with.

I have no idea what this wide thing is for. I’m just gonna set that to 1920, because I don’t know, I would assume it needs to be wider than the content. Now we’re getting somewhere.

All right, the next thing I’m seeing is we don’t have any padding in our section. So our content is like touching the screen. I’m also going to see okay we do somehow have a gutter like on the edges of our of our section.

So I’m going to move myself back over here for now too and I’ll just try to remember that I’m sitting down there in the bottom right if we have to do anything else on that side of the screen. Okay, I’m going to go back to the style book. And I’m going to see if there’s any way, typography, browse styles, layout, padding, set the dimensions of the main content area.

Okay, in line, this must be where that padding was set right here. So I’ll just leave that now. This is main content area.

This is not like a section though and this is what kind of is worrying me is that there is no section element in in Gutenberg the the group block is used for everything so there’s no way to denote well I want in this context I like for a section I want it to have default padding there’s no section element um and then in another instance it’s going to have no padding once I don’t want it to have padding in any other instance because I’ll add that padding manually. So I really don’t know how to approach this from like a, you know, just an efficiency standpoint. I know you can add custom styling to all of these blocks, but again, there’s a group block.

If I add the padding to the group block, all group blocks are gonna have that padding. And I don’t want all group blocks to have that padding. I only want sections to have that padding.

So, first thing is, can we even. . .

Okay, just for the sake of moving forwards, I am going to add, let’s go back to our list view, I’m just gonna add it manually, but again, this is not what I want to be doing. I’m actually gonna transform this to a stack. Seems like that, yeah, and then justify everything to the center.

Seems like that would be the way we would want to go for this. And then I’m just going to go into padding. All right.

So block padding, I’m going to do three, four, five, four, five, let’s do five. And then inline padding, I don’t think we need any. Let’s go see how that, well, no, that’s wrong.

What happened to my gutter? Now I’ve lost my gutter on the sides. So I have to put a gutter in manually?

But then what also happened to my site width? My content width that I set of 1366? Block controls.

Oh that’s what happened. When you choose group you have inner blocks use content width, but when you transition that to a stack, you lose that option and you lose your content width. Let’s update this.

Let’s go back here. 0:24:15 If I take that out,

0:24:16 do I lose my gutter? Because that’s really what I want.

Yeah, I lose my gutter. The gutter and the section padding should all be set by default. They should, because I want it to be the same in every section.

I don’t want to be setting this manually every single section. That’s not how I want to do this. Just not efficient, not maintainable.

So I’m going to go back and set my gutter because I have to have one. I don’t like that I’m doing this on a per section basis, but at least it’s not broken. Okay we’re getting there.

Now I want a gap I want a gap between the intro and the grid. So I’m going to come down here border radius block spacing is that what it is? Okay that’s what it is it looks like.

Let’s do four and update and check the front end. That’s more or less doing what we want. I’m gonna go to five though and we’ll update there.

Okay the next thing that I want to do we’re gonna have to start styling our cards. I would like this accent heading to be above my heading, my main heading. I need to do that with the order property.

I’m actually gonna put a class on here. You guys can’t, I guess I’ll just leave myself over here. All right let’s go and put an accent heading class on here.

So basically every accent heading, I want it to be styled the same. 0:25:43 Again, there’s no partially sync patterns.

0:25:44 So like the only way I know of to do this is to use a class, right? Accent heading.

Now the question is where are we going to put all of our CSS because there’s no way, I’ve already shown we can’t do position relative on this card, which means we can’t do absolute positioning on here, which I wanted to do, we’re gonna have to go to CSS. We’re gonna have to go to custom CSS. So what I was told in my like phone a friend session when I was trying to get all my ducks in a row for this, is that in the full site editor, there is this little drop down right here and you can do additional CSS.

Now I believe this is gonna apply globally to the website, which to me is a problem because in the beginning, I talked about this being maybe a shareable pattern. Well, I don’t know how to share the pattern when there’s CSS that lives outside of the pattern. That’s a question I really would love an answer to.

For anybody in Blockland who can answer that for me, custom CSS that has to live, and I know an answer is build custom blocks. But again, this is a for everyone environment. I’m not the custom block guy.

That’s not the life that I want to live because I don’t have to live that life in like Bricks Builder or Oxygen or Quickly. I can just build what I want in the editor. I don’t have to go into JavaScript land or or any other area that’s not for everyone, right?

That’s not for everyone. So again, we can try to use this section right here. I just don’t see how this is creating a, you know, this is not, this can’t be the vision, right?

For creating shareable patterns, for example. So let’s try, I also don’t like the fact that I’m in FSE land. So can I preview the page that I was working on?

Like is that a possibility? Let’s go into, I honestly don’t even know where to go from here. Home, okay, there we go.

Now I can see, continue, all right, fantastic. So now I can actually see what I’m doing. So additional CSS, so if I do accent heading, and I do order minus one.

Whoa, whoa, okay, that’s not good. I’m hitting tab to try to get some, like to actually write some functional CSS here and it’s taking me to the browser bar. So the additional CSS, I can’t even use tab in here.

Gosh, I have to use spaces. All right. So order minus one.

That works. Okay, fantastic. I’m going to come down here.

And I guess we could just get started on our card, right? So I’m going to say what was that called? That was called a hover card.

Yeah, OK, hover card. And we are going to say let’s just test like background color red. Can I?

OK, alright, we’re off to the races so I can do my position relative now. So let’s do position relative. Let’s come down to hover card and then image.

That’s why I like BEM. You know, I just hit tab again and it totally screwed me up. So this is going to be position absolute.

Absolute. Nothing happened. Border, am I targeting it?

Border, five pixels solid red. I am. It’s just not moving when I do position absolute.

How about inset of zero? How about width of 100%? Height of 100%?

This is really aggravating that it doesn’t auto indent at least. Okay, so well what we need to see is if anything happening on the front end. It is.

It is. And now because we went position absolute, my grid is all functified because this is using Flexbox. And Flexbox, I didn’t set a width on the cards.

You know what, I’m not even gonna mess with it. It should not be using Flexbox, so I’m not going to use Flexbox. How about that?

Let’s update. We already put a class on here called, no we didn’t. We need a, let’s just use a utility class.

Let’s just use grid3 and we’ll update here and we can just add some styles to our class. Am I even seeing? Okay I still don’t know what I’m seeing because the editor is different.

Okay let me go back to here. Additional CSS. Okay let’s do a little utility class.

I know this is not, this can’t be the workflow that they recommend, but it doesn’t have the controls that I need, so I don’t really see any other way. Let’s display this as a grid. Let’s do grid template columns, repeat 3 min max 0 1 fr.

Okay, I’m fairly certain I’m not doing anything wrong here. We need a gap of just for now, like two M. Let’s go ahead and save.

Is anything happening on the front end? No. So now what we need to do, there could be an internal wrapper situation, which I mean, I would expect to have seen something happen.

So there’s my section. I also don’t have a main tag in here, which is bothering me. You know, I think semantic HTML is important.

I don’t see a main tag. Here’s my section, let’s open that up. Okay, here’s my grid three class.

Oh, I see, I see, I see, I see, I see, I screwed up. Okay, so there’s no input validation then. So what I really need to do is go see I just kind of did that by default I’m not used to this.

Here’s the grid advanced it cannot have the period. I would say that in that input needs validation right if the period is not going to be stripped automatically and it’s not acceptable then you’ve got to go why am I losing a card head why are my card headings outside of my cards? Okay.

Oh gosh. I don’t know what’s happening here. Okay, grid three, margin block start, Here’s my grid item.

Align items, flex start, margin block start. These items should be spanning full width because they’re in a grid. And the editor is totally screwed right now.

Is this all due to the position at, let’s refresh this page. 0:32:50 Is this all due to position absolute going on right now?

0:32:52 Let’s go, no I don’t want the welcome guide. I want custom CSS, additional CSS.

Let’s go take out this image for just a second. Let’s comment this out. 0:33:03

All right, save. 0:33:04 Now notice things are not broke.

I’m still not sure what’s going on with the spacing in here. Let’s go to the inner image, okay, grid. Let’s go to the block style.

I don’t know how to get to the block styles now, because I’m in FSE land. Let’s do it here. I feel like there’s some default spacing.

I don’t know why this is still messed up. I removed, did I not save it? Save it, refresh, there we go.

Okay. Let’s go to grid. Does it have that block spacing thing?

It was already here. It was already here. Why did I have to, it wasn’t at one.

I rolled the tape back. That was already there, wasn’t it? I just grabbed it and it suddenly removed some ghost spacing or something?

Okay, so we’re kind of back to where we were. I do have a functional grid now though, it appears. Things are working nicely.

I just don’t know, position absolute is really throwing this thing through a loop right here. All right, go to style, style, additional CSS. The minute I uncomment this, okay now maybe it was that, no it’s still not, it’s not able to handle this properly.

Yeah that’s, wow. Alright so let’s try to clean this up for just a minute. So hover card image, width 100%, height 100%, position relative, that should be conforming to the card for for sure.

I’m just gonna put a display flex on here. I don’t know why it’s going outside of the card. It’s set to width 100%, height 100% of the card that it’s positioned relative to.

For now I’m just gonna, I mean we’re gonna have to do this anyway, so I’m just gonna hide overflow. Hover card, display. I just hit tab and now I’m up there in the in the browser editor.

I don’t even know what this is gonna do to my site now. All right, so display flex, flex direction. I’m just not even gonna indent anymore.

I mean, this is kind of an atrocious experience. Flex direction of column, none of that is gonna matter at all. I don’t know what is going on in the editor.

The image should not be affecting the width or height of anything because it’s position absolute but it’s not rendering it position absolute. Maybe it was being overwritten, maybe the absolute was being was being hidden. Let’s do a z index of minus 1.

Let’s put it in the back, okay. I guess I probably should have inspected before. I didn’t, because this is not a problem in bricks when I when I do position absolute on an image it goes position absolute I don’t have to use importance for things.

Alright hover card, hover card image we’re kind of getting there let’s hover card enter and for this we’re going to say that the padding is 1M let’s do 2M that that seems to work fine. For our hover card, hover card label, we want that to be, oh god I hit tab again, order minus one. We still don’t even know, I don’t even know what’s gonna happen with fonts yet.

We can take the border off of the image now, because that’s super ugly and not important on our hover card. We’re going to do a border radius of We’ll just say 1m for right now All right, that sounds perfect All right, we’ve got our inner working now for our hover card. Let’s do a min height of 400 pixels pixels.

Let’s do 450 somewhere in there. I like that. Maybe border radius.

Let’s do, let’s do. 5 rim. How about that?

All right, good. So now the inner hover card, uh, display flex flex direction column. Okay.

Let’s do the inner at height of 100% but really it just should just be flex we can probably flex one and yeah it looks like it looks like that’s doing the trick for us so now what I want to do is probably in the inner we can also make sure this is display flex while I’m here I mean I can use the controls for this but I you’re not I’m not assigning the styles to classes at that point. So I’m losing the maintainability. The only way I can see to get the maintainability aspect going is to write this custom CSS.

Flex direction of column, and we want to use, let’s do justify content space between. Those, the card heading and the description are not grouped together. So the easiest way that we can do this is just on our heading.

So there’s our inner, let’s put our heading under here. So we’ve got our hover card heading, and we’re going to say that the margin top, and we’ll do margin block start of auto hover card heading. I think that’s, I put hover card heading on there.

Hover card heading, it is. Let’s see if margin top works. Margin top of auto, hover card double underscore heading, margin top 5m.

Important. Oh, it’s another issue with CSS not Import it. Oh, it’s another issue with CSS not being.

Okay, let’s put that back where it was. So our DOM is correct. Wow.

So I need auto important in order to get that to work. Okay. In our section here, let’s go ahead and set a background color.

How are we gonna do this? Let’s get out of custom CSS for a second. One thing I wanna do is get that charcoal background color going.

Section, I’m sorry guys, I’m just really struggling with this. This is not where we wanna be. We wanna be back, we gotta get out of here and we gotta edit the page over here Okay.

Now let’s access the section Let’s go to our backgrounds backgrounds. I Don’t really care at this point. I just want to get get to where we’re trying to go Okay, update.

So this heading right here, intro heading, text, white, fine. In my cards, I need to do that with custom CSS. So for this, we need to go back into FSE land.

I don’t know the best way to get there. I’m just going to go edit site from the front end. And I guess we edit, can I edit pages here?

No, there’s no pages. I guess I go back to my full width template and hit edit there and then I have to choose my homepage here. And then I have to go up here and then I have to go to additional CSS and now I’m back.

Okay, so card heading, color white. Awesome, good. Awesome.

0:41:11 Good. 0:41:12

Now, I’ve lost the background image or the image because of the z-index minus one. So on our grid, which I don’t have a unique class for, I need to set, how are we going to do this? Okay, let’s select the grid.

And now I can’t put classes on the grid from here. So I do need to have two instances, I do need to have two instances open. Let’s get back to the front end, view site, okay?

Let’s go to edit site, no, sorry, edit page. Get me to the homepage, edit page. I have to have an instance open here to be able to add classes to an element.

So I’m gonna go to grid, I’m going to go to advanced, and I’m going to go down to, let’s say, hover hover card grid. All right, update. Now here in additional CSS, I can go hover card grid.

Can you guys see all this? You can. Okay.

of isolate. And I don’t know if this refreshed yet. There we go.

There we go. Now we got our, now we got that back. Let’s get back to our additional CSS area down here.

Okay. Guys, we’re getting there. We’re making a little bit of So what I want to do now is on this image, I would like to set a scale.

So we’re going to go from zero to, because we’re going to transition this a little bit. First thing I want to do is opacity of zero. That’s my default.

Then hover card image, hover card. Now what I really like to do is. Hover card yeah on hover card.

I want to get some locally scoped variables going, so this is going to be start. Opacity is going to be zero end. Opacity is going to be point three somewhere in there.

I want start scale to be 1. I want the end scale to be 1. 1.

So a little bit of zoom. I want the transition speed to be 0. 3 seconds.

I want the transition function to be ease in and I think that’s good to go. So hover card image. No, it’s going to be hover card hover.

So our opacity is our start opacity. So we’re going to go here. Start opacity.

Awesome. And then when we hover over the hover card, we’re going to bring, 0:44:25

I could actually put the startup, 0:44:27 I could just do opacity, and I’m used to doing it like this for our frames library users, so that all controls to edit a component are at the very top, and they can just go bang, bang, bang, and they don’t actually have to analyze what’s going on in the CSS, that’s why I’m doing it this way.

I fully understand that there’s a different way you can use locally scoped variables, it’s a little bit more efficient than this, but this is easier for the end user. It’s also easier when I come back three months later to kind of figure out what’s going on here, to make some like adjustments or whatever needs to happen. Okay, so when I hover over the hover card, the image is going to go to opacity, and that’s going to be end opacity.

All right, let’s go ahead and save this. Let’s go to the front end. That’s not the front end.

Let’s go to the front end, preview in a new tab. See, that’s what we’ve got going on. So now what I need to do is go to hover card image.

This also needs to be object fit of cover so that we stop warping our image. All right, let’s see if that worked. That still looks warped.

I’m guessing now. Now I’m learning. I’m learning.

Okay. I’m guessing now that um the object fit of cover Where did object fit cover go? There we go Probably needs an important or something Refresh no, it does not uh Okay, what is the new uh fun thing that we have to find here today.

Okay. Yeah, yeah, yeah. HoverCardImage.

Okay. So the HoverCardImage, this object fit cover, really needs to go on HoverCardImage, image, object fit cover, important, save. Let’s just see if that gets us to where we want to go yes now do I need the important on it that’s the next question save save refresh refresh that doesn’t is that still warped I don’t think so I think it’s alright I think it’s okay okay now problem is when I hover over the card, I get opacity, end opacity, but end opacity is 0.

3. And that is clearly not 0. 3 when it hovers.

That’s a hundred percent opacity. So let’s go to hover card, hover, hover, state. Is that my hover card?

No, here’s my hover card right here. Hover. Great.

Where’s my image? Right here. Probably.

. . opacity.

Ah that’s my fault. That’s my fault. I spelled opacity wrong.

Opacity. Okay. Now let’s go to the front end.

Okay. Now we’re rocking and rolling. I want this to be a it’s kind of a very low contrast Card style so save save we’re gonna go with like a point for awesome.

Now. We just need to transition that opacity in So on our image right here hover card image image transition Opacity and we’re going to use our transition speed And we’re going to use our transition function Okay, yes, oh that I thought I thought that broke something all right Hey, look at that all right. What is our transition speed set at point three?

Let’s do a point two Let’s do point two five. Let’s just dial that in. Okay, so the next thing that we need, we got that going, we need to scale.

So hover card, image, image, we’re going to say scale, and we’re going to say scale start, is that what we called it? Start scale. If you don’t know, if you don’t watch me, I am dyslexic.

I constantly get things backwards. So there’s our start scale, and then I’m gonna come down to hover card image, image right here, and I’m gonna say end scale, save, save, refresh. All right, perfect, and then we need a transition on that.

So we will say hover card image. I really, with no indentation here, this is killing me right now. Alright, so let’s steal this transition and let’s say actually we don’t even need to steal that.

So we’ve got transition. Let me bring this to a new line transition opacity comma and then we’re going to. We are going to steal this line right here and we’re going to say to do the scale at the same transition speed.

There we go, there we go, nice, nice little reveal action. Okay, I’m not convinced that that’s not still not object fit cover. So object fit cover, I am going to import in that.

Let’s see if we get a difference here. Let’s refresh or actually No, I guess we’re fine. Just comparing those two.

Okay, it’s not, I could have chose a better image. It’s not the best image. Card heading, all right, we’re all good there.

What we do need is on the cards, we’re going to have a background color. So hover card, let’s drop in a background color of var. Now I’m used to using variables, we can’t do that.

Let’s do HSL. Let’s do 365, sorry, 365, 100%, 100%, there we go, and 0. 1.

Awesome. Okay. Save, save.

Fantastic. Now, now we’re getting somewhere. Label, label, label, label, label, label.

We haven’t done anything with our label yet. So hover card label. Oh no, I did, I did.

I did the minus one, it’s right there. Okay, so that needs a background color. We actually need a variable.

I like, really, really hate working without variables. I’m used to like automatic CSS. I have a whole variable library already at my fingertips for all this stuff.

Hmm White trans 10 and then I want to steal that HSL string that I just had which because this is has zero organization to it. I can’t even really find Here it is right here We’re gonna change this to var white trans 10. All right, and then we’re gonna drop this up here.

Save. This is all like, you know, with automatic CSS, all this maintainability is all built in already. Like having to do this stuff by hand is truly a nightmare.

It’s why the environment that you’re building in needs to have already thought about maintainability and scalability and built-in controls for this. When these controls don’t exist, I mean, grid doesn’t even exist. When these controls for like classes and stuff don’t exist, you’ve got to do a lot of stuff by hand.

Or you just say, I’m not going to build a maintainable website. That’s the other option. That’s what most people do.

But that’s not me, right? That’s not what I teach. Okay, now the object position is off.

I don’t even know, yeah, not in the front end, just in the back end. I’m not getting what I want. I mean, it’s starting to get frustrating at this point.

I really want to give it the benefit of the doubt, like the fairest look and approach. I feel like I’m being as fair as I possibly can be, but it’s actively getting frustrating right now. Especially this hopping back and forth between the editor and then FSC, and then I’ve got this style sheet over here on this tiny, and I can’t indent things, and it is really getting frustrating right now.

And then the thing is hidden every time I’ve gotta come back and I’ve gotta click here, and then here, and then here or then down there or whatever. I mean there’s no way. I mean I’m working on one section of a site and I, there’s no way.

This is not organized. There’s nothing that I want. Nothing that’s anything like my normal process is going on right now.

But I’m going to keep forging ahead. I’m going to keep forging ahead. So the next thing that I need to do is I get we need to get this card heading extended to I need to make it a link we’re just going to do a pound sign okay let’s do that I need to get this to extend the entire card so the way that we’re going to do that is we are going to go into our heading area I’m just gonna add this right here.

All right, so hover card heading A. Now, I assume it’s putting the link inside the heading and not wrapping the heading with a link. We got to check the DOM, I guess.

Well, I guess I can just check it right here. So, border 5 pixel solid red. Okay, so that’s that’s fine.

We’re gonna say text decoration is none. We don’t want that. All right, so that removes the underline.

Now what I’m going to do is add a before pseudo element. And we’re going to say, hey, your content is blank. And then we’re going to say, display flex and then position absolute and inset of zero.

And that should extend that to the entire card. And it does not. And actually, in fact, it’s doing absolutely nothing here.

0:54:56 I don’t even see the link. 0:54:59

Okay, I updated. I’ve got the link, I say, oh, is that because I did that in this editor? No, that should still work, right?

Oh man, it did not. Yeah, it did. Yeah, that’s still got a link.

Why? Where’s my link? Inspect.

Oh, there’s the before and it’s on the cart. Okay, now it’s working. Dude, I don’t know.

Now that’s going on the clickable card, so that’s fine. Now what happens, all right, see when I focus, that’s what we’re gonna get. So what we really need to do is remove the focus style because we want the focus to trigger the same hover effect.

So what we need to do is on our card, hover card image, we’re gonna come down. Oh gosh. Okay.

We’re gonna say hover card Hover card focus within Now my brain starting to get a little bit fried alright, so hover card focus within Outline none, I think that’s an outline I have I got to check that there it goes now now we’re gone now we’ve got that removed okay so now now what we need to say is hover card focus within so if there’s a focusable element in this in this card what we’re going to do is we’re going to use an outline of one pixel solid red just for right now I need to spell red properly save save I hate the double save thing awesome we got that all right let’s take a look at our original so we need four cards instead of three probably should have recognized that from the beginning so let’s go just duplicate one of our cards, and then we’re gonna go back to our grid, and we’re gonna change our grid to, oh, I can’t do that here. I’ve gotta do it here. Okay, let’s go back to the grid, and we’re gonna change this to grid four.

Okay, we’re gonna update that, and now we have to go back into FSE land and we have to go back into additional CSS and take our grid 3 and make a grid 4 and yeah normally I wouldn’t put the gaps in here and all of that but I’m just trying to trying to get this stuff done not not even worrying about all those finer details yet okay card heading short description let’s see the front end, there we are. How do we look? Okay, it’s really just the minimum height kind of thing going on here.

Uh, which, where do I go? Where do I, I gotta, oh gosh, I gotta go here, I gotta go here. All right, um, card, hover card, hover card, hover card, min height, 350, save, save.

Refresh, compare. Okay. Not quite as, not quite as sexy.

I mean we’re very, very, very, very close. Let me see how we are for, alright, so responsiveness now. Responsiveness now.

We want, we want that grid to change. Because I have no grid controls, that’s what makes this really frustrating. 0:58:56

All right, I named this, 0:58:57 I gave this a hover card grid somewhere, hover card grid.

Let’s bring this to the top, hover card grid. 0:59:06 We’re gonna transition all of this

0:59:07 into this main class right here, so that I can drop in a media query. Actually let’s do auto fit and say min max 0, 320 pixels, 220, 240, let’s say 300.

Oh, I’m sorry. This needs to be, I don’t know, my brain has thoroughly been fried. So the minimum is 300 pixels, and the maximum is 1FR.

So let’s save, refresh, and now that’s gonna make that automatically responsive. 0:59:56 Perfect.

0:59:57 I need a max width on that heading, but I’m afraid to do it. Let’s go height, dimensions.

1:00:06 Is there a width? 1:00:07

There’s no width. 1:00:08 How do they want me to control the width on there?

1:00:11 All right, let’s just do it on the group. So we’re gonna go to intro, and we’re gonna go to dimensions.

No width. No width. I feel like that’s kind of like one of the most basic controls.

1:00:35 Where is the width? 1:00:46

This is height. It’s the only thing I have available to me. Literally can’t, cannot set a width.

That is insanely frustrating. Like I’m so close, that’s such a basic thing, they already have dimensions for height. Why would fit, fill, and fixed height be more important than the width of an element?

All right, I’m just going to leave it like that. At this point, honestly, I’m just ready to kind of call it quits. I’m going to check the total time.

Obviously, we’re going to cut this up just a little bit, make it a little bit more palatable for the end viewer. But this is kind of where we’re at for for the day Give me your thoughts. Let me know what you think of the experience and if you feel like is This what you expected it to be is this how you think the WordPress native block editing experience should be Again, we haven’t even gotten into like how do I turn that into a pattern that other people can use?

I mean I wrote so much custom CSS. That’s not at all attached to this specific pattern. I just, there’s a lot of unanswered questions and a lot of general frustration, but I’m going to do a full write up, drop comments below.

Let me know what you guys think. I’ll be back with another video very, very soon.

Peace.