In this video, I am going to demo one of the most powerful features of Etch, a feature
you will not see anywhere else in the WordPress ecosystem.
This feature completely liberates your data out of Etch.
It is perfect for client editing, and it keeps everything that you build synced with core
WordPress.
This is auto block authoring.
I’m going to go ahead and share my screen.
Here is an example hero section that we are going to build to use for this demonstration.
I’m not going to do the animated strip down here.
I’m just going to kind of build this as a reference and just make it workable so that we can see
the auto block authoring feature without spending tons and tons of time on small details and
other such things, I should say.
Okay.
So here I am in Etch.
I’m going to go ahead and add a section.
If you notice, I need a container that has a heading and a paragraph and a link, which
we’re going to make look like a button.
Okay.
I already have a container right here.
It’s automatically added to the section.
I’m going to add a heading text and a link, and I need another container in this section,
which is going to house my image right here.
It’s actually two images.
So I’m going to go ahead and add another container by clicking this icon.
It’s going to add it right there.
And I can also go ahead and add two images.
So if I click that button twice, it’s going to add two images.
I can quickly go over here.
I’m going to click on this thumbnail.
I’m going to grab my desktop image.
I’m going to select the next one.
I’m going to grab my mobile image and put that in.
And I also want one last container, I think.
No, I actually need a flex div probably, like a full width thing, maybe with the container
inside of it for that black strip down there.
Actually, it looks like it’s supposed to go all the way to the edge.
So I think I just need a full width div, right?
Which we call a flex div.
So what I’m going to do is I’m going to select my section and I’m going to select flex div.
And it’s going to add that down here.
I’ll call this strip and then I’m just going to put some text inside of it, which is going
to be placeholder text for right now.
Okay.
So placeholder, I can edit that in the HTML or you can type right here on the canvas as
well.
Okay.
So I’ve got this in here.
This is going to be a placeholder.
All right.
We’ve got our strip.
We’ve got our placeholder.
We’ve got our container, which I’m going to call my image wrapper.
I’ll say, I’ll say images.
Okay.
We’ll just call that images.
And then we’ll say desktop image and we’ll say mobile image, desktop image and mobile image.
Okay.
Perfect.
And then I want to call this my lead paragraph.
And you’re going to see why I’m organizing my structure panel in just a second.
I mean, beyond the fact that it’s a good idea to organize your structure panel, it actually
does something very, very functional in etch.
So I’m going to come in.
So it actually like etch encourages you to do these best practices.
All right.
So this is going to be called content.
So I have my heading lead.
I’ll call this CTA.
So I’m just going to double click CTA.
I also want this to be an H1.
So while I’m here, I’ll just double click and I can just edit the tag literally right here
in the structure panel.
I can also edit it right here.
I can also edit it down here in the HTML.
There’s a lot of ways to accomplish the same thing in etch.
Okay.
This I’m going to call my main hero, and then I am going to assign classes to every
element that I just created.
And I’m going to, I want to use the BIM organization structure for this.
If you’re not familiar with BIM, I have a whole video on BIM.
But the point is I don’t have to do this manually.
I’m going to right click and I’m going to say create BIM classes.
And look, it’s putting main hero on here.
It’s putting main hero content, main hero heading, main hero lead.
Literally everything that I just added is using the names from the structure and it’s
creating the classes for me.
And I can just move on to the styling step.
And the big benefit here is that I now have global control of the styling for this main hero.
I have full maintainability and full scalability of my styling.
All right.
So let’s keep going.
I’m going to come down and let’s get these images under control.
So I’m going to come to the images wrapper.
We’re going to change this to row.
And then I just need to control the width of these images.
So with my desktop image, I’m going to come into dimension.
Max inline size.
We’ll start at something like 500, maybe 600, maybe, maybe 650.
And then on this phone right here, our max inline size, we can try something like 200,
maybe 300, maybe 250, something like that.
On my wrapper right here, I can go to layout.
I can go to align items.
Actually, I think I want to justify the content.
Let’s go center is what we want to do here.
So I’m going to choose center.
And then I want to go to the bottom on the align items axis.
So I’m going to choose flex end.
And look, these things are getting to their spot.
I’m going to take the gap away.
Notice the CSS down here is authoring itself.
And if you are wondering, what if I wanted to change it down here?
Would it sync back to the inputs?
Well, I’m going to change the gap value right here.
And I want you to watch the gap value over here.
So I’m going to say 30 pixels.
And yes, it is instantaneous.
It syncs back and forth.
Okay.
So I’m just going to set that to zero.
And then I’m just going to nudge this to the left.
There’s a bunch of different ways to do this.
I’m going to choose to use position relative.
And then my inset inline, I can say minus 50 pixels and zero.
And it’s going to give me a little bit of overlap right there.
Well, a 50 pixel overlap.
All right.
So I’ve got that going on.
What we want to do here is we want to clear the gap that is in this section right here.
And then on my media, my images right here, I want to give this a margin top.
So I’m going to come down to margin block, which is the block axis of margin.
This accepts two values, right?
So I can say container gap and zero.
I’m going to hit enter and it’s going to auto wrap my variables for me, which is very, very handy.
I don’t have to write that var function over and over and over again every time I want to use a variable.
And then I’m going to come here to my main hero content and I’m going to say center this and I’m going to say center this.
And we’re going to probably do a text align center as well, just for good measure.
And perfect.
Next, let’s just put in some content.
So I’m just going to grab this content right here.
Again, you can edit directly on the canvas.
I’m going to grab this, which is, you know, that’s nothing revolutionary, right?
It’s just something that you would expect.
While I’m here, dimension, max inline size, 50 characters.
And then I want to command enter, which is going to give me my add attribute bar right here.
And I’m going to say that this is button neutral.
I can add any attributes, classes, IDs, ARIA labels, or whatever I want to add.
And I can add them all at the same time if I want that command enter bar.
Really, really, really helpful.
Okay.
This is going to say call to action right here.
And that is perfect.
Next thing I want to do is style this little strip down here.
So I’m going to go to background, background color on this.
It’s going to be black.
We’re going to go to layout.
We’re going to do our padding.
We don’t, let’s just do space S.
Okay.
That should be fine for right now.
And then typography, our color.
Let’s go ahead and go white.
And then I’m going to, I need to, I need this to break out to the edges.
I’m going to do a little cheat code here with automatic CSS command enter.
And I’m going to say breakout full, which is a utility class to make it break out of its
container and go all the way to the edges.
And then with my hero, I’m going to come in and I know I’m moving.
I’m moving quickly guys.
I don’t want to lose the advanced people and the intermediate people, you know, but I also
don’t want to lose the beginners.
If you’re lost as a beginner right now, because we’re, we’re, we’re moving quickly.
We’re doing a lot of styling stuff very quickly.
Trust that there will be tons of tutorials that teach you how to do all of this stuff in etch.
And it’s all going to be free and you will learn very, very, very quickly right now.
You’re used to using styling and inputs in any builder.
Any interface should have styling inputs like this.
Now they don’t sync with the CSS.
They don’t let you author the CSS after it syncs, right?
There’s a lot of advantages to doing it in etch.
We might use the proper names for things, which you might not be used to seeing because a lot
of builder interfaces like to use proprietary names.
But if you’re using proprietary names, you’re not actually learning in etch.
You will actually learn and you will understand and know what you are doing and your skills
will actually elevate.
I say this all the time.
You can spend a ton of time in these other interfaces and not really learn anything about
web design.
All you’re learning is the proprietary language of that interface.
This is not proprietary language.
This is the language of web design.
You use etch.
You will learn the language of web design and you will be far more empowered.
than in any other environment in any other interface and in your occupation going forwards.
Okay.
All right.
I’m going to grab this main hero right here and we’re going to change the padding on this.
I’m going to go to padding block.
I want to say section space M.
So I want my medium section spacing for the top and I want zero on the bottom.
I’m going to hit enter.
It’s going to auto wrap the var and we’re going to get exactly what we want.
Okay.
Let’s pause here.
Let’s hit save.
Let’s go to the front end and view this.
And we can see that like exactly what we were building is there on the front end.
The real question is what is happening back in Gutenberg land?
What I’m going to do notice I have not done anything in Gutenberg.
I haven’t clicked any buttons in etch.
I didn’t say, Hey, please turn these things into blocks or anything like that.
Auto block authoring is real time block authoring back in Gutenberg, which we can’t even see right
now as you work here.
Okay.
There’s no extra steps.
There’s no extra effort.
All we’re going to do is we’re going to click back to editor and we’re going to take a look at Gutenberg.
There it is.
Exactly what I built in etch is now here in Gutenberg.
And this is using core Gutenberg blocks.
These are not proprietary blocks.
Nothing here is proprietary.
This is core WordPress.
It happens instantly.
Okay.
And we’re not done.
We’re not done.
Don’t watch.
There’s a little bit more magic.
Okay.
But I want you to notice, look at how everything is named exactly as I named it using core blocks.
If I open the buttons, I want you to notice a detail here.
We’re exposing props for things so that these things can be edited here.
This is your client editing experience.
The block editor is not a good page builder.
It is.
In fact, it is a terrible page builder, but it is really, really good at editing content
and having a simple interface that clients can use to do that content editing.
And so this is the best of both worlds.
Literally everything that you build in a unified environment is automatically authored to core
Gutenberg blocks.
And then the client can come in.
So what’s the question now?
Can the client come in and actually change this headline?
Okay.
So let’s save.
Let’s take a trip back to the front end and we refresh.
And it turns out they can change that headline.
But what if I go back in and edit this with etch?
What will it look like in etch?
It’s going to look the same in etch.
It’s a one-to-one sync, constant, constant sync.
It’s never out of sync.
Okay.
If I edit this button and I change the whatever, actually, let’s go back and do that in Gutenberg.
So let’s say I wanted to change the URL.
So this is going to go to etchwp.com slash pricing.
Just joking.
Okay.
Hey, hey, hey.
I mean, I mean, you know, if there’s an opportunity.
If there’s an opportunity to plug, we might as well, right?
You could say something like buy etch.
Okay.
Why would you not want to at this point?
I’m just, yeah.
Okay.
We’re being ridiculous right now.
I’m going to go.
I’m going to go look at this on the, but look at this.
You know, it’s, there it is.
It’s done.
It’s took me to the pricing page.
Okay.
They’re like, that’s, that’s how easy the client editing, the client never sees the etch
interface.
The client only sees everything that is happening right here in Gutenberg.
Now you’re probably wondering, Kevin, I want to make some of this editable and some of it
not editable, or I want to lock the structure, or I want to expose more props.
I want to, I want to have, does this work with components?
Does it work with loops?
Yes.
It’s a work in progress.
Components and loops are coming.
Component and loop support are coming.
But when you make props on components, if you go back and watch my component video,
you make props on components.
You are going to be able to choose which of those props are exposed in Gutenberg for clients
to toggle on and off or fill out or whatever, right?
You’re going to be able to choose if this structure is locked or unlocked.
You’re going to be able to choose which of these items are editable or not editable.
All of that is going to be decided for you in etch, right?
And so you have full control over the client editing experience.
You have a great client experience.
Point blank.
Your data is liberated.
You have a great client experience.
And your, everything that you build is literally in core WordPress.
It is liberated out.
Okay?
Now we’re not done.
We’re not done.
We’re not done.
Check this.
Is this compatible with the core pattern library in WordPress?
I’m going to right click.
I’m going to create a pattern.
I’m going to call this the main hero.
I’m going to put it in heroes.
Okay?
I’m not going to sync this pattern.
I’m going to add it.
Now what I’m going to do is I’m going to leave this page.
I’m going to go add a new page.
Marketing landing page.
Okay?
So now you’ve put this in the hands of a marketing team or you’ve put this in the hands of the client and you say, hey, if you need to whip up a little landing page for yourself, go in, use the patterns.
You hit plus.
You go to patterns and look at this.
Imagine you’ve built an entire site full of patterns that are now saved to the pattern library in the block editor.
I can go to heroes.
I can choose.
There it is.
I’m building my marketing landing page right here.
I’m going to save this.
I’m going to go to the front.
Look at that.
Now I’m going to hit edit page.
I’m doing all this in Gutenberg.
Okay?
New headline for landing page.
Okay?
This is the new lead paragraph for this landing page.
I just want to show that it’s easy to create unique content in these layouts.
Okay?
And then we’re going to say, of course, of course, you’d buy esch because of these things.
Right?
Okay.
Save.
I’m being obnoxious with this.
Let’s go to the front end.
But I mean, look, and then, you know, do we want, do we have images that we can switch out?
Like, you can come in.
You could do, you could do whatever you want here.
You could switch.
I don’t have images to switch out, but you can definitely switch these images out.
All right?
You can, and if I didn’t want them to switch the images, I could lock the images.
All right?
This is auto block authoring in etch.
Now, this is a brand new page, guys.
This is a brand new page.
Let’s go to the front end.
Okay?
And we can see new headline for landing page.
Of course, you buy.
You got a new lead paragraph.
What happens?
Remember, this particular page has not been touched by etch, right?
It was, we took something out of the pattern library and we put it in the block editor and
we published the page.
We have not touched etch for this particular page.
What happens when I hit edit with etch?
Nothing.
It’s exactly what you would expect.
It’s the thing that almost knocked over my water.
I’m so excited about this.
I’m knocking things over on my desk.
It’s, there it is.
I can, I can now manipulate it in etch just as I was before.
It’s fantastic.
One-to-one constant sync.
This is the auto block authoring feature with exposed props, with client editing controls.
All of that is coming, obviously.
We’re only six months into development, my friends.
And so you can imagine what’s going to happen over the next six months.
And then the next six months after that, there are the plans are just, it’s so fun.
It’s so much fun.
But what I want you to do right now, if you like this, okay, you love this concept.
You’re like, wow.
Okay.
I get it.
Like that’s, that’s fantastic.
Hit a like, drop a comment.
Let us know.
Give us some support, right?
Make sure you’re subscribed to this channel because there’s way, way, way more to come.
Way more education, way more examples of how to work in etch and things you can do with etch
that you can’t do anywhere else.
I mean, this is going to get very, very fun over the next few years.
Okay.
So with that said, I’m out.
I’ll be back very soon.
I love you guys.
And thank you for your support.
And yeah, cheers.
