Proper component functionality is massively important
for creating modern, scalable, maintainable websites.
In this video, I’m gonna take you into Etch.
I’m gonna show you why components are so important.
I’m gonna show you how to create a component in Etch,
how easy it is, how you can do it in line
in your current workflow and see the component
in the context in which it is going to live as you build it.
And then I’m gonna show you
how Etch’s conditional logic engine
makes components wildly flexible
and way more powerful than in any other visual editor
for WordPress.
Let’s go ahead and take a look.
I’m gonna share my screen.
What we’re gonna be creating is an introduction component,
like a section intro.
Obviously on websites, you’re gonna have many,
many different sections and the introductions
to those sections are relatively consistent
with a little bit of variation.
And so what we wanna do is we wanna create a component
that is a section intro, and we wanna be able to essentially
program in those variations for how that introduction
should behave on a section by section basis.
That might sound complicated to you,
but as you’re gonna see, it is quite easy.
So let’s go ahead and do it.
First things first, I’m gonna add a section element
to my page.
It’s gonna have a container inside of it by default.
Of course, I can duplicate this container if I want.
Right now, I only need one of these containers
and that container is going to be my introduction.
So I’m gonna go over here and I’m gonna name this section intro.
Intro.
You can call it whatever you wanna call it.
Next thing is I need to figure out what I’m going to put inside
of this introduction.
I want a heading, obviously.
I want maybe a lead text, like a lead paragraph,
like an introduction paragraph to the content that’s gonna be
in this section.
I want a headline that’s actually gonna be like more
for marketing purposes.
So that’s gonna be another paragraph.
And then I also want a link, which is gonna be a call to action.
Okay.
So I have actually just added those elements to the page.
I’m gonna go over here and I’m gonna let that continue
to say heading.
I’m gonna make sure that it’s an H2.
I’m gonna come in here and I’m gonna say,
this is our headline.
So we have a heading and a headline.
You could call it a marketing headline
if you want more clarity there.
You could call this a landmark instead of a heading.
Okay.
The name is completely up to you.
It’s whatever you wanna do.
I’m gonna come down here and call this my lead paragraph.
And then for this link, I’m gonna call this my CTA.
And then for the content there, I’m gonna say call to action.
Now for this headline right here,
this is our marketing headline.
Okay.
So I’m just gonna call this section headline right here.
That’s just gonna be my dummy content.
And for this up here, I’m gonna call this landmark.
And I can edit it in the HTML down here,
or I can just edit it straight on the canvas.
Either way, whatever is easiest for you.
I can also edit it in its content input over here on the side.
Okay.
So the next thing I’m gonna do is I’m gonna add classes
to all of these elements so that I can style them.
Always wanna style with classes.
And I prefer using the BIM methodology for organizing my classes.
And in Etch, if we wanna assign BIM classes to everything,
we can simply right click and say, create BIM classes.
And now they’re done.
And now what I’m gonna do is I’m gonna make this landmark element look like a pill.
I can do a lot of my styling and everything before I even go through the process of creating
a component.
And I can just do this static like I would do any other styling of an element on the page.
So I’m gonna go to typography here.
I’m gonna open this up, give us a little bit more room here.
I’m gonna go to typography, our font weight, we’re gonna drop down to 400.
Our font size, we’re gonna take down to text S.
Our, let’s say, text transform, we’re gonna go to uppercase.
I’m gonna add a little bit of padding to this.
I’m gonna go to layout for my padding block.
I’m gonna do 0.5M.
My padding inline is gonna be 1M.
And as you see, it’s gonna write the CSS for me.
Okay, so I can see the CSS.
I can touch the CSS.
I can add to the CSS if I want to.
But I’m just using the inputs because they happen to be faster for what I’m doing right now.
But notice that everything that I’m doing in the inputs is being written to the CSS right here.
Okay, the next thing that I’m gonna do is I’m gonna go to border.
And I wanna set a border for this.
And I wanna say one pixel solid.
And I’m just gonna say this is our primary colored border.
And I’m just gonna say this is our primary colored border.
For border radius, I’m gonna do 50VW, which is gonna make it look like a pill.
And then for the typography, for actually, I’m gonna go to color.
For color, I’m gonna say this is gonna be primary as well.
Okay, I’m actually looking at that and saying, you know what, I think I wanna go XS on this
instead of S for the font size.
I can just quickly make that change.
Now I’m gonna come down to the section headline.
Notice the classes are already selected for me that I put on there.
And I’m gonna make the font size here an H2.
I’m gonna make the font weight my heading font weight.
These are all variables from automatic CSS.
Etch will work completely out of the box.
If you wanna put your own stuff in here, you can put whatever values in here you want.
I just, sorry, that was on my clipboard.
I just want to use the variables that I know and they’re from our system.
Automatic CSS makes life very, very easy here.
Okay.
And I can do something like heading, heading, line, height.
We’re gonna have context menus also for you.
You’re just gonna right click and then choose them from a menu.
You don’t even have to remember the names of these things.
So my section headline is essentially done.
And then this is gonna be my paragraph here, which I want to insert some dummy text.
So I’m gonna use one of our recipes.
This is Ipsum short.
And when I hit tab, it’s just gonna expand that.
And it’s gonna put some Ipsum in that place.
Okay.
Um, that’s all I’m gonna do for now.
That’s all I’m gonna do.
We’re just gonna hit save and I have my section headline, but what I want to do,
and you can imagine other content coming below this, maybe a grid of something, maybe a big media,
whatever you want to put underneath this, below this, you can start putting below this using another
container and you can just start to build out your section.
But this is going to be my section headline.
What I want to do first off is, and I just want to explain the concept of components to you,
is I want to create a component.
I want to duplicate it a couple of times and show you what this allows me to do.
Okay.
So I’m going to come in and I’m going to right click this and say, create component.
Once you’ve done that in etch, your component is created.
So effectively that is a component.
Now, the next step is we want to be able to assign what are called props or properties.
And you can think of these like custom fields, but these custom fields are assigned to the component,
not to some page or post in WordPress or a global air data area in WordPress.
These are just areas that live like custom fields that live inside of the component.
Okay.
And I do this in my component editor over here.
So I’m able to create props, for example, for the landmark text right here, for that section headline,
for the lead paragraph, for the button text.
I can create a prop for the button URL.
Where is the button supposed to go?
And you’re going to see why this is so important.
Okay.
In fact, I’m just going to hit save on this.
We have our component right here.
I’m going to duplicate it a few times and you see that.
Yeah.
I have it on the page, but I can’t do anything to it.
How do I edit this headline right here?
How do I edit this text?
I don’t want to edit all of them.
Remember, I’m going to have these sections section by section by section.
Every section is going to have an introduction.
So how do I make this content unique?
Because right now, if I go in and I hit edit component and I change the headline,
it’s going to change for all of them.
See, all of them change.
See that?
I’m going to hit save.
All of them have changed.
This is how components work in many different visual editors, but this is very, very limited.
We can’t, we can’t, this is, this can’t be the extent of what our components are able to do.
Our components need to be able to accept unique data for every instance of the component.
Right?
So I’m going to go ahead and edit this.
And what gives us that capability is props.
All right.
And I’m going to show you how easy it is to create them.
First of all, I’m going to change this back to section headline.
So let’s count the props.
I need one, two, three, four, and then five, because we also need a URL for this button.
Okay.
So I’m going to click this plus sign and I’m going to create some props.
And I have text props.
I have Boolean props.
There’s going to be media props.
There’s going to be drop down props.
There’s going to be more props coming to etch, but you can already do a lot with this.
And this is already better than any other visual environment currently in WordPress.
So especially when combined with our conditions, which I’m going to show you in just a second.
But I need five text props for right now.
One, two, three, four, five.
I just created them.
That’s as easy as it is.
Now I need to name them so that I know what they’re assigned to.
Okay.
So I need to create one called the landmark.
I, and I think it’s best to just call the thing what you already called it, right?
This is going to be the headline.
This is going to be the lead.
This is going to be the button text.
This is going to be the button URL.
Okay.
Now I created them.
I need to assign them to where they’re supposed to live.
I need to link this headline with this headline prop, for example.
Okay.
I can do that by clicking this little target.
So I click the target.
I click the headline.
Now it’s linked.
I click the landmark.
I click the landmark.
Now it’s linked.
I click the lead.
I click the lead.
Now it’s linked.
You see how easy this is, right?
This is not difficult.
So the challenge is what about the URL?
Okay.
I’m going to click this, which copies this key to my clipboard.
And now what I need to do is select the button and I can either come down here to where the
URL is in the HTML.
And I can do this.
I can put my prop inside of that href right there, or, okay, let me command Z that away.
We do expose all of the HTML attributes in an attributes editor, and you can
come down here to where it says href and you can paste in your key there.
And it needs to be inside of brackets.
Sometimes it needs to be inside of the brackets.
Sometimes it doesn’t.
We can explain that when we go forward.
Usually when you’re doing conditions, you don’t need it in the brackets.
Everywhere else you need it in the brackets.
Okay.
That’s kind of the, that’s probably the extent of the technicality of this.
All right.
So what I’m going to do is I’m just going to go ahead and hit save.
So with all of those props made and linked up, I can hit save.
And now we see suddenly we have tremendous flexibility in what we’re doing.
And I need to make sure that my face doesn’t cover stuff up as we go.
We got a brand new interface to deal with.
I got to make sure that I’m not covering up anything important.
I don’t think I have so far.
Okay.
So what we’re going to do is we’re going to see over here in the sidebar, I now have exposed
areas for all of those props.
Okay.
So I’m going to come in here and for example, my landmark can say, uh, reviews.
Okay.
And this is, uh, let’s say the headline for, um, see what our customers are saying.
And notice that now this introduction is getting unique content while these remain with their
dummy content, their default content, right?
I can come in here and I can say, this is, this is the paragraph for this section.
And then for my button text, I can say, uh, read all reviews.
And you can see now that this intro is clearly different from these, but I still have a single
source of truth, not just for the styling, but for the structure as well.
Okay.
Now let me show you why this is so important.
Let’s say that we come, we build this entire site and then we decide, oh, you know what?
We’re going to be able to get this pill right here actually is not needed.
We only need this headline right here.
We want to get rid of this pill everywhere.
You know, that was part of the original design.
We’re not going to go that route.
We don’t want to do that.
We want to make this thing, the literal heading on the page.
Well, if you had had 30, 40, 50 pages, and you’ve done these introductions everywhere without
components, you’re going to have to go to every single instance of that, of that introduction
and fix it.
But with components, I can fix it in one place.
Okay.
This is why I can edit the component.
And then what, let’s say anything that I want to do, let’s say for whatever reason,
we want the lead, we want the CTA to come after the headline.
Okay.
So I’m going to change the order.
I’m going to hit save.
Notice that the CTA’s order has changed everywhere.
Even though the content has not been, you know, reset in any fashion, everything is as I left
it, but I’m able to change the structure of all of them, which means I can actually come in
and let’s go ahead and put the CTA back to where it was originally.
But if I needed to, I could get rid of this landmark and I could change the heading.
I’ll just, I’m going to do this, but not save.
Let me, let me, let’s cancel this.
I’m going to save my work in general.
And then I’m going to go into edit component.
I’m going to make these change, but I’m not going to save it.
Cause I don’t want to save it.
I want to leave it the way it is, but I’m just demonstrating the flexibility here.
Okay.
So I would delete the landmark and I would double click this tag right here.
And I would change this to an H2.
You can change your tag right here.
You can change your tag right here.
You can change your tag right here.
There’s a lot of different ways to do the same thing in etch.
It’s very fast, very flexible.
So now I’ve changed this to a real H2 and I’ve still got my CTA and my lead.
And I would save that.
And now look, all of my introductions across the entire site doesn’t matter if there’s three
of them or 300 of them.
All of them have received that update.
That is the level of control and maintainability that you have when you use proper components.
What about variations in these introductions?
For example, maybe I don’t want some of these introductions to have a call to action.
Maybe I don’t want some of these introductions to have a lead paragraph.
Maybe I don’t want some of the, maybe I want it to be centered instead of left aligned.
There could be all of these different scenarios and I need to be able to choose on a section
by section basis, how my introduction is going to work.
How is it going to behave?
All right, let’s take a look at how we can approach this in etch.
So I’m going to edit the component right here.
I want to put the lead ahead of the CTA like it was originally.
And I want to build in my very first condition.
And that is going to be, do we have a CTA or do we not have a CTA?
And so I’m going to click the plus sign to add a new prop.
And this time I’m going to choose Boolean because do I have a CTA?
Do I not have a CTA?
That’s like a kind of an on off one or the other situation.
That’s exactly what Boolean is for.
So I’m going to add a Boolean prop.
It’s going to add it to the end of my list of props down here.
And now what I’m going to say, and by the way, you can control the size of this panel.
You can move this panel over and make it the top panel.
And now my component editor is on the bottom.
And when I need to see more of the component editor, I can see more of the component editor.
If I wanted, I could drag this and I could put it on the right hand side.
You can essentially manipulate this interface to work however you prefer it to work.
And even though this is open when I’m editing my component, I can control how much real estate
it takes up, which is really nice.
And if I’m styling my component, I can come down here and just style it without having to close
this panel.
I don’t have an inception thing going on where I see one panel or I like, I can only see one
at a time and have to flip back and forth.
That’s not the case.
Okay.
Everything is open and we can just control how much real estate it takes up.
It’s really, really, really flexible.
Okay.
So what I’m going to do is I’m going to come down here and with new property, I’m going
to say has CTA.
So like, yes or no, has a CTA, doesn’t have a CTA.
Again, you could call it whatever you want.
Now, the way that we actually program this is very easy.
I’m going to come down here to my elements and I’m going to see if condition.
So we actually have an element called an if, and I can take my CTA and I can drop it inside
of that if.
And then I just need to say what the condition is.
If I just click to copy this key has CTA, paste it in there.
I have just made, I’ve just programmed the condition.
I’m done.
It’s as simple as that.
Okay.
So now what I’m going to do is I’m going to hit save.
I’m going to come to this introduction right here.
You’re going to see I have a little toggle that says has CTA.
When I toggle it off, the CTA goes away.
Notice that it stays there for all the others.
If I don’t want this one to have it, I can turn it off on this one.
Okay.
I have now programmed in my first condition and you see how easy that is.
Now, what about, what if I don’t want the lead paragraph?
How would I handle that?
Okay.
Well, the exact same way.
So I’m going to come in.
I’m going to open my component editor here, add a Boolean.
I’m going to go down and I’m going to say has lead.
So has lead or doesn’t have lead.
How are we going to handle this?
Well, let’s go down and add an if condition.
I’m going to take that and I’m going to pull it up.
I’m going to drag my lead inside of it.
Now, very soon you’ll be able to right click like the thing you want and say wrap in condition.
And it will just wrap it in the condition.
We’re not quite there yet, but that’s going to, it’s going to save you a little bit of a,
of a drag step, right?
It’ll make it even more efficient.
So I’m going to select the box right here, click to copy the key, drop it in the condition.
And now we have as simple as that.
Let’s just go ahead and hit save.
Now we have control over whether that has a lead and whether it has a CTA.
And you can see how flexible this is actually getting just by dreaming up.
Okay.
What kind of flexibility do I want this to have?
Let me build that in real quick with a little if block.
All right.
There’s going to be else blocks coming.
There’s going to be a whole like conditional logic is going to continue to get more and
more robust.
We can already do number comparisons.
Like I showed how to create a star rating component where you can pull a number from a custom field
and say, Hey, if that’s a three star rating, let’s show three stars.
There’s so much flexibility in this, but let’s keep going.
Let’s add one more level of flexibility, whether this thing is centered or not centered.
So let’s edit the component.
Remember, you can edit any instance of the component.
It’s not, there’s no master component that you have to find and go to.
Any instance can become the master simply by telling etch that you want to edit it.
Okay.
And now we’re going to open this up.
We’re going to add another Boolean and this is going to be is centered.
Okay.
Is centered.
Now I’m going to select that key right here.
And for is centered, we’re going to need a little CSS to do this.
And so this is just one way, by the way, there’s many, many approaches that you could take.
This is just the approach that I’m going to take.
I’m going to add a data attribute and the data attribute is going to have a value of true or false.
And the data attribute, and if you don’t know what a data attribute is, it’s like a class.
It’s kind of like a class.
Okay.
But it can have, it can have values.
Okay.
So I am going to create one called data intro centered data, intro centered.
And if data intro centered is true, we’re going to center the content.
If data intro centered is not true, we’re not going to center the content.
Okay.
It’s going to be a little bit more technical than the ones that we’ve already done, but still very,
very easy.
And as we make this easier in the future, there’s probably going to be another method
that appears that’s even easier for doing this, but this is how we’re doing it right now.
So if I want to add an attribute to this introduction, I can do that by clicking this button right here.
I can do that by clicking this button right here.
Okay.
I have one up here.
You can add a selector from any of these areas.
Okay.
Which is would also add the attribute as well.
But what I want to do is I want to hit, I want to do the fastest approach in edge, which is command
and enter.
So command enter is going to bring up my quick attribute bar and I can add any attributes I
want from here.
I can add an ID.
I can add a class.
I can add an ARIA label.
I can add a data attribute.
I can add a role.
I can add whatever I want to add.
And by the way, I can add them all at the exact same time.
If I wanted to add, you know, some ID and then some class, and then an ARIA label equals,
I can add them all right here at once, hit enter, and they’re all going to get added to the HTML.
Okay.
In this particular case, I just want to do my data attribute.
So I’m going to say data intro centered equals, and remember we need it true or false, but we can’t
write true or false.
How do we pull the true or false value?
We do it with the prop key.
Props is centered.
The thing that I copied to my clipboard right here, and I’m just going to say add, and you’re
going to see that it puts it right there in the HTML.
Okay.
And so I want to show you what that’s doing.
Let’s just, let’s just save that component.
Let’s just go save here.
Notice centered is on by default.
Okay.
I can have it off or on by default.
I want it on by default because I want these to be centered by default, but I’m going to go to
the front end and I’m going to inspect this and we’re going to see exactly how it’s behaving.
Section intro, section intro, section intro.
They are all marked as true.
Okay.
We have a little bit of a rendering issue right here.
It’s, I think it’s a max width issue.
You can ignore that for right now.
We can fix that in just a second.
Okay.
So what I want to do, I’m seeing data intro centered equals true.
You can assign styles to that just like it’s a class.
I’m going to show you how to do that.
Okay.
So I’m going to pop into here and we are going to edit the component and I’m going to grab
my section intro.
That’s the thing that has the data intro centered.
And I’m going to come down here.
And this CSS box allows for all types of nesting complex selectors, whatever you need to do
down here, you can do.
Eventually you will be able to do this right here in the sidebar as well.
But for now it happens in custom CSS.
All right.
So what I’m going to do is I’m going to use an ampersand, which is a reference of my class
right here.
And then I’m going to use the selector brackets.
And this is how you select a data attribute.
So data intro centered.
And what if it’s equal to true, then I want to open my curly braces and I want to do something
with CSS to make it look like it’s centered.
So I can do align items and notice that it’s going to auto suggest as I type what I might
want.
It will auto complete.
If you hit tab as well, I want to say center.
Okay.
Notice it centers them.
I also want to text the line, everything to the center.
If it’s centered.
Okay.
That’s all I have to do.
I’m going to go ahead and hit save.
I’m going to go ahead and hit save.
We can take a trip to the front end.
We can refresh and we’re seeing now let’s fix the max with issue real quick.
So I’m going to edit component on this.
I just want on my section intro.
Uh, I want to say that my max with, I can actually do this in dimension.
All right.
My inline size is going to be a hundred percent.
My max inline size is going to be content with, I’m going to go ahead and save.
Okay.
Let’s save there.
And let’s take a trip back to the front end and we can see now they are all behaving
as they are supposed to behave.
It would be, it looks a little messy because you would never have intro, intro, intro.
Like it doesn’t have any other content on the page, but I think you get the point.
In fact, now what I can probably do is I can just remove the others.
So everything is as we expect it to be.
I want to add one more.
I want to add one more.
Sorry.
I was going to end there, but I want to add one more level of flexibility because this
CTA does not look very good.
And I could, I could just edit the component and I could, uh, where we have the props on,
let’s go ahead and preview them.
Right.
I could just come here and I could add button primary.
Right.
And it’s going to look like a primary button.
But the question is, you know, do I want every instance of the intro to always have a primary
button or do I want to build in some variability?
And maybe I want to be able to choose my button style on an intro by intro basis.
I think I want the added flexibility.
So what I’m going to do is I’m going to come in and I’m going to add a text prop and I’m
going to say button style, and I’m going to use utility classes for this because that’s the
super easy way to do it.
So button primary is going to be the default.
That’s going to be the default.
Okay.
Now I’m going to copy this key right here and I’m going to show you how easy this is and how
awesome this is.
So I’m going to come into the button right here and notice it says class section intro
CTA and button primary.
I’m going to remove the static reference to button primary and I’m going to drop props.buttonstyle
in there.
Even though there’s another class already there, I can add that prop and it’s going to add additional
classes, anything that I put in the button style box.
And now when I hit save, you’re going to see that it is button primary, but check this out.
I can duplicate.
And when I come down here for this particular intro, I can come down to button style and I
can say, am I covering things up?
I’m not.
I can say button neutral and it’s going to be a neutral.
I can even chain them together, but an outline is going to turn into a neutral outline button.
And so now suddenly I have a ton of flexibility over the style of these buttons on an intro by intro
basis.
It’s that quick to just say, okay, what extra flexibility do I want?
Let me build that in real quick.
Let me hit save.
And now I have that added flexibility everywhere.
This introduction exists on my website.
That is components in edge.
This is just by the way, level one of our components.
We have so much more coming that is going to, it’s already the most powerful componenting
engine.
Componenting.
Is that even a word?
It is a word now.
It is an official word now.
We are adding so many more layers and wrinkles to this that are going to make this just,
it’s going to be, it’s going to be awesome.
But for right now, I just want to give you an introduction to how easy it is to create components,
how easy it is to bake in any level of flexibility that your heart desires, and then use those,
how easy it is to use them as you build your pages.
And I want to get your feedback.
What is your, you know, drop your comments down below.
If you have questions, drop your questions down below, just your general reactions.
If you like this video, hit thumbs up and yeah, that’s it.
That’s it.
I’ll be back very soon.
There’s going to be so much more coming down the pipe.
I’ll be back.
Peace.
Love you.
Cheers.
