LIVE Building a Blog Post Template in Etch (User Request)

Hey everybody what’s up what’s up what’s up we are on a I got a brand new computer I’m on right

here it’s I don’t know if everything’s working go ahead let me know if you can hear me see me all

that good stuff I mean my end it looks good so let’s see we got a man in the house Thomas in the

house Alexander this was kind of an off-the-cuff stream wrong like oh yeah okay good yeah good call

call test ssss correct mic correct mic

okay

audio audio audio I gotta wait for the delay to now see if we’re on the correct audio channel

okay good fantastic okay so uh this was off the cuff I I didn’t I didn’t plan on doing this in

fact um multiple people yesterday asked about templating in etch um there’s there’s people

using etch now which is fantastic you know there’s etches in the wild which is great people have been

asking about templating and I said one I I uh yesterday I started to get a a bad cold and last

night wasn’t great but I said if I feel better today I’ll do a live stream and I’ll I’ll walk

through some templating stuff I don’t feel all that much better today but I I’m still gonna do it um

because I have nothing else to do so uh we got the new version of etch out today we’ve got a new version

of acss uh that’s for etch only right now um so if you’re an etch user you can I’m gonna update it

shortly you should grab the latest copy of that and put it in um so we’re gonna we’re gonna walk

through some templating today somebody in the chat said make sure you go nice and slow uh so we can

follow along easily I said I have no choice but to go nice and slow because I’ve only ever built one

blog post template in etch and that was weeks ago and I haven’t done it since then and I’ve actually

been in travel mode and europe mode and all this I haven’t even built much of anything so uh you got

to get back in the in the groove you know what I’m saying like it’s you can’t just pop right back in

and and go to the race so um yeah we’re gonna we’re gonna walk through it uh the etch cap is coming

toby um I’ll put that up on the screen yeah the the etch cap the etch cap is coming where how do I

position okay what do I want to reposition this thing I don’t even know I don’t even know okay I gotta

change the style of that what is no oh I can okay I can change that I got a new version of ecamm too I

haven’t messed with anything I don’t care like all these bells and whistles like just do the thing

you know what I’m saying why ah all these settings okay uh let’s see if we can screen share let’s go

ahead and see that oh look the new version of ecamm it gives you this nice little look at the little

fade the little animation look at that look at that okay that’s a little that’s a little slicker

okay um you spent all your money in europe now you’re coming back to earn some hey maybe maybe uh

and the czar maybe um no we’re we’re good uh we got rob in the house bra bra is love welcome welcome

nick cast jamie’s here surge uh see me you got we got a good amount of people for an impromptu live stream

so we’re going to open up 0.24 and I think the first thing that you have to understand about templating

in etch by the way we have this new little launch etch button never even clicked it before let’s see if it

works um see it just takes you into etch there you go why because you can go well right now you can’t

but eventually you’ll be able to go wherever you want to go inside of etch you don’t even need to

worry about wp admin all that much uh but like we’re going to do templating I can get to templates from

right here um so I just need to get into etch like as quickly as possible so the first thing you need to

know about templating in etch is it it 100 respects the default wordpress templating architecture so if

you are familiar with the wordpress architecture for templating then you’re already familiar with how

etch handles it because etch in fact just like we write everything to blocks in etch right everything

uh gets written to gutenberg blocks auto block authoring templates that are built in etch get

written to fse templates in wordpress okay so if you actually go into fse land in wordpress after

you’ve made some templates in etch you will see those templates sitting there in the fse area of wordpress

because this is again I’ll say it again because people like to say I want to be close to core I want

to be close to core there’s no better you can’t be closer to core than by using ash like it literally

is core you just don’t have to deal with core okay like but every all of your data gets stored in core

uh which is again there’s there is no closer because it literally is the thing so uh all of these other

like you know block third party proprietary block systems are like well I like that block system because

it’s in the block editor it’s close to core it’s not it’s a proprietary layer sitting on top of it

and it has all of the same risks that come with something like bricks but etch doesn’t have that

problem because it literally is core it writes everything to core um so yeah uh let’s go into

templates and what you’re going to see here is you’re going to see some just defaults off the bat so

there’s a 404 error template there’s this thing called a catch-all which is an index template

and then there’s the home page for your blog post archive uh which I never use I never use this

template I always make a blog page and just that’s how I do my blog um and then I’ll do a single post

template for blogs now if you register custom post types they will show up here as well every custom

post type that you register will show up as another column here and then you could see what templates

are created for those custom post types and it’ll even tell you what templates are still left to create

like hey you haven’t created this one yet do you want to create it and you can just say

create it and it’ll create it and then you can edit it you can move on um but what we want to start with

is this catch-all um now there was some confusion about and by the way um volume up a bit um that might

be your speakers I don’t know this volume is where it’s always at oh test ss12 I don’t know why this

test ss12 I don’t know why this is the volume is hitting the peak is anybody else having a volume

issue I wouldn’t think that it’s on my side because the volume is at max

just say volume good or volume bad in the chat before we get too much deeper into this

make sure okay yeah squinting yeti said just turn your speakers up uh mario said it’s perfect okay

yeah sylvia says okay volume good all right I think it’s a you problem okay so um one thing key

difference let’s talk about header and footer headers and footers are not templates I know that

every other builder tries to call them templates they’re just not templates if you look at um

if you look at atomic design principles for example headers and footers are not templates

a template is a page a dynamic page of content something that generates other pages that’s what a

template is a header and a footer should be components okay components can live in a template

or they can live on a page they can live anywhere but they’re not templates in themselves and so one

thing we have to do is really get the terminology down and I wrote a really good blog post which I think

everybody should read um if you go to giri.co slash blog um and we just it’s like it’s the latest one

okay it’s a call for better naming conventions in page builders and it goes into great detail

as to why names either make a lot of sense in the work that we do or don’t make any sense at all and we

really need to start standardizing this we all need to start speaking the same language because right now

there’s just too much confusion and things just don’t make sense because we’re using bad terminology

um so I would highly recommend you read this article as well but in etch etch does things properly so in

etch we don’t call headers and footers templates because they’re not templates they are components

and so what we want to do is we want to go to this catch-all template and a catch-all template is

essentially a template that if there’s no template assigned to the thing then this template is going to

take effect okay so if there’s no other template assigned that’s more specific than this one

this template will take effect so I’m going to go ahead and edit the catch-all template and you’re

going to notice that there’s already by default if you’re using the etch theme it’s a there’s a

companion theme for etch it literally does nothing except allows us to hook into fsc and the block

editor that’s all it does it doesn’t do anything it’s it doesn’t manage your site’s architecture it

doesn’t it doesn’t do anything etch does everything the theme just allows us to hook into

wordpress okay so but what one thing that we stuck into the theme by default is a main tag and then

this thing called a content slot okay and I’m actually going to put I haven’t even configured this

builder layout yet and I’m going to turn off javascript because we don’t need that right now

okay so there’s this thing called a content slot what a content slot does is it pulls in content from

gutenberg so whatever the whatever the gutenberg content is going to pull that in so we have main

we have content slot which means if I go build something in etch which is writing to blocks

and I go view that on the front end that all I’m going to see is everything that I put in etch

is going to be rendered inside of a main tag and actually that should be main okay just like that

so we have everything inside of a main tag and I’m going to go ahead and hit save now I’m not done

here right this is where you probably want to put your header and your footer and you put them around

the main tag okay so we would have a header and then main and then we would have a footer now we might end

up starting you out with like a basic header component and a basic footer component that are already in this

template if you’re using the theme we haven’t decided on that yet but right now you you build it

on your own okay so the way that I can do that is I can do a section right here okay and I just want

the section structure of like an outer wrapper and an inner container kind of thing but I don’t want

it to actually be a section right I want it to be a header so I’m going to bring that up there and as you

can see it lost all of its default padding that comes from automatic css because it’s no longer a

section it was having section padding applied but it’s no longer a section it’s a header so it’s not

going to have that anymore and I could just duplicate this and I could drag this down and um essentially oh

I dragged oh no I did sorry let me let me do this as footer because I’m dragging I’m looking at things

incorrectly okay so I now have let’s just collapse these so you can see you can also just expand

collapse all together here header main footer this is like this is the sandwich that you want to see

so the top piece of bread is your header the the meat in the middle that’s your main and then the bottom

piece of bread is your footer this is the structure that you want to end up with now inside of this

container we can do things like we can drop in an svg and so we can get a little logo that’s the old logo

okay um but that’s okay I don’t have any media on the site or anything else we’re we’re just going to

focus on the uh the architecture of what we’re trying to do today we’re not gonna when I do the

blog post template I’ll put a little design effort into it but otherwise we’re just really looking at

architecture here okay so I have a svg which I could call my uh logo okay and then what I want to do

is maybe start putting in a navigation okay so how would you put in a navigation well I can come down

here after the svg uh there’s a lot of different ways I could do this one we will have a nav element

at some point so you will just drop in a nav element and you’ll configure it and you’ll move on with your life

and it’ll be great uh but you could always do anything custom that you want to do as well you could use

immit to create a little navigation which I’ll show you in just a second you could use claude or grok or whatever

llm agent you want to use and just say hey make me uh in fact we can look at that in just a second we

can say hey make me a basic uh website navigation okay um there’s this whatever you want to do however

you want to do it that’s up to you right if you want a little extra real estate you can get more real

estate here if you’re going to be doing stuff down here in the box right um well let’s look at immit

because that’s kind of new to uh to etch so if I just start putting the tags right and I want to do

um nav.nav so that’s going to be a that’s going to be a nav element with a class of nav right um and

then inside of that what I want is an unordered list with nav list and inside of that I want a li

with a class of nav item and inside of that I want a link and I want the link to say um nav link okay

and I want this to have an href of pound sign and I want you know li let’s see li nav item I probably want

maybe five of those okay and so now you could you could see the preview down here of what this is going

to expand out into um and so if I hit tab boom I have a nav okay just like that and if you look up

here because I used bim the structure panel is already labeled for me so everything is already organized

because I use bim and what etch does is anytime it detects bim it uses the extensions as your labels

uh so that’s super helpful too so look I just I just created a nav and it’s got classes on it right

and I can go select it right here and it’s got my little uh class on it and now I can say like hey

you need to be display flex flex direction actually this is not on the nav that’s not going to do us

any good we need to be on the list because the list has the items okay so we’re going to say like that

we’re going to say gap of 0.5 m 0.5 m hard to type today I guess um okay that’s good and then on this

container right here what I might do is my class of header and then I might do header enter here I’m

just hitting command enter and that’s giving me this little bar where I can quickly add selectors

and um this is going to be display flex as well flex direction of uh row good and then we’re going to

probably align items to the center and then we’ll gap this out at uh 1m as well okay so all right now

I’ve started to get a little nav going um okay let’s go header here and let’s go padding block and I just

want like so now I can come in and use um some automatic css right I can use a little uh variable

from automatic css let’s keep it like that let’s go background of uh let’s do base I don’t even know

what my colors are base ultra light I don’t know oh okay it’s like a nice little light blue okay um so

let’s save there let’s save and now what we’ve done is we’ve essentially created the start of a header

for our website now what we might want to do is we want to come down here and we will do our footer

next now I’m not going to spend a bunch of time on this because footers can be you know quite complex

I don’t even have a footer in mind of of what I want to build um so I think what we’ll do right now

is we will just put text in in here and we’ll just say that this is a footer and I’m going to say

footer and on here I’m going to say footer enter and on here uh actually I don’t need one there I’m

just going to go ahead and add um did I not did I not add it uh class footer save let me oh you know

what I’ve done something done something wrong I’ve done something wrong uh let’s go back I don’t know

what I did I got logged out hold on hold on hold on uh what what was this uh zip zip why did I get

logged out did one of my team members log me out or something did I expose a password or something

somewhere they did that last time to me yeah okay uh let’s see okay he hold it yeah he

okay uh where does it I I need to I need to remember where it leaks it because I did this last

time um okay hold on I gotta I gotta get I gotta get a password um okay continue all right Andrea

thank you all right let’s grab this and I’m gonna I’m gonna do it on my other screen that way it won’t

leak it this time so okay all right there we go there’s we’re back to that uh staging sites oh two

four can I just one click get in again yeah I think I can oh my gosh what what did I just do what did I

just do okay there we go okay are we back did I what where am I where is it leaking it

where do you see it I don’t see it anywhere it’s on my other screen

let me let me look over here where I don’t understand where it’s being shown

clearly I’m not seeing it

uh screen share is small we saw the chat uh

oh you know what is ecamm oh okay hold on hold on hold on hold on hold on hold on

default scene no that’s the wrong screen share what do what is happening with the screen share

situation screen only let’s go to screen only I think it was set to

yes okay I got it I know okay

okay so at home I have it set to primary display and the default here because I just installed ecamm on this computer and I forgot the default is current application so when I think I’ve got stuff on the screen over here

uh that you can’t see you can’t see you can see it when I switch to it because it’s following the current application

I’ve just fixed it it’s now on primary display okay so you should only see what’s happening on the primary display

display now let me let me go back in

I mean I I trust everybody that we’re not gonna like you know you can sit here and watch a stream without being like oh my god I saw a password I should log in and do something with it like

and it’s just a test website it’s not gonna get you very far all it’s gonna do is is mess up our stream

okay let’s go in and catch all and I think we have to start over because I was logged out while I did all of that and so when I saved it it didn’t actually save

um okay

yeah screen size should be fixed we should be good all right so I did it slow the first time I’m gonna do it faster this time

um so we’re gonna say header and header and uh I know it probably leaked again but um you don’t have to reset it again let me let me make sure that Andrea is not okay

um let’s leave it this time because I don’t want to I don’t want to get I don’t want to have to build the header for a fucking third time

okay so we got the header and uh header and enter okay and then I’m going to go ahead and

inside of there I’m just going to do my nav uh nav and let me just check here with styles yes okay nothing nothing got saved okay so let’s try that again so we’re going to come in we’re going to nav.nav

and then inside of that I want a ul.nav uh list and inside of that I want an li nav item uh and then inside of that I want an a with an href of pound sign and I want the link to say

and on that li nav item I want five of them and then I’m going to expand okay um I hit the wrong button let’s go there

I think it can recognize you know what it doesn’t like me today it doesn’t like me today nav.nav ul.nav ul

li nav nav li I’m just gonna I’m just gonna shorthand it um yeah times five and then a and we’ll just say

link okay and I’m not gonna do anything crazy special there all right we’re just gonna put that in like

that um I’ll put in these pounds okay good got our little nav uh let’s go ahead and jump on here

go ul and go list uh display flex and gap of 1m that’s good align items to the center perfect okay

let’s go to our header and

let me let me make sure we’re saving I want to refresh here

make sure we’re good okay I don’t am I logged out again I don’t know what’s happening right now

or in the latest update we have an issue with saving templates one one of the others happening

nope it’s there why wasn’t it there okay never mind all right header there we go all right

all right padding block uh let’s go space what do we do xs okay and we did a background color

uh let’s do base ultra ultra light okay good I’m just gonna leave that as our header

now let’s go and let’s go to the front end okay so let’s just go check and we could see we’ve got a

little bit of a header and because this is in our index template or our catch-all template it’s

going to show up on every single page by default and we can demonstrate that by if I go to pages

and I add a page I’ll just say uh test okay let’s publish that let’s go view page on the front end

there’s test you can see it in the url there’s my header now I’m not done you don’t you don’t want to

leave it like that okay I just I want to quickly do my footer and then we will I will show you the next step

okay so footer enter and I just want this one to have a text of footer

okay and I want to change the tag to footer and I want to add a class of footer and here I want to padding

block and this I’m going to say section space m because footers are typically like your other sections on your website

and I’m just going to say background of let’s do base ultra dark instead of ultra light okay

and we’ll just do color of white for now and so now if we go and we look on the front end we’re going to

have a header and we’re going to have a footer if we go and inspect see what’s going on here okay

and let’s see if we can get that main tag going in the middle that’s one thing I fixed that didn’t

there’s there’s something with the transferring that main tag back to wordpress that it doesn’t like

sometimes and I don’t know sometimes most time it works for me sometimes it doesn’t let me see

let’s just put it as a div and save it and then change it back and see if we can get it to behave

okay save and refresh okay um no it still wants to be a still wants to be a div okay we’ll take a look

at that later all right we’ve got a header footer the next step is components you you need to make

these components because you’re going to have to use them again in other templates um and like so when I

make a blog post template for example um it’s it’s not going to fall back to the index template right

it’s a different template but I still need a header footer and the way that you control that globally

is by having them as components right so I’m going to right click and I’m going to say create component

and that’s going to create my header component now in this instance I don’t need any props okay you can

create component properties and you can map them and you can do a bunch of stuff with them for a header

which is literally just like I want it to be the same all the time I don’t really need any props

I’m just going to go ahead and hit save and so now the header is a component and the same thing is true

for my footer so I’m just going to say create component I’m going to hit save and that’s going

to create the component and now everything is exactly the same so I’m going to refresh you see

there’s no changes on the front end but these things are now components and I’ll show you why that matters

okay first of all let’s go and do something on a page before we get to a blog post let’s do something

on a page let’s do something on the home page all right so I’m going to go ahead and edit with etch

and I’m going to add a container here we’re going to go heading text and link I hit a keyboard shortcut

there that messed that up all right button primary and I’m going to say hero section and let’s just say

this is a bg base ultra light okay so it’s a utility class from automatic css give us that ultra light uh

color um you can also do with uh what’s cool is you can do lorem with emmet so if you’re looking for like

very small wins with emmet if you’re like man I don’t know if I want to do the whole emmet thing

well there’s a lot of just like really cool shortcuts with emmet and if you notice there like

so if I do lorem and it’s very hard to see it probably even harder on the stream but if there’s a

light green underline that lets you know that it’s registering emmet okay like it’s it’s recognizing

this as emmet and so you can do lorem and tab and it’s going to expand into lorem text but what’s

really awesome about emmet is you can tell it exactly how many words you want so you can say

lorem five and that’s going to give you five words okay or you could say lorem 20 and it’s going to

give you 20 words okay um so that’s really cool like if you’re doing a card obviously you want less if

you’re doing a big paragraph you are going to want more um I’m just going to do the default like that okay

so this is our hero section right here let’s see if we can center all um is that is that working for

me I don’t I don’t know what’s activated or not activated in in this acss installation I guess

those are turned off okay um emmet looks genius to refresh yeah I mean emmets been around a very long

time like it’s not this we didn’t like invent emmet or anything but um yeah it’s uh it’s been around for a

while okay so oh you know what we I don’t so we can’t use utility classes yet because they don’t

transfer into gutenberg um so I’m just going to go hero like this and we’ll say background of base ultra

light okay that’ll give us our style there okay so now let’s go and look at our home page and now we’re

this is what we’ve got we’re building a page somebody asked me in the group they were like

how do I build a page a template for my pages and so what I was trying to explain to them was that’s

not really how it works right pages are just you just build the page that’s like I’m building the

page right now there’s no there’s no template for the page other than I have a catch-all template

which is making sure that my header and my footer are going to be there when I create a page but

other than that you just build a page you you don’t you you you don’t create a template for pages

because a page is a unique thing okay if you’re going to be doing templated stuff like what is an

example of templated uh content blog post is perfect you’re going to have a thousand blog posts they all

need to follow the exact same layout and you want to create that content for them in gutenberg by the way

okay so you need a template for those things if you’re going to create a services let’s say you’re

going to have service pages and you want them to all be the same layout that is a perfect case for a

template for services but how do you get a template for services you have to create a custom post type

okay because every service is going to be a post in a custom post type and now you have the ability to

assign a unique template to that custom post type and say all services pages are going to look like

this then you have something like the team member bio page so when i click on a team member i’m going to

go see their page their photo their bio and i want all of those things to be the exact same layout then you

need to create a team member custom post type add them all as posts in that post type and then create

a template for that custom post type you don’t create a template for pages pages are unique in

themselves okay um the the idea that it’s going to be a page means there’s only one of them there’s

only one like this because if there’s more than one like this it probably shouldn’t be a page it should

probably be a post in a custom post type does that make sense are there any questions about that this is

like one of the most poorly understood aspects of templating and content management in wordpress

that i think so many people still don’t really grasp and it makes your life way way way way way easier

okay um let’s see all right uh what if you want a landing page with only a footer no nav

uh what if you want a landing page with only a footer no nav okay um okay you mean no header okay

so yes great question i’ll show you how that’s going to be handled in etch okay so you don’t create a

template you don’t need to create a template necessarily for that scenario what you need uh let me go back into

the editor here and we’re going to go to catch all okay what you need is inside of this component or

really wrapping the component is conditional logic and your logic says okay we’re going to show this header

if the logic is true and the logic says every page except this one or this one or this one or this one or

whatever and so you’re managing the header visibility at the component level because that’s the thing

you’re trying to change you’re like i don’t want it’s not like let me create a whole new template for

this situation over here it’s just like i already have a header that shows up everywhere let me just

add some logic to it to control better where it shows up and where it doesn’t show up and so we have

conditional logic blocks inside of etch now they can’t affect they can’t use page logic at the

current time they can only use logic inside of a loop or with existing post data or whatever

or component or component props but very very soon you will be able to do logic based on page logic or

user logic or whatever and so you would build the logic into the header that says okay like for example

if you wanted to show a completely different navigation for people who are logged in

you don’t create a new template and a new header and all this other stuff you edit your header you

say edit component right here and you drop a logic block around this nav and you say if user is logged

out show this nav if user is logged in show this other nav that i built and then you hit save and all of

that happens in your header the header is it’s one place to manage everything that’s happening with that

header on the website okay versus having all these different templates that you have to keep track of

and remember what’s that one doing what’s this one doing and no no no no you have a header component

and the header component controls itself everywhere okay and based on the rules that you bake into it

okay i’m watching the chat as we go to so emmett will be 20 in three years and strangely i was introduced

to it by a welsh developer called emmett that’s an interesting story uh yeah emmett emmett has been around for a long time

okay nice nice nice all right i think we’re all are we all we’re gonna move into the blog post creation

here okay um let’s go ahead and let’s uh go back to templates so notice that i’m in like my catch-all

template right i can i don’t have to like go back out and then go to somewhere else i just want to go

here and say hey i need a single post template and then i want to edit it now look what it does so

instead of starting from scratch it says hey you have this thing called a catch-all template over here

would you like to maybe start with that so it starts with my header and footer already in there okay but

this is actually a um and i’m going to take the content slot out of it now okay so i’m going to remove

the content slot for just a second and i’m going to put a section in here now you can’t put a section

automatically in another like div but you can drag them in um so now i’m going to put now they will

show up next to each other when i start putting them in uh but what i’m going to do is just see if we can

uh get a little uh let’s say this that title bang okay let’s save i also want to see what are we

dealing with down here uh error formatting is your mal-inspected token token okay i don’t know something

we need to look at probably okay let’s go ahead and save okay i did get a confirmation on my save

things have been acting a little bit weird in this install so i’m double checking things as i go um

so i have a post called hello world let’s go ahead and view it there you go so i made a post template

there you could see now like this is obviously different i’m viewing the post and i can see the

post title i still have my header i still have my footer because those came over from the uh catch-all

template they were just put there for me by etch um let’s go okay let’s go back here i want to check

something real quick home view okay so there’s our home page it’d be nice if i had a link to post up

here but we haven’t gotten that far yet and now if i go to posts what am i going to see i’m going to see

the single post template that i was working on okay all right so that should all make sense now i’m

going to go back into etch i’m going to go back into templates i’m going to go to the single post

template so now the question is and let me see if i still have i i pulled up i think i may have

no here it is right here all right let me pull this one over here let me pull this here i had a dribble

little design pulled up that was going to be maybe like a inspo okay here we go so maybe we can do

something a little bit like this and um this is where we will take a little bit more time i’m going to check

check the chat real quick everybody said to go slow so i’m trying to trying to go slow why are

the header and footer not showing in a page when editing uh we are going to have an option to do

that so we used to have it we took it out for a while um and it’s not back yet but there’s a button you

can click which essentially says show the template that’s being applied to this thing that i’m currently

editing um and then there will be a setting where you can just make that the default uh so yeah it’s

just a it’s a little to-do item still essentially okay um all right so what do we want to do first

what we want to do is create this little scenario right here um yeah let’s let’s zoom in on that why

not uh so i have my hero section already ready to go um so let’s go i need to get rid of some of these

tabs we’re getting a little tab heavy here okay so we’re going to call this a blog hero and i’ll say

this is going to be the inner for blog hero and this is the title and then what else do i need i need if

you notice okay there’s this is going to be interesting because we’re going to need a a custom post not a

custom post type a custom field for this right here it’s kind of like a blog intro like a blog lead okay

in journalism it’s called a lead lede so let’s go ahead and make sure that we build that in um in

just a second and then we need the media as well the the featured image now this is this is interesting

here where i want to put this featured image um there’s a couple different ways to do that because

of this overlap so there’s about five different ways to do these overlaps and right now i’m calculating in

my head uh which one of these would probably be the best way to go um and i think

i think if we put it in its own um maybe i want it maybe i want it semantically inside of of this

section as well and then we could use we could probably just use a gradient maybe like a hard gradient

okay all right let’s let’s just try that so we’re going to have our title we’re going to have our

little intro so i’m going to go ahead and add text this is going to be our we’ll call this our lead

blog hero inner title lead and then let’s go ahead and put maybe in a different container maybe in a

different container let’s go container and let’s say this is going to be the featured image wrapper and

then inside of that i’m going to put my featured image now i’m going to go over to unsplash real quick i’m

also going to go to squoosh okay and we’re just going to grab a little media that we can throw in

here we’re going to try not to take too long to okay we’re going to write a tennis article oh f you f you

the the one the first one i look at is not free it’s like no yeah that’s one you gotta pay for okay let’s go

find uh why are they all tall by okay let’s do this one right here all right so we’re going to go uh featured

image okay excellent so let’s go ahead and for right now uh we can always just start static oh i do have

some media in here look at that okay didn’t even know do i have any wide media uh uh these are garbage

dude these are garbage okay let’s go to squoosh let’s just drop that in right there and let’s say

1920 and let’s go here featured image one perfect okay let’s pull that in and let’s say use that media

okay great so i’ve got my featured image wrapper and i’ve got my featured image and now what i’m going

to do is right click and i’m going to say create bim classes so it’s going to attach my bim class okay

this is so andrea’s watching put this on before we um we can actually still really we’ll release a

little patch or whatever but have them look at attachments for selectors they’re not attaching

consistently i’m going to and this is maybe only happening in the templating um so i’m going to go

out and i’m going to go back to single post and i’m going to i’m going to i’m tempted to try it one

more time unless yeah it’s definitely not there okay let’s delete that let’s i want to try it one more time

create them and no okay it’s definitely having attachment issues okay blog hero and then we’re

going to double underscore let’s see if i can do it manually that works just fine let’s go blog hero

might just be an auto bim thing but it was happening to me okay yeah because i can see it there and not

there we just made some refactorings to the class system this could be uh what’s affecting it all right

let’s go in expand all lead i’m trying to see if there’s anything that triggers it hero

blog hero and lead and see it did it it did it the first time and it’s doing it on that one

is it not going to do it on this one blog hero featured image wrapper add it literally adds it there

and here it’s adding it in both places but it’s not attaching the pill okay so have uh have chris

take a look at that all right let’s open that up and see that’s interesting okay let’s do it down here

and see it did it what if i only do it here

that seems to be a little safer at the moment okay but this needs to be featured image

okay let’s save there all right got some little little hiccups in this latest version here all right so

we’re gonna say uh justify content to the center align items to the center and text align to the

center kind of the trifecta there of centering everything you know what i also want to do because

maybe we could show off the date formatting is i’ll put another piece of text in and we’ll call this the

date and we will say that you are the date and i’ll actually move how do we want to order that

i think the date should be here and let’s try this again just because i like to see if it’ll break

log hero date nice okay order minus one pop that to the top and then the way that we’re going to get

the date in you can do it here or up here wherever you want to do it uh this that date and if you’re

going to notice it’s going to give you this machine readable garbage right but we have a format function

so this dot date dot format and then now you can essentially say like if i did month like that

um or maybe it’s a capital is a capital m yeah what’s it doing what’s it doing m d y okay maybe need to

look at day formatting also uh this that day format unless i’m doing something wrong i don’t know i could

be doing something wrong this is usually this is going to be automatic with the ui but manual a

little rough okay yeah we need to look at that also i think those are the right keys d let’s just do d

or f isn’t f now or hold on let’s all let’s look at the front end because sometimes front ends can be

different from uh back end as well let’s see if we can isolate march so it is formatting

correctly just not in builder so f is the month capital f is the month uh d lowercase d and then

comma and what uppercase y let’s just save that there we go so we get march 28 2025 okay perfect all right

um pull that out of there all right we’re just going to ignore it in the builder for now so we’ve got hello

world insert text here let’s get our gradient going so in our blog hero let’s go background

of linear gradient and i’ll say to bottom red blue okay always if you’re not you know super comfortable

with linear gradients just get it going the right direction and then throw a red and a blue in there

and because then you can see exactly what’s happening right and notice if i put the percentages

at exactly the same they’re going to meet in the middle with a hard edge and now i can clearly see

well blue what if i just got rid of blue what if blue was transparent then i’m kind of left with this situation

right here um now if you wanted to be closer to the top we could do like 30 and 30 or something like that or 40 and 40.

you’re probably going to need to adjust this especially like on mobile you’re gonna have to

check this and make sure the percentages still make sense and still work um but i can do base ultra light

okay and so now that that’s just going to give me it’s a fake overlap okay like you’re not really

overlapping content it just looks like you’re overlapping content it’s one of the easier ways to do overlaps like

that um but here we go so we’re saving and let’s go back to the front end and we’re just we’re working

our way to our destination let’s take care of this little blog post intro right here i’m going to go to

acf now obviously in the future you’re not going to need acf for this uh but right now you do still so i’m

going to say text we’re going to say blog lead and i’ll say this is a text area okay so blog lead and i want

to assign these to all of my posts and i’m going to say that these are posts and we’re going to save

and now if i go to my posts and i go to hello world you’re going to see i have a box for the lead and uh

what were we what is the photo here okay so um yeah the the our our is that nevada is that nevada or

arizona was that arizona what what is that what is that i don’t know that’s a beach that is a that’s

definitely not arizona okay um i don’t i don’t know where that would be okay it doesn’t matter it doesn’t

matter the copy doesn’t have to make sense our arizona trip was so amazing here are all the details

uh and a complete photo blog of our journey okay great fantastic save okay so i’ve got this data

right here in an acf custom field called what is it called it’s very important that you know what it’s

called okay let’s go back to acf in our posts blog lead okay i’m going to copy that to my clipboard they

even give you a little copy now you’ll be able to do this automatically with point and click okay but

right now you just got to do it manually um what i’m going to do is i’m going to refresh my builder

so that it actually has um the data access okay and i’m going to say this because our templating

in etch is all based on this whereas loops are based on items so if it’s a loop it’s item dot if it’s a

template it’s this dot okay so this dot acf and then i want my blog lead and look at that our arizona

trip was so amazing okay and so now i’m going to refresh and anytime i have a intro text to my blog

post it’s going to put it in there now i don’t know if this works yet outside of components but i’m going

to try it i’m going to show you um an example of our if condition block okay so i’m going to put that

lead inside an if condition and um it’s actually it’s i don’t think it is i don’t think it is uh this dot acf dot

blog lead maybe it will maybe it will i don’t know we’re in uncharted territory right now okay so i’ve

got that obviously it’s i mean it is showing it so let’s go to post add new post and we’re going to

say another post okay this one’s not going to have a lead all right this one’s going to have uh sample

content right here and we’re going to say post that featured image and this one can have one of these

stupid images over here i don’t want a tall one uh actually we should put a tall one in you know why

we should put a tall one in bev would put a tall one in you know bev would put a tall one in and you

got to account for these scenarios the bev’s not going to be like oh i’m going to choose a wide photo

because that every other blog post has a wide photo no bev will choose whatever photo she wants to choose

and she will break your shit okay and so let’s just do that let’s put in and i’ll show you because

i’ll show you how to guard against it i’ll show you how to guard against bev okay all right so what we’re

going to do here is we are going to view this post hey okay uh we didn’t put the featured image in yet

but i want to see we should not see a look at that we don’t have i got to zoom in y’all can’t see that

can you let’s zoom way in look at this i have an inner uh let’s go into the inner a paragraph and a

heading and i saw my date right there’s no lead it’s not there why is it not there because i said

i wrapped it in a condition and i said hey check that and if it doesn’t have any content don’t show

this thing the logic is always if the logic is true it’s going to show the thing this logic is false it

does not have a blog lead false we’re not going to show the thing okay um that’s it that’s how like

it it’s easy to put logic in right and we’re like you’ve probably never seen this condition block

situation before where you can just drop conditions in places and be like okay there’s my condition real

quick um it’s it’s great it’s fantastic all right so we did that you could do logic on the featured image

as well hey don’t show this featured image if there’s no featured image let’s put the featured image

in so the source is going to be this dot featured image dot url i believe that’s what we want this dot

featured image dot url i believe that’s what we will know that okay let me let’s phone a friend let’s go to

uh edge community i’m going to go to the little docs let’s go to uh permission how to etch how to etch is it faqs

faqs dynamic data dynamic data keys okay there oh oh dear what just happened

i didn’t i didn’t mean to zoom in i don’t know what happened okay uh permalink permalink featured oh

is it just featured image or do we change it hmm hmm hmm hmm hmm

this dot featured image um andrea if you’re still watching you can also oh no that works it’s just this dot featured image

oh that is awful that photo is just terrible okay um let’s go let’s go choose a different photo that is a terrible photo uh another post

okay uh let’s let’s let’s go to squoosh or not squoosh uh yeah we need to be there too but let’s go to unsplash

uh let’s grab we wanted to be tall this motorcycle dude okay and let’s go to squoosh and let’s grab and put him in

and go uh i’m gonna go 1920 on the height side and then we’ll go down and we’ll say that okay and then

we’ll go back in and there’s my post i’m gonna drag it in boom and i’m gonna hit save right okay we have a

little bit better situation going on here there we go okay now we have a workable photo so now what we’re gonna

do is inside of here and i don’t know if i can get a preview or not yet okay i can great so now we can

see this featured image all we’re gonna do is aspect ratio this and say you know what always render this

16 by 9 and it doesn’t matter if bev comes in and drops some tall image in here you’re protected against

that right there’s a little aspect ratio it’s all you need okay um so now i go back to the front end

and i refresh and here’s my another post now what if another post needed a intro so this motorcycle

is so great you should really consider buying one and becoming a motorcycle enthusiast i write the best

copy on the fly okay let’s refresh i now have a blog intro okay now how do i get my blog post content

in here obviously we’ve gotten our featured image we’ve gotten the date we’ve gotten the title we’ve

gotten the lead how do i get my my content in here well right now we don’t have any content let’s go to

website ipsum and let’s just grab what website ipsum oh is that down website ipsum does that no longer exist

uh-oh uh-oh uh-oh uh-oh no more website ipsum okay let’s go to lorem ipsum uh i don’t like this one

because it’s harder it’s like it makes you go through steps okay let’s do that great let’s go in here

pop that in fantastic save and we’ll go to our other one and we’ll pop some in as well hello world

now we’ve got some content fantastic and we might throw like an image in here as well just so you can

see you know will it bring in um images from you know inside the content as well so let’s save there

great so now all we’re going to do is inside of our template we’re going to come down here and i need

essentially another section right so i’m going to select this section right here and i’m going to

add another section and this is going to be my body okay and i’m going to say blog body and this is going

to be the inner blog body inner like that and again this this class thing is killing me today blog body

and maybe if i force it let’s try it man yeah okay all right um let’s go padding top zero and here we want

actually i’m gonna i’m gonna go padding bottom zero on this one because really we just we don’t want that

it’s really padding block end of zero and all i’m gonna do here with this inner is i’m gonna say

okay width of 100 but i’m gonna max with this at 60 characters because i want more like a narrow channel

of content and i’m gonna click this little button right here that says add content slot okay we’re

gonna save and we’re gonna go back to the front end and i now have my blog post okay so this is another

post i’m gonna go find our other one and open that one as well okay and there’s this one and why why

did we lose our featured image here did i remove it oh it was a motorcycle save okay so well they’ll both be

motorcycles i guess so here’s this one all right that’s another post this is hello world i guess for

shits and giggles let’s put this back so it’s different okay save save thank you uh let’s refresh

okay so there’s hello world and there’s your blog post content right there and then what i would do is

actually slap content grid on here which gives you a lot of tremendous flexibility and how you can

break content out of this column and so on and so forth but that’s we’re gonna stop here and just

answer questions and such um okay so let’s see i gotta scroll back up

so um james if you’re if you’re this is what i meant by you you build the template around the content

slot right uh you don’t just drop a content slot in you build out everything and then you drop the

content slot where the content needs to go uh let’s see here uh we answered that question in a page

context if you’re not using templates as kevin explaining you do not need to insert the header

component section yes correct um okay answered that one answered that one what about controlling height in

the main uh you’re gonna have to expand on that question carl how do you get the footer to stay at the

bottom of the window um well it depends on how your site is structured but you can uh margin auto top it

in a lot of cases and it’ll stay at the bottom um okay it’s time to move to dia haven’t looked at it yet

uh we’d love to see what the padding of the hero does beneath a header for example

um you’re gonna have to expand on that robin i don’t know what you mean by that

uh toby says try pexels free uh well unsplash is free too most of them but i do like pexels too

uh let’s see

yes you’re right uns well i i don’t know i subscribed to unsplash plus so i don’t think it ruined uh unsplash

but it did make it harder to just quickly go and grab um is there a way to apply a background to the

body uh yeah i mean well with like acss you can go global sass and you can say body you’re gonna be

able to do this in etch as well um but you know you could you could do it in acss for now background

red okay and there you go my body is red okay so if you’re an acss user which by the way uh we have now

this dragging and docking is so butter now we have addressed that situation okay um and it also if i

go into etch let’s go out of here let’s just edit with etch um let’s go to did it keep my i didn’t save

that did i global sass oh i did what what am i doing let’s not let’s not do that we don’t want that to

happen okay um let’s go out and let’s go to a page god this cold is crushing my throat okay so i’m just

going to open this in here so we can see i mean it is like pretty much one-to-one on the ui now like it

it almost looks like a native like a native situation here i mean it’s pretty consistent now you can dock it

to both sides i mean look at the look at the i mean it’s pretty consistent now it’s it’s it’s it’s

starting to look and feel pretty native in here uh which is really nice okay um what does the thumbnail

use for are there any sizes for it uh it’s some wordpress thing um i don’t i never use it uh let’s see here

someone just posted a nice looking etch built site on the unofficial etch group oh i’ll check it out

i’ll check it out for sure um let’s see how could i add post navigation to the template at a post

navigation you mean before and after uh that’s a little bit complicated um i think it requires some

php and so we have to have php authoring first and then we’re going to have an element to do that

that’s just drag and drop like you just drop it and it does it for you it’s not easy

you can kind of do it with like looping and offsets and stuff like that but it’s i don’t think it’s

necessarily the best way to do it um okay are there any questions about what we’ve well any of the

templating questions like what should you template what do you not template oh i’ll also by the way i’ll show

you okay so if i go to acf let’s say i was going to create a post type for team members so i’m going

to say team uh team team uh that should be undercase uh lowercase save okay so there’s my team right now

if i am going into etch and i’m going into the template area in etch look at that team and if i click

here it’s like you know what do you want to create single now there’s usually an archive why is it not

suggesting archive well because if we go back to wherever i was just there so post types acf now

metabox i think is the opposite i think metabox uh automatically registers an archive template acf you

have to opt in to an archive so you do advanced configuration urls opt into the archive and i save

and then when i go back into etch and i go to templates and i go to team it’s now seeing ah there’s a

a registered archive there would you like to create a template for that as well so this is what i meant

by it’s very easy when you add custom post types the templating system is literally going to detect them

and it’s going to let you create the necessary templates for those post types makes it very very

and then when you come here and you got team and you got uh services and you got this and you got that

you got legal and whatever else you created you could see the whole hierarchy of your website kind of

of how everything is templated right here and these are actually i think going to be thumbnails at some point

um instead of just placeholder boxes uh so that would be even even cooler but yeah

okay

okay

all right any other we can if we don’t have questions about templating we can have questions

about etch in general um i was scheduled till 3 p.m so we have until we have until three as long as my

voice doesn’t go out uh let me go to hashtag q and see if there’s anything i didn’t even check the

the law oh shit okay we should have done this um okay maybe consider to also build a simple header

footer component okay we did that uh do you still use perf matters i mean for now yes but with etch you

won’t need perf matters all of those little toggles for turning bullshit off and work all essentially all

where all perf matters does is it turns off all wordpress is bullshit um that doesn’t need to be

loaded and then it does some other things like uh deferring delaying javascript and yada yada yada

that’ll all be built into etch so you’ll just manage your you have a little performance dashboard

so you know how you have a templating manager so you have template manager you have a style manager

for managing styles here’s your variable manager right you’ll have a performance manager where you manage

all of the performance of the website um let’s see

see

just answered those answered those answered that one answered that one is it possible to create a

search results template yet i don’t think so but it is on the list it is on the list um okay

i think we answered all those i’m going to go back to main chat

okay i had an etch question a bit above but i did q instead of q

okay let me see if i can let me see if i can find it

okay i follow the latest video and ai generated html css javascript but got multiple selectors and

needed to sort them can we not import css on a higher level and paste all selectors

so it’s very important that you follow the recommendation okay um we could do something

like um what do we what do we let’s go to shad cn right and see if we want to maybe try to do

something like this real quick um now i don’t

with the auto the auto bim being finicky right now and it’s a little bit harder than it should be

um let me go to components components um carousel button avatar badge collapsible

what’s a collapsible now let’s do they have an accordion here’s an accordion okay so i can go here

um let’s go to grok okay and all right i want to convert this shad cn accordion to

uh vanilla js and vanilla css i want you to use um bim for the class names and i want you to nest all the

css at the parent selector um with vanilla css nesting it will it still may ignore me like you’re

going to see it is obsessed with sass nesting um and this is all i’ve most of the ais have had

trouble with this but it’s easy to fix so we’ll just we’ll just see how we how we go so i want to convert

this shad cn and vanilla css i want you to use bim for the class names i want you to nest all the css of

the parent selector with vanilla css nesting i want to um account for all accessibility requirements uh when we

do this okay um let’s just see what it gives me here

okay so it’s giving okay you see this that’s sass nesting

um so you have to be very careful that it doesn’t do this and i’ll show you how to fix it it’s a very

easy fix you just yell at it um yeah you can even you could be you could be very like uh temperamental

with it you know i like to i i feel like maybe it’s going to learn a little faster in the future if

you’re if you’re a little upset well what is that bro what is that okay all right well you know what

people have been telling me people have been telling me to use claude here um gosh all right um i don’t

want to have to log in ah fuck you really all right grok why are you letting me down grok i’ve been telling

everybody the grok it’s just fine it’s been just fine before you know i don’t know why it’s letting me down

let’s try it again um build me a vanilla i’m just going to make it simple build me a vanilla

accordion component from this uh documentation okay

then if it if you can actually build a working accordion then we can fix it

let’s see if it can actually build a working accordion

let’s put an svgs in there and

shit

now let me go back to chat while this there we go my lord was it really that hard okay

okay um now we’re gonna say great i want to

use bem selectors for and and nested css at the parent selector

make sure you use vanilla css nesting and not sass nesting that’s really just the

only thing we need to make sure happens here

okay i’m gonna read chat while we

bro it is i told you it’s obsessed with sass nesting obsessed

it’s a quick fix

i think the sass nesting is actually breaking it

that sass nesting not vanilla

i was gonna add get your shit together on the end but

usually i do that i will keep it more pg on the stream it’s usually what i do i like i just like to

i like to get aggravated with it

okay that’s better

it’ll probably work in their in their rendering

there we go okay let’s look at the code all right we got our javascript we got our accordion

accordion item trigger okay so that all that all looks good now if this does not work in i’m trying

to think of we have another i probably have a different maybe a wp rocket install that we could use that’s not

having the selectors issue we could actually do it on the digital gravy site

i probably need an accordion on that site for something anyway

but let’s try it and let’s try it in this version here and see if it if it fails again

i have a low confidence interval threshold right here okay let’s go to here and grab

we could we could just stick it in another container in here so i know you know you don’t normally put

accordions in the hero section but we really don’t care right now so let’s grab all we need is the div class

accordion right there okay so we don’t you don’t want the body tag obviously um let’s close that tab

let’s close that tab let’s close that tab that tab let’s close that tab let’s close that tab let’s get

rid of all this garbage okay we need that we can get rid of that and we’re back okay so inside of here

i’m just going to drop in my html um and so yeah so we have the new parsing stuff too html parser at line

one invalid oh i broke the tag

it helps if you don’t break the tag okay so there’s my html boom there’s my accordion now

i can already tell

no it did it did it correctly parsed all of the

classes and it’s attached them to all of the elements okay which means i just need to find the parent selector

this is why we did nesting because i can now do everything from the parent selector

so now i’m going to go over here and i’m going to go up to our sas i don’t need the selector itself

because i already have the selector so i just need everything in between so i need everything from there

to the close the right before the last closing bracket now by the way just to give you a uh if you can use your

your imagination all of this very soon will just happen inside of edge and the rules will already

be set up to where it already knows to use bim it already knows to use vanilla nesting it already knows

to include all accessibility requirements it knows it knows it knows you’re not going to have to manage

any of that okay um so now what i’m going to do is i’m just going to paste and boom look at that now

we don’t have a working accordion because there’s no javascript so what we’re going to do is we’re

going to turn on the javascript editor it’s going to give me a little javascript panel right here and

i can attach the javascript at the element level let’s preview this and make sure it actually still

works okay good uh so it appears to work so we’re going to take all of the javascript now

we’re going to come down here and we’re going to paste that in and we’re going to hit save and then

we’re going to go view this on the front end and just like that i have stolen a component from somewhere

uh and it wasn’t even a component written in vanilla javascript i think it was written in react or some

shit and uh but yeah i now i now have and i can go style it however i want but like i mean you watched

me like ai wrote it and i just stole it all right that’s it it’s just pop pop pop and

imagine that that’s happening inside of etch in the future right so you’re just like you’re

writing that prompt inside of etch just like cursor almost and it just does it for you it puts all the

things in the right boxes on them there’s no copy paste none of that nonsense you just tell it what

you need and it just manufactures it before your very eyes but it does it with best practices so it’s

doing it’s using bim we’re attaching all the selectors properly it even if we go back and you you notice it

did i name all these things in the structure panel no it named them based on the bim classes that we used

in the html so it named everything for me it attached all the selectors for me if i go here

to the styles manager they’re all right here i can manage them all from right here here’s all the css for

the accordion okay so this all is going to be just like happening for you in the future

which is really nice can you create a component with the js tied to it absolutely caleb absolutely you

can um so i can now right click and i can turn this into a let’s create component okay and actually

let’s think about how you would want to do an accordion component like this okay um typically

it’s going to be potentially a loop now when when we do this with a component here well let me back

up there’s a caveat you can’t currently make it a component because we’re missing one thing that

you’re going to need now nobody else has this everybody’s missing it it’s not just us um we’re

going to be the first to have it i believe i haven’t seen anybody else with it but this is

essentially what we need to do so right click create component okay so i now have a component

i’m going to click this button right here what you need is a repeater property that allows you to create

because what do i need for for dynamic content well i need text text so i need the accordion

header accordion heading and uh i need the accordion content or text or whatever and actually

actually now that i’m thinking we don’t even need the text you just need the heading that’s all you

need i’ll show you why you don’t need the text in just a second okay but now i can take that and i can

click here and it maps it see i click the little target and i click the heading and it maps that prop to

that area okay so now uh and you’re going to see very quickly why this doesn’t really work yet

but if i’m grabbing this i can say this is my accordion heading and if i had like two different

accordions like they can have different content this this is unique content so i did that very quickly

just creating a prop and putting assigning that prop to the heading area of the accordion and now i i have

that but the problem is i can’t create more of them so let me edit the let me edit this but i’ll show you

what’s coming very soon that’s going to allow you to do this ideally you would build the component with

a single item okay single item and in that content okay so here is a wrapper um and actually this

yes okay so what i want to do is i want to add a slot this is a great use for slots and we’re going

to call this slot accordion content okay i believe i’m doing this correctly it’s been a while since

i’ve done a slot yes so now what you can do is you can actually put um anything okay so let’s say this

is going to be we’re going to need a way to preview this on the canvas because obviously it’s shut and we

don’t have a good way yet to make force it open so i can actually see what i’m doing this is unique

content okay let me say let’s just go to the front end and see if we’re we’re functioning here so a slot

allows you to put whatever you want so they’re not limited to just filling out a text property for

example like i could literally come in here and i could put in an image okay so you could put anything

in a slot which makes this accordion really really really powerful now because it can have anything inside

of it so let’s hit save and anything inside of this one little panel look at that okay now there’s a

height issue something going on with the accordion that i would have to debug but the slot allows you

to put whatever you want in the slot now how do i get another accordion item that is the question well

what we need is when i’m using the component right here right i need a way down here to say like add a

add an accordion you know add another one that comes from a repeater just like a loop but this would be manual so

you’re able to say i want another one and i want another one and i want another one now what i could

do for sure is i could go in and loop this okay so if i had faqs and a custom post type i could just loop

them into the accordion i could for sure do that but manually i need a way to repeat items and that’s

coming and so to do that you’ll hit this plus sign and you’ll say instead of text i don’t want text i

don’t want boolean i don’t want image i want a repeater and you’ll choose repeater and then you’ll

put the things inside the repeater group and then you’ll hit save and you’ll be able to go boop boop

boop boop boop another one another one another one another one and then they have slots in them so you

can put anything inside the slots it’s going to be fantastic okay that’s coming very soon

uh that is uh i think that’s high on the priority list uh i haven’t seen anybody else have slots

either okay this is a this is unique to uh etch very very powerful these slots

okay so we did we did that on the fly what else what else um let’s see let’s check chat

wrapper and slots what has happened to this yet max not slots slots okay slots you’re gonna get me

canceled okay you’re gonna get our pg rating taken now our pg rating was taken away a long time ago

okay uh let’s see here

one thing to make sure is to tell the llm that the js needs to be for a component that can be used

for multiple components on a page actually you don’t zach uh because when you put our js inside

of a component we already ensure that only one instance of that code is rendered so you don’t

even have to go that far um yeah it’s it’s already taken care of for you

i feel like a dumbass but i can’t wrap my head around slots outside of slot content i tried messing

with it okay so this is a perfect way to explain it maybe you already saw it andrew but this is a

this is a perfect way to explain it so i’m gonna take away um and let’s name this uh accordion okay

let me let me edit this edit edit component okay accordion so this is my accordion component right

um so i have a heading right here i’m gonna take this slot out of here and i’m gonna put a text i’m just

gonna put text inside of here so this is my accordion content and then i’m gonna take a prop

and i’m gonna add a text prop that is accordion content and i’m gonna grab that uh actually i’m

just gonna go here because i can’t actually see it so i’m gonna come down here and go props dot

accordion content i think i don’t need brackets when i do it right here or maybe i do need brackets i do i

think i do need brackets for sure okay so now i would say this is the accordion content this is how

in in any other builder that actually allows you to create props for components which is already few and

far between this is what they’re essentially going to allow you to do okay this is the accordion content

so i’m going to go ahead and hit save and i’m going to go to the front end and i’m going to click and you

see this is the accordion content but you should see the limitation with this what if i want to put

headings in here what if i want to put other things in here what if i want to put an image in here what

if i want to put a button in here what if i wanted to put anything in here i can’t i am restricted to just

filling out content because this is based on a content prop right all i can put in this little

box is text content now a slot i hit edit component i remove that i remove that i don’t want that all i

have to do drop in a slot okay let’s give it a unique name like accordion content hit save i don’t even have

to define props what i’ve done is i’ve created a drop zone effectively inside of a component so it’s still

going to render uniquely like per accordion okay but it’s a drop zone that allows me to put anything

i am unrestricted now okay so and you can see here that i had my text and image comes back right um but

i i can literally put like i can just duplicate i can put i can put a section in here i can put a grid

in here i can like whatever i want i’m unrestricted as to what i can put in this component area that is

the power of a slot a slot is saying i don’t know what somebody might want to put here

but i don’t want to restrict them so i’m just going to drop a slot in that’s a drop zone it’s

like free drop zone you can put whatever you want here but it still behaves as a component because in

every instance of the of this item can have unique content in the slot which is fantastic

okay does that does that explain it um you could do a rich text element robin uh but that only gives you

rich text capabilities it doesn’t give you anything outside of what’s capable in rich text a slot is

literally anything it could be anything it is unrestricted everything else is going to have a restriction

so in the accordion case the slot is used when the accordion is not looped um it depends on where

your accord i mean you could still use a slot in with a loop um it would just in the slot you would

put uh like in your loop in the slot let’s say you wanted to pull in maybe you’re it’s in a custom field

or something you could still put a text element and pull from that custom field inside the slot

because you’re unrestricted you’re unrestricted so you can have unique content or you can have looped

content it doesn’t matter it works either way if we create a component from existing elements on the

page and afterwards decide not to use components for it again is there a way to revert undo the component

at a later time um great question great question so i’m going to edit the component right here i’m

going to take all this accordion notice that the thing is not the component the thing that i built is

inside of a component now this is not a wrapper this doesn’t show up on the front end okay let me

actually show this to you real quick so if i inspect this these are really good questions by the way

really good questions um there’s the accordion where is the component wrapper where is any evidence that

this is a this is a component there is zero evidence in the dom that this is a component there

it’s just the accordion however in the builder it is sitting inside of a container that

container controls the component logic okay um but it is not the element i did not destroy my

element by turning it into a component so i could literally take all that html and um i can go cancel

okay and i could come anywhere else on the page like i could duplicate this get rid of that and i could

drop that all in again okay and there’s another accordion that now is free and clear of

being a component okay um and i’ll be able to save this to my library as a non-component i’ll be able

to save a component version of it uh but yes you can always rescue your elements from the component

aspect now in the future you’ll be able to right click and go detach or whatever and it’ll just detach

that instance for sure uh we don’t have that yet because it’s everything’s a work in progress but i’m

showing you that you still can there’s another pathway to rescuing your elements

and that’s still look it’s still a working component like everything it’s still attached

all the javascript all the css is still attached okay um so yes you can still rescue your components

a slider would be a better one you don’t want slider nav to affect both at the same time um yes correct okay so if you

have two sliders and you have controls right you don’t want the forward arrow to affect both sliders

yes so in that instance you would tell grok um i want this to support multiple slider instances on

the page at once and it’ll change up the javascript to make sure that that happens that’s correct

um makes sense i think the issue i was having was i created a component then duplicated then edited the

component added slots but the other didn’t reflect uh it does it does um it just may not do it automatically

uh i can’t really do that right now but essentially um if you are editing the component and you’ve created a

a slot that’s not showing up um i think you can use this slot button uh or you can write it in so you

see the uh it’s a little bit manual right now uh it’s it’s supposed to register it automatically and it

should and it should put it in there automatically and you might be using an old version too so in the

old version it did not register it automatically and show it but now it does uh but you can always put

it in manually with at slot and then the name of the slot and it’ll it’ll stick it in there

um let’s see the option to detach component will be an efficient value add indeed yeah for sure

is something like multi-monitor preview plan for etch so we could have multiple live previews in different

resolutions uh yeah there’s a bird’s eye view kind of situation that’s planned uh if you’re familiar with

uh what are the what are the what are the apps called i haven’t used them in a while where it

shows you like desktop tablet mobile right next to each other or whatever and you see all three at

the same time there’s probably going to be a view for that um so yeah we’re we’re talking about a lot of that

kind of efficiency stuff uh we did add by the way uh this light gray background so when you’re in

responsive preview um it’s not white i probably i’m going to add maybe a little a little bit of a

border there or something i don’t know to make it even better because it’s still if you have light

colors it kind of blends a little bit maybe a little borders needed

is there a component library also would be neat to be able to see all pages post templates uh the

component is used on yeah so that’s what’s cool about this let’s say you as a third-party developer

or just any joe is like dude i am gonna i am gonna go create the absolute best components for etch

and i’m gonna sell them as an add-on you can do that you can submit them to the etch marketplace

and you won’t even need to package that up as a plug-in or anything because you can just import

export components people can freely share components across projects you can sell a component pack to

people who can just grab it and import those components and start using them uh and of course if

you don’t use them on the page it’s not going to load any of the code for them

but these are like these are like migratable objects and so you could you could share them

across your own projects uh you could sell them to other people you could do whatever it’s really

really really really really cool how to put a ws form into etch um good question good question let me

delete our accordion here okay all right we don’t need that container either so uh uh

uh what was i what was i about to say what was i about to say something with ws form uh mark mark is

going to be building a little there will be a little ws form element and you just add it boom to the page

you select your form and it renders the form you want and that’s going to be fantastic right now

though okay there’s still pathways to doing these things okay still pathways to doing these things

i don’t know what’s up with my little gutenberg preview here uh oh gutenberg hates it when you have

an empty div it it renders this like stupid little do you want to create columns what do you what do you

want to do what are you trying to do here um what i need to do is put something in it okay and then

then so now you’ll notice when i go back it’ll actually have something in it okay and i think

this is not going full width because of my index template which this is again it’s it’s been a

problem with only my installs and i think it’s related to something going on with this original

index template that was in here it is yeah edit it’s this yes inner blocks use content with dude this is

the worst setting on planet earth and i swear i’ve like i thought i turned it off in my blueprint it

keeps turning itself back on or somehow some way coming back this is it’s the dumbest model that i’ve

ever seen in my life okay let’s save that you do not want your inner blocks using content with that is not

what we want okay now let’s go back to the home page edit there we go now i see an actual rendering of

what the hell we were doing okay so instead of this text right i want do i even have ws form installed

i don’t okay i can uh install it real quick probably plugins i don’t really really don’t have it okay

ws form.com let’s grab it real quick account

okay i’m gonna i’m gonna i’m gonna do this over here because it’s gonna ask me for a license key i know

for sure um let’s download download latest versions

ws form pro where the hell is pro there we go okay save ws form pro

and because they use edd also edd does not make this easy you always got to hunt down your licenses

hunt down the license key okay and it’s for this one great add plug in

okay upload i think it doesn’t maybe it works without it ws form pro dot zip

does it work without putting your license key in i can’t remember

okay ws form add form click to start developer skip get started uh contact us

maybe i don’t need the key okay publish got it publish pages edit where was i here refresh

okay so let’s go in and we should have a ws form now there we go ws form pro and now i say okay i want

my contact us because i want to show you what happens when you do this uh and then we want to get rid of

that text we don’t need that text so i have a ws form now and i’m going to save and i’m going to go

edit with etch okay and so we have what’s called a pass-through block now when mark gets his hands on

this we have the right apis and all that stuff it’s going to render an edge it’s going to render the form

in edge right now it just passes it through and so if i go to the front end there you go i got a form so

i’m still able i have a even though it’s not the way we want it to be we have a pathway to doing it

so you’re not blocked like if you need a form on the page you can get a form on the page it’s not a

problem um and etch just passes it through from the block editor so pretty much how that works

does etch work with ws form free yes

um how to put any short code into etch you cannot render short codes in etch currently

i believe the block editor renders them and etch will pass them through so you could do exactly what

i did with the form just now now we’ll have short code rendering for sure it’s just it’s a order of

priorities right we have a huge priority list and short code rendering not near the top

because really what are you going to try to render with a short code um

usually it’s some third party bullshit right uh and i know it’s probably important maybe you can’t but

we we want everything to happen in etch natively and then in the instances where you have to use a

short code it would be like i just have to there’s no better way to to get this thing rendered

then we would have the parsing for short codes but it’s not an ideal you want to kind of get out of

the business of short codes short codes is old school wordpress um it should be a block uh and it should

also be buildable as a component in etch as well uh yes so can you apply a class to the form yeah

absolutely for sure um i don’t know if you can apply it in etch let’s see let’s see um has form class

okay no you can’t because it’s a it’s just a pass through but what you can do is you can go in here

and you can grab it and you can go to uh let’s see well you know well no advanced you can right here

so form light do you have to put the dot i never know if you have to put the dot

i hate when they strip dots because i don’t think you have to put the dot um okay let’s see if it got

it

form light right there form light it does have the

oh and we’re in the middle this is not a production do why does it keep zooming in

what is the deal with that um by the way when it does zoom can you guys see it zoom because that would

save me a lot of time when i want to zoom uh we’re in the middle of a form refactoring right now this is

not even a production copy of acss so it’s unlikely to yeah we’ve turned off all the ws form styling

and everything because we’re refactoring it uh but yeah you can see that the class passed through

i’ll show you one more time it’s right there form light so yeah you can still use there’s still

pathways even though this is again i always i feel like i have to say it a million times this is not the

proposed workflow for these things um we we need apis we need third-party developers getting involved and

cleaning up their side of things uh making all this stuff official official you saw the zoom okay

that is i now i just need to know what is doing it oh oh wait you guys can see that

no you can’t see that can you i’m zooming right now if you can’t see say yes or no

because it’s not doing it in my preview window i have the like recording preview and i don’t see it

zooming yeah you don’t see it zooming but there’s some other thing that’s causing it to zoom

is it a setting of this

if you saw the zoom earlier though i need to figure out what’s doing it because i need to be able to

zoom like that on and not have to do that in post-production

okay all right we’re over time let’s do five minutes last questions yes but that means the

plugin has to support etch a lot of plugins still use shortcodes paid memberships pro lms etc um yeah

yeah well like i said we will have shortcode processing but those plugins really need to

come out of the dark ages too um they need to they need to get with the program but yes we will have shortcode

parsing uh will i be able to do things with plugins right now with etch for example build a custom

product template with ajax filters in etch or do i have to write my own plug well we’re going to have

filters and facets so there will be native filters and facets inside of etch you don’t have to worry

about that or you don’t have to worry about building your own or buying somebody else’s those will all be

native

let’s see okay is there a performance tax for using a lot of components on a page i ask because

things like conditional logic are uh are used um not really you need to uh obviously you need to be

caching your your pages so that it doesn’t try to really it’s with loops uh more than components

uh because loops are dynamic it’s you know there’s the whole process of they got it’s got to loop the

dynamic data so you need to be caching your pages heavily right um that that’ll but that’s just loops

in general that’s not our loops but things are extremely performant in etch and as you can see

nothing is added to nothing is added to the dom that doesn’t need to be here uh it’s only it’s only

what’s actually rendered out

is there any plans to integrate with right place to show etch components i don’t even know what that

means i mean i know what right place is i i don’t even know try scrolling the mouse wheel while holding

down the controller option key that’s what i was just doing that’s not the that’s the zoom you can’t

see there’s some other zoom that i keep hitting on accident that you guys said you could see

but the command mouse wheel scroll is the one you can’t see and i wish you could because that’s easy

okay yeah etch is the blueprint exactly yeah you don’t that’s the thing is everybody’s like can i can i

can i add this third party like you won’t need to you won’t need to add all those third party things

um you just things will be built native for etch

okay i think i gotta call it uh i’m still recovering from this cold i’m really only on day

two i’m just hoping it doesn’t get any worse uh i’ll be back soon hopefully you guys learned something

from this live stream uh hopefully you saw some capabilities that you didn’t realize existed

um hopefully it was entertaining i’ll be back again soon and uh with that i’m out peace

Thank you.